FAQ: CSS Display and Positioning - Position

Could you share your code?

It’s the starting code given on the 2nd slide of this lesson.

You’ll get to learning how to put them on the left once the get the the float property. If you see the answer boxes in the center, you haven’t done the float property yet, which makes things on the web-page go all the way to the left or right.

Hmmm ok, that’s kind of what I figured, I just thought the code the lesson used didn’t really match what they weren’t trying to say the code does, hence a bit of confusion.
Thanks for the input though.

3 Likes

@greatslyfer I see the same thing as you in this exercise on Step 2…you’re not alone in your confusion. I came here to see if anyone else had mentioned this.

4 Likes

Could somebody please post the css for li?

The li CSS code in this project is:

li {
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
}

Tell me if you need the solution, this is what it looks like before you solve the problem.

1 Like

Thanks for the code. Try adding,

display: inline-block;

That should make things look more in order.

I have a glitch on page 5 of CSS Display and Positioning regarding the fixed position.
Here are the exercise instructions:
1.

In style.css , change the position inside of the header rule to fixed . Scroll up and down the web page. What do you notice?

2.

Notice that part of the “Welcome” section is now covered up by the header. That’s because when we changed the position of the header to fixed , we removed it from the flow of the html document. Let’s fix that. Change the position of the .welcome element to relative .

3.

Offset the “Welcome” section by 200 pixels from the top. Everything might not be displaying correctly just yet; we’ll fix it in a later exercise.

Page 6 regards the z-index, which is supposed to fix the overlap of the Q1 and the Welcome text. It did not, even though I did what is directed and got the next button to move forward. As I continue to move forward, the 2 text groups still overlay. Does anyone have a solution?! Here is a screenshot of the issue:
glitch screenshot|690x388

I had the same problem. For me it was fixed in a later lesson.

This lesson states “Block-level elements like these boxes create a block the full width of their parent elements”. I was a bit confused when it mentioned the width of their parent elements: is it so that the child elements can’t exceed the dimensions of the parent element?

Thanks

1 Like

The width of the parent is the horizontal constraint. A child element can stretch the height of the parent.

1 Like

In other words:

whereas →
block-level element’s width = parent element width (unless you specify an explicit width to the former).

inline element’s width = content’s width (regardless of parent element’s width)

With regards to exceeding the parent element’s dimensions: not really, that’s controlled with another property called overflow.

Nice illustration, great job

The block level diagram is hard to understand. Are the blue and green blocks, the div elements? If so, how can H1 and p be block-level elements when their parent elements don’t even fill the whole line?

Echoing other users here by noting that the block-level elements displayed in the browser for this task actually appear in the centre of the browser, not the left side as described. Surprised this error still exists given it was reported two years ago!