My header keeps breaking

[danBoT]

Help I tried pretty much everything and my header keeps breaking http://edgemodels.net works fine in editplus but no where else.

 

[tristanperry]

Firstly, very nice header, I love it! Also, if you haven't got much CSS knowledge, just ignore this post and I'm sure someone else can help out with this issue

Anywhoo, just wondering, why don't you have the header image as just one image and then move the navigation bar up 'into' it? Or have the header image as a background?

As in, have markup like:

<div id="Header">
 <div id="Links"><a href="index.html">Home</a> <a href="discover.html">Be Discovered</a> <a href="about.html">About Us</a> <a href="contact.html">Contact</a></div>
</div>

And then use CSS like:

#Header {
 margin: 0 auto; /* This centres the header */
 width: 700px;
 height: 205px;
 background-image: url(EntireSolidImage.png);
 background-repeat: no-repeat;
}

#Links {
 position: relative;
 top: 125px;
 left: 500px;
}

#Links a {
 color: #CCCCCC;
 text-decoration: none;
 text-transform: uppercase;
 margin-right: 10px;
}

#Links a:hover {
 color: red;
}

Of course, you'd need to play around with the position of the navigation links. But the idea is there In-fact, that sort of code should work fine. You'd need to make the header image into one solid image, but that's probably not a problem?

Plus instead of using JavaScript for the mouseover, basic CSS is used which speeds up loading time, and improves usability and accessibility.

If you can implement that (it's mostly done for you - just chuck the CSS into the stylesheet, change the markup and get a solid image and change the url(EntireSolidImage.png); bit to the correct filename), it would help usability a lot. Plus that code should work fine in IE 6+, FF, Opera 8+, Safari etc.

 

[danBoT]

lazyness lol but thanks for the insight

 

[tristanperry]

Haha no problem And anytime. No worries if you don't want to go down the CSS route, but if you do and are having any issues, feel free to get in touch with me.