I’m trying to find a way to display these radio buttons inline rather than vertically aligned. I have tried setting display to “inline” but something else is prohibiting it from doing so. I’m using this tutorial as a starting point:
http://www.weblee.co.uk/2009/05/30/radio-button-replacement-with-style/
I only want 2 options so I removed options 3 and 4 from the demo listed in the link. Can some help me with the CSS to have the two options listed side by side. The checkbox can go on either side of the options, I’m not that concerned with it. Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/radio-demo.js"></script>
<title>Fancy Checkbox</title>
</head>
<body>
<h2>Check an Option</h2>
<div id="options">
<ul id="list">
<li class="active"><a href="#" class="option1 active" id="link1"><span>Option</span></a></li>
<li><a href="#" class="option2" id="link2"><span>Option</span></a></li>
</ul>
</div>
<p><a href="#" class="toggleform">Show Hidden Form Radion Buttons</a></p>
<form action="step2.html" method="post" id="radioform">
Option 1: <input name="option1" type="radio" value="option1" id="option1" checked="checked" /><br />
Option 2: <input name="option1" type="radio" value="option2" id="option2" /><br />
</form>
</body>
</html>
body{ margin:50px; }
#options{ margin:30px 50px 50px 0px; padding:0; }
#options ul{ margin:0; padding:0; }
#options li{
margin:0 0 5px 0;
padding:0;
list-style:none;
padding:0 0 0 42px;
}
#options li.active{
background:url('../images/tick.png') no-repeat;
}
#options li a span{
display:none;
}
a.option1{ background:url('../images/option1.png') no-repeat;}
a.option2{ background:url('../images/option2.png') no-repeat;}
a.option3{ background:url('../images/option3.png') no-repeat;}
a.option4{ background:url('../images/option4.png') no-repeat;}
a.option1, a.option2, a.option3, a.option4{
background-position:top;
display:block;
width:230px;
height:40px;
}
a.option1:hover, a.option2:hover, a.option3:hover, a.option4:hover{
background-position:bottom;
}
#options li a.active{
background-position:bottom !important;
}
#radioform{display:none}