Web Design: Creating Horizontal Navigations with HTML & CSS


This is gonna be a beginner’s guide to creating a horizontal navigation So first I have a CodePen set up with my HTML on one side and my CSS on the other. We have a ul element inside a nav element. The nav element gives the browser context and allows it to know where the navigation is on your page. You would use this in your header where you have your main site navigation. And also in the footer if you include a navigation down there as well or your sidebars. I’m gonna remove all of the CSS to show you what this will look like So this starts with a basic list that is vertical with bullets So I’ll paste back in our styling and we’ll go through it line by line First we have a wild-card selector Which selects every element on the page by default box sizing is set to content box When it sets a content box the width of an element is Its width property plus any padding plus any borders You said it’s a border box the total width of an element is just its width The padding and the borders are included in the width, so If we comment this out you’ll be able to see the difference So this is actually a thousand 100 pixels And then if we take out this comment really quick you can see that it shifts back now making it a thousand pixels Next we just have some basic styles for our text and for the background of the navigation After that we’ve set margin and padding to zero and list style to none to get rid of all default Styles for a list So to better show you what’s going on here. I’m going to comment out the styles in Both sections So now that we’ve removed those styles you can see we have a nun styled vertical list we’ve gotten rid of the padding and Margins around our list and we’ve gotten rid of the bullets, but we want to make this horizontal Next we’ve set our list items to display:inline-block Inline block elements are like inline elements, so they go with the flow of text, but they can have a width and a height So you can see now that they’re all sitting next to each other With just a space in between so the next section is our a tags in our navigation So these inline block elements only take up as much space as they need and Then inside we’re going to set the display For our a tags block this makes them take up the full space inside of the Li tags We’ve added 10 pixels of padding to each length to make them bigger But you can actually make them bigger or smaller by changing your padding The rest of the property should be pretty familiar to you We have the text decoration set to none to get rid of the default underline that is usually on links We’ve set the color to white and then we have our background Hover as blue using really obnoxious colors while you’re testing things out does help To see where all these effects are happening the only other thing I want to talk about with this is that you do notice that there is a space in between each of these This is actually because of the display:inline when you have inline elements. They do take into account the white space between The elements one way to get around that is to take away the spaces in between Your list items So you see there, we’ve gotten rid of these spaces already Another option is to add HTML comments between your li elements So this comments out the space between the elements, but we can keep everything on separate lines There we go so the other option is to use CSS only without updating your HTML at all So you can set your font size to zero on your UL Which is where those spaces are so they’re in the you ELLs in between all the li elements You can see it’s actually gotten rid of our spaces and then to actually make our link tag show up again You put the font size back into the Li tags It’s really up to you what you use to get rid of those spaces in between your inline elements I? Like to use a purely CSS solution so that I don’t have to worry about what my HTML looks like or reading through My navigation, that’s all on one line or a bunch of little comment tags I find it to be less fiddly to just do this in CSS all right So that’s the basics for creating a horizontal navigation with HTML and CSS If you have any questions reach out to your instructor or post to the discussion boards

Leave a Reply

Your email address will not be published. Required fields are marked *