Tea Cozy Project

Hey folks,

I’m at the early stages of the Tea Cozy project. Here’s what the finished project should look like:

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:

  1. First I tried making the nav bar an unordered list and nested it inside a header with the logo as an image element.

Then I assigned the nav and the logo classes and targeted both for an inline-block declaration:

The result is, none of the elements displayed inline (see below).

  1. Next, I tried placing the logo inside the unordered list with the nav bar and gave all the list elements the same class.

I made the following css declaration:

This time the nav bar displayed inline, but the logo remained in the default list display.

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 :confused: .

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.

Thanks

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:

list-style: none;

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.

1 Like

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,

header {

}
header img {
  display: inline-block;
  position: relative;
  left: 50px;
}
header ul {
    position: relative;
    list-style-type: none;
    width: 50%;
    right: 50px;
}
header li {
  display: inline-block
}

Those are just example selector rules. Play around with positioning and be sure to collapse to the narrowest view to see how it will fit.

Ah yes, rookie mistake. Thanks.

Kia ora Coleflan,

I am really struggling with this project at the same stage too.

I can’t seem to get the Tea Cozy logo inline with the “Mission, Featured Tea and Locations” navbar.

I have looked at the posts below, but this still doesn’t work for me.

Can you please tell me what exact code you used to get them in line with each other?

Nga mihi,

LP

Hello,

Unfortunately I’m still stuck at this stage. The closest I’ve gotten is this:

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:

I might have to review flex concepts or something because I just don’t know to do it with basic html and css. :confused:

Hi,

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:

Of course there’s still a ways to go!

Kia ora coleflan, much appreciated!

Now I am trying to figure out how to get h2 and h4 centred over the image below the navbar :joy:

Let me know if you figure that one out :blush:

Nga mihi,

Liz

I’ll keep you posted!

1 Like

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.

1 Like

Kia ora mtf,

So, are you saying I should type inline-block instead of inline-flex for display?

Nga mihi,

Liz

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.

Thanks for your tips, much appreciated.

1 Like