#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    4
    Rep Power
    0

    Css problen 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

    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
    }
  2. #2
  3. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    This is caused by the first paragraphs' top margin:

    Code:
    div#content p {
        margin-top: 0px;
    }
    Note that this will remove the top margin from all paragraphs in the content div, so a better solution should be considered.

    Added: I would recommend that you generally avoid absolute positioning - prefer floats. Absolute-positioning is only suitable in certain situations.
    Last edited by AndrewSW; September 8th, 2012 at 10:21 AM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    4
    Rep Power
    0
    thank you very much for help, I will try that and consider other solution
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    4
    Rep Power
    0
    Tried out, now the gap is only about one-third than before, but there is still some.
    I'm new to web design so I'm not sure of what I'm about to say: could it be a browser-related problem (I use firefox)?

    any other ideas?

    Thank you,
    nivlat
  8. #5
  9. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    Test it in different browsers. If you have the same issue then it is not browser-related.

    I don't see a gap between the header and content in Firefox.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    3
    Rep Power
    0
    I got such a nice information.Thanks for sharing.

IMN logo majestic logo threadwatch logo seochat tools logo