SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tableless banner breaking up

    I'm trying to lay out my top banner without using a table. At this point, it looks fine until you start to minimize the size of the browser window. I'd like it to behave the same way it would if it were in a table -- it collapses until it reaches the minimum size of the background images used, then the right margin just disappears off the screen, with the remaining banner looking the same. Now as you narrow the screen, the banner breaks apart into two segments, one on top of the other.

    Here's the page:

    http://www.rosscustomleather.com/tem.../template.html

    Here's the css I've got so far pertaining to the banner:

    body {
    background-color: #3d271c;
    margin: 10px;
    padding: 0px;
    }

    #wrapper {
    width: 95%;
    margin-right: auto;
    margin-left: auto;

    }

    .banner {
    width: 100%;
    background-image: url(images/filler.png);
    background-repeat: repeat;

    }

    .floral {
    background-image: url(images/floral.png);
    background-repeat: no-repeat;
    height: 165px;
    float: left;
    width: 320px;

    }

    .title {
    margin-right: auto;
    margin-left: auto;

    }

    .horses {
    background-image: url(images/horses.png);
    height: 165px;
    width: 344px;
    background-repeat: no-repeat;
    float: right;

    }

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The easiest way to achieve this would be to apply a min-width

    Code:
    .banner {
    width: 100%;
    background-image: url(images/filler.png);
    background-repeat: repeat;
    min-width: 900px;
    }
    To achieve the same thing in IE6 and below though you'll need expressions as it doesn't support min-width so I'd use conditional comments and include the following

    note: I'd put the include to your ie6.css stylesheet between the conditional comments so that any IE6 and below hacks are contained within one stylesheet.
    Code:
    <!--[if lte IE 6]>
       <style type="text/css" media="screen">
          .banner { width: expression((documentElement.clientWidth < 900) ? "900px" : "auto" ); }
       </style>
    <![endif]-->

  3. #3
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or just stick a 900px x 0px div inside it to stop the fluidity at a certain point

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd always try and find a solution that doesn't require extra markup where possible but maybe that's just my approach in trying to keep the HTML as streamlined as possible.


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
  •