Ir para conteúdo

POWERED BY:

Arquivado

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

Bruno Rosendo

[Resolvido] Problema menu centralizado usando FLOAT LEFT

Por , em Desenvolvimento frontend

Recommended Posts

Bruno Rosendo    0

Bruno Rosendo
Postado

Pessoal não manjo muito de css, tentei seguir alguns tutoriais pela internet, porém não obtive êxito... =/

 

Gostaria do meu menu centralizado porém utilizo float:left; não sei se o problema é só este, se alguém puder me ajudar agradeceria muito.

 

Seguem os códigos e prints:

 

HTML 

<body>
<center>
	<div id="topo">
		<div id="topo_inicio"></div>
		<div id="topo_conteudo"></div>
		<div id="topo_fim"></div> 
	</div>
	<div id="menu">
		<ul>
			<li id="sem_lista">A Empresa</li>
			<li>Serviços</li>
			<li>Nossa Equipe</li>
			<li>Trabalhe Conosco</li>
			<li>Contato</li>
			<li>Onde Estamos?</li>
		</ul>
        </div>
</center>
</body>

 

CSS

 

@charset "utf-8";
/* CSS Document */

body {
background:#f3f7fa;
font-family:Arial, Helvetica, sans-serif;
margin: auto;
}

#topo {
height:293px;
width:995px;
}

#topo_inicio {
background:url(imagens/topo_inicio.png);
height:293px;
width:1px;
float:left;
}

#topo_conteudo {
background:url(imagens/topo.png);
height:293px;
width:990px;
float:left;
}

#topo_fim {
background:url(imagens/topo_fim.png);
height:293px;
width:4px;
float:left;
}

#menu {
background:url(imagens/menu.png);
height:47px;
color:#fff;
font-size:16px;
font-weight:bold;
line-height:47px;	
vertical-align:middle;
}

ul {
width:995px;
}

li {
float:left;
margin-left:20px;
padding-right:10px;
}

#sem_lista {
list-style:none;
margin:0px;
}

 

com esse codigo a pag fica assim:

 

21o07zk.png

 

Gostaria dela assim:

 

2419ixv.png

 

 

Obrigado pela força =)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme_90    33

Guilherme_90
Postado

Tenta ai e vê se dá certo. Modifiquei o código na ul.

 

#menu{
       background:url(imagens/menu.png);
       height:47px;
       color:#fff;
       font-size:16px;
       font-weight:bold;
       line-height:47px;       
       vertical-align:middle;
}

#menu ul {
       width:995px;
       margin-left:auto;
       margin-right:auto;
}

#menu ul li {
       float:left;
       margin-left:20px;
       padding-right:10px;
}

#menu ul li #sem_lista {
       list-style:none;
       margin:0px;
}

 

Ah, repare o que fiz no seu código e o negrito onde eu fiz a alteração. Começa a fazer os códigos CSS no esquema que fiz, porque no esquema que você está fazendo, tu está gereralizando, exemplo (igual do seu código):

 

Toda ul, li terá essa formatação no site todo. Daí quando você for querer usar a tag li em outras coisas, vai cair nessa formatação que tu fez, e o que vai acontecer? Tu vai ter que ficar mudando o código todo. A modificação que fiz foi: Toda ul, li terá essa formatação apenas dentro da div id "menu", ou seja, se você usar ul e li em outros lugares da página, essa formagtação não irá passar para a ul e li. Bom, faz isso em tudo que tu for fazer, assim é mais fácil de montar um site no CSS. Lembre-se que, a ultima tag é repeferente ao estilo que vai aplicar, por exemplo:

 

#menu ul li p{
    font-size:13px;
    color:#333;
}

 

Neste caso, o "p" terá essa formatação apenas na div id "menu". Bom, espero ter ajudado! Ah, eu to falando isso porque já aconteceu isso comigo, e depois que fiz isso, melhora MUITO as coisas hehehe.

 

Abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme_90    33

Guilherme_90
Postado

Consegui resolver seu problema.

 

#menu {
   width:100%;
   height:47px;
   color:#fff;
   font-size:16px;
   font-weight:bold;
   background-color: #003399;
   border:1px solid white;
}

#menu ul {
   width:800px;
   border:1px solid red; /* Essa borda é para teste para ver onde esta a div */
   margin-left:auto;
   margin-right:auto;
   height:25px;
}

#menu ul li {
   float:left;
   margin-left:20px;
   padding-right:10px;
}

#menu ul li #sem_lista {
   list-style:none;
   margin:0;
}

 

Qualquer dúvida posta aí.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme_90    33

Guilherme_90
Postado

Porque você está colocando um margin para esquerda de 20px. Então, se diminuir a largura, os outros textos irão para baixo, porque vão ultrapassar o limite da largura (que deve ter para funcionar, no caso os 800px). Tipo assim:

 

Você definiu 20 de margin para a esquerda. Para que os textos fiquem na mesma linha, tu precisa colocar uma largura exata ou maior, para não ir para baixo. Vai diminuindo 1 ou 2px (ou ate mais se houver necessidade) e tu irá ver o resultado. Quando os textos estiverem para baixo, e tu aumentar 1px da largura, se os textos ficarem alinhas na mesma linha, é porque a proporção (direita e esquerda) estão corretos.

 

Ah, tira esse padding que não tá servindo de nada (pelo menos eu acho que não há necessidade). Coloca a largura 750px e margin-left:20px e está prontinho.

 

Eu tenho dificuldade pra explicar algo, foi mal qualquer coisa.

 

=)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme_90    33

Guilherme_90
Postado

Fico feliz. Qualquer coisa posta aí, abraço.

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