Forum Moderators: not2easy

Message Too Old, No Replies

Trying to set margin of links

         

Jeremy_H

5:06 am on Dec 10, 2005 (gmt 0)

10+ Year Member


I'm trying to create three buttons that are between two DIVs.

I would like for each button to have 5px on-top and on-bottom, aswell as 5px between each one.

However, I'm having a devil of a time doing it.

Could somebody show me what I must be doing wrong?

Thanks!

***********

<html>
<head>
<style type="text/css">
.black{width:748px;height:50px;background:#000}
#button{margin:5px 0}
#button a{width:239px;height:30px;background:#888;float:left;color:#fff;border:1px solid #000;line-height:28px;padding-left:5px}
#button a:hover{color:#000;background:#eee}
#b1 a,#b2 a{margin:0 5px 0 0}
</style>
</head>

<body>
<div class="black"></div>
<div id="button">
<a href="/1/" id="b1">1</a>
<a href="/2/" id="b2">2</a>
<a href="/3/" id="b3">3</a>
</div>
<div class="black"></div>
</body>
</html>

Span

9:33 am on Dec 10, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You were almost there ;)


<html>
<head>
<style type="text/css">
.black {width:748px;height:50px;background:#000;}
#button {margin:5px 0;}
#button a {width:239px;height:30px;background:#888;float:left;color:#fff;border:1px solid #000;line-height:28px;padding-left:5px;}
#button a:hover {color:#000;background:#eee;}
#b1,#b2 {margin:0 5px 0 0;}
br.clear {clear:both;}
</style>
</head>


<body>
<div class="black"></div>
<div id="button"><a href="/1/" id="b1">1</a>
<a href="/2/" id="b2">2</a>
<a href="/3/" id="b3">3</a><br class="clear" /></div>
<div class="black"></div>
</body>
</html>