SitePoint Sponsor

User Tag List

Page 4 of 4 FirstFirst 1234
Results 76 to 94 of 94
  1. #76
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  2. #77
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #78
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    <div>my world</div>
    then
    Code:
    div:before {
      content: "You are here:";
    }
    will add the text "You are here:" just before the div
    like this but in css
    Code:
    you are here:<div>my world</div>
    at least thats how i understand it.

  4. #79
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I'll post the new quiz on Friday after you have all had some well earned rest

  5. #80
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gracias, Yuri.
    I couldn't find it in my (Paul's and Tommy's) CSS Reference. (I have now on Page 113)

  6. #81
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    basically if you have a div
    Code:
    <div>my world</div>
    then
    Code:
    div:before {
      content: "You are here:";
    }
    will add the text "You are here:" just before the div
    like this but in css
    Code:
    you are here:<div>my world</div>
    at least thats how i understand it.
    Not quite. It's more like
    Code:
    <div><div:before>You are here:</div:before>my world</div>
    (although the generated content isn't actually in the DOM).
    Simon Pieters

  7. #82
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Not quite. It's more like
    Code:
    <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.

  8. #83
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by YuriKolovsky View Post
    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.)

    Quote Originally Posted by YuriKolovsky View Post
    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:
    Code CSS:
    #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:
    Code:
    <div>Normal div content<div:after>Generated content</div:after></div>
    Birnam wood is come to Dunsinane

  9. #84
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #85
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    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
    Simon Pieters

  11. #86
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #87
    SitePoint Addict aguroyz's Avatar
    Join Date
    Jan 2009
    Location
    Konoha Fire Country
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...
    Uniquely FILIPINO... See how talented and creative Filipinos are.
    http://www.smalltym.com
    Custom Web Designs:
    http://proweaver.com

  13. #88
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,179
    Mentioned
    234 Post(s)
    Tagged
    1 Thread(s)
    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

  14. #89
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan View Post
    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!
    Birnam wood is come to Dunsinane

  15. #90
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by aguroyz View Post
    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.

  16. #91
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...and don't have fast internet connections at home?
    I thought I was the last of the species.

  17. #92
    SitePoint Addict aguroyz's Avatar
    Join Date
    Jan 2009
    Location
    Konoha Fire Country
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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..
    Uniquely FILIPINO... See how talented and creative Filipinos are.
    http://www.smalltym.com
    Custom Web Designs:
    http://proweaver.com

  18. #93
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)

  19. #94
    Non-Member
    Join Date
    Dec 2008
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well I'm kinda lost here


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •