0

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

<nav id="menu-principal-container">
    <h1><a href="index.html">Manual Front-End</a></h1>
    <ul id="menu-principal">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JAVASCRIPT</a></li>
        <li><a href="#">TUTORIAIS</a></li>
    </ul>
</nav>

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 Respostas 2

1

Não entendi muito bem sua dúvida, você quer deixar os menus na horizontal ? Se for isso. Então coloque :

menu-principal li {

Display: inline-block;

0

*{ 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;

    /* flexbox */
    display: flex;
    justify-content: space-between;
}

#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{ 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; }
<nav id="menu-principal-container">
    <h1><a href="index.html">Manual Front-End</a></h1>
    <ul id="menu-principal">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JAVASCRIPT</a></li>
        <li><a href="#">TUTORIAIS</a></li>
    </ul>
</nav>

Criei um exemplo utilizando a técnica do flexbox, aplicando na tag nav:

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

    /* flexbox */
    display: flex;
    justify-content: space-between;
}

No título:

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

Utilizando flexbox, você não precisa desta propriedade: width. Ficando assim:

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

No menu:

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

Utilizando flexbox, você não precisa destas propriedades: position, float. Ficando assim:

#menu-principal{ width: auto; display: block; }
1
  • Obrigado! Era isso mesmo. Eu tinha feito de um modo diferente, mas dessa forma que você mostrou é bem melhor.
    – user46439
    Commented 17/10/2016 às 4:44

Você deve fazer log-in para responder a esta pergunta.