SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having trouble converting list to inline

    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/r...nt-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

    HTML Code:
    <!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>
    Code:
    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}

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well the <li>'s are block level elements and they are the main parent of each "option" so you need to float:left; on the <li>'s to get them side by side.

    As a result of doing that, you'll need to give overflow:hidden to the <ul> parent.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •