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 9 of 9
  1. #1
    Regular Coder
    Join Date
    May 2006
    Posts
    228
    Thanks
    4
    Thanked 0 Times in 0 Posts

    How to move #content to the complete TOP?

    I have designed simple sample for layout with body CSS and content like:
    PHP Code:

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

    #content {
    position:relative;
      
    width1000px;
      
    margin-top:0;
      
    padding-top:0;
    }
    #main {
      
    margin0;
      
    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.
    Last edited by toplisek; 06-02-2010 at 11:23 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Insufficient data. Please post your html or a link to your page.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    May 2006
    Posts
    228
    Thanks
    4
    Thanked 0 Times in 0 Posts
    please find whole code:
    PHP Code:

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

    }
    #content {
    background-position:center top;
      
    width1000px;
      
    margin-top:0;
      
    padding-top:0;
    }
    #main {
      
    margin0;
      
    padding:0;
    }

    em {
      
    font-stylenormal;
    }
    #toppart {
        
    height120px;
        
    margin0;
      
    padding:0;
    }
    #header1 {
     
    background#003559 url(../images/banner.gif) no-repeat left top;
      
    margin-top0;
      
    padding:0;
      
    width100px;
      
    height90px;

    Code:
    <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>

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I have around 22px under top line.
    I don't see any such issue for the above given code.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    May 2006
    Posts
    228
    Thanks
    4
    Thanked 0 Times in 0 Posts
    You have private message. I kindly ask you to check..Thanks.

  • #6
    Regular Coder
    Join Date
    May 2006
    Posts
    228
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question

    I try to be more clear:
    please find code:

    PHP 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[*/
    * {
      
    margin0;
      
    padding0;
    }
    body{
      
    background#FF0000 url(../images/bg1.gif) repeat-x top;
      
    margin-top0px;
    }
    #mycontent1 {
      
    background-positiontop left;
      
    width1008px;
      
    margin0 0 0 0;
    }
    #topsection {
      
    positionrelative;
      
    width1008px;
      
    height121px;
      
    margin-top0;
      
    padding-top0;
    }
    #header1 {
      
    background#003559 url(../images/banner.gif) no-repeat center top;
      
    margin-top0;
      
    height121px;
    }
    #middle {
      
    width100%;
      
    margin0;
      
    padding0 0 0 2px;
      
    text-alignleft;
      
    border0px solid #000000;
      
    overflowhidden;
    }
    /*]]>*/
    </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

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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, which is unfortunately(?) not present in the above sample codes.
    Last edited by abduraooft; 06-02-2010 at 03:55 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    Regular Coder
    Join Date
    May 2006
    Posts
    228
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Can you post me working above code?

  • #9
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    What browser are you seeing this problem in, because as abduraooft said, there is no problem with the code you posted and the content is at the complete top..You need to show us an example of the problem in action...mentioning browsers also


  •  

    Posting Permissions

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