Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question duplicate IDs page not validating

    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

    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>

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    What error messages did you get when you changed them to classes?

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    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?!

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Regular Coder Mooseman's Avatar
    Join Date
    Sep 2010
    Posts
    123
    Thanks
    7
    Thanked 3 Times in 3 Posts

    Cool

    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!

  • #7
    New Coder
    Join Date
    Apr 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •