Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    3 Part Image Header in CSS

    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:
    Code:
        <div class="container">
    
           	<div id="header"><a href="index.html"><img src="images/header/logo.gif" /></a> </div>
            				</div>
    css:
    Code:
    #header {background-image:url(images/header/header_fill.gif); background-repeat:repeat-x; width:952px; }
    
    img{ border-style:none;}
    Last edited by alexenk; 02-18-2009 at 06:54 PM.

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    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.
    matt | design | blog

  • #3
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have edited the original post and the files are locally hosted so no direct link possible.

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    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:

    Code:
    #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?
    matt | design | blog

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,739
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    msuffern you have fixed it! I reset some manual widths and applied your #header a trick and all is sorted. Thank you!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •