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,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    <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,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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 08: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,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    •