|
CSS - Displaying Radion Buttons Inline
At the bottom of my short form are two radio buttons that I wish to display inline, not vertically. My form is marked up with fieldset, legend and labels, and uses an unordered list to contain the form elements:
Code:
<form action=\"preso.php\" method=\"post\">
<fieldset>
<legend>Four Ways to Search</legend>
<ul>
<li>
<label for=\"l_name\">Last Name:</label>
<input id=\"l_name\" name=\"l_name\" class=\"text\" type=\"text\" />
</li>
etc, etc...
</ul>
<ul>
<li id=\"genderButtons\">
<label for=\"maleGender\">Male</label>
<input id=\"maleGender\" name=\"gender\" class=\"radio\" type=\"radio\" value=\"m\" />
<label for=\"femaleGender\">Female</label>
<input id=\"femaleGender\" name=\"gender\" class=\"radio\" type=\"radio\" value=\"f\" />
</li>
</ul>
<submit / reset buttons displayed here >
</fieldset>
</form>";
I found several articles online concernign displaying those two rotten radio buttons inline, and all indications point to using the display:inline; selector. But I cannot for the life of me make it work. Here's the CSS I have so far for this form (directory is a <div>...</div> that wraps the form): Code:
#directory fieldset {
margin:1.5em 0 0 0; padding:0;
}
#directory legend {
margin-left: 1em;
font-weight:bold;
}
#directory fieldset ul {
list-style-type: none;
padding: 1em 1em 0 1em;
}
#directory fieldset li {
padding-bottom: 1em;
}
Can you tell me how to get those two blasted radio buttons and their labels to line up and pay attention? :-) Thank you very much for your effort. Similar TutorialsI have been trying in vain to get div elements on a page to behave how i want them to. I have a list of items, in the middle of which i need to display some tablular information witha picture along side it. This i have managed to acieve fine, but i can't get the next <li> to start below these 2, it starts alongside and the wraps underneath. I have tried everything. Can anyone help? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- #wrapper{ font-family:Verdana, Arial, Helvetica, sans-serif; margin-left: 20px; width: 550px; font-size: 12px; line-height: 22px; letter-spacing: 0.5px; color: #666666; } #topimg { margin: 20px 0; padding-bottom: 20px; border-bottom: 1px dotted #CCCCCC; text-align:left; display:block; } #secondimg { margin: 0 0 0 20px; text-align:left; display:block; } #bodyimg{ padding: 20px 0px 20px 20px; float:left; display:block; } #listtable{ padding-top: 20px; padding-bottom: 20px; float:left; font-size: 10px; letter-spacing: 0.5px; color: #891C46; list-style-type: none; line-height:18px; } #listtable li{ margin: 1px; padding: 1px; } #listtable div { margin: 1px; padding: 1px; background-color: #F7F7F7; } --> </style> <title>Carlton</title> </head> <body> <div id="wrapper"> <div id="topimg"> <img src="/carlton-newsite/img/planandbuy/planandbuy.gif" width="173" height="33"> </div> <div id="secondimg"> <img src="/carlton-newsite/img/planandbuy/thebasics.gif" width="133" height="23"> </div> <ul> <li>Cinema Advertising is available in weekly blocks starting on Fridays.</li> <li>It is possible to buy <em> guaranteed admissions</em> by TV region, <em> follow specific films</em> or <em> nominate individual screens</em>. </li> <li>The minimum time unit available is 5 seconds. Prices differ based on commercial length with indeces using 30” as a base: </li> <div id="listtable"> <table width="200" border="0" cellspacing="0" cellpadding="0" class="nobullet"> <tr> <td width="105"> <li> <div>5”</div> </li> <li>10”</li> <li> <div>20”</div> </li> <li>30”</li> <li> <div>40”</div> </li> <li>45”</li> <li> <div>50”</div> </li> <li>60”</li> <li> <div>90”</div> </li> </td> <td width="95"> <li> <div>.3”</div> </li> <li>.5”</li> <li> <div>.8”</div> </li> <li>.1.00”</li> <li> <div>.1.33”</div> </li> <li>.1.50”</li> <li> <div>.1.67”</div> </li> <li>.2.00”</li> <li> <div>.3.00”</div> </li> </td> </tr> </table> </div> <div id="bodyimg"> <img src="/carlton-newsite/img/digital_adver/satelite.jpg" width="220" height="182"> </div> <li>Cinema commercials are shown on 35mm film, it is easy to get your TV ad transferred by our production department. </li> <li>Lead times from booking to getting on screen are 3 weeks, although CSA’s <em> Early Booking Incentive</em> guarantees extra value if you can book your campaign 6 weeks in advance of start date. </li> <li>Cinema Advertising Association <em> cinema buying guidelines</em> ensure your campaign meets industry agreed standards. </li> </ul> </div> </body> </html> I'm having some problems with creating a layout using nested 'divs' displayed as inline-blocks. I know that for FireFox 3.0 all that needs to be done is display:inline-block; and for IE lte 8 I need to trigger layout in the 'divs' and then set them as display:inline; To my understanding setting display:inline-block; triggers layout in IE (as does zoom: 1; or giving the div depth; height and width) Then all you need is to do is <!--[if lte IE 8]> <style> display:inline;</style><![endif]--> I've achieved this layout style in a previous website, yet with the exact same technique my results are nill. Can someone please compare at my code in ff3 and IE and tell me what I'm doing wrong.
Code: <html> <head> <!--[if IE]> <style type="text/css"> #container div {display:inline;} #ul_top li {display:inline;} #header p {display:inline;} #main_content div {display:inline;} #recreation div {display:inline;} </style> <![endif]--> <style type="text/css"> body {padding:0px; margin: 20px 0px 0px 20px; } h1 {color:#990D0D; font-size: 20px; text-indent: 40px} #limiter {width: 1003px; } #ul_top {margin:0px; text-align:right; } #ul_top li {display:inline-block; zoom:1; padding: 0px 5px 0px 0px; } #ul_top li a {color:#000; text-decoration:none; font: veranda; font-size: 11px; } #ul_top li a:hover {color:#DE6800; text-decoration: none; font: veranda; font-size: 11px; } #container {border: solid #000 1px; background: #FFF url('background.jpg'); text-align:left; width: 1000px; height: 750px; } #header {width:1000px; height:303px; background:#yellow url('red_rock_header.jpg') no-repeat; } #header p {display:inline-block; zoom:1; font-size: 20px; } p.company_name:first-letter { color:#990D0D; font-size:40px; } #main_content div {display:inline-block; vertical-align:top; zoom:1;} #recreation {width:430px;} #recreation div {display:inline-block; vertical-align:top; zoom:1;} #text_holder{ border-right: dashed black 1px; padding:15px; width: 375px;} a.rec_links {color:#DE6800; font-size: 18px; } a.rec_links:hover {color:#000; font-size: 18px; } a.pic_links { display:block; position: relative; width: 200px; height: 160px; } #climbing {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('climbing.jpg') no-repeat; } #bicycling {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('bicycling.jpg') no-repeat; } #hiking {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('hiking.jpg') no-repeat; } #wildlife {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('wildlife.jpg') no-repeat; } p.discription {font-size: 12px; text-indent: 20px; } </style> </head> <body> <div id="limiter"> <ul id="ul_top"> <li><a class="mini_link" href="#">Contact us</a></li> <li><a class="mini_link" href="#">Area Map</a></li> <li><a class="mini_link" href="#">About us</a></li> </ul> <div id="container"> <div id="header"> <p class="company_name">Red<p class="company_name">Rock</p><p class="company_name">Recreation</p> </div> <div id="main_content"> <div id="text_holder"> <h1>Red Rock Canyon Las Vegas NV:</h1><p class="discription"> Red Rock Canyon, located just a few miles west of Las Vegas, is named for the deep red 3,000-foot-high sandstone cliffs that are perched above the dusty wastelands of this part of the Mojave Desert. The view from any part of the park is breathtaking: mostly nature fills the view, but from some points you can make out the entire Las Vegas Strip in the distance!</p><p class="discription"> Climbing, hiking, and bicycling throughout the park is fun and exiting for the whole family. In the summer time water, sunscreen, and proper equipment is necessary. Elderly and young children can opt to drive around the park (a small fee for motorized vehicles aplies) along a 13-mile paved loop and still experience the scenic views.</p><p class="discription"> A visitor's center provides information on area history, geology, flora and fauna (visitors may encounter burros, big horn sheep or desert tortoises). You can also pick up a map of the park with detailed hiking routes (beginner, intermediate, and advanced levels). Rangers offer guided tours at no charge -- see website for schedules.</p> </div> <div style="width: 100px;"><p class="company_name">Red<p class="company_name">Rock</p><p class="company_name">Recreation</p></div> <div id="recreation"> <div style="text-align:center;"><a class="rec_links" href="#">Climbing</a><br /> <div id="climbing"> <a href="#" class="pic_links"></a> </div> </div> <div style="text-align:center;"><a class="rec_links" href="#">Bicycling</a><br /> <div id="bicycling"> <a href="#" class="pic_links"></a> </div> </div> <div style="text-align:center;"><a class="rec_links" href="#">Hiking</a><br /> <div id="hiking"> <a href="#" class="pic_links"></a> </div> </div> <div style="text-align:center;"><a class="rec_links" href="#">Wildlife</a><br /> <div id="wildlife"> <a href="#" class="pic_links"></a> </div> </div> </div> </div> </div> </body> </html>
I'm make a simple display:hidden , display:visiable "pop up" div box. The popup works wonderful in FF but IE, the button does not display. Here is my full page (short and simple) Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function DIVshow(div_id)
{
var popUp = document.getElementById(div_id);
popUp.style.visibility = "visible";
}
function DIVhide(div_id)
{
var popUp = document.getElementById(div_id);
popUp.style.visibility = "hidden";
}
</script>
<style type="text/css">
#popupcontent {
position: absolute; top: 50%; left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
visibility: hidden;
overflow: hidden;
background-color: #F6F6BB;
border: 1px solid #333;
padding: 5px;
}
</style>
</head>
<body>
<p><a href="#" onClick="DIVshow('popupcontent');">Click here</a> to open the popup.</p>
<div id="popupcontent">
<p>This is a popup window!</p>
<input type="button" value="close" onClick="DIVhide('popupcontent');" />
</div>
</body>
</html>
Working sample can be seen he Click Here It works in both IE and FF if I write my hidden div tag like this: Code: <div id="popupcontent">
<div>
<p>This is a popup window!</p>
<input type="button" value="close"
onClick="DIVhide('popupcontent');" />
</div>
</div>
Obviously I want to avoid the extra div tags if possible. Anybody know what happening here and how to fix it? Thanks! Hi, I'm having a slight problem with my css. I want to display a comment with a number of images to the right of it. e.g "Excellent" plus 5 stars next to it (note: images of stars) so i tried this: Code: <div id = "commentText"> Excellent </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "commentText"> Fantastic </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> css Code:
#commentText
{
font-size: 100%;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
padding-left: 30px;
}
#star
{
display: inline;
height: 24px;
background-image: url(images/star.png);
background-repeat: no-repeat;
padding-left: 20px;
}
I currently have comment with 3 stars displayed underneath it - however they are only half being shown for some reason. Any help is appreciated to help me get the desired effect. Thanks! My vertical CSS navigation menu buttons overflow when adding 10 or more buttons. The new buttons end up to the right side of the top buttons. If I change the html format for paragraph format it stops this, but in IE there becomes big space between the buttons. Here is the site: http:// bradleyrose . net / WaterStreetRestaurant Hello everyone, I'm working on this page http://jordanmeeter.com/photos/sets/ and I want to get the set description inline with the <h2>. I can just baaaaarely remember how to do it, but everything I'm trying doesn't work. Can someone help me out? Thanks, Jordan This is bugging me to death. I cannot get these to top elements to display inline. If anyone could take a look in firebug to see element and related css applied and tell me whats wrong. The page is: http://travelmagoo.com/index.php?option=com_resource&controller=article&article=384&category_id=201&Itemid=0 at the top header there is a title and to the right there is an image. I would like the image and title to be on the same line but everything i do will not let me do this. any ideas? What is the difference between inline styles and id's? Are there places where you should use one and not the other? Sorry if this has already been answered but I couldn't find anything in a search. I have 4 or 5 form controls that I want in a horizontal line. Each form control has a label above it, and I'm using <br>s to position the form control below the label. I thought that wrapping each "label<br>form control" with a <span> would turn the whole thing into an inline block, where the next <span> would line up next to it, like the next <td> in a <tr>. Code:
<div id=secondline>
<span id=ed>
<b>Event Definition</b>:<br>
<textarea name=inject cols=45 rows=6></textarea>
</span>
<span id=after>
<b>After</b><br>
<select name=next size=8 multiple>
<option value=0>0
...
<option value=100>100
</select>
</span>
</div>
but, alas, it doesn't work like that. How can I get Code: <tr> <td>label<br>form_control</td> <td>label<br>form_control</td> </tr> behavior without using tables? Hello, I have the following css css Code: Original - css Code ul#menulist{ position:relative; top:0px; list-style-type:none; margin:0; padding:0; } ul#menulist li{ background-color:#717100; display:inline; margin:0; padding:0 10px; border:0; height:30px; } ul#menulist li a{ text-decoration:none; margin:0; padding:0; border:0; }
A gap is appearing between <li> elements in Opera and FF but not in IE. You can check it here Which is the correct behaviour? How do I remove the gaps between <li> elements in a valid way. Thank you. Hi, i have to display a list of links horizontally, wrapped in a <ul> tag. For seo reasons now these links have to be wrapped in <h2> tags. In IE6 + IE7 this causes a linebreak and the links are displayed in a vertical list. sth like #myId LI { display:inline-block; } #myId LI H2{ display:inline-block; } solves the problem for Firefox but not for IEs. Do you know a solution? Would be highly appreciated! here the html <ul id='myId'> <li><h2><a htref=...>somewhere</a></h2></li> <li><h2><a htref=...>somewhere</a></h2></li> </ul> OK Found out a float:left in the li was missing In the code below you see i have a container div. Inside of that are two divs. I would like the two divs to align side-by-side and valign to the top of the container div. I can get them side-by-side, but not to valign both to top. What am i doing wrong? Code: <div class="" style="width:530px; border-width:1px; border-style:solid; border-color:#ccbbaa; text-align:left; padding:10px;"> <div class="" style="position:relative; z-index:7; width:300px;"> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. </div> <div class="" style="position:relative; z-index:6; width:200px; left:320px;"><IMG src='test.jpg' width='125'></div> </div> Sometimes CSS makes me want to tear my hair out. I'm trying to make a custom form input that is a combination of a regular select drop down and a multiple select. I have the javascript all sorted out and my input works like a charm. I can't figure out any way to make it display like a <select> does though. I thought I could simply do this: <ul style="display: inline"> According to w3schools, this will tell the element to display without a line break before or afterward. Much to my despair, it's not that simple. Here's an example: Code: <div> This is some text <select name="test"> <option value="">Click to expand</option> <option value="1">One</option> <option value="2">Two</option> </select> <input type="submit" value="Submit" /> </div> <hr /> <div> This is some text <ul name="test" style="display: inline;"> <li>Click to expand</li> <ul style="display: none;"> <li value="1">One</li> <li value="2">Two</li> </ul> </ul> <input type="submit" value="Submit" /> </div> Notice how the regular old html input sits nicely inline with the text before it and the submit button after it? Notice how the ul doesn't, despite the fact it's set to display inline? Anybody have any suggestions? Hello, my code works fine on my MAC browsers, but on my PC, IE6 browser, the buttons underneath the body of the page don't align. Here's the site: http://www.caillouette.com/Utilitrek/three/ Here's the CSS:http://www.caillouette.com/Utilitrek/three/style2.css Can someone tell me if this site looks okay in IE 7? I can't download IE 7 because of some technical quirk on my computer. And if they don't align in IE 7, please tell me what I should do. thanks -Sean The Problem: I want my logo (a gif image) to justify to the left but padding centers it. Is there a way to NOT pad one "cell" in an inline navigation bar using css without affecting the rest which follow (which are padded)? Please email me for urls to see exactly what I'm working with. Many thanks in advance! Hi there... Simply enough, I'd like to get my column widths (for the "menu" and "content" div's) appearing in IE5+ as they do in Firefox. URL: http://www.cbaa.org.au/3cfor_web/ejournal_header.html CSS: http://www.cbaa.org.au/3cfor_web/layout2.css I've tried this technique: http://glish.com/css/hacks.asp but I'm not sure what I'm doing wrong. Any help greatly appreciated. Got a quick question from a newbie. Thanks to a kind member, I've just been assisted in creating my first HTML5/CSS 3.0 page. It has a footer that extends vertically with content. I have several pages that will be updated that will be changed frequently. In my world of tables, I would simply create an inline frame to display them, and have ease of quick editing. The questions I have are 1) is there a CSS alternative to have mulitlple links display different content in a particular frame or div? 2) With either that alternative OR inline frames, is there a way to make it dynamic, meaning instead of scrolling, it extends downward and pushes the footer down as content grows? 3) if so, how would I accomplish this? I am new to this forum and need some help! I am creating a page and the sidebar has links. I have a graphic link that I DO NOT want highlighted. I have tried everything I can think of, but I don't think I am able to apply the link styling as an inline style, or am I wrong. Any help would be appreciated! http://annesweb.com/abramoff/ I'm having trouble getting the following to work im = image Code: im im <div id = "controlText">Variable Length Text</div> im im my style info Code:
#controlText{
position:inline;
text-align:center
width:200px
}
I know that once I turn the div into an inline element I throw away the width which is what my problem seems to be. What is happening is you click forward (these are calendar controls) one month and then the text is short and your mouse is now over the year forward button which you then accidently click. I want the div or whichever tag to alwasy have the same width no matter what the text. Is there any other way to get this to work than multiple floated divs? |
|||||||