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

CSS CSS Layout Basics Controlling Layout with CSS Display Modes CSS Display Modes Challenge

Deborah Savage
seal-mask
.a{fill-rule:evenodd;}techdegree
Deborah Savage
Front End Web Development Techdegree Student 6,794 Points
Posted by Deborah Savage
.a{fill-rule:evenodd;}techdegree
Deborah Savage
Front End Web Development Techdegree Student 6,794 Points

inline-block display

what exactly are they looking for here...

style.css 
/* Complete the challenge by writing CSS below */

header {
  text-align: center;
}
.logo {
  width: 110px;
  margin: auto;
}
.main-nav li {
display: block;
}
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Getting Started with CSS Layout</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
    <body>
    <div class="container">
        <header>
            <img class="logo" src="city-logo.svg" alt="logo">
            <ul class="main-nav">
                <li><a href="#">Ice cream</a></li>
                <li><a href="#">Donuts</a></li>
                <li><a href="#">Tea</a></li>
                <li><a href="#">Coffee</a></li>
            </ul>
        </header>
    </div>
    </body>
</html>
Deborah Savage
seal-mask
.a{fill-rule:evenodd;}techdegree
Deborah Savage
Front End Web Development Techdegree Student 6,794 Points
Deborah Savage
.a{fill-rule:evenodd;}techdegree
Deborah Savage
Front End Web Development Techdegree Student 6,794 Points

The <ul> with the class main-nav is a block-level element by default, so it takes up the full width of its container. Let's set .main-nav to be as wide as the content inside it.

Change the display of .main-nav to the display value that generates a block element that doesn't take up a full line.

Not sure what im missing but my brain is so fried so that could be it too... lol

1 Answer

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Hey there,

At this stage of the course, you should know about four display modes:

  • none
  • block
  • inline
  • inline-block
display: none;

This value sort of turns off the element, and the page acts as if it were never there. It's particularly useful for things like responsive layout, where you need to remove a mobile navigation menu as the viewport gets larger in exchange for a desktop navigation menu instead. This is what you could think about using for unit 2 of the FEWD Tech-degree.

display: block;

The value block, generates a block-level element that takes up a full line of content. This element forces a new line by pushing elements above and below it (in source order). Some examples of a block-level element by default are div, p, h1 through h6, ul, ol, section, main, and blockquote.

display: inline;

The value inline, makes the element appear inline with the other content, it, therefore, doesn't take up a full line of content like the block-level elements. This display mode makes the element only appear as wide as it's content. This display mode doesn't accept any width/height, margin or padding values. Some examples of inline elements are a and span.

EDIT

display: inline-block;

The value inline-block, sort of generates an element that's like a block-level element, but still takes on characteristics of an inline element, which therefore appears inline with the rest of the content and the natural document flow. This value is like a block-level element because it can accept width, margin-left and right, and padding values.

Having said all that, the li element is a block-level element by default, and the challenge wants you to make them appear side by side. Reading the examples above, and reading the challenge again, have another attempt at it. :)