Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Kako F

[Resolvido]  posicionamento menu.

Por , em Desenvolvimento frontend

Recommended Posts

Kako F    0

Kako F
Postado

Olá

 

Estou com dúvidas em relação ao posicionamento do menu do meu site

No navegador Firefox ele é apresentado corretamente já no IE ele mostra acima, descaracterizando a idéia do layout.

Gostaria que o menu ficasse "encostado" sobre o corpo.

 

Sou ainda leigo em webstandards, gostaria de uma ajuda.

 

Já tentei de tudo, li vários tutoriais em fóruns diferentes mas infelizmente não consigo, não tem jeito! Tentei aplicar regra do boxmodel mas também não consegui.

 

Alguém pode me ajudar?

 

O link do site é

http://www.criebox.com.br/new/

Menu do topo.

 

Desde já agradeço a atenção de vocês

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Bem Vindo ao Forum Kako F.

Primeiramente, corrija o DOCTYPE, troque por:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">

Eu tive que ir testando... e é este height que está causando o espaçamento no IE:

#lidestaque {
	float:left;
	position:relative;
	margin-left:7px;
	width:255px;
	/* height:43px; */ /*apenas comentei essa linha, teste assim, sem este height para ver o resultado. */ 
	background-image:url(../imagens/layout/lidestaque.gif);
	}
<li><a href="#" class="menuContato">Contato</a></li>
	<div id="lidestaque"></div>
	<li><a href="#" class="menuContato">Contato</a></li>
Esta DIV "perdida" no meio do menu, que está causando isso. O FireFox não a esta interpretando pq esta não tem conteudo, mas o IE sim, está renderizando ela. Ou você tira ela dai, ou diminui o height para encaixar no menu.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rev087    0

rev087
Postado

Acho que o tiu uiLL ja matou o problema...mas eu fiz questão de postar para dar os parabens pelo layout, tanto o novo quanto o que está no ar (criebox.com.br), muito bonitos :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kako F    0

Kako F
Postado

Primeiramente muito obrigado pela atenção, ajuda e boas vindas ;)

Valeu também por elogiarem o layout.

 

Mudei o DOCTYPE, ontem tinha alterado isso porque pensei que poderia ter alguma coisa em relação...

 

 

 

Em relação a diminuir o height, fiz isso mas aí o layout tb não fica bom.

Você (tiu uill) comentou que tenho que retirar esta <div>

 

<li><a href="#" class="menuContato">Contato</a></li>
<div id="lidestaque">d</div>
<li><a href="#" class="menuContato">Contato</a></li>

Então é esta <div> que é aquele item em destaque branco no menu.

Existe alguma alternativa para posicionar tanto no firefox como no IE, como eu gostaria apresentado no exemplo 1 da foto?

 

Obrigado!

 

Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Ah tá... desculpa.

É que salvei teus códigos, e como não peguei as imagens não entendi oque essa DIV tava fazendo ali...

 

 

tenta posicionar de novo... com um "*margin-top: -17px" /* negativo, pro elemento subir.. */

usando um "*" para só os IE reconhecerem...

 

Ou reveja todos os posicionamentos dessa parte do layout... acredite, recomeçar é mais rápido as veze, doque tentar procurar o "erro".

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kako F    0

Kako F
Postado

Ah tá... desculpa.

É que salvei teus códigos, e como não peguei as imagens não entendi oque essa DIV tava fazendo ali...

 

 

tenta posicionar de novo... com um "*margin-top: -17px" /* negativo, pro elemento subir.. */

usando um "*" para só os IE reconhecerem...

 

Ou reveja todos os posicionamentos dessa parte do layout... acredite, recomeçar é mais rápido as veze, doque tentar procurar o "erro".

Brother, brigadão mesmo deu certo ;)

 

fiz o seguinte adicionei *margin-top: -17px; no lidestaque, deu certo.

 

#lidestaque {
	background-image:url(../imagens/layout/lidestaque.gif);
	float:left;
	height:43px; 
	margin-left:7px;
	*margin-top: -17px;
	position:relative;
	width:255px;
	}

Abraço e obrigado pela ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito