PDA

View Full Version : How to move #content to the complete TOP?



toplisek
06-02-2010, 11:17 AM
I have designed simple sample for layout with body CSS and content like:



* {
margin: 0;
padding: 0;
}
body{
background: #FF0000 url(../images/bgimage.gif) repeat-x top;
margin-top:0px;
}

#content {
position:relative;
width: 1000px;
margin-top:0;
padding-top:0;
}
#main {
margin: 0;
padding:0;
}



Why is #content not aligned vertically to the top?
Seems some issue with body or #content...

How to move completely to the top this DIV element?
I have around 22px under top line. As we know <DIV> is a block-level element, so each box begins its own line.

abduraooft
06-02-2010, 11:27 AM
Insufficient data. Please post your html or a link to your page.

toplisek
06-02-2010, 11:49 AM
please find whole code:



* {
margin: 0;
padding: 0;
}
body{
background: #FF0000 url(../images/bgforbody.gif) repeat-x top;
margin-top:0px;

}
#content {
background-position:center top;
width: 1000px;
margin-top:0;
padding-top:0;
}
#main {
margin: 0;
padding:0;
}

em {
font-style: normal;
}
#toppart {
height: 120px;
margin: 0;
padding:0;
}
#header1 {
background: #003559 url(../images/banner.gif) no-repeat left top;
margin-top: 0;
padding:0;
width: 100px;
height: 90px;
}





<div id="content">
<div id="main">

<div id="toppart">
<div id="header">...</div><!-- end of header -->

</div><!-- end of toppart -->



</div> <!-- End my Main -->

</div><!-- end Content -->


</body>

abduraooft
06-02-2010, 12:21 PM
I have around 22px under top line. I don't see any such issue for the above given code.

toplisek
06-02-2010, 12:35 PM
You have private message. I kindly ask you to check..Thanks.

toplisek
06-02-2010, 03:07 PM
I try to be more clear:
please find 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></title>
<style type="text/css">
/*<![CDATA[*/
* {
margin: 0;
padding: 0;
}
body{
background: #FF0000 url(../images/bg1.gif) repeat-x top;
margin-top: 0px;
}
#mycontent1 {
background-position: top left;
width: 1008px;
margin: 0 0 0 0;
}
#topsection {
position: relative;
width: 1008px;
height: 121px;
margin-top: 0;
padding-top: 0;
}
#header1 {
background: #003559 url(../images/banner.gif) no-repeat center top;
margin-top: 0;
height: 121px;
}
#middle {
width: 100%;
margin: 0;
padding: 0 0 0 2px;
text-align: left;
border: 0px solid #000000;
overflow: hidden;
}
/*]]>*/
</style>
</head>

<body>

<div id="mycontent1">
<div id="topsection">
<div id="header1">
&nbsp;
</div>
</div>

<div id="middle">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>

</div>

</body>
</html>

abduraooft
06-02-2010, 03:52 PM
I try to be more clear:
please find code: Do you get the same issue for the above code? The issue might be due to the collapsing margin (http://complexspiral.com/publications/uncollapsing-margins/), which is unfortunately(?) not present in the above sample codes.

toplisek
06-02-2010, 04:47 PM
Can you post me working above code?

Scriptet
06-02-2010, 05:01 PM
What browser are you seeing this problem in, because as abduraooft said, there is no problem with the code you posted (http://codingforums.com/showpost.php?p=960938&postcount=6) and the content is at the complete top..You need to show us an example of the problem in action...mentioning browsers also