Ir para conteúdo
  • Cadastre-se
Entre para seguir isso  
André Sugai

Help em menu criado em CSS!

Posts Recomendados

Galera, ontem instalei um menu em CSS no meu blog que fica em uma posição fixa na tela, no alto, olhando pelo Firefox o menu aparece de forma correta, centralizado e fixo, porém pelo Internet Explorer o menu aparece totalmente desalinhado com o restante do blog, estou quebrando a cabeça para tentar alinhar mas não faço idéia do que possa ser, alguém poderia dar uma luz? caso queiram visitar a página para ver o erro o link é http://www.tutoriaisphotoshop.blogspot.com, obrigado desde já!!

Abaixo seguem duas fotos em Anexo com a mesma página aberta o Firefox no IE

post-32-1200673707_thumb.jpg

post-32-1200673740_thumb.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

Na minha resolução (1680 x 1050) está alinhado à esquerda.

Na minha opinião é porque você especificou 100% de width no menu. Tente colocar a mesma largura do #main e centralizá-lo.

O site http://www.maujor.com.br tem dicas fáceis de centralização na tela.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Na minha resolução (1680 x 1050) está alinhado à esquerda.

Na minha opinião é porque você especificou 100% de width no menu. Tente colocar a mesma largura do #main e centralizá-lo.

O site http://www.maujor.com.br tem dicas fáceis de centralização na tela.

Vou experimentar aqui e já já posto os resultados, obrigado pela ajuda!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Como não posso deixar o Blog assim no ar, desinstalei este menu e coloquei o menu antigo que não apresentava este erro no IE, mas vou continuar pesquisando caso encontre a solução posto aqui no tópico... valeu pela ajuda!!

Compartilhar este post


Link para o post
Compartilhar em outros sites
Como não posso deixar o Blog assim no ar, desinstalei este menu e coloquei o menu antigo que não apresentava este erro no IE, mas vou continuar pesquisando caso encontre a solução posto aqui no tópico... valeu pela ajuda!!

O menu estava com erro no Opera também; só para informá-lo.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Quando tiver dúvidas assim, cola o código HTML e CSS do menu direto aqui que fica mais fácil tentar ajudar.

Ok, consegui resolver o problema do menu mas arrumando o menu o que sai do lugar é a sidebar

  <style type="text/css">

  /* layout */

body	{
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
  color: #555;
  background: #bba url(http://www.salsicha.apanela.com/inferno/imagens/outerwrap.gif) top center repeat-y;
  font: small tahoma, "Bitstream Vera Sans", "Trebuchet MS", "Lucida Grande", lucida, helvetica, sans-serif;
  }

img  {
  border: 0;
  display: block;
  }


  /* Wrapper */

@media all {
  #wrapper  {
	margin: 0 auto;
	padding: 0;
	border: 0;
	width: 990px;
	text-align: left;
	background: #fff url(http://www.salsicha.apanela.com/inferno/imagens/innerwrap.gif) top right repeat-y;
	font-size:90%;
	}
  }
@media handheld {
  #wrapper  {
	width: 90%;
	}
  }

  /* layout interno */

#content  {
  padding: 0 5px;
  }

@media all {
  #main  {
	width: 710px;
	float: left;
	}

  #sidebar  {
	width: 226px;
	float: right;
	}
  }
@media handheld {
  #main  {
	width: 100%;
	float: none;
	}

  #sidebar  {
	width: 100%;
	float: none;
	}
  }

  /* layout  rodapé*/

#footer  {
  clear: left;
  margin: 0;
  padding: 0 20px;
  border: 0;
  text-align: left;
  border-top: 1px solid #f9f9f9;
  background-color: #fdfdfd;
  }

#footer p  {
  text-align: left;
  margin: 0;
  padding: 10px 0;
  font-size: x-small;
  background-color: transparent;
  color: #999;
  }



  /* Links */

a:link, a:visited {
  background: transparent;
  font-weight : bold; 
  text-decoration : none;
  color: #cc3333;

  }

a:hover {
  font-weight : bold; 
  text-decoration : underline;
  color: #6633ff;
  background: transparent; 
  }

a:active {
  font-weight : bold; 
  text-decoration : none;
  color: #cc3333;
  background: transparent;  
  }


  /* Tipografia */

#main p, #sidebar p {
  line-height: 140%;
  margin-top: 5px;
  margin-bottom: 1em;
  }

.post-body {
  line-height: 140%;
  } 

h2, h3, h4, h5  {
  margin: 25px 0 0 0;
  padding: 0;
  }

h3
{color:#9E5205;font-size: large; font-weight:bold;font-family:Verdana,Sans-Serif;letter-spacing:-1px;}

h2
{margin:10px 0px 0px 0px;color:#777777;font-size:105%;}

/*h2  {
  font-size: large;
  }

h3.post-title {
  margin-top: 5px;
  font-size: medium;
  }
*/

ul  {
  margin: 0 0 25px 0;
  }

li  {
  line-height: 160%;
  }

#sidebar ul   {
  padding-left: 10px;
  padding-top: 3px;
  }

#sidebar ul li {
  list-style: disc url(http://www.salsicha.apanela.com/inferno/imagens/diamond.gif) inside;
  vertical-align: top;
  padding: 0;
  margin: 0;
  }

#comments  {
  border: 0;
  border-top: 1px dashed #eed;
  margin: 10px 0 0 0;
  padding: 0;
  }

#comments h3  {
  margin-top: 10px;
  margin-bottom: -10px;
  font-weight: normal;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 1px;
  }  

#comments dl dt   {
  font-weight: bold;
  font-style: italic;
  margin-top: 35px;
  padding: 1px 0 0 18px;
  background: transparent url(http://www.salsicha.apanela.com/inferno/imagens/commentbug.gif) top left no-repeat;
  color: #bba;
  }

#comments dl dd  {
  padding: 0;
  margin: 0;
  }
.deleted-comment {
  font-style:italic;
  color:gray;
  }


/* Citações */

blockquote.style1 {
  font: 14px/20px italic Times, serif;
  padding-left: 70px;
  padding-top: 18px;
  padding-bottom: 18px;
  padding-right: 10px;
  background-color: #dadada;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 5px;
  background-image: url(http://www.salsicha.apanela.com/inferno/Botoes/examplequote.gif);
  background-position: middle left;
  background-repeat: no-repeat;
  text-indent: 23px;
} 
.style3 {
	font-size: 14px
}

/* Menu  */

		#nav
{
	width: 100%;
	height: 25px;
	border-bottom: 0px solid white;
	color: white;
	background-color: #202020;
	opacity: 0.8;
	-moz-opacity: 0.8;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
	position: fixed;
	top: 0px;
	margin-left: 0px;
	margin-top: 0px;
	padding: 0px;
	z-index: 99;
	_position: absolute;
	_top: expression((dummy = document.documentElement.scrollTop) + "px");
}

#nav li
{
	display: block;
	float: left;
	height: 25px;
	width: auto;
	text-align: center;
	line-height: 25px;
	color: white;
	text-decoration: none;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

#nav li a
{
	display: block;
	padding-left: 15px;
	padding-right: 15px;
	line-height: 25px;
	color: white;
	text-decoration: none;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

#nav li a:hover
{
	background-color: #666666;
}
.navlist ul
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

.navlist li
{
display: inline;
list-style-type: none;
}

.navlist a { padding: 3px 10px; }

.navlist a:link, .navlist a:visited
{
color: #fff;
background-color: #369;
text-decoration: none;
}

.navlist a:hover
{
color: #fff;
background-color: #427bb4;
text-decoration: none;
}
  </style>

e no body vão os links

<ul id="nav">
	 	   <li><a href="http://www.tutoriaisphotoshop.blogspot.com">Home</a></li>
		   <li><a href="http://tutoriaisphotoshop.blogspot.com/2006/10/arquivo-de-tutoriais.html">Tutoriais Anteriores</a></li>
		   <li><a href="#">Matérias</a></li>
		   <li><a href="#">Palestras, Workshops e Eventos</a></li>
		   <li><a href="http://tutoriaisphotoshop.blogspot.com/2006/10/ps-help.html">PS Help!</a></li>
	   <li><a href="http://tutoriaisphotoshop.blogspot.com/2006/12/ps-downloads.html">PS Downloads</a></li>
	   <li><a href="mailto:guitarfreaks@gmail.com?subject=Contato Tutoriais Photoshop">Contato</a></li>
</ul>

Caso alguém possa ajudar eu agradeço!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Descobri que existia (não me pergunte o porque) um conflito entre o body e o menu, deixando o body no desabilitado o menu fica centralizado no IE, mas se eu fizesse isso perdia todas as minhas preferências para o body, então o que fiz foi usar um CSS Hack que diz para navegadores como Firefox, Safari (não sei se o Opera entra nessa) para ler o body enquanto o IE ignora, então antes do body coloquei seguinte código html>body { .... }; , é lógico que o IE mostra todo o conteúdo do blog sem minhas prefeências mas tudo bem.. pelo menos resolvi o problema do menu... caso queira ver, façam o teste no IE e no Firefox e vejam a diferença nas fontes... obrigado a todos pela força!!

http://www.tutoriaisphotoshop.blogspot.com

Compartilhar este post


Link para o post
Compartilhar em outros sites
Descobri que existia (não me pergunte o porque) um conflito entre o body e o menu, deixando o body no desabilitado o menu fica centralizado no IE, mas se eu fizesse isso perdia todas as minhas preferências para o body, então o que fiz foi usar um CSS Hack que diz para navegadores como Firefox, Safari (não sei se o Opera entra nessa) para ler o body enquanto o IE ignora, então antes do body coloquei seguinte código html>body { .... }; , é lógico que o IE mostra todo o conteúdo do blog sem minhas prefeências mas tudo bem.. pelo menos resolvi o problema do menu... caso queira ver, façam o teste no IE e no Firefox e vejam a diferença nas fontes... obrigado a todos pela força!!

http://www.tutoriaisphotoshop.blogspot.com

Testei aqui no FF, Opera e IE:

. as fontes mudaram no IE mesmo;

. o menu esta alinhado à esquerda, nos três navegadores.

Você não queria centralizá-lo

Compartilhar este post


Link para o post
Compartilhar em outros sites
Descobri que existia (não me pergunte o porque) um conflito entre o body e o menu, deixando o body no desabilitado o menu fica centralizado no IE, mas se eu fizesse isso perdia todas as minhas preferências para o body, então o que fiz foi usar um CSS Hack que diz para navegadores como Firefox, Safari (não sei se o Opera entra nessa) para ler o body enquanto o IE ignora, então antes do body coloquei seguinte código html>body { .... }; , é lógico que o IE mostra todo o conteúdo do blog sem minhas prefeências mas tudo bem.. pelo menos resolvi o problema do menu... caso queira ver, façam o teste no IE e no Firefox e vejam a diferença nas fontes... obrigado a todos pela força!!

http://www.tutoriaisphotoshop.blogspot.com

Testei aqui no FF, Opera e IE:

. as fontes mudaram no IE mesmo;

. o menu esta alinhado à esquerda, nos três navegadores.

Você não queria centralizá-lo

Oi, Fred, sim, queria centralizar, mas centralizar o Menu todo e não os links, estes são centralizados a esquerda mesmo, dê uma olhada nos dois anexos que deixei no tópico, antes o Menu começava da metade da tela para a direita no IE e no Firefox aparecia do jeito certo.. eu só não entendi o que o body tinha haver com isso.. mas...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Visitante
Responder este tópico…

×   Você colou conteúdo com formatação.   Remover formatação

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Limpar editor

×   You cannot paste images directly. Upload or insert images from URL.

Entre para seguir isso  

  • Quem Está Navegando   0 membros estão online

    Nenhum usuário registrado visualizando esta página.



  • Estatísticas do Fórum

    • Total de Tópicos
      47.602
    • Total de Posts
      408.016
×
×
  • Criar Novo...