Center navbar

HTML & CSS
1

Hello!i tried to center my nav bar but i could not figure it out:))!(warning:i am a top class beginner)

<header class="mainheader">
		<a href="home.html"><img src="img/title.png"></a>

		<nav><ul>

			<li><a  href="Youth.html">Youth</a></li>
			<li><a href="Apple.html">Apple</a></li>
			<li><a href="Leaving Apple.html">Leaving Apple</a></li>
			<li><a href="Back to Apple.html">Back to Apple</a></li>
			<li><a href="Personal Life.html" class="active">Personal life</a></li>
			<li><a href="Legacy.html">Legacy</a></li>
		</nav></ul>

	</header>

css:

.mainheader nav ul{
    margin: 0 auto;
    display: inline-block;
    width: 100%;
    text-align: center;
}
 
.mainheader nav ul li{
	float:left;
	display: inline;
    
    color:white;
    height: 50px;
    margin: 
    padding: -5 -5px
}

.mainheader nav a:link {

    display: inline-block;
    padding: 30px 40px;
    height: 10px;
    text-align: center;
}

.content{
    width: 60%;
    margin: 0 auto;
}

1911×930 66.1 KB

2

We will take a look at your css:-

.mainheader nav ul{
    margin: 0 auto; /* This should centre a block element */
   /* display: inline-block; Remove this, it should be a block */
   /* width: 100%; Remove this too, a block will be full width by default. 100% makes it wdier and makes a scroll bar */
    text-align: center;
}
 
.mainheader nav ul li{
	/* float:left; Remove this, it keeps all the items to the left */
	display: inline;
    
    color:white;
    /* height: 50px; fixing heights is generally a bad idea, let the content define the height it needs */
    margin: 
    padding: -5 -5px
}
3 Likes
3

There’s no such thing as negative padding and you must have units on the end :slight_smile:

1 Like
4

Balancing the HTML tags would help, too.

<nav><ul> <!-- open OK -->
…
</nav></ul> <!-- wrong close -->

</ul></nav> <!-- right close -->

better still for readability (which minimizes such errors)

<nav>
    <ul>
        <li></li>
        ...
    </ul>
</nav>

Are you taking an HTML/CSS class? If not, please do. There are many nuances to the use of HTML and CSS code that are overlooked by beginners. A formal class would be time well spent.

2 Likes
5

i don`t have the time to take classes(i have school,and where i live there are very expensive),do you recommend a good online course or something like that?

6

Thank you very much!

7

I picked up my formatting and coding foundation from books - yes, real, paper printed books - over 20 years ago so I cannot recommend any of the current online courses. Perhaps others can offer their opinions.

8

I downloaded PDF’s online and learned from those at my school they didn’t really focus on web design it was literally 1 page that they gave us and it was just HTML.

I learnt my CSS, a bit of PHP and a bit of MYSQL and JavaScript alone using PDF’s.

It’s a good start you can learn alot from trial and error :slight_smile: playing around with codes help alot I still could never get used to tables in HTML so i stayed with nested LI’s and UL’s

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.