Now that we’ve got the pieces in the right place, it’s time to make it look pretty.įirst, let’s remove all the borders and put a nice black background on the menu navigation bar. Here is what your menu navigation bar looks like with display:block applied on the a selector. if you want) padding: 8px - Specify some padding between each element, to make them look good background-color: dddddd - Add a gray background-color to each element.To fix our overlapping issue for our navigation menu bar, we can override the default to display:block. Example explained: float: left - Use float to get block elements to float next to each other display: block - Allows us to specify padding (and height, width, margins, etc. The padding only impacts the sides but creates an overlap on the text for the top and bottom settings. This is because a is set to inline by default - which means that padding and margins don’t affect the surrounding area, no matter how badly you want it to.įor example, here is a paragraph with an inline a that has some padding on it. This creates an issue because your container element (that is, your ul) doesn’t expand to accommodate the padding. However, if we move the padding to the a selector, we get something like this: If we put padding on li, the clickable area will only be whatever is in the red border areas. However, our clickable area remains small and can be a bit annoying for the user. To do this, we can put the padding on the li. The menu navigation bar looks a bit too thin. Here is what your menu navigation bar looks like:
To get rid of the padding, we can do this by setting padding to 0 at ul. This spacing is caused by the default padding settings that all lists have. The next step is to get rid of the spacing in front of Home. It’s still ugly but at least everything is sort of in the right position now. We want each of the li elements to line up next to each other, that is why we use inline-block. block scopes make the element take up the entire width of the page. The next step is to turn your li elements from its default block scope to an inline-block scope. Now your navigation menu bar looks something like this: So how do we get from the above to the screenshot below?įirst, start by putting outlines on all your elements so you know exactly what your CSS is targeting. In short, it’s pretty basic and very 1980s Internet. In this tutorial, we are going to turn the unordered list item into a simple and visually pleasing horizontal navigation bar.įirst, let’s start off with our unordered list: However, lists by default designs are generally ugly. Most navigation bars you’ll encounter comes in the form of a list. This is the write-up part for the video below. I’m a writer by strength but I also want to get better at explaining things verbally too. This is the first post for a series of back-to-basics code tutorials I’m doing in conjunction with my YouTube channel reboot. Suppose you have the same markup as in the previous example and you want to move the last button to the far right side.For CSS newbies, a navigation bar is something that you’ll encounter sooner or later. You can also create a smart positioning of your navigation bar elements using a flexbox technique. Just add your CSS rules for colors and padding, and the result will be the following: To make it happen, use the following CSS rules:Īnd to align text inside buttons, do this:įinally, to remove double borders between the neighboring elements, do this: Next, you’ll probably want to make the buttons of equal width. To remove those gaps, apply a negative margin to your elements: This will make horizontal buttons with empty spaces between them. To make it horizontal, apply display: inline-block to your elements, and remove list bullets by applying list-style-type: none : With this markup, you’ll get a vertical list. Note that it’s recommended to put navigation buttons inside the list and inside the element for semantic reasons - to make your page more accessible to search engines. Suppose you need to create the simplest navigation bar there can ever be: a horizontal bar consisting of four buttons with links.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |