That’s the problem – the ‘look’ you are trying to accomplish is not viable. That massive slideshow/banner thing for example is by itself larger than the screen on your average sub $800 laptop. It’s a massive block of nothing; to go with the massive gaps between content at the top meaning on anything less than a 1200px tall display, the layout is painfully useless and will leave users bouncing or wondering like the old lady in the 80’s Wendy’s commercials “where’s the beef” – much less that images off theres’ no content. Scripting off the whole page seems to break.
You’re using technologies that probably shouldn’t even be on such a simple page in the first place – and the markup reflects this. You’ve got more code just to load scripting nonsense than you do actual content on the page; 576k total for the whole page – only 162k of that being able to be blamed on the images – to deliver in terms of content less than 1k of plaintext…
You have no heading tags, images for what’s obviously text – so get the text in the markup semantically instead of as images… swing an axe at all the pointless bloated javascript — some 387k of it in five files; a sure-fire indicator something is amiss; like actually thinking jquery has something of value to offer.
Even as is, you’ve got all sorts of extra div in there for nothing…
<div id="secure">
<img src="images/securestore.png" />
</div>
Should probably be a heading tag with meaningful text inside it with image-repacement. As topmost heading it wouldn’t even need an ID/class.
<div id="navigation">
Pointless wrapper.
<div id="wedo">
<p>WE DO:</p>
</div>
Assuming that would be a P, the DIV serves no purpose… though you’d have a hard time convincing me that two words and a punctuation mark constitutes a paragraph; Also pretty much pointless text that just wastes space that could be better used to just show the menu and get the user to the actual content.
<div id="nav">
<ul>
<li class="storage"><a href="storage.html">storage</a></li>
<li class="structures"><a href="#">structures</a></li>
<li class="logistics"><a href="#">logistics</a></li>
<li class="about"><a href="#">about us</a></li>
<li class="contact"><a href="#">contact</a></li>
</ul>
</div>
Pointless DIV since there’s nothing being applied that couldn’t be done to the UL directly. Just as George Carlin once joked “not every ejaculation deserves a name” not every semantic block level tag needs a extra DIV around it.
<div id="sidebar">
<div id="white">
<img src="images/white.jpg" />
</div>
<div id="dot">
<img src="images/dot.png" />
</div>
<!-- DOT -->
<div id="logo">
<img src="images/logo.png" />
</div>
<!-- LOGO -->
</div>
<!-- SIDEBAR -->
Pointless DIV around each IMG tag, NOT that those should even be in the markup since by all accounts that’s presentation, not content… meaning the entire div#sidebar may in fact serve no real purpose on the page. Oh, and your comment placements could trip rendering bugs in older versions of IE and FF – YES, I said comments. They end up between floats, inline-blocks and several other complex formatting and you could have entire sections of the page not render, or worse render TWICE once atop the other slightly offset. It’s why I put the closing comment BEFORE the closing tag, so can’t end up between sibling elements.
<div class="ls-layer" rel="slidedirection: left; slidedelay: 6000">
<img class="ls-s6" src="gallery/secure-slide1-lines.png" alt="sublayer" rel="durationin: 1400; easingin: easeOutQuart">
<img class="ls-s5" src="gallery/secure-slide1-graphics.png" alt="sublayer" rel="durationin: 3000; easingin: easeOutExpo">
<img class="ls-s2" src="gallery/secure-slide1-text.png" alt="sublayer" rel="delayin: 1400; easingin: easeOutBack">
</div>
Presentation inlined in the markup, abuse of the REL attribute, all tied to the goofy script and images that are too large to be viable for use on a website and that are basically a waste of bandwidth for plaintext. Again, I’d axe that ENTIRE animooted banner as non-viable.
But without seeing the actual content for every element or at the very least a reasonable facsimile, it’s very hard to say what the HTML should actually be… since content should dicate the markup AND the layout – no actual content, you have no business even MAKING the layout or the markup.
… and of course I’d swing an axe at the html 5 for nothing nonsense letting you lose the stupid pointless shiv, axe the redundant/pointless meta’s (like setting robots to the default?)…
So something more like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<link
rel="shortcut scon"
href="images/favicon.png"
/>
<title>
SecureStore
</title>
</head><body>
<div id="pageWrapper">
<h1>
SecuStore
<span></span>
</h1>
<ul id="mainMenu">
<li><a href="storage.html">storage</a></li>
<li><a href="#">structures</a></li>
<li><a href="#">logistics</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">contact</a></li>
</ul>
<hr />
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in purus nisl, non lobortis mauris. Aliquam condimentum dapibus justo quis pulvinar. Integer nunc velit, porta vitae congue non, lobortis eget elit. Nunc mi nunc, pharetra sit amet fringilla dignissim, elementum sed nunc. Nunc sodales condimentum porttitor. Aenean pretium ipsum vitae tellus aliquet tincidunt. Phasellus dignissim tempus sapien ac euismod.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in purus nisl, non lobortis mauris. Aliquam condimentum dapibus justo quis pulvinar. Integer nunc velit, porta vitae congue non, lobortis eget elit. Nunc mi nunc, pharetra sit amet fringilla dignissim, elementum sed nunc. Nunc sodales condimentum porttitor. Aenean pretium ipsum vitae tellus aliquet tincidunt. Phasellus dignissim tempus sapien ac euismod.
</p>
<a class="button" href="#">send us your rfp</a>
<!-- #content --></div>
<hr />
<!-- #pageWrapper --></div>
<div id="footer">
Sample footer content
</div>
</body></html>
Though again, no clue what I’d replace that animated banner with – probably something a bit leaner on the bandwidth like actually just leading in with text describing the companies purpose, maybe with a small (256px or narrower) trailing plate. (trailing plate == floated right image. Leading plate == floated left… just plain plate == center.)
All those extra DIV you had – pointless, especially up top/before the banner.