SitePoint Sponsor

User Tag List

Page 2 of 6 FirstFirst 123456 LastLast
Results 26 to 50 of 136
  1. #26
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Czaries - If you name your parent div to 'news' for example everything inside should describe something involved with 'news'.

    If you think they are going to sway away from 'news' entirely, then I would tell you to name your parent div more generically with 'semantics' still in mind.

    Also, take note that you can change the <div id="headline"><strong>... to whatever you please.

    I think you should be able to 'change' the summary 'headline' with CMS:

    <div id="summary"><strong>CMS ME</strong></div>

    If the content within strong is CMS'd I feel it would give the user more of a feeling for what he/she is trying to convey.

  2. #27
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luke Morton View Post
    I am not too sure why everyone is being so argumentative. cooper.semantics has put forward a good way of reducing clutter of div tags when creating a four cornered content box.

    Why would you still continue to add clutter with excessive div tags when instead you could use something that makes more semantic sense?

    If you are going to have CMS driven content then what is the problem with making it so that this does work with your system. By making sure there is a title at the top of the content box to describe what is in it. Such as:

    Code HTML4Strict:
    <div id="news">
        <div id="headline"><strong>News article</strong></div>
        <div class="content">
            <p>A long descriptive paragraph that will continue for a long time.</p>
     
            <h3>Prices Raise</h3>
            <p>A long descriptive paragraph...</p>
     
            <h2>Stock Market Drops</h2>
            <p>A long descriptive paragraph...</p>
        </div>
    </div>

    Surely most posts/articles will have a title, so you say what if its for a page section which would not have a title, well then you describe what is contained within the box:

    Code HTML4Strict:
    <div id="main-content">
        <div class="content-description"><span>Information on runner beans</span></div>
        <div class="content">
            <p>A long descriptive paragraph that will continue for a long time.</p>
     
            <h3>Beans taste nice!</h3>
            <p>A long descriptive paragraph...</p>
    </div>
    </div>

    And then simply hide the span in the content-description.
    Exactly!

  3. #28
    SitePoint Guru
    Join Date
    Sep 2004
    Posts
    613
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    You can assign a class to the first child element. If even that's not feasible, then use the power of CSS:
    Code CSS:
    #news *:first-child {
      ...
    }
    Doesn't that not work in IE?

  4. #29
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use a css expression for first-child regarding ie6.

    Code:
    <ul id="primary-navigation">
      <li><a href="/" title="Home" accesskey="0">Home</a></li>
      <li><a href="about.html" title="About" accesskey="1">About</a></li>
      <li><a href="services.html" title="Services" accesskey="2">Services</a></li>
      <li><a href="contact.html" title="Contact" accesskey="3">Contact</a></li>
    </ul>
    Code CSS:
    #primary-navigation li { border: expression((this==this.parentNode.firstChild)? "1px solid #000":"0"); }

    CSS expressions do not validate though

  5. #30
    SitePoint Guru
    Join Date
    Sep 2004
    Posts
    613
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does that work in IE 7?

  6. #31
    SitePoint Guru
    Join Date
    Sep 2004
    Posts
    613
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  7. #32
    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 Webnet View Post
    Doesn't that not work in IE?
    Yes, but that's not my fault, is it?
    Birnam wood is come to Dunsinane

  8. #33
    SitePoint Wizard
    Join Date
    Mar 2008
    Posts
    1,149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I layout my tags, I like to do it in a way where the site is still usable without styling. Browsers have default style sheets, and while it may not be beautiful, sections are clearly obvious because their font sizes are larger (because they're a header, etc.). In this aspect, I try to use as many relevant (X)HTML tags as possible to describe information, but I fall back to DIVs when necessary. If I have hierarchical tag structure for a news block and it looks clobbered together when I disable the style sheet, then I feel that I have done something wrong.

    The names of elements have no impact, no parser is going to use that extra semantic information, and so I don't bother concerning myself with those tiny things. However, I do feel bothered if I have DIVs within a parent DIV that have a prefix, such as "news-XXXX", because I'm going to ultimately reduce the number of re-usable CSS classes.

    If you particularly cared about perfectly semantic code, you have XML and XLST transformations for that.

  9. #34
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sk89q View Post
    If you particularly cared about perfectly semantic code, you have XML and XLST transformations for that.
    Who says I don't

  10. #35
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stormrider View Post
    What if the box has no heading? You just want a box with rounded corners and some content, but no heading?
    Then you change your styles accordingly!! What on earth is the problem.. people are saying, "oh, what if it doesn't start with an H2" - well if it doesn't then you're gonna have to change the CSS - styles come after content!
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  11. #36
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <div class="boxed">
     blabla
      <div class="ul"></div>
      <div class="bl"></div>
      <div class="ur"></div>
      <div class="br"></div>
    </div>
    Code CSS:
    .boxed{position:relative}
    .boxed .ul, .boxed.bl, .boxed .ur, .boxed .br{position:absolute;width:?px;height:?px}
    .boxed .ul{background-image:url("ul.kikoo");top:0;left:0}
    .boxed .ur{background-image:url("ur.kikoo");top:0;right:0}
    .boxed .bl{background-image:url("bl.kikoo");bottom:0;left:0}
    .boxed .br{background-image:url("br.kikoo");bottom:0;right:0}
    Simple, easy and not too much overhead (easy to change when the majority of browsers implement CSS 3.

    But I agree with the OP : the dream of totally separating content and style is just a dream atm. We can't have complex layout without changing the html. At least, if we want it to be visible in the majority of browsers : just with CSS 2.1 there're a lot of possibilities.

  12. #37
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    I think styles are polluting our minds in the sense of 'forgetting' the whole concept of separation. What happened to the new era of css(presentation) and html(data)???

    I know sometimes an extra span must be used to achieve a certain effect but, with an example such as <div class="tr>... there is no need for such a fiasco!

    Would an example as such be worse than building a website with a table-layout?

    I feel like this is a slap on the mouth of mother semantics

    This is an example approach I have seen for rounded corners.

    Common Approach:
    Code HTML4Strict:
    <div class="tr">
    	<div class="br">
    		<div class="tl">
    			<div class="bl">
    				<p>This is a paragraph that is...</p>
    			</div>
    		</div>
    	</div>
    </div>

    Correct Approach:
    Code HTML4Strict:
    <div id="news"><!-- br -->
    	<h2><span>News</span></h2><!-- tr/tl -->
    	<p>...</p> <!-- bl -->
    </div>

    As others have said, that leads to problems when you want to change the content of the block with rounded corners.

    There's no need to use quite so much code as you did in your first example.
    It would be much simpler and leaner to use:
    Code HTML4Strict:
    <div class="roundedcorners"><div><div><div>
    ...content goes here, with headings, paragraphs, whatever...
    </div></div></div></div>
    and then use direct descendent selectors, so your css looks like
    Code CSS:
    div.roundedcorners {...declarations for top left...}
    div.roundedcorners > div {...declarations for top right...}
    div.roundedcorners > div > div {...declarations for bottom left...}
    div.roundedcorners > div > div > div {...declarations for bottom right...}
    That will also make it easier to null out the divs you don't need as and when you can use a single class on a single element to get the effect you want.

  13. #38
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Stevie D, @Arkh - Since both of your posts are relevant I decided I would include you both. Your whole concept of html/css separation just went down the drain. Remember 'naming convention' needs to be semantic as well. Your examples are HIGHLY presentational and I would strongly have to disagree.

  14. #39
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Stevie D -

    Code:
    <div class="roundedcorners"><div><div><div>
    ...content goes here, with headings, paragraphs, whatever...
    </div></div></div></div>
    ==

    Code:
    <div class="tr">
        <div class="br">
            <div class="tl">
                <div class="bl">
                    <p>This is a paragraph that is...</p>
                </div>
            </div>
        </div>
    </div>
    Without the class names. Count your divisions please

  15. #40
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    @Stevie D, @Arkh - Since both of your posts are relevant I decided I would include you both. Your whole concept of html/css separation just went down the drain. Remember 'naming convention' needs to be semantic as well. Your examples are HIGHLY presentational and I would strongly have to disagree.
    In that case, call the div "box" or "item" or something else if "roundedcorners" bothers you. The principle is still sound - have just one classed div and then use three child selectors as 'styling hooks'. These don't need to be classed at all, which makes it much more flexible to change the design and not end up with mismatching class names.

    I would say this gives a much better separation of style and content than a setup where you have to sequence a set of headings, divs and paragraphs in the right order to get the borders to match - at least this way the borders are all taken care of before you get to the content.

    Yes, there may be some circumstances where it is safe to tie in a heading, paragraph and span to supplying parts of the border, background or corners, but in many situations this is (a) dangerous, because you can't control the content without putting unnecessary restrictions on client editing, and (b) difficult, because it means the styles are not as flexibly reusable, and you might end up having to create multiple sets of rounded corner styles to match each usage case.

    I know there is no ideal solution to this, because the complexity of providing rounded corners in CSS1 and CSS2 means that multiple elements are involved when they shouldn't need to be, but I think the solution I've offered (barring maybe the class name used) is as close to semantically correct as possible while retaining full flexibility.

  16. #41
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Stevie D - Except for one thing, It does not work in ie6

  17. #42
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What happened to semantics and seperation of the concerns!??

    Code html4strict:
    <div class="boxed">
          blabla
           <div class="ul"></div>
           <div class="bl"></div>
           <div class="ur"></div>
           <div class="br"></div>
    </div>

    This is a typical school boy technique! Totally wrong!
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  18. #43
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    What happened to semantics and seperation of the concerns!??

    Code html4strict:
    <div class="boxed">
          blabla
           <div class="ul"></div>
           <div class="bl"></div>
           <div class="ur"></div>
           <div class="br"></div>
    </div>

    This is a typical school boy technique! Totally wrong!
    Jimmy you are 100% correct

  19. #44
    Twitter - @CarlBeckel busy's Avatar
    Join Date
    May 2004
    Location
    Richmond, VA, USA
    Posts
    819
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I always try to do it cooper's way. And the problems that others have mentioned do come up, but they seem to come up less and less with more modern browsers.

    There is also another side affect of properly using semantics, it makes you a better website designer. Once you get into the habit of constantly thinking semantics the whole way websites go together just makes more sense to you. It's unfortunate that it's not always practical (or sometimes even possible) to do it that way yet, but luckily the more people that push for it the sooner it will happen, so I'm very happy to see threads like this.

  20. #45
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I always fall back on the actual HTML used at CSSzengarden for an example of how you should write. I know they espouse using "light code" instead when writing HTML, but HELL! Isn't what they do on their site exactly what you want to be able to do on yours? Decide three years later that you want to completely reskin your website without having to rewrite all your webpages?

    If you're actually building a webpage, there are two concerns and certainly they're contradictory but...

    1) You have to build a page that you can modify later simply by adding new images to your image folder and adjusting the stylesheet. Code separation is critical to effect this. Otherwise, there is no point to using CSS at all. You have to rebuild the entire site when you redesign or make changes anyway.

    2) You have to be able to hook whatever CSS you want into the generic HTML, so it will inevitably look at least somewhat overbuilt. Four divs just to insert rounded corners is absolutely pathetic, but I hate it just as much when people complain about divitis in situations where it compromises a pages future maintainability. That is customizing (by removing) all HTML not required for a particular stylesheet. That is just as much particularizing a page for styles as inserting four purely presentational divs.

    That's why you should write POSH, and then worry about how to style it later. POSH creates highly semantic page organization and id/class names. The look of the page is the concern of your CSS design phase. It should never even enter your head when you're writing the webpage.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  21. #46
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    That's why you should write POSH, and then worry about how to style it later. POSH creates highly semantic page organization and id/class names. The look of the page is the concern of your CSS design phase. It should never even enter your head when you're writing the webpage.
    The code way below started out as this:
    Code:
    <div id="main"> 
      <h3>Welkom</h3>
      <p>Welkom op de website van BLAH. BLAH is al ruim 65 jaar een erkend tussenpersoon in verzekeringen en financi&#235;le dienstverlening.</p>
      <h3>Over BLAH</h3>
      <p>more blah</p>
    That starts out POSH, but later, when styles were getting applied, sandbags appeared.

    I have a site that, to get around images, uses deathshadow's variation on the extra sandbags for rounded corners. You do not need a class on every box, only the first.

    Code:
    <div id="main" class="rond"> 
    	  <b class="boven"><b><b><b></b></b></b></b>
              <h3>Welkom</h3>
              <p>Welkom op de website van BLAH. BLAH is al ruim 65 jaar een erkend tussenpersoon in verzekeringen en financi&#235;le dienstverlening.</p>
    	  <b class="boven"><b><b><b></b></b></b></b>
    	  <h3>Over BLAH</h3>
                   <p>more blah</p>
    Code:
    /*stompe hoeken, Jason Knight*/
    body[id=blah] .rond { 
      position: relative;
    } 
    /* html .rond {height: 1&#37;;}*/
    
    	body[id=blah] .boven, body[id=guis] .boven b { 
      	  display: block; 
      	  font: normal 1px/1px sans-serif;/*IE*/ 
      	  position: relative;  
    	} 
    	body[id=blah] .rond .boven { 
      	  margin: 0 5px; 
      	  height: 4px; 
    	} 
    	body[id=blah] .rond .boven, body[id=guis] .rond .boven b {
      	  padding-top: 1px; 
      	  color: #fff; 
      	  background-color: #0d1b35;
    	} 
    	body[id=blah] .rond .boven b { 
      	  margin: 0 -2px; 
      	  height: 3px; 
    	}
    	body[id=blah] .rond .boven b b { 
      	  margin: 0 -1px; 
      	  height: 2px; 
    	} 
    	body[id=blah] .rond .boven b b b { 
      	  height: 1px; 
    	} 
    /*eind hoeken*/
    Note, the body id=blah thing is because this is a bloated stylesheet to send a completely different design to IE6.

    The b's aren't semantic. They're called sandbags. They aren't content anymore than wrapping divs (<div id="wrapper">) are content. Being that they are NOT content, they do not have anything to do with semantics. They could have been spans or divs or whatever, though I think inlines are better for this sort of thing.

    The code above is NOT being being wrung through a CMS of any sort, however when I'm gone from this company, the boss will still want to change stuff.
    Jimmy Paddy asked why it was so hard to just change the styles. Because my boss cannot change styles, any more than he can write PHP, Javascript, or Perl. He needs nerds for that, and I'm not going to be around forever. Additionally, it would be *really nice* if he could just open a text editor and change text without NEEDING to change styles-- that's what you strive for when you build boxes for non-nerds.

    Were this my OWN PAGE then I would follow more Cooper's direction, as I can indeed change my styles and HTML to suit, and can AFFORD to hook styles on already-present-and-semantic elements. Each way has its reasons.

    If your non-nerd client has to keep coming back to you every time they want a SMALL content change, you've failed. Or at least, I'd give them their money back, if I told them it was a flexible page and they could pump whatever content with their goofy Turdpress or whatever. Sandbags are safer for that situation.
    Quote Originally Posted by Tommy
    Quote Originally Posted by Webnet
    Doesn't that not work in IE?
    Yes, but that's not my fault, is it?
    Much as we'd like, we cannot force everyone to switch to a certain Norwegian browser : )

  22. #47
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    What happened to semantics and seperation of the concerns!??

    Code html4strict:
    <div class="boxed">
          blabla
           <div class="ul"></div>
           <div class="bl"></div>
           <div class="ur"></div>
           <div class="br"></div>
    </div>

    This is a typical school boy technique! Totally wrong!
    It's why my post didn't contain only that.

    - presentation / content separation
    - "complex" layout
    - IE6 and 7 compatibility

    Take 2.

    PS : aren't div and span semantic neutral ?

  23. #48
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I spend a lot of time making CMS themes and oftentimes, you have no guarantee whatsoever that certain HTML elements will load in the block, so you will need to add some tags that really have no business there.

    Unlike your example, I prefer to add empty divs in the end of the main container, and positioning them absolutely. That way I can give the cornerstones fixed dimensions and I can use compact CSS sprites to improve loadtime and server performance.

    Like this:

    Code:
    <div class="block>
    <div class="block-inner">
    
      <?php print $block->content; ?>
      <div class="cornerstone b1"></div>
      <div class="cornerstone b2"></div>
    
    </div><!-- end .block-inner -->
    </div><!-- end .block -->
    Code:
    .block {
    position:relative;
    width:400px;
    background:url(slidingdoor-roundedcorner-gradient.gif) no-repeat top left;
    }
    
    .block-inner {
    width:100&#37;;
    background:url(slidingdoorEND-roundedcorner-gradient.gif) no-repeat top right;
    }
    
    .cornerstone {
    position:absolute;
    width:5px;
    height:5px;
    bottom:0;
    background:url(cornerstone1.gif) no-repeat;
    }
    
    .cornerstone.b1 { /*ie6 will only read the last of multiple classes but thats fine here, =for readability */
    left:0;
    }
    .cornerstone.b2 {
    right:0;
    background-image:url(cornerstone2.gif);
    }
    This is not going to change until browser finally will support multiple background images (really, how difficult can it be :S).

  24. #49
    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 Stomme poes View Post
    Much as we'd like, we cannot force everyone to switch to a certain Norwegian browser : )
    My comment may perhaps be interpreted the wrong way. It was meant with a chuckle.

    Quote Originally Posted by Arkh View Post
    aren't div and span semantic neutral ?
    Yes, they are, but that doesn't mean you should insert them willy-nilly.

    A div denotes a division of the page: a section that is somehow a unit that is slightly separate from the rest of the content. An empty div is semantically wrong, if you take a zealot's view of things.

    Similarly, a span denotes a span of characters with some special semantics that cannot be expressed via any available HTML element type. An empty span can be seen as an error, or at least a degenerated case (can something 'span' zero characters?).
    Birnam wood is come to Dunsinane

  25. #50
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post

    A div denotes a division of the page: a section that is somehow a unit that is slightly separate from the rest of the content. An empty div is semantically wrong, if you take a zealot's view of things.
    Do you think an empty div is worse than wrapping 4 divs around a heading?

    Of course both are ludacris from a semantical standpoint of view but of course theres the matter of the browser. I do remember something about putting "&nbsp;" in empty structural elements, or empty table cells... back in the days of ie5.5 maybe.


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
  •