Mostly I think you're just over-thinking your layout -- particularly in regards to the number of div, and a few of your classes could use a trim too. For what you have there's little reason to have more than... eh, I'd say around THREE div total on the page... and one of those would be a 'image sandbag' for the header. The empty H1 is also problematic (since it defeats the point of HAVING a h1)
Code:
<!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"
/>
<meta
name="keywords"
content="asphalt,potholes,canberra,road-work,car parks,driveways,speed bumps,trip hazzards"
/>
<meta
name="description"
content="BnB Asphalt is a local Canberra business providing a range of asphalt solutions"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
BnB Asphalt Canberra
</title>
</head><body>
<div id="headerSandbag"></div>
<div id="pageWrapper">
<h1>
B+B Asphalt
<small>
<span> - </span>
Brown and Barret
</small>
</h1>
<ul id="mainMenu">
<li><a href="#"c lass="current">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div id="content">
<h2>Canberra's local asphalt experts</h2>
<p>
We're your local asphalt experts, with over thirty years experience. Based in Canberra, our experience is your guarantee.
</p><p>
We take the smallest jobs right through to much larger jobs, including government contracts. Give us a call and we can provide you with a free quote (please genuine enquirers only).
</p><p>
Why not take a look at our gallery and see what we can do foy you. Or call us to discuss how we can help you.
</p>
<ul>
<li>Quality assured</li>
<li>Excellent rates</li>
<li>Professional attitude</li>
<li>Base preparation </li>
<li>Solutions based</li>
<li>Repairs, small drives ways, anything at all give us a call!</li>
</ul>
<!-- #content --></div>
<!-- #pageWrapper --></div>
</body></html>
Would be a good start towards simplifying it. Gimme a few minutes to slap together the CSS I'd use with that.
Reply With Quote
.
-- the max-width is pretty close to the min-width on small font/96dpi machines, but for large font/120dpi users it opens it up a bit more -- likewise the content text was swapped to %/em instead of px so it's not useless on the accessibility front. "font-size: 14px;" on BODY is basically completely defeating the entire point of using %/em elsewhere on the page -- since EVERYTHING else inherits from that. PX for fonts should be reserved for the handful of spots where you 'have to' -- like in a sticky footer (less important content anyways) where the height has to be fixed, or on menu buttons to control how they fit... for the content area? BAD design choice all-around.
Originally Posted by unconformed
Bookmarks