Menu
Hi I have a code here that is all perfect except one thing. There is NO space between each button in the code. I've tried margin, but unfortunately its an unordered list so I am a bit confused. What would I add or replace to have space between the two buttons. Help?? :(
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
.rollovericons a#terms{
display: block;
width:138px;
height:27px;
background: url(http://icpy.webs.com/button/Terms.png) no-repeat;
}
.rollovericons a:hover#terms{
background: url(http://icpy.webs.com/button/Terms0.png) no-repeat;
}
.rollovericons a#contact{
display: block;
width:138px;
height:27px;
background: url(http://icpy.webs.com/button/contact.png) no-repeat;
}
.rollovericons a:hover#contact{
background: url(http://icpy.webs.com/button/contact0.png) no-repeat;
}
</style>
<body>
<div class="rollovericons">
<a href="http://www.twitter.com" id="terms"></a>
<a href="http://www.twitter.com" id="contact"></a>
</div>
</body>
852
add between them.
There are several methods that we can use to put spacing between two buttons. But the easiest way to achieve this is by using the margin property. You can either apply margin-right on the first button or margin-left on the second button. Both ways you can achieve the same task.
You can add more space between a button and text box by using “margin” attribute. If you want to add right side more space then add “margin- right”, for left side “magin-left”, for top side “margin-top”, for bottom “margin-bottom”.
Button Toolbar with Spacing Utilities [property][sides]-[size] will have the same results on all screens. If you want different spacing on different devices, you can add breakpoints and use the class . [property][sides]-[breakpoint]-[size] .
Just do:
.rollovericons a{
margin: 10px;
}
That will add a margin to every <a> item inside the rollovericons class.
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
