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 15 of 15
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question alignment is out of place on load

    hi, on my page: here 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?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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?verbos...%2Fevents.html

    How many times we need to repeat this?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

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

  • #4
    New Coder
    Join Date
    Mar 2011
    Posts
    62
    Thanks
    3
    Thanked 2 Times in 2 Posts
    Can you post the code so we can see?

  • #5
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    Code:
    <!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">
    		&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" class="menuselected">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">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_experiential.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>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">&nbsp;</div>
    	<div class="dashedlinetop">&nbsp;</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">&nbsp;</div>
    	<div class="dashedlinetop">&nbsp;</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">&nbsp;</div>
    	<div class="dashedlinetop">&nbsp;</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">&nbsp;</div>
    	<div class="dashedlinetop">&nbsp;</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">&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>

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The code that you've posted that in the given link are different (and so the validation errors!)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

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

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

  • #9
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    I just need the images displaying properly on load?!

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by jarv View Post
    I just need the images displaying properly on load?!
    It seems like you skipped my last reply in this thread?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    I put a space in and it still not validates?!
    Code:
    <html xml ns="http://www.w3.org/1999/xhtml">
    http://awesomescreenshot.com/027bw3405

  • #12
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Why did you add a space? The xmlns attribute is not required for a html document. Change to just
    Code:
    <!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.
    Last edited by AndrewGSW; 04-24-2011 at 07:09 PM. Reason: Just noticed

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

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

  • #15
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You have properties like
    Code:
    #slideshow4 {
        position: absolute;
        right: 0;
        top: 0;
    }
    in your CSS. Change them to left:0; to align them left.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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