Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    css problem with layout

    Hi every one, I have this problem with layout:

    the navigtion block is perfectly aligned under the header (at 113px from top);
    but the content (whatever I try - even specifying 113px from top) do not: there is always a space about 10px between header and content.
    Please help!
    thanks in advance,
    nivlat

    I attach a screenshot

    html
    -------------------------------------

    Code:
    <head>
    <title>the trashcan</title>
    <link rel="stylesheet" type="text/css" href="main2colonne.css"/>
    </head>
    <body>
    	<div id="container">
    		<div id="header"><img src="logo.png"/><img src="trashcan.jpeg" width="113" height="113"/></div>
    		<div id="content"><p>lotext text text text text text tee text text text text teext text text text txt text text text text texxt text ext text text totext text text text text text tee text text text text teext text text text txt text text texotext text text text text text tee text text text text teext text text text txt text text otext text text text text text tee text text text text teext text text text txt textotext text text text text text tee text text text text teext text text text txt text text text text texxt text ext text text text text texet text text text texxt text ext text text text text texettext text texxt text ext text text text text texett text texxt text ext text text text text texetext text texete </p></div>
    		<div id="navigation"><p>first link</p></div>
    		<div id="footer"><p>copyright bla bla bla bla bla</p></div>
    	</div>
    </body>
    </html>
    css
    -------------------------------------------

    Code:
     body, html{
    	margin: 0;
    	padding: 0;
    }
    div#container{
    	position: relative;
    	width:80%;
    	background-color: green;
    	margin: auto;
    
    }
    div#header{
    	margin-bottom: 0;
    	height: auto;
    }
    div#content{
    	background-color: blue;
    	color: red;
    	width: 80%;
    	top: 113px;
    }
    div#navigation{
    	position: absolute;
    	right: 0;
    	top: 113px;
    	width: 20%;
    	background-color: grey
    }
    div#footer{
    	background-color: pink
    }
    Attached Thumbnails Attached Thumbnails css problem with layout-screenshot.jpg  

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,771
    Thanks
    23
    Thanked 550 Times in 549 Posts
    These things occur because of using position: relative; and position: absolute;
    Lets get rid of them and just use the natural flow. And to stop a problem that's going to come up I'm going to change the background-color of the #container to gray and remove it in the #navigation rules.

    In the #header margin-bottom: 0;tells us nothing nor sets anything - remove it. Change height: auto; to the height you want, I used 113px; to fit the images, but you might want something larger.

    In #content, remove top: 113px; because it only works with the position rules. I gave it a float to position it a height, and because of that an overflow. I do this cause we have a small amount of text. We normally do something different.

    We float #navigation right and give it a width. Everything else is gone from step one above.

    To the footer we aff clear:both; to get rid of the effects of the floats.

    CSS and the HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>the trashcan</title>
    <style type="text/css">
     body, html{
    	margin: 0;
    	padding: 0;
    }
    #container
    {
    	width: 80%;
    	margin: auto;
    	background-color: grey;
    }
    div#header{
    #navigation	height: 113px;
    	background-color: green;
    }
    div#content{
    	background-color: blue;
    	color: red;
    	width: 80%;
    	float:left;
    	height:200px;
    	overflow: auto;
    }
    
    div#navigation{
    	width: 20%;
    	float:right;
    }
    div#footer{
    clear:both;
    	background-color: pink
    }
    
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="header">
    		<img src="logo.png" width="113" height="113" style="border: 2;" alt="LOGO" />
    		<img src="trashcan.jpeg" width="113" height="113" style="border: 2;" alt="TCAN" />
    	</div>
    
    	<div id="content"><p>content - lotext text text text text text tee text text text text teext text text text txt text text text text texxt text ext text text totext text text text text text tee text text text text teext text text text txt text text texotext text text text text text tee text text text text teext text text text txt text text otext text text text text text tee text text text text teext text text text txt textotext text text text text text tee text text text text teext text text text txt text text text text texxt text ext text text text text texet text text text texxt text ext text text text text texettext text texxt text ext text text text text texett text texxt text ext text text text text texetext text texete </p></div>
    	<div id="navigation"><p>first link</p></div>
    
    	<div id="footer"><p>copyright bla bla bla bla bla</p></div>
    </div>
    </body>
    </html>
    In #content you could remove the height:200px; and the overflow: auto; And see what happens
    Last edited by sunfighter; 09-08-2012 at 09:50 PM.

  • Users who have thanked sunfighter for this post:

    nivlat (09-08-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •