SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with image based banner and autosize

    Hello
    I need some help, i'm trying to create a site header based on images, this way:

    <div id="image-left"></div>
    <div id="filler"></div>
    <div id="image-right"></div>

    I need the image left and right layers have a background image with a fixed width. And the filler layer should adapt to the browser size / screen resolution.

    Until now i've come up with nothing but line break divs and stuff... could someone please help me with this one? Thanks a lot

  2. #2
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome to Sitepoint, but stop thinking about tables.

    In this case, all you need to do is give a float:right to your image-right div and that's it.
    Code:
    <div id="image-left"></div>
    <div id="image-right"></div>
    Code:
    #image-right{
     float: right;
    }
    In search of the clouds...and maybe some work

  3. #3
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know what you mean, but i think i wasn't clear enough.
    The idea is that the middle layer actually fill the empty space, with a color, to match with the left and right images. So the ending of the left image connects with the beginning of the right image.

    A good way to represent what i mean is this: think in a bone as the complete image, the left image is one ending of the bone, the right image is the other ending. The middle layer should be what connects the endings.

    I think that would clarify my question.

    Thank you.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello grago, and welcome to Sitepoint! You want a resizable header image that will adjust to the width of the browser window, right?. That is easily achieved by using a pair of floats.

    Start by creating a container <div> called "header" and then place two <span> elements inside it and give each of these spans an ID:
    HTML Code:
        <div id="header">
        	<span id="leftHeader"></span>
         	<span id="rightHeader"></span>
        </div>
    I use spans instead of DIVs because when you look at the plain HTML page (with no CSS applied), you'll notice that each DIV container has its own margin and padding applied to it, and sits on its own line, regardless of whether there's anything in there or not. Since these containers are empty, you'll want to avoid this by using spans instead.

    Now for the CSS.

    Give the DIV container a height value (if your completed header is 80px tall, give the DIV a height of 80px; if it's 120px, then give it a height of 120px and so on). There is no need to declare a width for the DIV, since it is a block level element and will expand to fill all the space.
    Code:
        #header {
       	background-color: /* background color */;
       	color: inherit; /* change to a value if you want to have text in the header*/
        	height: /* height of image */ ;
        }
    For your first <span> element (the one with the leftHeader ID), give the element the following properties:
    Code:
        #leftHeader {
        	background: url('/path/to/image.png') no-repeat;
        	display: block;
        	float: left;
        	height: /* height of image */ ;
        	width: /* width of image */ ;
        }
    For your second span, you'll want to mirror the left one:
    Code:
        #rightHeader {
         	background: url('/path/to/image.png') no-repeat;
         	display: block;
         	float: right;
         	height: /* height of image */ ;
         	width: /* width of image */ ;
         }
    Hope that helps.

  5. #5
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's *almost* what i need...
    My left and right images are not square.
    I need a colored fill or a repeated image somewhere on a centered layer between leftHeader and rightHeader, so the filling color do not actually fill the entire header, but just only on the center, between the two images. This center layer should be the one which should be stretched or expanded when the browser window is resized.
    Could you help me with this one? Thanks a lot.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then add another span after the two I provided in the example, and use as your middle area. Add position: relative; and z-index: 1; to the two corner spans. You may also want to look into applying left and right margins to the middle span until you achieve the effect you want.

  7. #7
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried what you said, but the issue is that the center layer does not actually fit the empty space in the middle.
    In short what i need is this:

    [fixed width] [fill with variable width] [fixed width]

    Suppose that this is the full banner: http://www.fotograma1.com/csshelp/bone.gif

    And when you expand your browser window: http://www.fotograma1.com/csshelp/bonelarge.gif

    (This is merely an example)

    You see? The idea is that the endings are the images and the length of the bone should expand with the browser window (using a tiled image i guess)

    Thank you very much.

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll be sending you a PM with a live example (that I don't want to be made public just yet) in a few minutes.

  9. #9
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thanks a lot


Bookmarks

Posting Permissions

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