Fórum Ajuda com HTML/CSS #559523

24/07/2016

0

Front-end

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

Gostei + 0

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

Gostei + 0

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

Gostei + 0

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

Gostei + 0

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

Gostei + 0

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

Gostei + 0

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

Gostei + 0

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

Gostei + 0

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

Aceitar