Home/ Questions/Q 6683639
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T04:50:42+00:00

I have a div in my html called logo and what I am trying

  • 0

I have a div in my html called logo and what I am trying to do is drop the margin-top or padding-top the logo so its not hard up against the body background.

I have tried the above but I cannot get it to budge.

HTML:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Template 2011</title>
    <link rel="stylesheet" href="_assets/css/style.css">
</head>
    <body>
        <header>
            <div id="logo"></div>
                <div id="line"></div>
                <nav>
                    <ul>
                        <li><a href="#">home</a></li>
                        <li><a href="#">services</a></li>
                        <li><a href="#">portfolio</a></li>
                        <li><a href="#">contact us</a></li>
                    </ul>
                </nav>
        </header>
        <section id="banner">
            <img src="_assets/images/banner_1.jpg" alt="Banner" width="960px" height="161px" />
        </section>
            <section id="content">
                <h1>Web Development Guru At Your Service </h1>
                    <p></p>



</section>
    <footer>
            <p>This is the footer</p>
        </footer>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
            <script src="_assets/js/cufon-yui.js" type="text/javascript"></script>
            <script src="_assets/js/Myriad_Pro_400-Myriad_Pro_700.font.js" type="text/javascript"></script>
            <script src="_assets/js/js.js" type="text/javascript"></script>

CSS:

html{
    height:100%;
    width:100%;
    background:url(../images/bg.jpg) repeat;
}
body{
    width:960px;
    height:100%;
    background-color:#e3e3e3;
    margin:42px auto;
}
p,h1,h2{
    margin:25px;
    font:Myriad Pro;
}
h1{
    color:#000;
}
header{
    width:100%;
    height:210px;
}
#logo{
    height:115px;
    width:159px;
    margin:0 auto;
    background:url('../images/logo.png') no-repeat;
    border:1px solid red;
}

header nav{
    width:410px;
    height:18px;
    margin:20px auto;
}
header nav ul{
    width:100%;
    height:18px;
    margin:0 auto;
}
header nav ul li{
    float:left;
    display:block;
    margin:0 auto;
}
header nav li a{
    float:left;
    width:85px;
    padding:0 3px 3px 3px;
    font:18px Myriad Pro;
    text-decoration: none;
    color:#99999a;
}
header nav li a:hover, a:active{
    font:18px Myriad Pro bold;
    color:#67686a;
}
#line{
    clear:both;
    width:610px;
    height:1px;
    margin:0 0 0 235px;
    background:url('../images/line.png') no-repeat;
}
#banner{
    width:100%;
    height:161px;
}
#content{
    float:left;
    width:100%;
    height:100%;
    background-color:#e3e3e3;
}
footer{
    clear:both;
    height:24px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Because it’s the background image, you have to add space (via padding or margin) outside the div.

    <div style="padding:10px;">
    <div id="logo"/>
</div>
    • 0