SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Location
    milwaukee, wi
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question can't think how to make this happen! repeat-x band + transparent png

    I want the negative space of the band's name to be transparent over the background, but I want the orange band to repeat to the edges of the screen.
    Maybe it's just late, but I really can't sort out in my mind how on earth I'm actually going to do this!
    - If I put the repeating band in a div with no width defined, it'll repeat fine, but you'll see it behind the band name, making the name not show up.
    - If I just make a flat jpg of the band name, the background behind the name won't change when the window is resized
    The only thing I can think of is to fake it and make just a really long orange band including the logo, as a transparent png and set it as a background. I'd miss out on an image of the logo/alt tags etc though, and I'd rather have that in there than do some weird text-hiding crap to get the name up there in the html.

    ... I've sat and thought about this for a long time. Is that my only option? I am out of ideas. Can anyone help? I really appreciate it



  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could do something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html,body{margin:0}
    h1{
        margin:0;
        height:109px;
        background:#fcf;
    }
    .l,.r{
        width:50%;
        float:left;
        height:109px
    }
    .l{margin-right:-478px}/* half layout width*/
    .r{float:right;margin-left:-478px}
    .l div{background:red;height:109px;margin-right:478px}
    .r div{background:blue;height:109px;margin-left:478px;}
    </style>
    </head>
    
    <body>
    <div class="l"><div></div></div>
    <div class="r"><div></div></div>
    <h1>Jim's Brain image goes here 956px wide</h1>
    </body>
    </html>
    Similar to techniques used in these demos.


    Untitled Document
    Untitled Document

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Location
    milwaukee, wi
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for replying. Those examples are brilliant! ..& confusing. Wow... I do not see what's going on here, but I'm going to try it out. Would you mind giving me a bit of an explanation as to how this works?
    Thank you!

    Quote Originally Posted by Paul O'B View Post
    Hi,

    You could do something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html,body{margin:0}
    h1{
        margin:0;
        height:109px;
        background:#fcf;
    }
    .l,.r{
        width:50%;
        float:left;
        height:109px
    }
    .l{margin-right:-478px}/* half layout width*/
    .r{float:right;margin-left:-478px}
    .l div{background:red;height:109px;margin-right:478px}
    .r div{background:blue;height:109px;margin-left:478px;}
    </style>
    </head>
    
    <body>
    <div class="l"><div></div></div>
    <div class="r"><div></div></div>
    <h1>Jim's Brain image goes here 956px wide</h1>
    </body>
    </html>
    Similar to techniques used in these demos.


    Untitled Document
    Untitled Document

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    To cover the full width of the screen I used 2 floats of 50% width.

    To make space in the middle of those floats a negative margin is applied to the floats which creates a vacuum in the middle that content will be sucked into.

    When you apply a negative margin to the opposite side of a float (e.g. a right negative margin on a left floated element or a left negative margin on a right floated element) you allow content to overlap on that side.

    Therefore with 478px taken off each side it allows a gap in the middle to appear that is the width of your layout (956px). However this will just mean content will overlaps so thye final step is to nest a div inside each float and give it a positive margin (478px for each float) to keep the background colour away from overlapping the middle of the area.

    The result is a full width band of colour apart from the middle section where you can stick your image.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Location
    milwaukee, wi
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that just blew my mind :P
    I'm going to spend all week learning that because it sounds brilliant. sigh.. i have so far to go..
    thank you!

    Quote Originally Posted by Paul O'B View Post
    Hi,

    To cover the full width of the screen I used 2 floats of 50% width.

    To make space in the middle of those floats a negative margin is applied to the floats which creates a vacuum in the middle that content will be sucked into.

    When you apply a negative margin to the opposite side of a float (e.g. a right negative margin on a left floated element or a left negative margin on a right floated element) you allow content to overlap on that side.

    Therefore with 478px taken off each side it allows a gap in the middle to appear that is the width of your layout (956px). However this will just mean content will overlaps so thye final step is to nest a div inside each float and give it a positive margin (478px for each float) to keep the background colour away from overlapping the middle of the area.

    The result is a full width band of colour apart from the middle section where you can stick your image.


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
  •