...

View Full Version : 3 Part Image Header in CSS



alexenk
02-18-2009, 05:19 PM
I have a 3 part header, the first part is the logo that incorporates the left hand side of the header. The middle part which is a 1 px repeating slice of the image and the right part which is 3px wide border of the image. I can get the first two to line up properly but I cannot figure out for the life of me figure out how to align the right hand side with the left and middle.


This is the right hand image:
images/header/header_right.gif

index:


<div class="container">

<div id="header"><a href="index.html"><img src="images/header/logo.gif" /></a> </div>
</div>

css:

#header {background-image:url(images/header/header_fill.gif); background-repeat:repeat-x; width:952px; }

img{ border-style:none;}

BoldUlysses
02-18-2009, 05:52 PM
Where is #header_left in your HTML? We'll need a link to your page or your full code (HTML and CSS) in &#91;CODE&#93;&#91;/CODE&#93; (not &#91;iCODE&#93;) tags in order to assist.

alexenk
02-18-2009, 05:54 PM
I have edited the original post and the files are locally hosted so no direct link possible.

BoldUlysses
02-18-2009, 06:02 PM
Posting all your code is still your best guarantee of a satisfactory response, regardless of whether or not the site is local.

Try making your <a> a container for the right cap:


#header {
background:url(mages/header/header_fill.gif) repeat-x;
width:952px;
}

#header a {
display:block;
width:952px;
background:url(images/header/header_right.gif) right no-repeat;
}

img {
border-style:none;
}


Is that what you're after?

Excavator
02-18-2009, 06:06 PM
Hello alexenk,
It's pretty hard to work on an image related question when we don't get the images.
The code you posted is only loading 2 images.

If you don't have hosting to set up a test site, zip up the files (#header CSS, HTML and the images and upload it to rapidshare so we can download it and have something to work with.

alexenk
02-18-2009, 06:34 PM
msuffern you have fixed it! I reset some manual widths and applied your #header a trick and all is sorted. Thank you!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum