Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Member
    Join Date
    Nov 2010
    Posts
    31
    Member #
    24712
    I got a header with a fixed height, and a footer with a fixed height. The footer will always stay at the bottom of the screen, and the header of the website will always stay at the top (i wont have vertical scrolling of the website because i use iframes.

    Now my question is, the div between the header and the footer will be the container for my menu and my content. Because something is wrong in the coding my menu and content arent placed INSIDE the container (wrapper_content). I think its because of that i cant get my menu and content fluid.

    Basically what im asking is, how do i place those in the wrapper_content. AND how do i get wrapper_content to always fill up the space between the header and the footer?

    FULL HTML CODE:

    HTML Code:
    <html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Himalaya-Fluid</title>
    <link rel="stylesheet" type="text/css" href="styletest.css" />
    </head>
    <body>
    <div id="wrapper_header">
    <div id="header">
    <div id="wrapper_headergradl">
    <div id="wrapper_headergradr">
     <h1>&nbsp;</h1>
    </div>
    </div>
    </div>
    </div>
    <div id="wrapper_content">
    <div id="wrapper_menu">
     <div id="menu">
         <iframe name="menu" src="menu.html" frameborder="0" width="160px" height="100%" allowtransparency="true" scrolling="auto"></iframe>
    </div><!--menu-page-->
    </div>
    <div id="content">
     <iframe name="content" src="home.html" frameborder="0" width="100%" height="100%" allowtransparency="true" scrolling="auto"></iframe>
    </div>
    </div>
    <div id="wrapper_footer">
    <div id="footer">
    Design door Daisy Nabben | Alle rechten voorbehouden Himalaya Hills 2012
    </div>
    </div>
    </body>
    </html>
    FULL CSS CODING:
    Code:
    html, body {
     height:100%;
     margin:0 auto;
    }
    
    html {
     overflow:hidden;
    }
    
    /* Page width */
    #header, #wrapper_content, #wrapper_footer {
     width: 80%;
     margin: 0 auto;
    }
    
    /* Banner style */
    #wrapper_header {
     background:transparent url('images/bg.png') top center repeat-x;
    }
    
    #header {
     background:#fff url('images/bannerfluidkleiner.jpg') top center no-repeat;
    }
    
    #wrapper_headergradl {
     background: transparent url('xxx.png') top left no-repeat;
    }
    
    #wrapper_headergradr {
     background: transparent url('xxx.png') top right no-repeat;
    }
    
    #header h1 {
     margin:0px;
     height: 214px;
    }
    
    /* Wrapper content styles */
    #wrapper_content {
     height:inherit;
     background: white url('images/bg02-white-left.png') no-repeat left top;
    }
    
    /* Menu styles */
    #wrapper_menu {
     float: left;
     width:180px;
     height:60%;
     margin-left:20px;
     margin-top:10px;
     background: #00F; url('images/menu.png') no-repeat;
    }
    
    #menu { 
     height:100%;
     margin-left:10px;
     margin-right:20px;
     background:#0F0;
    }
    
    
    /* Content styles */
    #content {
     float:right;
     width:75%;
     height:60%;
     margin-top:10px;
     background: transparent url('images/bg02-white-right.png') no-repeat right top;
    }
    
    /* Footer style */ 
    #wrapper_footer {
     text-align: center;
     position:fixed;
     left:10%;
     bottom:0px;
    }
    
    #footer {
     margin: 0 20px;
     text-align:center;
     background-color: #e5f0fc;
     border: 1px solid #ccc;
     border-bottom: 0;
     clear: both;
    }

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:18 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com