Ir para conteúdo
Visualizar no app

Uma forma melhor de navegar. Saiba mais.

MM Fórum

Um app em tela cheia na sua Tela de Início com notificações push, avisos e mais.

Para instalar este app no iOS/iPadOS
  1. Toque no ícone de Compartilhamento no Safari
  2. Role o menu e toque em Adicionar à Tela de Início.
  3. Toque em Adicionar no canto superior direito.
Para instalar este app no Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Help em menu criado em CSS!

Featured Replies

Postado

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

  • Respostas 9
  • Visualizações 2.4k
  • Criado
  • Última resposta

Top Postadores Neste Tópico

Imagens Postadas

Postado

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.

Postado
  • Autor
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!!

Postado
  • Autor

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!!

Postado

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

Postado
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.

Postado
  • Autor
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!!

Postado
  • Autor

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

Postado
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

Postado
  • Autor
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...

Participe do debate

Você pode postar agora e se registrar depois. Se você tem uma conta, entre agora para postar com ela.

Visitante
Responder este tópico…

Quem Está Navegando 0

  • Nenhum usuário registrado visualizando esta página.

Conta

Navegação

Buscar

Buscar

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.