SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26

Hybrid View

  1. #1
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    adding semantic space?

    From the snippet below, what would be the best/semantic/most elegant way to set up this html so I can apply margin-bottom to the first two ul elements? The easiest but worst thing I think I could do is add a non-semantic class to those uls. Would that be ok in this situation?
    Code HTML4Strict:
    <style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			p{
    				font-weight: bold;
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    			<p>title</p>
    			<ul>
    				<li>item</li>
    				<li>item</li>
    				<li>item</li>
    			</ul>
    			<p>title</p>
    			<ul>
    				<li>item</li>
    				<li>item</li>
    			</ul>
    			<p>title</p>
    			<ul>
    				<li>item</li>
    				<li>item</li>
    			</ul>
    		</div>

  2. #2
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Since when is adding a class or ID non semantic, the whole point of classes and ID's is to signify that the element in question has style rules to be applied to it. It certainly does not take away the semantic meaning of the tag itself. Until CSS3 is implemented in all browsers and we can use class selectors, you are going to be stuck using classes and ID's for their specified purpose.

  3. #3
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    Since when is adding a class or ID non semantic, the whole point of classes and ID's is to signify that the element in question has style rules to be applied to it. It certainly does not take away the semantic meaning of the tag itself. Until CSS3 is implemented in all browsers and we can use class selectors, you are going to be stuck using classes and ID's for their specified purpose.
    My concern was that the name of the class would be unsemantic, such as class="bottomspace". I think Tommy solved that in post 3 with just applying class="last".

    What is the difference between CSS 3 class selectors and using the following that we can do now?
    .last{
    ....
    }

  4. #4
    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 tictike View Post
    What is the difference between CSS 3 class selectors and using the following that we can do now?
    I think he meant the additional pseudo-class selectors in CSS3, like :last-child, :nth-child(), :nth-last-of-type() et al.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Speaking of semantics, why are the titles marked up as paragraphs instead of headings?

    Anyway, why not something like this?
    Code HTML4Strict:
    <h1>Document Heading</h1>
    <h2>Title</h2>
    <ul>
      <li>item</li>
      <li>item</li>
    </ul>
    <h2>Title</h2>
    <ul>
      <li>item</li>
      <li>item</li>
    </ul>
    <h2>Title</h2>
    <ul class="last">
      <li>item</li>
      <li>item</li>
    </ul>
    Code CSS:
    * {margin:0; padding:0}
    ul {margin-bottom:1em}
    ul.last {margin-bottom:0}
    Birnam wood is come to Dunsinane

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    You could add a margin-top to each <p>, and then bring the first one back into place.

    Code css:
    div p {
        margin-top: 3em;
    }
    div+p {
        margin-top: 0em;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The div+p selector won't match anything in that example, Paul.
    You could use div>p:first-child, though.
    Birnam wood is come to Dunsinane

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    I could have sworn that div+p does the same job, as an adjacent selector
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But the P isn't an adjacent sibling to the DIV; it's a descendant (a child).

    Code HTML4Strict:
    <div>...</div>
    <p>...</p>
    Here the P is an adjacent sibling to the DIV, so div+p will match the P.
    Birnam wood is come to Dunsinane

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Curses, your right. It's interesting that some test code worked in Google Chrome.
    Still, back to the drawing board.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Read from the specification, it’s pretty self explanatory...

    http://www.w3.org/TR/css3-selectors/

    Under the subheading of psuedo selectors.

  12. #12
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Yes Cuckoo, thats why I posted the W3C spec link on psuedo selectors

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, Alex, you posted a link to the specification for the CSS3 selectors module, which includes all types of selector components, not only pseudo-classes.
    Birnam wood is come to Dunsinane

  14. #14
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    OK, now you’re just being picky because I clearly said on post 10 directly under the link to the relevent W3C page of the specification, "Under the subheading of pseudo selectors." which is pretty self explanatory

  15. #15
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    h2~h2+ul~ul {margin: 0}

    Being that this is only for a fixed example such as yours, you probably would not want to use something like this. I would just add class="last" as Tommy has shown.

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Considering ~ is a CSS3 selector just about every version of IE (and FF too I believe) has not implimented this. I'd just stick to last-child but IE7 doesn't support that!

    I just stick to classes for now.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  17. #17
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just about every version of IE (and FF too I believe) has not implimented this
    Incorrect, all versions of FF support this as well as Opera. IE7 is buggy.
    http://reference.sitepoint.com/css/g...iblingselector

    I'd just stick to last-child but IE7 doesn't support that!
    I would stay clear away from last child even if ie7 supported this.
    http://reference.sitepoint.com/css/p...lass-lastchild

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I was just doing a CSS quiz (don't remember which one) and I used ~ and I some browser didn't support it and I assumed ~ but maybe I was thinking about nth-child() or something like that. Hard to keep track of this stuff.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  19. #19
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    My concern was that the name of the class would be unsemantic, such as class="bottomspace". I think Tommy solved that in post 3 with just applying class="last".
    While you should strive to have meaningful names, there are times where the existence of a class is simply to add some space, to make a colour, or to add hair to Bob. I've tried using the names describing what's IN the lists but this meant a different class name for each list on each page, creating a monster:

    .contactlijst, .contactons, .makelaars, .requirements, .aanmaken, .waaromredenen, and on and on and on until there are hundreds of elmenets oh nooooooes {
    blah;
    }
    so that was out. It was cleaner to say something like (in this situation) .spacing {
    blah;
    }

    BUT!
    if later someone wants no spacing but something else on those, you'll get a name that doesn't match what they do:
    Boss:
    instead of a space, how about a border there?

    crap, now I've got a class called .spacing that makes a border (and this is the ONLY reason why names should be semantic, to tell YOU the developer why they're there... no single user agent will ever actually try to wrench meaning out of those class names! Not one!).

    You could also try the ridiculous list1, list2 stuff... but then you'll need comments to tell you what those classes are doing (today).

    I end up using mixtures of the above techniques. Sometimes I need a class on something to add a single style to it and there's no name that comes up.

    That doesn't mean I can't use a class! It means I'll pick a bad name for it, style it, and then come back in a few years and wonder what the hell was I doing? But ok, the styling was still done.

    You are only cutting your own throat with bad names, and possibly the throats of any other developers working with you or taking over later. Which is why if your code is never self-explanatory (as it normally should be with semantic class and id names), you have comments for teh confusled.

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    The class and id names should identify the purpose of that element, instead of what it contains.

    list1 is too generic and contactlist is too specific.

    When you need to style a single element, instead of coming up with a class name, consider why you want to style it. If it's because of a placement issue, then commonly newspaper-based names can come to your rescue. Caption, index, subhead, deck, kicker, lead, shorts, masthead, column

    http://visual.merriam-webster.com/co...ewspaper_1.php
    http://visual.merriam-webster.com/co...ewspaper_2.php
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #21
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Believe me, I wracked my brains trying to figure out the best course for each situation.

    Often the reason it needed to be styled was,
    Designer: "Can you make a little more space on this line, but not on that line? And center this row of selects but not that one? Cause I think it looks better."
    Boss: "Can we make this little piece of text bigger? My mother had trouble reading that but not the other text."
    Colleague: "Can we make that a flexible row of selects that wrap when the browser window is shrunk? So they all expand out in a row on my wide screen?"

    And it becomes a downward spiral. I've added and deleted divs in forms called "rij" (row) because the stuff inside wasn't to conform any more to the regular form styles every other form (of the 30) on the site. And then he changes his mind again.

    Sometimes you just have no good name for something. And maybe like a month later you think of a good name that works. Sometimes it's just like that.

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    I agree with you that such inconsistent requests make the development much more difficult to perform. Sometimes it helps to have the person rationalize their reasons for wanting the change. For example, where the boss wants the text bigger because his mother had trouble reading it. Other people may have trouble reading other smaller text, so the whole lot should be pushed up instead. Not just that one piece.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Yeah, that one was an example out my butt, as actually my text is always too large so my boss' mom says she appreciates the whole site (I have a large monitor and end up making my fonts rather large lawlz). Pissing off the kids and the iMac-toting black-turtleneck designer crowd usually.

    But what I meant was, the styles are sometimes rather random, something "looks better" over there but not here or whatever. Those are when I get stupid class names-- and I'm not disagreeing that they're bad. They're very bad : )

  24. #24
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Dare I suggest this, but for future events would it help to gain some advice from the people in the css forum? They live and breathe this stuff so are well placed to suggest acceptable compromises, or restructuring where required to achieve the desired end result with the least semantic issues.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  25. #25
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You may dare : ) and I do, usually starting out thinking what someone said won't work or doesn't apply, but then about a month later it makes perfect sense.

    It takes some time to filter through the weeds in my brain.


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
  •