Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Boonsuen Oh
Boonsuen Oh
18,788 Points
Posted by Boonsuen Oh
Boonsuen Oh
18,788 Points

HTML & CSS coding question

Hi, I'm facing some problem when building a site myself. Here's the code.

<div id="main-header">
    <div id="main-menu">
        <nav>
        <h1 id="logo">&lt;ZAYN OH&gt;</h1>
        <ul>
            <li>&lt;&#47;ABOUT</li>
            <li>BLOG</li>
            <li>CONTACT&gt;</li>
        </ul>
        </nav>
    </div>
  </div>

#main-header {
  height: 490px;
  background-color: red;
  width: 100%;
  box-sizing: content-box;
}   

#main-menu {
  height: 70px;
  background-color: white;
}

#main-menu nav {
  background-color: rgba(0,0,0,0.2);
  margin: auto;
  width: 1040px;
  height: 100%;
  align-items: center;
  display: flex;
}

#logo {
  letter-spacing: 6px;
  background-color: antiquewhite;
  margin: 0 0;
}

#main-menu nav ul {
  list-style: none;
  background-color: aqua;
}

#main-menu nav ul li {
  display: inline-block;
  background-color: beige;
}

Why box-sizing: content-box does not work? What is the solid way to make any text or element inside #main-menu nav vertically centered? Preview can be see here Any help will be appreciated.

4 Answers

Olga Ioffe
.a{fill-rule:evenodd;}techdegree seal-36
Olga Ioffe
Front End Web Development Techdegree Graduate 19,955 Points

Zayn you can make <nav> also "display:flex" as it allowed to make child element also a flexbox. Then you can add "justify-content" for <nav> with values space-around or space-between. Or you can use "float: right" just for <ul>. Sorry, I still don't understand your goal with main-header. If you want to fix height of header you actually did it. It is 490px right now like in your css stylesheet. Or you want this height to be flexible and increase when you are adding something? Maybe you just want to add property "box-sizing:border-box" for prevent adding additional width with padding and border.

Boonsuen Oh
Boonsuen Oh
18,788 Points
Boonsuen Oh
Boonsuen Oh
18,788 Points

Hi, I just figure out that the main-header already covers the height of main-menu, sorry for that. And you just remind a useful property "box-sizing:border-box", very thankful.

"Or you want this height to be flexible and increase when you are adding something?", can you tell me how to do that?

I added float to right to ul but it didn't works, weird. It should floats to the right inside the nav(with grey bg color), right?

I also tried justify-content with those two properties and they works, two main objects <ZAYN OH> and ABO...BL..C.. was successfully aligned to differrent place. And will dig into this property more :).

Thanks for providing those tips.

Olga Ioffe
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Olga Ioffe
Front End Web Development Techdegree Graduate 19,955 Points
Olga Ioffe
.a{fill-rule:evenodd;}techdegree seal-36
Olga Ioffe
Front End Web Development Techdegree Graduate 19,955 Points

Zayn, sorry I missed that you asked about vertical alignment. For vertical alignment I know two ways. One of them is flexbox model - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ or https://teamtreehouse.com/library/css-flexbox-layout. Another way by using padding-top and padding-bottom.

Boonsuen Oh
Boonsuen Oh
18,788 Points
Boonsuen Oh
Boonsuen Oh
18,788 Points

Thank you I just solved the vertical center layout by adding display flex and align-items center to the parent element. Can you have a look on my site again? There is 3 list(<ul> and <li>) item inside the <nav>, how to make it align to the right inside the nav? How to make main-header without any changes of size(height, width...) when we include something in it just like I put the main-menu in it and the height just increased. I just updated the code. Thanks

Olga Ioffe
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Olga Ioffe
Front End Web Development Techdegree Graduate 19,955 Points
Olga Ioffe
.a{fill-rule:evenodd;}techdegree seal-36
Olga Ioffe
Front End Web Development Techdegree Graduate 19,955 Points

Hi, Zayn. Why did you decide that box-sizing:content-box doesn't work in your case? What did you want to make with this property? For aligning text inside the #main-menu nav just add to this element property text-align: center

Boonsuen Oh
Boonsuen Oh
18,788 Points
Boonsuen Oh
Boonsuen Oh
18,788 Points

text-align won't work, it only horizontally center the text inside nav.

Olga Ioffe
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Olga Ioffe
Front End Web Development Techdegree Graduate 19,955 Points
Olga Ioffe
.a{fill-rule:evenodd;}techdegree seal-36
Olga Ioffe
Front End Web Development Techdegree Graduate 19,955 Points

Zayn I remembered one more way to attach nav to the right: add "margin-right: auto" to <h1> with logo. For making height flexible you can use "calc()". For more info look here https://developer.mozilla.org/en-US/docs/Web/CSS/calc. Happy to help you