tags:

views:

48

answers:

1

How do i have a space between my menu header and my body of text? Also is this good practice?

div.body
{
    width: 6.5in;
    margin:0px auto;
    text-align:left;
}

.menu ul{
    margin:0px auto;
    }
.menu li{
    width: 25%;
    text-align:center;
    display:block;
    float:left;
    }
.menu a{
    display:block;
    }

html:

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

<div>
    <div class="menu">
    <ul>
    <li><a href="">Home</a></li>
    <li>Test</li>
    <li>Test 2</li>
    <li>Contact</li>
    </ul>
    </div>
</div>


<div class="body">
lots of textlots of textlots of textlots of textlots of textlots of textlots of textlots of text
<the above repeated many times>

</div>
</body>
</html>
+1  A: 

Set top margin on your body of text:

div.body
{
  width: 6.5in;
  margin: 10px auto 0px auto;
  text-align: left;
}
knut
fyi, this solution centers the body
Mark
and of course you can use padding, or a margin-bottom on the menu depending on your needs
Mark
..or an invisible/blended-with-background border, useful under some circumstances where spacing would mess things up.
fandelost