WordPress.org

Ready to get started?Download WordPress

Forums

Div Top Padding (4 posts)

  1. MaddTechWF
    Member
    Posted 3 years ago #

    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?

  2. Chip Bennett
    Theme Review Admin
    Posted 3 years ago #

    Without seeing code, this question is impossible to answer...

  3. MaddTechWF
    Member
    Posted 3 years ago #

    Okay,

    So I have this 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">
        <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.

  4. Chip Bennett
    Theme Review Admin
    Posted 3 years ago #

    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 {}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.