Ajuda com HTML/CSS

24/07/2016

0

Boa noite, Estou tendo um problema com o posicionamento das informações para contato em um Header Banner (468x60 px) e no Firefox Funcionou 100%, no entanto, estou tento problemas com o Chrome, Fica bem ruim em telal cheia!

<div align="right">

<p id="escola" style="text-align: right; font-size: 16px; margin-top: -35px; margin-right: 88px; color: #000099;"><strong>ESCOLA & SUPORTE:</strong></p>

<img id="logo-tim" src="http://cdn2.sostariffesrl.netdna-cdn.com/img/providers-mid/tim.png" align="right" width="80" height="65" style="margin-top: -30px; padding-left: 5px; margin-right: 195px;"/>

<img id="zap" src="http://excelinformatica.16mb.com/wp-content/uploads/2016/06/logo_movil.gif" width="24" height="24" align="right" style="margin-top: -31px; margin-left: 3px; margin-right: -5px;"/>

<p id="telefone" style="text-align: right; font-size: 16px; margin-top: -27px; margin-right: 30px"><strong>Fone: (91) 98935 - 6326</strong></p>
</div>
<div align="right">

<p id="telefone" style="text-align: right; font-size: 16px; margin-top: -25px; margin-right: 30px;"><strong>Fone: (91) 99304 - 6297</strong></p>

<img id="logo-vivo" src="http://higiefacil.com.br/wp-content/uploads/2015/09/logo-vivo.png" align="right" width="50" height="35" style="margin-top: -51px; padding-left: 6px; margin-right: 211px;"/>
</div>

<div align="right">

<p id="loja" style="text-align: right; font-size: 16px; margin-top: -25px; margin-right: 90px; color: #000099;"><strong>LOJA: (91) 3783 - 3056</strong></p>

<img id="logo-tim" src="http://cdn2.sostariffesrl.netdna-cdn.com/img/providers-mid/tim.png" align="right" width="80" height="65" style="margin-top: -30px; margin-right: 195px; padding-left: 5px;"/>

<img id="zap" src="http://excelinformatica.16mb.com/wp-content/uploads/2016/06/logo_movil.gif" width="24" height="24" align="right" style="margin-top: -31px; margin-left: 3px; margin-right: -5px;"/>

<p id="telefone" style="text-align: right; font-size: 16px; margin-top: -27px; margin-right: 30px"><strong>Fone: (91) 98260 - 1248</strong></p>
</div>
<div align="right">

<p id="telefone" style="text-align: right; font-size: 16px; margin-top: -25px; margin-right: 30px;"><strong>Fone: (91) 99359 - 5852</strong></p>

<img id="logo-vivo" src="http://higiefacil.com.br/wp-content/uploads/2015/09/logo-vivo.png" align="right" width="50" height="35" style="margin-top: -50px; padding-left: 6px; margin-right: 211px;"/>

</div>
George Lucas

George Lucas

Responder

Posts

01/08/2016

Ramon Barbosa

George, tudo bem?
Poderia colocar um print e como está ficando?
Responder

01/08/2016

George Lucas

Olá Ramon, fiz umas alterações, melhorou mas o problema ainda não foi completamente resolvido, Segue o link do Site: http://www.excel-informatica.com
Vou Atualizar o Código no post acima!
Responder

01/08/2016

George Lucas

<!DOCTYPE html>
<html>
<head>
	<title>zaps</title>
</head>
<body>
	<div align="right">
		<p id="escola" style="text-align: right; font-size: 16px; margin-top: -35px; margin-right: 88px; color: #000099;"><strong>ESCOLA & SUPORTE:</strong></p>

		<img id="logo-tim" src="http://cdn2.sostariffesrl.netdna-cdn.com/img/providers-mid/tim.png" align="right" width="80" height="65" style="margin-top: -30px; padding-left: 5px; margin-right: 195px;"/>

		<img id="zap" src="http://excelinformatica.16mb.com/wp-content/uploads/2016/06/logo_movil.gif" width="24" height="24" align="right" style="margin-top: -31px; margin-left: 3px; margin-right: -5px;"/>

		<p id="telefone" style="text-align: right; font-size: 16px; margin-top: -27px; margin-right: 25px"><strong>Fone: (91) 98935 - 6326</strong></p>
	</div>
	<div align="left">
		<img id="logo-vivo" src="http://higiefacil.com.br/wp-content/uploads/2015/09/logo-vivo.png" align="right" width="50" height="35" style="float:left; margin-left:210px; margin-right:10px; margin-top: -10px;"/>		
		<p id="fone-vivo-escola" style="text-align: right; margin-top: -30px; font-size: 16px; font-weight: bold;">Fone: (91) 99304 - 6297</p>
	</div>

	<div align="right">
		<p id="loja" style="text-align: right; font-size: 16px; margin-top: -25px; margin-right: 90px; color: #000099; font-weight: bold;">LOJA: (91) 3783 - 3056</p>

		<img id="logo-tim" src="http://cdn2.sostariffesrl.netdna-cdn.com/img/providers-mid/tim.png" align="right" width="80" height="65" style="margin-top: -30px; margin-right: 195px; padding-left: 5px;"/>

		<img id="zap" src="http://excelinformatica.16mb.com/wp-content/uploads/2016/06/logo_movil.gif" width="24" height="24" align="right" style="margin-top: -31px; margin-left: 3px; margin-right: -5px;"/>

		<p id="telefone" style="text-align: right; font-size: 16px; margin-top: -27px; font-weight: bold; margin-right: 25px">Fone: (91) 98260 - 1248</p>
	</div>
	<div align="right">
		<img id="logo-vivo" src="http://higiefacil.com.br/wp-content/uploads/2015/09/logo-vivo.png" align="right" width="50" height="35" style="float:left; margin-top: -8px; margin-right: 10px; margin-left: 210px; "/>
		<p id="telefone" style="text-align: right; font-size: 16px; margin-top: -29.5px; margin-right: 25px; font-weight: bold;">Fone: (91) 99359 - 5852</p>
	</div>
</body>
</html>	
Responder

17/08/2016

George Lucas

Segue última atualização, desta vez tento uma repaginada, separando o CSS do HTML. Resultados podem ser acompanhados no mesmo URL: http://www.excel-informatica.com. trata-se do header da página ontem estão localizados os contatos de whatsapp e telefones!

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*formatação_do_posicionamento_das_divs_dos_titulos_das_unidades da empresa*/
.unidade{
position: relative;
width: 468px;
height: 15px;
border: 1px solid blue;
margin-top: -34px;
font-size: 16px;
color: #000099;
font-weight: bold;
}

.unidade p{
margin-top: -4px;
text-align:right;
margin-right: 90px;
}

.unidade-loja{
position: relative;
width: 468px;
height: 15px;
text-align: right;
border: 1px solid blue;
font-size: 16px;
color: #000099;
font-weight: bold;
}
.unidade-loja p{
margin-top: -4px;
margin-right:107px;
}

.contatos-com-zap{ /*DIV que contém formataçõs dos contatos*/
border: 1px solid green;
text-align:right;
position: relative;
width: 468px;
height: 19px;
}

.contatos-com-zap p{
font-size: 16px;
font-weight: bold;
margin-top: -26px;
margin-right: 25px;
padding-left: 100px;
}

#logo-tim{
margin-right:175px;
margin-top: -5px;
width: 17%;
height:150%;
}

#zap{
float: right;
width:4%;
height:100%;
}

.contatos-sem-zap{ /*DIV que contém formataçõs dos contatos*/
position: relative;
font-weight: bold;
width: 468px;
height: 19px;
border: 1px solid blue;
margin-top: 0px;
}

.contatos-sem-zap img{
float:left;
margin-left:209px;
margin-top: -48px;
width:10.3%;
height:110%;
}

.contatos-sem-zap p{
font-size: 16px;
text-align:right;
margin-right:25px;
margin-top:-2px;
}

</style>
</head>
<body>
<div class="unidade">
<p>ESCOLA & SUPORTE:</p>
</div>

<div class="contatos-com-zap">
<img id="logo-tim" src="http://cdn2.sostariffesrl.netdna-cdn.com/img/providers-mid/tim.png"/>
<img id="zap" src="http://excelinformatica.16mb.com/wp-content/uploads/2016/06/logo_movil.gif"/>
<p>Fone: (91) 98935 - 6326</p>
</div>

<div class="contatos-sem-zap">
<p>Fone: (91) 99304 - 6297</p>
<img src="http://higiefacil.com.br/wp-content/uploads/2015/09/logo-vivo.png" align="right" width="50" height="35"/>
</div>

<div class="unidade-loja">
<p>LOJA:(91)3783-3056</p>
</div>

<div class="contatos-com-zap">
<img id="logo-tim" src="http://cdn2.sostariffesrl.netdna-cdn.com/img/providers-mid/tim.png"/>
<img id="zap" src="http://excelinformatica.16mb.com/wp-content/uploads/2016/06/logo_movil.gif"/>
<p>Fone: (91) 98260 - 1248</p>
</div>

<div class="contatos-sem-zap">
<p>Fone: (91) 99359 - 5852</p>
<img id="logo-vivo" src="http://higiefacil.com.br/wp-content/uploads/2015/09/logo-vivo.png"/>

</div>
</body>
</html>
Responder

17/08/2016

George Lucas

Segue última atualização, desta vez tento uma repaginada, separando o CSS do HTML. Resultados podem ser acompanhados no mesmo URL: http://www.excel-informatica.com. trata-se do header da página ontem estão localizados os contatos de whatsapp e telefones!

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*formatação_do_posicionamento_das_divs_dos_titulos_das_unidades da empresa*/
.unidade{
position: relative;
width: 468px;
height: 15px;
border: 1px solid blue;
margin-top: -34px;
font-size: 16px;
color: #000099;
font-weight: bold;
}

.unidade p{
margin-top: -4px;
text-align:right;
margin-right: 90px;
}

.unidade-loja{
position: relative;
width: 468px;
height: 15px;
text-align: right;
border: 1px solid blue;
font-size: 16px;
color: #000099;
font-weight: bold;
}
.unidade-loja p{
margin-top: -4px;
margin-right:107px;
}

.contatos-com-zap{ /*DIV que contém formataçõs dos contatos*/
border: 1px solid green;
text-align:right;
position: relative;
width: 468px;
height: 19px;
}

.contatos-com-zap p{
font-size: 16px;
font-weight: bold;
margin-top: -26px;
margin-right: 25px;
padding-left: 100px;
}

#logo-tim{
margin-right:175px;
margin-top: -5px;
width: 17%;
height:150%;
}

#zap{
float: right;
width:4%;
height:100%;
}

.contatos-sem-zap{ /*DIV que contém formataçõs dos contatos*/
position: relative;
font-weight: bold;
width: 468px;
height: 19px;
border: 1px solid blue;
margin-top: 0px;
}

.contatos-sem-zap img{
float:left;
margin-left:209px;
margin-top: -48px;
width:10.3%;
height:110%;
}

.contatos-sem-zap p{
font-size: 16px;
text-align:right;
margin-right:25px;
margin-top:-2px;
}

</style>
</head>
<body>
<div class="unidade">
<p>ESCOLA & SUPORTE:</p>
</div>

<div class="contatos-com-zap">
<img id="logo-tim" src="http://cdn2.sostariffesrl.netdna-cdn.com/img/providers-mid/tim.png"/>
<img id="zap" src="http://excelinformatica.16mb.com/wp-content/uploads/2016/06/logo_movil.gif"/>
<p>Fone: (91) 98935 - 6326</p>
</div>

<div class="contatos-sem-zap">
<p>Fone: (91) 99304 - 6297</p>
<img src="http://higiefacil.com.br/wp-content/uploads/2015/09/logo-vivo.png" align="right" width="50" height="35"/>
</div>

<div class="unidade-loja">
<p>LOJA:(91)3783-3056</p>
</div>

<div class="contatos-com-zap">
<img id="logo-tim" src="http://cdn2.sostariffesrl.netdna-cdn.com/img/providers-mid/tim.png"/>
<img id="zap" src="http://excelinformatica.16mb.com/wp-content/uploads/2016/06/logo_movil.gif"/>
<p>Fone: (91) 98260 - 1248</p>
</div>

<div class="contatos-sem-zap">
<p>Fone: (91) 99359 - 5852</p>
<img id="logo-vivo" src="http://higiefacil.com.br/wp-content/uploads/2015/09/logo-vivo.png"/>

</div>
</body>
</html>
Responder

17/08/2016

Michael Batista

percebi que você está utilizando (-) menos em varias partes do css como exemplo na classe unidade (que eu achei mais grave)

.unidade{
position: relative;
width: 468px;
height: 15px;
border: 1px solid blue;
margin-top: -34px;
font-size: 16px;
color: #000099;
font-weight: bold;
}

considerando que a div já está no topo da pagina e vc ainda coloca um margin-top: -34px; (34 pixels antes do topo).
fazendo assim parte do conteudo desaparece da tela do navegador.
Espero ter ajudado
Responder

17/08/2016

George Lucas

Segue última atualização, desta vez tento uma repaginada, separando o CSS do HTML. Resultados podem ser acompanhados no mesmo URL: http://www.excel-informatica.com. trata-se do header da página ontem estão localizados os contatos de whatsapp e telefones!

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*formatação_do_posicionamento_das_divs_dos_titulos_das_unidades da empresa*/
.unidade{
position: relative;
width: 468px;
height: 15px;
border: 1px solid blue;
margin-top: -34px;
font-size: 16px;
color: #000099;
font-weight: bold;
}

.unidade p{
margin-top: -4px;
text-align:right;
margin-right: 90px;
}

.unidade-loja{
position: relative;
width: 468px;
height: 15px;
text-align: right;
border: 1px solid blue;
font-size: 16px;
color: #000099;
font-weight: bold;
}
.unidade-loja p{
margin-top: -4px;
margin-right:107px;
}

.contatos-com-zap{ /*DIV que contém formataçõs dos contatos*/
border: 1px solid green;
text-align:right;
position: relative;
width: 468px;
height: 19px;
}

.contatos-com-zap p{
font-size: 16px;
font-weight: bold;
margin-top: -26px;
margin-right: 25px;
padding-left: 100px;
}

#logo-tim{
margin-right:175px;
margin-top: -5px;
width: 17%;
height:150%;
}

#zap{
float: right;
width:4%;
height:100%;
}

.contatos-sem-zap{ /*DIV que contém formataçõs dos contatos*/
position: relative;
font-weight: bold;
width: 468px;
height: 19px;
border: 1px solid blue;
margin-top: 0px;
}

.contatos-sem-zap img{
float:left;
margin-left:209px;
margin-top: -48px;
width:10.3%;
height:110%;
}

.contatos-sem-zap p{
font-size: 16px;
text-align:right;
margin-right:25px;
margin-top:-2px;
}

</style>
</head>
<body>
<div class="unidade">
<p>ESCOLA & SUPORTE:</p>
</div>

<div class="contatos-com-zap">
<img id="logo-tim" src="http://cdn2.sostariffesrl.netdna-cdn.com/img/providers-mid/tim.png"/>
<img id="zap" src="http://excelinformatica.16mb.com/wp-content/uploads/2016/06/logo_movil.gif"/>
<p>Fone: (91) 98935 - 6326</p>
</div>

<div class="contatos-sem-zap">
<p>Fone: (91) 99304 - 6297</p>
<img src="http://higiefacil.com.br/wp-content/uploads/2015/09/logo-vivo.png" align="right" width="50" height="35"/>
</div>

<div class="unidade-loja">
<p>LOJA:(91)3783-3056</p>
</div>

<div class="contatos-com-zap">
<img id="logo-tim" src="http://cdn2.sostariffesrl.netdna-cdn.com/img/providers-mid/tim.png"/>
<img id="zap" src="http://excelinformatica.16mb.com/wp-content/uploads/2016/06/logo_movil.gif"/>
<p>Fone: (91) 98260 - 1248</p>
</div>

<div class="contatos-sem-zap">
<p>Fone: (91) 99359 - 5852</p>
<img id="logo-vivo" src="http://higiefacil.com.br/wp-content/uploads/2015/09/logo-vivo.png"/>

</div>
</body>
</html>
Responder

17/08/2016

George Lucas

Visualiza em www.excel-informatica.com. Não está cortando nada! o código fica dentro de uma div de um formulário de preenchimento de header do wordpress
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar