Stretching li to fit height of container; pushing element to top of div

HTML-CSS
1

I’m working on the “Product Landing Page” project for freeCodeCamp. Since I have zero creativity, I’m trying to make something close to the example page’s design but with completely original code, of course, for practice.

Here is the example page:

Here’s mine so far:

I have two questions.

In the navigation bar at the top, I’d like for the user to be able to use each of the links on the right side by hovering either directly over the text or over the space surrounding it. I also want to make it so that the background color of the container changes when hovering over it. However, as you can see by the background color, which I set to red just for debug purposes, the li elements only take up as much vertical space as the text they contain. How can I stretch them so they consume all the vertical space in the header? I tried using flexbox stretch on both the li elements as well as the entire ul, but nothing happened.

At the bottom of the example page, there are listings for three types of trumpets. Note that there is no space between the black border and the gray containers for the trumpet names. However, in mine, there’s a space between the border and the product name container even though I removed the padding and used “justify-content: space-between.” How can I force the dark gray name containers up against the borders?

Once again, the eye-searing red and blue colors are only there to help me better understand how CSS affects containers.

Thanks in advance!

2

Hi @jasu62,

I checked a little your code. To answer your first question, you have many possibilities. You can simply add a width for your ul list for example.

For the second wondering you have, if you had an issue of padding, you would see it. You can see that the top border and your box tittle are separate by a white. This means you have a marge you can remove or increase as you wish.

.part-name {
  background-color: darkgray;
  width: 100%;
  margin-bottom: 20px;
}

You are adding a marge at the bottom, how could you do for the top then? :slight_smile:

3

Thank you for your help! As you hinted, all I had to do was specify the top margin as follows:

.part-name {
  background-color: darkgray;
  width: 100%;
  margin-bottom: 20px;
  margin-top: 0px;
}

The reason why I didn’t think this was necessary in the first place was because, in the very beginning of my CSS file, I put the following:

* {
  margin: 0;
  padding: 0;
}

But I had completely forgotten that I had then done the following:

.main-section * {
  margin: 5px;
}

So I clearly need to be more careful. Thank you for helping me to realize my own mistakes.

I still haven’t figured out the ul height issue yet. I’ll keep trying.

4

You are welcome @jasu62, but it is you who did all the work, happy you arrived to figured it out!

And it is the height or the width who disturbs you for your ul list?

5

It’s the height of the ul list that bothers me. I want it to take up the same height as that of the header. I’m aiming for something like the horizontal bars shown here:

I figured out part of my problem. I needed to specify a height for the header. Then #nav-bar can inherit the header’s height, allowing me to use height: 100%.

However, now I’m having trouble getting the lis centered between the top and bottom of the header, and they don’t seem to be able to inherit the height of their parent ul. But I’ll keep trying. This is helping me learn a ton.

6

You are all right @jasu62, you will figure it out all I am sure

7

I’ve mostly solved the problem now through extensive use of flex. I have completely different questions now. I might have to start a new thread.

In order to make the entire <li> a link, I was previously wrapping the <li> in <a>, but I have now moved the <a> inside the <li> and tried to extend the size of the <a> to fill the container as follows:

#header-nav li a {
  /* Make the entire container a link */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

However, because the <li>s have padding on the left and right sides, there are small gaps where the link doesn’t work. I was wondering if there was some equivalent to width: 100% that also consumes the padding.

Is there a way to get Flexbox to automatically make a series of containers all the same size as the largest one? My links at the top are “Services,” “Parts,” and “Request a Quote,” and I have explicitly set the width of each to 120px as follows:

#header-nav li {
  width: 120px;
  padding-left: 10px;
  padding-right: 10px;
  border-left: 1px solid black;
}

120px nicely fits “Request a Quote,” but I determined that through trial and error. I wonder if there’s a way for Flexbox to automatically determine that width. I tried a combination of width: min-content and flex: 1 1 100%, but that didn’t work.

8

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