...

View Full Version : alignment is out of place on load



jarv
04-20-2011, 10: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, 11: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, 01: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, 06:51 AM
Can you post the code so we can see?

jarv
04-23-2011, 10: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">
&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>

abduraooft
04-23-2011, 10:33 AM
The code that you've posted that in the given link are different (and so the validation errors!)

abduraooft
04-23-2011, 10: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, 10: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, 12:56 PM
I just need the images displaying properly on load?!

abduraooft
04-24-2011, 01: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, 07: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, 08: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, 08: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, 09: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, 09: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