HTML and CSS horizontal menu

Navigation
0

Well guys, I've programmed Java and C # for a while. So now I'm trying to improve the Front End part more, and although I've read a lot of things, it's a bit more complicated when it's time to do it. So I decided to make a website with a few pages, just for study, using only HTML5 and CSS3, and of course, I intend to use something of Javascript and Jquery, if necessary.

Anyway, using HTML and CSS to do this is a lot more complicated than using a bootstrap of life, but I really want to learn how to move and not get so dependent on frameworks. The big problem is at the time of the horizontal menu, it follows code below: HTML 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>

Menu CSS 

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

The big problem is that because of that title there, all the items in the menu list come down, even though I put the width of h1 only 250px.

Does anyone have any tips? I'm not very experienced in this part of front-end.

    
asked by anonymous 28.09.2016 / 22:41

2 answers

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>

I created an example using the flexbox technique, applying it to the nav tag: 

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

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

In the title: 

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

Using flexbox, you do not need this property: width. Staying like this: 

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

In the menu: 

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

Using flexbox, you do not need these properties: position, float. Staying like this: 

#menu-principal{ width: auto; display: block; }
    
15.10.2016 / 06:13
1

I do not understand your question very well, do you want to leave the menus horizontal? If it is that. Then put:

main menu li {

Display: inline-block;

    
29.09.2016 / 01:23
Know if Activity is open (BroadcastReceiver or service) [duplicate] Set connection according to logged-in user data