SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast elmonty's Avatar
    Join Date
    Jan 2004
    Location
    Michigan
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Stretchy right and bottom edges?

    I'm trying to figure out a way to create a banner across the top that consists of an image, but whose right edge extends all the way to the right edge of the browser -- regardless of the window size.

    At the same time, I need to do the same thing with the left column: fill it with an image whose bottom edge extends all the way to the bottom of the window.

    I can do this with tables, but can't figure out a cross-browser way to do it in CSS.

    The "stretchy" right edge of the banner is simply a 1 pixel wide slice of the banner's right edge, repeated as necessary. Similarly, the "stretchy" bottom of the left column is a 1 pixel slice of the bottom of the column's image. I can't get these to appear in Mozilla.

    Here's my code:

    Styles.css:
    HTML Code:
    .banner
     {
     background-image:url(./images/banner-fill.gif); 
     width:100%;
     }
     
    .nav
     {
     background-image:url(./images/nav-fill.gif);
     width:104px;
     height:100%;
     } 
     
    .content
     {
     position:absolute;
     left:140px;
     top:140px;
     }
    Template.htm:
    HTML Code:
    <html>
    <head>
    <title>Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="height:100%;width:100%">
    <div class="banner"><img src="images/banner.jpg" width="800" height="134" border="0"></div>
    <div class="nav"><img src="images/nav.jpg" width="104" height="327" border="0"></div>
    <div class="content">
     <p>Page Content</p>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    ct
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not positive it will work but put the image in a table background and set it to fixed or whatever its supposed to be. Set the border cellpadding and cellspacing of the border to 0 and it should look like just and image. Hope this works
    KTM RC8 Forum - Motorcycle message board including KTM RC8 motorcycle for sale secion, RC8 how to's, and technical chat.


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
  •