SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Threaded View

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to create - 100% header, 960px body, 100% footer

    Hi All,
    I'm sure all the experts can tell i'm a newbie ...i'm trying to create a site with the header and footer stretching across any display and the body width remaining 960px and am getting a horizontal scrollbar when i try to implement it. Can someone please tell me what i need to modify? (code below for header and body - the CSS and HTML are in same file, will move the CSS to a separate file)

    Code:
    <html>
    
    <head>
    ...
    
    <style type="text/css">
    
    div.Object15 { position:absolute; top:0px; left:0px; z-index:0; }
    div.Object16 { position:absolute; top:10px; left:0px; z-index:1; }
    div.Object17 { position:absolute; top:0px; left:0px; z-index:2; }
    div.Object18 { position:absolute; top:104px; left:111px; z-index:3; }
    div.Object19 { position:absolute; top:373px; left:112px; z-index:4; }
    
    body {
     margin:0px;
     padding :0px;
     text-align:center;
     height:100%;
     width:100%;
     background-image: url('files/image1.jpg');
    }
    
    
    A:link { color:#ffffff; text-decoration:none; }
    
    A:visited  { color:#60a0e2; text-decoration:none; }
    
    A:active  { color:#60a0e2; text-decoration:none; }
    
    A:hover  { color:#b00000; text-decoration:underline; }
    
    
    img { border:0 none}
    
    
    #container { position:relative; margin:0px auto 0 auto; height:775px; width:995px; text-align:left; padding-left:0px;}
    #header-container { position:relative; margin:0px auto 0 auto; height:55px; width:100%; text-align:center; padding-left:0px;}
    
    </style>
    </head>
    
    <body>
    <div id="header-container">
    
    <div class="Object15"><img src="files/image2.jpg"  alt="" width="2048px" height="53px"></div>
    
    <div class="Object16"><img src="files/image3.jpg"  alt="" width="2048px" height="32px"></div>
    </div>
    
    <div id="container">
    <div class="Object17"><img src="files/image4.png"  alt="" width="50px" height="69px"></div>
    
    <div class="Object18"><img src="files/image5.png"  alt="" width="779px" height="370px"></div>
    
    <div class="Object19"><img src="files/image6.jpg"  alt="" width="776px" height="32px"></div>
    </div>
    
    </body>
    </html>
    Thanks,
    Max.
    Last edited by ralph.m; Sep 19, 2012 at 07:10. Reason: added code tags


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
  •