SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid 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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Hi maxdp73. Here is a basic way to do a layout like that:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Layout</title>
    <style media="all">
    * {margin: 0; padding: 0;}
    body {background: #e7e7e7;}
    	.header-outer, .content-outer, .footer-outer {width: 100%;}
    	.header-outer, .footer-outer {background: #c7c7c7;}
    	.header, .content, .footer {margin: 0 auto;}
    	.header, .footer {min-height: 100px; color: white; padding: 20px 0; width: 960px;}
    	.content {background: white; min-height: 400px; padding: 20px; width: 920px;}
    </style>
    </head>
    
    <body>
    <div class="header-outer">
    	<div class="header">
    		<h1>Heading text</h1>
    	</div>
    </div>
    
    <div class="content-outer">
    	<div class="content">
    		<p>Body text</p>
    	</div>
    </div>
    
    <div class="footer-outer">
    	<div class="footer">
    		<p>Footer text</p>
    	</div>
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Ralph!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    You're welcome. If you need any help developing the code further, don't hesitate to ask.

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, i actually am a bit hesitant to ask for fear of imposing too much or worse, becoming lazy ...i've been browsing the net and finding so much information about web designing that it's a bit overwhelming...wud u be able to suggest a roadmap on how to develop some good web designing/development skills?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by maxdp73 View Post
    i actually am a bit hesitant to ask for fear of imposing too much
    All the same, questions are what forums are fo, so there's no harm in asking. The key is not make sure you've done your homework and at least tried to find a solution first.

    wud u be able to suggest a roadmap on how to develop some good web designing/development skills?
    My first suggestion would be to get a solid grounding in the basics, like HTML and CSS. My preference for that is with books, but not everyone likes them. There are many good books on HTML/CSS, including those by SitePoint, but you'l also find lots more on Amazon. It doesn't necessarily matter which you use. Perhaps read the reviews on Amazon to get a sense of which book would suit you best.

    Then you can branch out to other things like design, programming, CMSes etc ... Also, study sites you really like to learn how they're done. Look at the code underneath etc. I find that really useful.

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I learned all the basics at lynda.com for a few bucks in a couple months. Then learned the rest in this forum and killersites.com forum. Here is a website exactly as you describe I made a while back that made me not one penny. It shows you how to stretch the header and footer full width using the image I used. http://www.visibilityinherit.com/pro...r-website.com/


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
  •