Frustration on my first steps (a really concealed cry for help?)

Hi everyone! My name is Gerardo Hutchins and I’m pretty new in all this HTML and CSS world (started a few weeks ago with free websites, like ‘internetingishard’ and ‘freecodecamp’). So i’m kinda ‘stuck’ in the third project of the html and css of the site curriculum (the product landing page), specially in the nav bar+logo thing. So I have a few questions that I hoped you could answer or at least give me a hint. So, here’s the thing:

I have this HTML code here:

         <header id="header" class="header">
            
            <img id="header-img" src="" alt="header logo"/>

            <nav id="nav-bar">
                <ul class="nav-bar">
                    <li><a classs="nav-link" href="#home">Home</a></li>
                    <li><a classs="nav-link" href="#what-is-it">What Is It?</a></li>
                    <li><a classs="nav-link" href="#how-it-works">How it works</a></li>
                    <li><a classs="nav-link" href="#where-do-i-get-it">Where to get it</a></li>
                    <li><a classs="nav-link" href="#contact-us">Contact Us</a></li>
                </ul>
            </nav>

        </header>

And this CSS

* {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

#header-img {
    border: 1px solid red;
}

.header {
    display: flex;
    flex-direction: row;
    border: 1px solid red;
    height: 40px;
}

.nav-bar {
    display: flex;
    flex-direction: row;
    list-style: none;
    border: 1px solid red;
}

.nav-link {
    width: 100px;
    height: 100px;
    margin: auto;
}

(well, i can’t upload an image, suppose because i’m new)

Now, i’ve been trying to use some flexbox properties to move the elements around, but no luck so far (though i know is more knowledge than luck haha). The only thing i managed to do is to put the <li> elements horizontally. So i did the border thing to see what was happening, and I realised that the ‘box’ for the <li> elements is quite ‘compressed’.

So my first two questions would be:

  • how do I make the <li> element box (i suppose that is the <ul> parent container) take more space inside the <header> parent element without exceeding the limits of it?
  • And the second one, related: if the container gets bigger that would allow me to ‘space-between’ or ‘space-around’ the <li> elements, right? On the other hand, is there any way to make the <img> element fit/resize automatically to the height of the <header> element?

I assume the answer won’t be simple, but I don’t want to give up on this, so thanks for reading and helping me!

Cheers!

The answer is simple. Your .header is a flex container. It contains two elements, an image and a div with an id of nav-bar. By default, the flex elements take as little space as needed to fit their content. To tell #nav-bar it can expand, give it the property flex: 1.

Avoid using the same names for ids and classes. It gets confusing. Ids are usually not necessary.

Image sizing shouldn’t be a problem if you set the header-img to be height 100% and width of auto.

3 Likes

You can add some padding to those <li> elements to space the text apart.

Yes. Setting its height to 100% will make it as high as its parent (in this case the header). If it doesn’t resize horizontally, adding width: auto should fix it.

1 Like

Only reason why ids are listed in the code is because of the FCC test suite deal- it will fail the test if the id isn’t present.
Otherwise- I’d agree that class is probably better, but matter of preference for each person.

2 Likes

Thank you so so so so muuuuch!
I was about to give up, but you made me gain hope again :slight_smile:

<3

Next issue here:

In the same html document i added some h1 and p elements:

<header id="header" class="header">
            
            <img id="header-img" src="davelish-logo.png" alt="header logo"/>

            <nav id="nav-bar" class="nav-container">
                <ul class="nav-bar">
                    <li class="nav-link"><a href="#who-are-we">Who are we</a></li>
                    <li class="nav-link"><a href="#what-we-offer">What we offer</a></li>
                    <li class="nav-link"><a href="#contact-us">Contact Us</a></li>
                </ul>
            </nav>

        </header>
        
        <article>
            <img src="" alt="sound-logo"/>
            <h1 id="who-are-we">Who are we</h1>
            <br>
            <p>At Davelish we specialise in everything related to sound performance,
                wether it is for conferences, live gigs at bars, parties or private events. 
                We will make sure that every aspect is well taken care of, from crystal clear (with 
                our 7.1 sorrounding audio system) sound to aspect (everything is wireless). We take 
                pride in our work and make sure everything is set to the most high standards. Our 
                ever growing family is composed by top sound technicians and energetic young sound 
                enthusiasts. 
            </p>
            <br>

            <p>Initially from San Francisco, CA, we are now expanding our reach to neighbor
                states such as Oregon, Nevada, Arizona and Washington. Our goal is to 
                have an office at every state in the USA. 
            </p>
            


        </article>

And i added some lines in the css as well:

* {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}


.header {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 70px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 16px;
    background-color: orange;
    border-bottom: 2px solid black;
    position: fixed;
    
}

#header-img {
    height: 100%;
    width: auto; 
    
}


.nav-container {
    display: flex;
    flex: 1; 
    align-items: stretch;
    justify-content: space-around;

}

.nav-bar {
    display: flex;
    flex-direction: row;
    flex: 1;
    list-style: none;
    flex-wrap: wrap;
}

.nav-link {
    flex: 1;
    text-align: center;
    align-self: center;
}


a {
    text-decoration: none;
}

h1,
p {
    font-family: 'Archivo Black', sans-serif;
    line-height: 1.5em;
    
}


@media only screen and (max-width: 650px) {
    .nav-bar {
        flex-direction: column;
    }


}

So, what I’m getting is that I can’t see the h1 element. I assume that it is because of the position: fixed property on the header that is suppossed to remove the element from the normal flow of the page, so the h1 element is underneath it. Any way to solve this? I’ve tried to add a div element between the header and the h1 elements but i doesn’t seem to work.

Cheers!

You’re right about the header hiding it. You can add padding-top to your article to offset it from the space the header takes up.

1 Like

Thanks there <3
I feel I’m going to come back here soon enough with other silly questions, see ya :slight_smile:

Only reason why ids are listed in the code is because of the FCC test suite deal- it will fail the test if the id isn’t present.
Otherwise- I’d agree that class is probably better, but matter of preference for each person.

@Ducky I agree.

@GeriHutchins I use classes most of the time. IDs are used for when you want to target an element using Javascript. But you can target the classes with Javascript also.
IDs have a higher priority than classes and can override a class that is lower down in the CSS file.

I was suprized that FCC has us using IDs. I think that they need it for their test suite. It is probably easier to check an element’s ID than a class. One element can have multiple classes and the same class could be on multiple tag elements. Imagine trying to test for a class…

1 Like