Problem with validating DIVs

  • davenewt
  • Graduate
  • Graduate
  • User avatar
  • Posts: 160

Post 3+ Months Ago

Hi folks.

Validating some HTML this morning, and have a question about DIVs.

I have a php block in my html which outputs news items from a database. Each item is enclosed in
Code: [ Select ]
<DIV id="newsItem">news here</div>
but the validator complains when there is more than one news item, and hence the "newsItem" div is defined more than once on the same page. Even though it isn't nested or anything (DIVs are definitely closed before the next is opened).

Had a look at the HTML 4.01 spec and noted the DIV example which gives a different id but the same class, so changed my generated code to
Code: [ Select ]
<DIV id="newsX" class="newsItem">news here</DIV>
(where X is a unique php-generated number as it steps through the news database) and the validator seems happy with it, but the resulting display changes (using the original code, I had a border displayed around the DIV... with the changed code, this border and padding disappears).

Any clues as to what I can do to get valid code which also displays as intended?

Thanks 8)
Dave.
  • jerryscs
  • Novice
  • Novice
  • User avatar
  • Posts: 27
  • Loc: Okinawa, Japan

Post 3+ Months Ago

I don't know if this will help or not, but I am also working on a site where I store all of the content into a database, and pull up that information when the page loads up. For all of my news information, this is how I do it...

Code: [ Select ]
for($i = 0; $i < $numResult; $i++)
    {
        $row = mysql_fetch_array($result);
        $content .= "<div class='news_title_ja'>".stripslashes($row['news_title_ja'])."</div>";
        $content .= "<div class='news_body_ja'>".stripslashes($row['news_body_ja'])."</div>";
        $content .= "<div class='news_extended_ja'>".stripslashes($row['news_extended_ja'])."</div>";
        $content .= "<div class='news_datetime_ja'><p>".stripslashes($row['news_datetime_posted_ja'])."</p></div>";
    }
  1. for($i = 0; $i < $numResult; $i++)
  2.     {
  3.         $row = mysql_fetch_array($result);
  4.         $content .= "<div class='news_title_ja'>".stripslashes($row['news_title_ja'])."</div>";
  5.         $content .= "<div class='news_body_ja'>".stripslashes($row['news_body_ja'])."</div>";
  6.         $content .= "<div class='news_extended_ja'>".stripslashes($row['news_extended_ja'])."</div>";
  7.         $content .= "<div class='news_datetime_ja'><p>".stripslashes($row['news_datetime_posted_ja'])."</p></div>";
  8.     }


Then, when I am ready to display it to the screen I am doing this...

Code: [ Select ]
print "<div class='content'>$content</div>\n";


I don't know about page validation. All I do is try it, test it in multiple browsers and if it works...I'm happy. Hopefully some of that helps out.

Jerry
  • davenewt
  • Graduate
  • Graduate
  • User avatar
  • Posts: 160

Post 3+ Months Ago

Cool, thanks for the info Jerry. Could well come in useful later on when I do more stuff with databases :)

Actually, it turns out all I needed to do was change a character in my style sheet... from
Code: [ Select ]
#newsItem {...}
to
Code: [ Select ]
.newsItem {...}
as it is now referenced with the CLASS tag as opposed to the ID tag within the DIV.

One of these days I might actually get my head around css! :)

Cheers,
Dave.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Quote:
One of these days I might actually get my head around css!

You'll get it. It takes time, but you'll get it.

Just make sure you don't catch divitis in the meantime. Divitis is just as bad as table based design.

For instance, if you're working with a title, give it a header tag (h1-h6), don't put it in a div with a class of title. Etc.

You'll be amazed how simple code gets when you start coding with semantics.

Good article: http://brainstormsandraves.com/articles ... structure/
  • davenewt
  • Graduate
  • Graduate
  • User avatar
  • Posts: 160

Post 3+ Months Ago

Thanks gsv2com. Don't know what you mean about divitis... I mean, all my headings are... er... ok, you got me. They're not h1's but that's easy to put right.

For the most part I've re-defined common elements like ULs, LIs and so on... but I didn't do this with the headings. I put this down to the fact I had to hit the ground running when putting together this site. Last time I was coding HTML there was no such thing as CSS and most people's eyes went fuzzy when you asked if they had a website :shock:

Aside: Coincidence you should happen to post... Only a few minutes ago at lunch I was talking to my girlfriend about learning Japanese :) Know any good places to start?

Later, and thanks again!
Dave 8) (hope smileyitis is okay!)
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Divitis is a disease a lot of people (including myself) catch when they first begin learning css. Div this, div that, etc. :) When you code for semantics, you put visual appearance second and the actual meaning of code first. For instance, a header should be h1, a paragraph should be p, emphasized text should be em not i or strong instead of b.

Read the article I posted a link to. It's great stuff. Not only does it clean up your code, it gives it meaning. And search engines give higher priority to header tags, so if your website used h1 for the header (and included keywords) and your competition used the same text but put it in a div with a class of header with the same keywords, it'd get a lower search engine ranking (probably). I say probably because search engine optimization is a subject apart. You'll want to get into that when you can as well.

Not only that, but symantically designed websites work better for people with disabilities such as blindness. Blind people use vocal readers to visit websites. Would a vocal reader know what bold means? No, but it would know that text surrounded by the < strong > tag should be read in a strong voice and that text surrounded by an < em > tag should be emphasized. etc.

Anyway, screw around with divs. They're great for layout. Just make sure you don't overdo it. Or try not to, at least. Divitis is a disease everyone gets at least once--like chicken pox. Once you get a handle on coding for semantics, you'll be "immune" (probably) to divitis. :lol:

As far as learning Japanese, I don't really have any great recommendations aside from moving to Japan and marrying a local Japanese girl. :lol: That's what I did! But, I see you have a girlfriend, so, a better idea would be to make as many Japanese friends as possible and learn from them. The only way to learn Japanese is to get out of your comfort zone. Heck, I'm having trouble with Japanese and I've lived here for 20+ years! *shame on me* I put too much of my time into programming and not enough into learning the local language. *slaps self in face*
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

BTW, I first heard the term "divitis" coined in Zeldman's book "coding for web standards". Cool term though.

PS, you can probably tell I've got a case of smilyitis as well. I love those things. Except when I'm p*ssed off. Then I overuse this one: :evil: :twisted: :evil: :twisted:

:lol:

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 25 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.