SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 26
Thread: adding semantic space?
-
Feb 26, 2009, 20:51 #1
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>
-
Feb 26, 2009, 21:33 #2
- 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.
-
Feb 27, 2009, 00:59 #3
- 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
-
Feb 27, 2009, 02:08 #4
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 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
-
Feb 27, 2009, 02:19 #5
- 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
-
Feb 27, 2009, 02:34 #6
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 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
-
Feb 27, 2009, 02:51 #7
- 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>
Birnam wood is come to Dunsinane
-
Feb 27, 2009, 02:54 #8
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 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
-
Feb 27, 2009, 21:26 #9
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{
....
}
-
Feb 27, 2009, 22:41 #10
- 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.
-
Feb 27, 2009, 23:45 #11
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Feb 28, 2009, 01:06 #12
- 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
-
Mar 1, 2009, 10:34 #13
- 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
-
Mar 1, 2009, 14:59 #14
- 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
-
Mar 3, 2009, 14:38 #15
- 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.
-
Mar 3, 2009, 15:08 #16
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 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
-
Mar 3, 2009, 15:24 #17
- 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
http://reference.sitepoint.com/css/g...iblingselector
I'd just stick to last-child but IE7 doesn't support that!
http://reference.sitepoint.com/css/p...lass-lastchild
-
Mar 3, 2009, 15:41 #18
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 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
-
Mar 5, 2009, 08:02 #19
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 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".
.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.
-
Mar 5, 2009, 08:09 #20
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 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.phpProgramming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Mar 5, 2009, 08:58 #21
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 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.
-
Mar 5, 2009, 09:08 #22
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 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
-
Mar 5, 2009, 09:26 #23
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 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 : )
-
Mar 5, 2009, 09:28 #24
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 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
-
Mar 5, 2009, 09:49 #25
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 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