CSS - Test Your CSS Skills Number 11

[YuriKolovsky]

I need to tell it to the world... I am need to go back to school and learn reading... either that, or I need some holidays and read more slowly...

I thought I couldn't use any type of positioning at all!

So none of my solutions included any positioning... One of them is based on display (table, table-cell, etc) and the other one was based solely on the use of margins and paddings...

I think that I am going to have a few drinks now. I think I need it. You can't get it worse than this

you are not the only one who finds it hard to read and understand, i usually read it from 2-3 times before actually understanding Paul's quizzes.

[ornette]

Thanks Paul,
I liked YuriKolovsky's and Centauri's solutions because they were simpler. I never thought about the body height for the horizontal line, now I'll never forget.
Can you give an explanation of the ..before rule that is used in some of the solutions, I can't find it in any reference books I've got on the subject.
Thanks

[YuriKolovsky]

Thanks Paul,
I liked YuriKolovsky's and Centauri's solutions because they were simpler. I never thought about the body height for the horizontal line, now I'll never forget.
Can you give an explanation of the ..before rule that is used in some of the solutions, I can't find it in any reference books I've got on the subject.
Thanks

YAY!!
someone liked my solution!!
me now uber happy.

edit: here is a reference of the before rule (paul has this on his signature)
http://reference.sitepoint.com/css/pseudoelement-before

basically if you have a div

<div>my world</div>

then

div:before {
  content: "You are here:";
}

will add the text "You are here:" just before the div
like this but in css

you are here:<div>my world</div>

at least thats how i understand it.

[Paul O'B]

I'll post the new quiz on Friday after you have all had some well earned rest

[ornette]

Gracias, Yuri.
I couldn't find it in my (Paul's and Tommy's) CSS Reference. (I have now on Page 113)

[zcorpan]

basically if you have a div

<div>my world</div>

then

div:before {
  content: "You are here:";
}

will add the text "You are here:" just before the div
like this but in css

you are here:<div>my world</div>

at least thats how i understand it.

Not quite. It's more like

<div><div:before>You are here:</div:before>my world</div>

(although the generated content isn't actually in the DOM).

[YuriKolovsky]

Not quite. It's more like

<div><div:before>You are here:</div:before>my world</div>

(although the generated content isn't actually in the DOM).

thanks for clearing that up.
but you say that the css generated content will be within the div, not outside?

but a question comes up:
div's have display:block set by default (don't they?)
while the div:before does not.
i think.

although the "not in DOM" kills its usefulness for me.

[AutisticCuckoo]

but you say that the css generated content will be within the div, not outside?

Yes, that's how you should think of it. As Simon said, the generated content isn't inserted in the DOM tree, so you won't find it with JavaScript/DOM methods. It shouldn't be: CSS is for presentational purposes only; content belongs in the HTML.

Here's an approximate description of how browsers handle a page request:

They first parse markup and create a DOM tree comprised of a hierarchical structure of nodes. Then they apply the CSS and transform the result into a similar structure of boxes, which are then rendered to the output medium. Content generated via CSS (the content property) appears in the 'CSS box tree', not in the 'markup DOM tree'. If that makes any sense.

(Simon will probably point out that my description is utterly wrong, but I find it a helpful way of thinking about the process anyway.)

but a question comes up:
div's have display:block set by default (don't they?)
while the div:before does not.
i think.

Yes, div elements are declared to use display:block in the user agent style sheets (the browsers' built-in style sheets). Thus they generate block boxes, unless you say differently.

The generated content generates a subordinate box to the div's block box. The display property is not inherited and the initial value is inline. Therefore the generated content generates an inline box (unless you say differently). You can change this by declaring a different box type:

#mydiv:before {
  content:"Hello, World!";
  display:box;
}

BTW, content generated with a :after pseudo-class works in an analogous fashion. Using the same pseudo-markup as Simon did above:

<div>Normal div content<div:after>Generated content</div:after></div>

[YuriKolovsky]

thanks Tommy (AutisticCuckoo)
that cleared up the whole mess in my head.

although the html DOM, css DOM part i already knew, its still very useful.

thought: it seems you had a LOT of practice explaining all that.

[zcorpan]

Here's an approximate description of how browsers handle a page request:

They first parse markup and create a DOM tree comprised of a hierarchical structure of nodes. Then they apply the CSS and transform the result into a similar structure of boxes, which are then rendered to the output medium. Content generated via CSS (the content property) appears in the 'CSS box tree', not in the 'markup DOM tree'. If that makes any sense.

(Simon will probably point out that my description is utterly wrong, but I find it a helpful way of thinking about the process anyway.)

Actually I think it's a pretty accurate description, except that it's much more complicated and there are more steps to it, but I'm not sure it's useful to know as a Web developer.

Here's a presentation about this area from a Mozilla developer for those who are interested: http://www.youtube.com/watch?v=a2_6bGNZ7bA

[YuriKolovsky]

Actually I think it's a pretty accurate description, except that it's much more complicated and there are more steps to it, but I'm not sure it's useful to know as a Web developer.

everything is useful to know as a developer, you'll never know when you need it.
ah, and thanks for the video link.

[aguroyz]

I just knew it my work will not be posted... hehehe

It was not that good though..

How could I have not thought of using a bottom-border for the line... wahaha I was even planning to break the rule and use the hr tag... aheheh

I need to imagine more...

[molona]

I used and image and the background property, so I guess I was out anyway... although I did follow the rules by no adding any html at all

[AutisticCuckoo]

Here's a presentation about this area from a Mozilla developer for those who are interested: http://www.youtube.com/watch?v=a2_6bGNZ7bA

Any chance of an accessible version for those of us who aren't allowed to watch television over the 'Net at the office and don't have fast internet connections at home?

I was thinking more like … text, perhaps? A novel concept on today's Web, I know.
But I'm old enough to actually have been taught how to read at school!

[Paul O'B]

I just knew it my work will not be posted... hehehe

It was not that good though..

Sorry, I didn't post it but feel free to post it yourself . It wasn't quite symmetrical but thanks for trying anyway.

[ornette]

...and don't have fast internet connections at home?

I thought I was the last of the species.

[aguroyz]

Sorry, I didn't post it but feel free to post it yourself . It wasn't quite symmetrical but thanks for trying anyway.

It's ok pol, I honestly did not want it to be posted anywayz... heheh tnx

looking forward for the next quiz..

[Paul O'B]

New quiz now posted

[1tigerlivejob]

well I'm kinda lost here