|
||||
alignment is out of place on loadjarv 04-20-2011, 09:25 AM hi, on my page: here (http://www.sbannister.co.uk/helix_site2/events.html) When I first go to my page, all the pictures load up on the right hand side?! sometimes I have to refresh teh page to show the images in the right place just wondering why? can anyone help? abduraooft 04-20-2011, 10:17 AM Please Validate.. Validate.. Validate.. Validate.. Validate.. Validate.. Validate.. Validate.. Validate.. Validate.. Validate.. Validate.. Validate.. Validate.. and fix the errors in your markup, before seeking help on HTML here. THANKS! http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.sbannister.co.uk%2Fhelix_site2%2Fevents.html How many times we need to repeat this? jarv 04-21-2011, 12:00 AM ok, I have been trying to validate but I get: required character (found s) (expected d) on line 56. Line 56: </script> why? it's just a closing script tag?! my main issue is the alignment of the images BoyWander 04-21-2011, 05:51 AM Can you post the code so we can see? jarv 04-23-2011, 09:26 AM <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <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" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script> <script type="text/javascript"> $(function() { $('#slideshow1').after('<div id="nav1" class="nav">').cycle({ fx: 'fade', speed: 'fast', timeout: 0, pager: '#nav1', before: onBefore }); $('#slideshow2').after('<div id="nav2" class="nav">').cycle({ fx: 'fade', speed: 'fast', timeout: 0, pager: '#nav2', before: onBefore }); $('#slideshow3').after('<div id="nav3" class="nav">').cycle({ fx: 'fade', speed: 'fast', timeout: 0, pager: '#nav3', before: onBefore }); $('#slideshow4').after('<div id="nav4" class="nav">').cycle({ fx: 'fade', speed: 'fast', timeout: 0, pager: '#nav4', before: onBefore }); $('#slideshow5').after('<div id="nav5" class="nav">').cycle({ fx: 'fade', speed: 'fast', timeout: 0, pager: '#nav5', before: onBefore }); function onBefore() { $('#title').html(this.alt); } });</script> </head> <body> <div id="top"> <div id="topwrapper"> <a href="index.html"><div id="logo"> </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" class="menuselected">HELIX EXPERIENTIAL MARKETING</a></li> <li><a href="film.html" title="HELIX FILM & TV SET CONSTRUCTION">HELIX FILM & 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">HELIX COMMERCIAL INTERIORS</a></li> </ul> </nav> <div class="line"> </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_experiential.jpg"> </div> </div> </div> </section> <div class="line"> </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"> </div> <div id="box"> <h1>01</h1> <h2>V Hand</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/marketing/virgin1.jpg" alt="1"/> <img src="images/marketing/virgin2.jpg" alt="2"/> <img src="images/marketing/virgin3.jpg" alt="3"/> <img src="images/marketing/virgin4.jpg" alt="4"/> <img src="images/marketing/virgin5.jpg" alt="5"/> </div> </div> <div class="dashedlinebottom"> </div> <div class="dashedlinetop"> </div> <div id="box"> <h1>02</h1> <h2>Car Walk</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/marketing/carwalk1.jpg" alt="1"/> <img src="images/marketing/carwalk2.jpg" alt="2"/> <img src="images/marketing/carwalk3.jpg" alt="3"/> <img src="images/marketing/carwalk4.jpg" alt="4"/> <img src="images/marketing/carwalk5.jpg" alt="5"/> </div> </div> <div class="dashedlinebottom"> </div> <div class="dashedlinetop"> </div> <div id="box"> <h1>03</h1> <h2>Tower of Terror</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/marketing/tot1.jpg" alt="1"/> <img src="images/marketing/tot2.jpg" alt="2"/> <img src="images/marketing/tot3.jpg" alt="3"/> <img src="images/marketing/tot4.jpg" alt="4"/> <img src="images/marketing/tot5.jpg" alt="5"/> </div> </div> <div class="dashedlinebottom"> </div> <div class="dashedlinetop"> </div> <div id="box"> <h1>04</h1> <h2>Ice Age 3</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/marketing/ice1.jpg" alt="1"/> <img src="images/marketing/ice2.jpg" alt="2"/> <img src="images/marketing/ice3.jpg" alt="3"/> <img src="images/marketing/ice4.jpg" alt="4"/> <img src="images/marketing/ice5.jpg" alt="5"/> </div> </div> <div class="dashedlinebottom"> </div> <div class="dashedlinetop"> </div> <div id="box"> <h1>05</h1> <h2>Hanging gardens of paddington</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/marketing/basket1.jpg" alt="1"/> <img src="images/marketing/basket2.jpg" alt="2"/> <img src="images/marketing/basket3.jpg" alt="3"/> <img src="images/marketing/basket4.jpg" alt="4"/> <img src="images/marketing/basket5.jpg" alt="5"/> </div> </div> <div class="dashedlinebottom"> </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 & Set Design">Film & 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">©2011 Helix </div> </footer> </div> <!-- end content --> </body> </html> abduraooft 04-23-2011, 09:33 AM The code that you've posted that in the given link are different (and so the validation errors!) abduraooft 04-23-2011, 09:39 AM <html xmlns="http://www.w3.org/1999/xhtml"> and the error given by the validator for the above posted code is due to the xhtml name-space attribute of <html> tag jarv 04-23-2011, 09:41 AM yes, I know, I did say it still errors: required character (found s) (expected d) });</script> but why? this is kind of a weird error?! jarv 04-24-2011, 11:56 AM I just need the images displaying properly on load?! abduraooft 04-24-2011, 12:44 PM I just need the images displaying properly on load?! It seems like you skipped my last reply in this thread? jarv 04-24-2011, 06:29 PM I put a space in and it still not validates?! <html xml ns="http://www.w3.org/1999/xhtml"> http://awesomescreenshot.com/027bw3405 AndrewGSW 04-24-2011, 07:02 PM Why did you add a space? The xmlns attribute is not required for a html document. Change to just <!DOCTYPE html> <html> You then have lots of 'duplicate id' errors. Each id should be unique. Added: but I see that you already posted about the duplicates, so you are already aware of this issue. jarv 04-24-2011, 07:38 PM thanks, I am aware of this issue but I don;t know how to get round it, I added changed them to classes and then the style too but that didn't work, also added extra IDs hmm messed up the styling jarv 04-24-2011, 08:07 PM ok, pages validated! here is an example page where the images are falling outside of website: http://www.sbannister.co.uk/helix_site2/interiors.html abduraooft 04-25-2011, 08:26 AM You have properties like #slideshow4 { position: absolute; right: 0; top: 0; } in your CSS. Change them to left:0; to align them left. |
| |||
EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum
