Results 1 to 6 of 6

Thread: 4 colums boxmodel with header and footer

  1. #1
    Join Date
    Nov 2010
    Location
    Belgium
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default 4 colums boxmodel with header and footer

    Hello,

    i need your help !! I'm near to loose my mind.
    Since 1 week i try to create a boxmodel with 4 colums: Left menu fixed width - x% - main box fixed width - x%
    Then a header and a foot-part with fixed hight and fixed on page (not moving by scrolling)
    I search and search and can't make this "main box" ... this box shoould have the total height between head and feet, even the content not fill all this part (hope u understand what i want to say ?! ) and it should be centered (x%)
    Would be great if someone have a good idea ...
    Thanks in advance

    here the link to my testproject http://www.inno4.com/new/test.html

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Boxmodel test</title>
    <style type="text/css">
    .html, body{
    	background: grey;
    	margin: 0;
    	padding: 0;
    }
    
    #head{
    	position: fixed;
    	top: 0px;
    	background: red;
    	width: 100%;
    	height: 100px;
    	color: white;
    	font-size: 30px;
    	text-align: center;
    }
    
    #left{
    	position: fixed;
    	background: blue;
    	width: 250px;
    	height: 100%;
    	top: 100px;
    	margin-bottom: 30px; /* this part not function */
    	color: white;
    	font-size: 20px;
    	text-align: center;
    }
    
    #main{
    	top: 100px;
    	left: 250px;
    	width: 100%;
    	height: 100%;
    }
    
    #content{
    	width: 500px;
    	height: 100%;
    	top: 100px;
    	left: 250px;
    	margin: auto; 
    	background: white;
    	color: black;
    	font-size: 24px;
    	text-align: center;
    }
    
    #foot{
    	position: fixed;
    	bottom: 0px;
    	background: yellow;
    	width: 100%;
    	height: 30px;
    	color: black;
    	font-size: 14px;
    	text-align: right;
    }
    
    </style>
    </head>
    
    <body>
    	<div id="head">
            <p>This is my header</p>
        </div>
        
        <div id="left">
            <p>This is my menu</p>
        </div>
        
        <div id="main">
        	<div id="content">
                <p>Here should come my content</p>
            </div>
        </div>
        
        <div id="foot">
            <p style="margin: 7px 50px;">this is my footpage</p>
        </div>
        
    </body>
    </html>

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Hmm, not quite following what you are looking for?

    the main box,appears to be the height of the space between the header and footer.

    What is it you want to do?
    Thanks,

    Bud

  3. The Following User Says Thank You to ajfmrf For This Useful Post:

    Nosilence (03-05-2013)

  4. #3
    Join Date
    Nov 2010
    Location
    Belgium
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hello Bud,
    Thanks for answering.
    The layout like u can see on the Testpage is still ok.
    But i want now in the right 'grey' part create a space with white background and fixed width and it will contain my text, pictures, ...
    Then the grey background fill just the space equal left and right for diffrent screen sizes.
    I was near to get it, but if i had only small content (just 2-3 lines of text) the white 'box' was not fill the full space between head and foot.
    I add you here a picture how it should look like

    Thanks for help

    Click image for larger version. 

Name:	Layout.jpg 
Views:	96 
Size:	68.5 KB 
ID:	4964

  5. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,025
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Code:
    #main{
    	top: 100px;
    	left: 250px;
    	width: 100%;
    	height: 100%;
    }
    At the minute, this isn't actually doing what you think - there is no positioning defined (absolute? relative? fixed? etc) so the top and left as you have them, are irrelevant.
    The #main div is actually defaulting to top:0, left:0, and so spans the full/complete width of the whole web page. This is causing the white panel to center within the full width of the screen, rather than inside of the grey panel on the right.

    Furthermore, the top 100px of your white content panel is hidden underneath the header - we cant see that in your test page, but if you add a few extra lines of content, this is the result: http://fofwebdesign.co.uk/template/_...oot-b4fix.html

    Try narrowing the window and you'll see another problem - the white content panel slides behind the menu, so that would need to be addressed too.

    So now we come to the fix - replace your #main and #content CSS with this;
    Code:
    #main{ 
    	position: absolute; /* fix #main to all 4 corners of screen - 100% width and height */
    	top: 0;
    	right: 0;
    	bottom: 130px; /* offset for combined top and bottom padding in #content */
    	left: 0;
    	z-index: -1; /* put #main to back - stop #head and #foot overlap */
    	text-align: center; /* make #content float in center */
    	min-width: 750px; /* stop #content floating behind #left on narrow screens - combined width of #left + #content */
    }
    
    #content{
    	display: inline-block; /* change default block behaviour - make div work with margin-left */
    	margin-left: 250px; /* width of #left - offset so #content appears centered */
    	padding: 100px 0 30px 0; /* stop #content being hidden under #head and #foot - combined heights of #head + #foot */
    	width: 500px;
    	min-height: 100%;
    	background: white;
    	color: black;
    	font-size: 24px;
    }
    I've added comments to explain my changes so read through those and use the logic to make changes if you need to.
    Here's an example of how the revised page looks: http://fofwebdesign.co.uk/template/_...loat-foot.html
    Tested in IE8/9/10, Chrome, Firefox, Safari (Windows, iPhone, iPad), Opera

    Can I make a suggestion? Try increasing the width of the white #content panel from 500px to 750px, and also increase the min-width of #main to 1000px - I think it will suit the average screen size a little better because more people are using monitors that are a minimum of 1024px wide.
    Last edited by Beverleyh; 03-05-2013 at 01:53 PM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #5
    Join Date
    Nov 2010
    Location
    Belgium
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hey Beverleyh !!

    You was still help me 3years ago when i had a problem, now you did it again !!!
    You make me very happy, this is exactly what i was searching since few days. You are awsome !! Thanks a lot.

    Send me your adress and i will send you some flowers

    Have a nice day
    Ralph

  7. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,025
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    LOL

    No problem - glad to help!
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. ASP / CSS header and footer
    By Gabi in forum ASP
    Replies: 2
    Last Post: 08-03-2007, 12:22 PM
  2. Page without header & footer
    By Yasir in forum Looking for such a script or service
    Replies: 1
    Last Post: 05-30-2007, 07:08 PM
  3. Hide Header and Footer (URL,Page No etc)
    By mayuresh in forum CSS
    Replies: 1
    Last Post: 11-03-2006, 11:40 AM
  4. Page Footer and Header
    By turik in forum JavaScript
    Replies: 5
    Last Post: 03-20-2006, 09:55 PM
  5. IE Print Header & Footer
    By kermit_cof in forum CSS
    Replies: 1
    Last Post: 07-26-2005, 02:28 AM

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
  •