Your graphic could have been sliced a little different , but here is an example of what I was talking about , Essentially the branding part of your site . note I dont have <tag></tag> in my html. also note that elements with RP do not have top/left/right/bottom appied to them. I used RP mostly as a reference for AP elements. BTW, the only extra image I used is grass4.png, which is grass3.png flipped upside down in photoshop.
Another suggestion, which I didnt have time to implement , make your main nav into ONE LARGE SPRITE ( as opposed to one sprite per button) , not only will it be easier to manage, but your page will load faster.
My code /colors are a little sloppy as I did this by eye and in between projects, still you can see how much cleaner and easy to read this is, hopefully you can see what i did here and apply it to the rest of your site.
Code:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
/* HTML5 display-role reset for older browsers, you will still need a .js shim for IE */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
p, ul,html, body, h1, h2,h3,h4,h5 {padding:0; margin:0;}
nav ul {list-style: none; }
nav ul a, h1 a {text-decoration: none; }
html, body{background: #619429; }
.brand {background: url(bgbush.png) 0 100% repeat-x;padding-bottom: 15px; position: relative ; }
.hedge{background: #6dcff6;padding-bottom: 15px; position: relative; z-index: 11 }
.brand-wrap{background: url(grass3.png) 0 100% repeat-x ; }
.brand-inner, .main-nav ul{margin:0 auto; width:960px;}
.brand-inner{margin:0 auto; width:960px; margin-bottom: -32px; position: relative;}
.brand header { background: url(tree1.png) no-repeat 0 100%; padding: 25px 0 0 250px; width: 100%; height: 125px; position: relative; margin-left:-240px; }
.brand-inner:before { position: absolute; content: url(sun.png) ; right:50px; top:0; z-index: -2}
.helper-nav{ position: absolute; right:0; top:0 }
.helper-nav li{float:left;}
.helper-nav li a{display:block; padding: 7px 10px; color:#fff; font:normal 70%/1 sans-serif}
.helper-nav li a:hover{color:#000;}
.brand h1 {clear: both}
.brand h1 a {overflow: hidden; display:block; height:101px}
.brand h1 a span{ display: block; }
.brand h1 a span:before{content:url(header.png); background: url(logo.png) no-repeat 0 0;display:block; padding:0 0 10px 95px;}
.helper-nav {float:right}
.main-nav {background: url(grass4.png) 0 0 repeat-x ; padding-top: 10px; overflow: hidden}
.main-nav li {float: left; text-align: center; width:192px; height:50px;}
</style>
</head>
<body>
<div class="hedge"><div class="brand"><div class="brand-wrap"><div class="brand-inner">
<header>
<h1><a href="indexurl.html"><span>Woolton Primary School</span></a></h1>
<nav class="helper-nav">
<ul>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Plain Text Version</a></li>
<li><a href="#">High Contrast Version</a></li>
</ul>
</nav>
</header>
<!-- hedge/brand/ brandwrap/ brand inner--></div></div></div></div>
<nav class="main-nav">
<ul>
<li class="home-but"><a href="#">Home</a></li>
<li class="ps_topic_slug_about-us"><a href="#">About Us</a></li>
<li class="ps_topic_slug_parents"><a href="#">Parents</a></li>
<li class="ps_topic_slug_children"><a href="#">Children</a></li>
<li class="ps_topic_slug_community"><a href="#">Community</a></li>
</ul>
</nav>
</body>
</html>
Reply With Quote
Originally Posted by JohnoLFC
Bookmarks