...

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



toplisek
06-02-2010, 10: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, 10:27 AM
Insufficient data. Please post your html or a link to your page.

toplisek
06-02-2010, 10: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, 11:21 AM
I have around 22px under top line. I don't see any such issue for the above given code.

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

toplisek
06-02-2010, 02: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, 02: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, 03:47 PM
Can you post me working above code?

Scriptet
06-02-2010, 04: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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum