Margin problem

Andy17 · March 19, 2010

Hey,

I have a problem positioning a box within an ID. I would like the aqua box on the link below to be positioned 10px to the right and 10px down from the top (from the dark gray menu container). The problem is that I get this light gray line (this is the body color) above the aqua box where I want white instead like at the left side.

http://smykke.hqdesigns.net/cyk/

The colors are obviously temporary. And for those who wonder, I only have the subdomain above...

Anyways, I hope you guys understand what my problem is. Here is the code:

HTML

<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="shadow-left"><div id="shadow-right">
        <div id="banner"></div>
        <div id="menu">
            <ul class="menu">
                <li><a href="/">Forside</a></li>
                <li><a href="/">Forum</a></li>
                <li><a href="/">Links</a></li>
                <li><a href="/">Kontakt</a></li>
            </ul>
        </div>
            <div id="content">
                <div id="loginBox"></div>
            </div>

        <div id="footer">Copyright &copy 2010 Cykelsnak.dk - All rights reserved.</div>
    </div></div>
</body>
</html>

CSS (the relevant part is under containers -> #loginBox and #content)

/* +++++ General settings begin +++++ */

body {
margin:0;
padding:0;
background-color:#cccccc;
font-family: Arial, Helvetica, Verdana, Sans-serif;
}

/* ----- General settings end ----- */




/* +++++ Menu settings begin +++++ */


.menu {
margin:0;
padding:0;
/*width:73.5%;
height:24px;*/
text-align:center;
font: bold 14px Arial;
padding-top:6px;
margin-left:auto;
margin-right:auto;
/*border-bottom: 1px solid #bdb99f;*/
}

.menu li {
display: inline;
}

.menu a {
color:blue;
text-decoration:none;
padding-right:14px;
}

.menu a:hover {
color:red;
}


/* ----- Menu settings end ----- */




/* +++++ Containers begin +++++ */

#banner {
height:125px;
background-color:#DDF3FF;
margin: 0 auto;
}

#menu {
height:30px;
background-color:#555555;
margin: 0 auto;
}

#content {
height:500px;
background-color:#ffffff;
margin: 0 auto;
}

#footer {
height:20px;
background-color:#ffffff;
margin: 0 auto;
text-align:center;
font-size:12px;
}

#loginBox {
    margin-left:10px;
    margin-top:10px;
    width:10%;
    height:10%;
    background-color:Aqua;
}

/* ----- Containers end ----- */



/* +++++ Shadows begin +++++ */

#shadow-left, #shadow-right {
margin: 0 auto;
}

#shadow-left {
background: url(../images/site/shadow-left.png) left repeat-y;
width:80%;
}

#shadow-right {
background: url(../images/site/shadow-right.png) right repeat-y;
padding-left:33px;
padding-right:33px;
}

/* ----- Shadows end ----- */

Thanks in advance!

haku · March 19, 2010

put 10px padding on the content div instead of the top margin on the aqua div.

Andy17 · March 19, 2010

Thanks!

Sign In

Margin problem

Recommended Posts

Andy17

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Andy17

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information