...
PDA

duplicate IDs page not validating

jarv
04-23-2011, 11:14 AM
hi,

in my page, I have multiple <div id="box">

I was just wondering what to use instead?! I changed them all to classes but that didn't work, changed then to <article> that didn't work ...and changed the style sheet too

here is my code


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Helix</title>
<link type="text/css" rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css" title="default" />
</head>
<body>
<div id="top">
<div id="topwrapper">
<a href="index.html"><div id="logo">
&nbsp;
</div></a>
<ul id="rightnav">
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="news.html" title="News">News</a></li>
<li><a href="services.html" title="Services">Services</a></li>
<li><a href="archive.html" title="Archives">Archive</a></li>
<li><a href="finishes.html" title="Finishes">Finishes</a></li>
<li><a href="showreel.html" title="Showreel">Showreel</a></li>
<li><a href="contact.html" title="Contact">Contact</a></li>
</ul>
<nav>
<ul>
<li><a href="events.html" title="HELIX EVENTS">HELIX EVENTS</a></li>
<li><a href="marketing.html" title="HELIX EXPERIENTIAL MARKETING">HELIX EXPERIENTIAL MARKETING</a></li>
<li><a href="film.html" title="HELIX FILM &AMP; TV SET CONSTRUCTION">HELIX FILM &AMP; TV SET CONSTRUCTION</a></li>
<li><a href="exhibitions.html" title="HELIX EXHIBITIONS">HELIX EXHIBITIONS</a></li>
<li><a href="interiors.html" title="HELIX COMMERCIAL INTERIORS" class="menuselected">HELIX COMMERCIAL INTERIORS</a></li>
</ul>
</nav>
<div class="line">&nbsp;</div>
</div>
</div>
<div id="content">
<section id="slider">
<div id="viewport">
<div id="container">
<div id="section-1" class="section">
<img src="images/hero_interiors.jpg">
</div>
</div>
</div>
</section>
<div class="line">&nbsp;</div>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="dashedlinetop">&nbsp;</div>
<div id="box">
<h1>01</h1>
<h2>Worship Street (FACEPARTY)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div id="titleloc">Title | Location</div>
<ul>
<li><strong>Some key stats here:</strong></li>
<li>- Lorem ipsum dolor</li>
<li>- Lorem ipsum dolor</li>
<li>- Lorem ipsum dolor</li>
<li>- Lorem ipsum dolor</li>
</ul>
<div id="casestudy1"><a href="#">CASE STUDY</a></div>
<div id="slideshow1" class="pics">
<img src="images/commercialInteriors/faceparty1.jpg" alt="1"/>
<img src="images/commercialInteriors/faceparty2.jpg" alt="2"/>
<img src="images/commercialInteriors/faceparty3.jpg" alt="3"/>
<img src="images/commercialInteriors/faceparty4.jpg" alt="4"/>
<img src="images/commercialInteriors/faceparty5.jpg" alt="5"/>
<img src="images/commercialInteriors/faceparty6.jpg" alt="6"/>
</div>
</div>
<div class="dashedlinebottom">&nbsp;</div>
<div class="dashedlinetop">&nbsp;</div>
<div id="box">
<h1>02</h1>
<h2>XFM</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div id="titleloc">Title | Location</div>
<ul>
<li><strong>Some key stats here:</strong></li>
<li>- Lorem ipsum dolor</li>
<li>- Lorem ipsum dolor</li>
<li>- Lorem ipsum dolor</li>
<li>- Lorem ipsum dolor</li>
</ul>
<div id="casestudy2"><a href="#">CASE STUDY</a></div>
<div id="slideshow2" class="pics">
<img src="images/commercialInteriors/xfm1.jpg" alt="1"/>
<img src="images/commercialInteriors/xfm2.jpg" alt="2"/>
<img src="images/commercialInteriors/xfm3.jpg" alt="3"/>
<img src="images/commercialInteriors/xfm4.jpg" alt="4"/>
<img src="images/commercialInteriors/xfm5.jpg" alt="5"/>
</div>
</div>
<div class="dashedlinebottom">&nbsp;</div>
<div class="dashedlinetop">&nbsp;</div>
<div id="box">
<h1>03</h1>
<h2>CLASSIC FM</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div id="titleloc">Title | Location</div>
<ul>
<li><strong>Some key stats here:</strong></li>
<li>- Lorem ipsum dolor</li>
<li>- Lorem ipsum dolor</li>
<li>- Lorem ipsum dolor</li>
<li>- Lorem ipsum dolor</li>
</ul>
<div id="casestudy3"><a href="#">CASE STUDY</a></div>
<div id="slideshow3" class="pics">
<img src="images/commercialInteriors/classic1.jpg" alt="1"/>
<img src="images/commercialInteriors/classic2.jpg" alt="2"/>
<img src="images/commercialInteriors/classic3.jpg" alt="3"/>
<img src="images/commercialInteriors/classic4.jpg" alt="4"/>
<img src="images/commercialInteriors/classic5.jpg" alt="5"/>
</div>
</div>
<div class="dashedlinebottom">&nbsp;</div>
<div class="dashedlinetop">&nbsp;</div>
<div id="box">
<h1>04</h1>
<h2>HOGARTH HOTEL</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div id="titleloc">Title | Location</div>
<ul>
<li><strong>Some key stats here:</strong></li>
<li>- Lorem ipsum dolor</li>
<li>- Lorem ipsum dolor</li>
<li>- Lorem ipsum dolor</li>
<li>- Lorem ipsum dolor</li>
</ul>
<div id="casestudy4"><a href="#">CASE STUDY</a></div>
<div id="slideshow4" class="pics">
<img src="images/commercialInteriors/hogarth1.jpg" alt="1"/>
<img src="images/commercialInteriors/hogarth2.jpg" alt="2"/>
<img src="images/commercialInteriors/hogarth3.jpg" alt="3"/>
<img src="images/commercialInteriors/hogarth4.jpg" alt="4"/>
</div>
</div>
<div class="dashedlinebottom">&nbsp;</div>
<div class="dashedlinetop">&nbsp;</div>
<div id="box">
<h1>05</h1>
<h2>SWAROVSKI</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div id="titleloc">Title | Location</div>
<ul>
<li><strong>Some key stats here:</strong></li>
<li>- Lorem ipsum dolor</li>
<li>- Lorem ipsum dolor</li>
<li>- Lorem ipsum dolor</li>
<li>- Lorem ipsum dolor</li>
</ul>
<div id="casestudy5"><a href="#">CASE STUDY</a></div>
<div id="slideshow5" class="pics">
<img src="images/commercialInteriors/swarovski1.jpg" alt="1"/>
<img src="images/commercialInteriors/swarovski2.jpg" alt="2"/>
<img src="images/commercialInteriors/swarovski3.jpg" alt="3"/>
<img src="images/commercialInteriors/swarovski4.jpg" alt="4"/>
<img src="images/commercialInteriors/swarovski5.jpg" alt="5"/>
</div>
</div>
<div class="dashedlinebottom">&nbsp;</div>
<footer>
<ul>
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="events.html" title="Events Design">Events Design</a></li>
<li><a href="marketing.html" title="Marketing Design">Marketing Design</a></li>
<li><a href="film.html" title="Film &amp; Set Design">Film &amp; Set Design</a></li>
<li><a href="exhibitions.html" title="Exhibition Design">Exhibition Design</a></li>
<li><a href="interiors.html" title="Commercial Interior Design">Commercial Interior Design</a></li>
<li><a href="#" title="Sitemap">Sitemap</a></li>
<li><a href="contact.html" title="Contact Helix Ltd">Contact Helix Ltd</a></li>
<li><a href="news.html" title="Latest Helix News">Latest Helix News</a></li>
<li><a href="careers.html" title="Careers">Careers</a></li>
</ul>
<div class="copyright">&copy;2011 Helix </div>
</footer>
</div> <!-- end content -->
</body>
</html>
bullant
04-23-2011, 11:18 AM
What error messages did you get when you changed them to classes?
_Aerospace_Eng_
04-23-2011, 03:20 PM
Changing them to classes should have worked as long as your changed your CSS as well to actually use a class. Chances are you didn't properly do the second part or you had a cached version of your CSS.
jarv
04-24-2011, 11:23 AM
no that didn't work, I also tried adding <div id="box1"><div id="box2"> and so on?!

I don't really care about the validation at the moment, I'd just like to fix the fact that the images are falling outside of the site when loaidng?!
abduraooft
04-24-2011, 02:40 PM
I don't really care about the validation at the moment, I'd just like to fix the fact that the images are falling outside of the site when loaidng?!
But the browsers and people who voluntarily try to help on your code may care :rolleyes:
Mooseman
04-24-2011, 11:37 PM
You are invalid because each Id should only be used once per document. For CSS styles use classes to validate. Since you are not using Javascript you just need to change every id="MyID" to class="MyClass" The CSS will be div.box instead of div#box.

Let me know if you need more help! :thumbsup:
johnktaylor
04-25-2011, 08:02 AM
One id should be used once on a page. You can call a class as many times on a page. But you cannot use the same ID on multiple times on a page

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum