I’m currently trying to get the fixed header done, but for some reason I cannot get the logo to display inline with the nav bar. I’ll walk you through my steps:
First I tried making the nav bar an unordered list and nested it inside a header with the logo as an image element.
I even tried moving the class assignment from the img tag to the li tag. No luck. Then I tried adding an img sleector to the css declaration. Again, no luck. This logo does not want to be on the same line as the other elements!!
If anyone can help. that’d be great. I didn’t think I’d get stuck this early on .
I feel like once they all display inline, I can then go in and target just the logo and nav elements and position them at the left and right corners respectively according to the design spec.
Suggest do not put the logo into the list. That is not semantic, though if it links to the Home page it would still be part of the navigation. Still, it is a logo and SOP is to have it link to the Home page (except on the Home page, it shouldn’t link to anything).
Make everything inside the header an inline-block. Left align the logo, and right align the navigation menu.
Logo link link link
Remove style from the list items to remove the bullets:
Thanks for the answer. So I’ve taken the logo out of the list, but when I make a css declaration for both “.logo” and “.directory”, none of the elements display inline.
I think that you have a small misunderstanding in one of your CSS rules.
When you are writing:
.directory .logo {
}
You are not targeting element with the class directory or logo; you are targeting an element with a class logo inside an element with a class directory
Example:
<div class="directory">
<div class="logo">
This content is styled
</div>
</div>
If you want to apply the same rules to more than one class, you need to use a comma between the class name.
.directory, .logo {
}
This code will target elements with the class directory or logo.
The header is a parent element. If we can assume there to be only one in the page, then it needs no special treatment. Just set up a selector rule for,
But when I use Chrome developer tools, I can see that the browser still doesn’t consider the navbar in line with the logo. You can see on the right I’ve selected the ul and the orange box is slightly above the logo, which is why I can’t lower the navbar:
Just an update, I figured it out. I’ll post my solution in case you’re still stuck:
First thing is giving the unordered list and each list element the same selector. That was my mistake– I only gave the list items the selector. (This is assuming you use an unordered list for the nav bar of course.)
Then in css use “float: right;” for the nav bar.
After resizing the logo to 50px per the design spec instructions, it should look much better. After doing some nudging with padding, I’ve got this:
Text alignment is a parent directive. A section/div/article/p/&c. with the property set to ‘center’ will be center aligned for all its child elements (or nodes). The constraint in all this is the width of the parent container (element). Centering applies regardless the width.
We can set multiple block level elements in the same horizontal line by making them inline-block. We have several options at that point how to position them.
Not saying so much as read up on the properties to learn how to wrangle them. If they are equivalent terms then they will exhibit the same behavior. Flex will offer some positioning options.
.
