Div Top Padding

  • I have a wrapper that keeps my content to the center of the page. I can’t get it to go all the way to the top of the browser window though. It has some padding at the top. How do I remove this?

Viewing 3 replies - 1 through 3 (of 3 total)

  • Without seeing code, this question is impossible to answer…

    Thread Starter MaddTechWF

    (@maddtechwf)

    Okay,

    So I have this code.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test 2.0</title>
        <link rel="stylesheet" type="text/css" href="960.css"/>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body id="page-post">
    	<div id="page" class="container_12">
        	<div id="header_wrap">
            	<h1 id="logo"></h1>
                <div id="menu_wrapper">
                	<ul id="menu">
                    	<li><a href="#" class="current">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Contact Us</a></li>
                   	</ul>
                </div>
            </div>
        </div>
    </body>
</html>

    CSS

    #home
{
	background: #fff url('images/home-bg.gif') repeat-x;
}

#page-post
{
	background: #fff url('images/post-page-bg.gif') repeat-x;
}

#header_wrap, #featured_wrap, #footer, #main_content_inner, #title_wrap_inner, .center_wrap, .title_wrap
{
	width:960px;
	margin:0 auto;
}

*Menu Style*/

#menu_wrapper
{
	float:right;
	width:74%;
}

#menu
{
	padding-left:36px;
	padding-bottom:0;
}

#menu li
{
	list-style:none;
	display:inline;
	margin-left:0px;
}

#menu li a
{
	font:14px Arial, Helvetica, sans-serif;
	color:#fefefe;
	text-decoration:none;
	padding:16px 16px 16px 16px;
	display:block;
	float:left;
}

#menu li a:hover
{
	color:#adcdca;
	padding:16px 16px 16px 16px;
}

#menu li a.current
{
	color:#adcdca;
	border-top:4px solid #adcdca;
	padding:12px 16px 16px 16px;
}

ul#menu  li.current_page_item a
{
	color:#adcdca;
	border-top:4px solid #adcdca;
	padding:12px 16px 16px 16px;
}

    I want the blue bar that shows that a menu item is selected to be all the way to the top of the browser window.

    You have:

    <div id="header_wrap">
	<h1 id="logo"></h1>
        <div id="menu_wrapper">
             ...
        </div>
</div>

    Could it be that <ccode><h1 id=”logo”></h1> is taking space, rather than collapsing, thus resulting in the white space that you see?

    If not that, then look for the style declarations for the following selectors:

    #page {}
.container_12 {}
#header_wrap {}
#logo {}

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Div Top Padding’ is closed to new replies.