Menu horizontal com HTML e CSS

Front-end
, ,
#1

Bom galera, programo faz um tempo em Java e C#. Daí agora tô tentando melhorar mais a parte de Front-End, e apesar de já ter lido bastante coisa, na hora de fazer é um pouco mais complicado. Então, resolvi fazer um site com algumas páginas, somente pra estudo, utilizando apenas HTML5 e CSS3, e é claro, mais pra frente pretendo usar algo de Javascript e Jquery, caso seja necessário.

Enfim, utilizar HTML e CSS pra fazer isso é bem mais complicado do que usar um bootstrap da vida, mas eu realmente quero aprender a mexer e não ficar tão dependendo de frameworks. O grande problema é na hora do menu horizontal, segue código abaixo:
HTML do menu

> >

Manual Front-End

> > >

CSS do menu

*{ margin: 0; padding: 0; font-family: Arial, Sans-Serif; }

body{
background-color: #ddd;
}

header{
width: 100%;
height: 50px;
background-color: #000;
}

#menu-principal-container{
margin: 0px 50px;
text-align: center;
position: relative;
}

#menu-principal-container h1{
padding: 10px 0px;
background-color: transparent;
width: 250px;
text-align:center;
}

#menu-principal-container h1 a{
color: #fff;
text-decoration: none;
}

#menu-principal{
position: absolute;
float: right;
width: auto;
display: block;
}

#menu-principal li{
display: inline-block;
margin-top: 15px;
}

#menu-principal li a{
color: #fff;
text-decoration: none;
list-style: none;
padding: 15px 50px;
}

#menu-principal li:hover a{
background-color: #fff;
color: #ff0000;
border-bottom: 3px solid #ff0000;
}

o grande problema é que por conta desse título aí, todos os itens da lista de menu descem, mesmo eu colocando o width do h1 somente de 250px.

Alguém tem alguma dica? Não sou muito experiente nessa parte de de front-end.

#2

Testei o código e não entendi bem o seu problema, Quando você diz que “os Itens descem”, você gostaria que eles ficassem ao lado do título, ou queria que o menu ul ficasse mais próximo do Título?

Talvez você não saiba, mas os H1, h2, e os restante dos hs, tem por dafault uma margin top e bottom de mais ou menos 10 a 15 pixels, e tem um width estilo 100%. Se você colocar o H1 dentro de uma div e der um Float:left ou right, o “width:100%” do h1 fica no tamanho do texto, provavelmente seu menu vai para o lado do titulo.

Você pode dar um margin:0 para o h1, fazendo o menu ficar mais próximo do titulo
Uma dica: faz um default dos h1, h2 no seu css quando for iniciar algum projeto, porque tem uma variação grande para cada navegador, e pode desajustar a sua página em alguns navegadores por causa dessas margens e dos tamanhos deles

Qualquer coisa, esclarece mais o seu problema que a gente tenta resolver

#3

Imagem colada1366×768 31.6 KB

Olha só como fica o menu. Ele não fica na barra negra que criei, entende? Esse é o problema. Quando uso ferramentas de desenvolvedor do chrome, vejo que o meu nav ocupa todo o meu header, mas minha lista

    fica sempre assim, quebrada lá em baixo.
#4

Show de bola Alisson, assim fica mais fácil de entender…

Fiz um exemplo para você…,
Estude esse exemplo que te passei, mandei num arquivo porque as tags estavam sendo interpretadas quando postei, ai iria dificultar copiar o código…

No style do H1, eu uso Float:left para ele ficar com o width no tamanho do texto, dei um background branco para você ver… Veja que o menu NAV está dentro da DIV no meu exemplo, com eu dei um float:right no NAV, ele ficou fora da DIV igual a sua imagem, daí eu usei o Display:table na DIV#HEADER para força a div se ajustar ao posicionamento do menu…

Boa sorte!!!
menu_de_Alisson.html (645 Bytes)