|
CSS - Trying To Get Radio Buttons To Display Horizontal
Hello,
I have been reading through this message board for a few days now and have found great information that has helped me more than you could realize. I am here with my own problem now though and hoping somebody will be able to help me. When I took on this project I never would have imagined I would be spending this much time on trying to get radio buttons in a form to display correctly. The client wants four buttons listed horizontal, but for the life of me I can not get it to work. I have tried putting them in an unordered list, separate floating divs but nothing has worked. If anyone is able to point me in the right direction on how to get the radio buttons to list horizontal in css I would really appreciate it. The site I am working on has approximately ten different forms that all need the buttons listed this way. Thank You in advance for any help..I look forward to spending time on this site in the future. Adam Similar TutorialsI am attempting to create a form to collect data from users. Basically it is just a series of yes/no/not applicable answers. I have been attempting to format the form to look like this link http://www.nateandstephie.com/php/mrrc/test.php As you can see the fieldset is nicely arranged. The problem arises when I attempt to change one of the text inputs into three seperate radio buttons. The buttons end up vertical or right on top of one another. I am guessing there has to be a way by adjusting margins or something but I cannot seem to find it. Below is the code for the link above. Any help on solving this problem or if you have a better suggestion for how to create the type of form I am looking for is greatly appreciate. Thanks!! Code: <style type="text/css">
form, label, input {
font-size : 1em;
}
fieldset {
width: 700px; margin: 0 auto; padding: 10px 20px;
}
legend
{border: 1px solid #000; padding: 5px;
}
label {
position: relative; /* makes this the 'containing block' for the Absolutely Positoned input element */
width: 330px; /* see 20px left margin on input to center with 'cellspacing' */
display: block; /* required because label is an inline element by default */
text-align: right; /* right align text in label */
margin: 20px 0;
background: #ffd;
}
label input {
position: absolute;
top: 0;
left: 100%; /* position at right side of label */
margin-left: 20px; /* adds a gap between label and input */
width: 350px;
}
br {
display : none;
}
</style>
<p>This page is based entirely on <a href="http://www.webmasterworld.com/forum83/3758.htm">Wertigons css forms thread</a></p>
<form method="post" action="">
<fieldset id="qanda">
<legend>questions & answers</legend>
<label for="a1">Please enter your name:<input type="text" name="a1" id="a1" /></label><br />
<label for"a2">Would you like to share your email?:<input type="text" name="a2" id="a2" /></label><br />
<label for="a3">What is the nature of your question:<input type="text" name="tel" id="a3" /></label><br />
</fieldset>
</form>
Other than changing the background color behind the radio button, does anyone know if it is possible to change the color inside the button to anyhing but white? More specificaly, when a button is disabled, anyway to change the grey color on the inside? Thanks guys! Hi all! I'm wondering for quite a while now... when you put text or a label next to a radiobutton, it never lines up nicely. The (label) text is always a bit lower then the radiobutton. A common solution to this is using tables. But I don't want to use this "hack". I've also tried CSS margins and padding, but these don't seem to help. Is there any elegant way out there to get the text nicely lined up with a radiobutton? Thanks! Hey, In Firefox, Safari and Chrome etc, the poll in the sidebar on my website looks perfect: Lil Wayne HQ But in Internet Explorer, it displays the text underneath the radio button, instead of to the right of the button. This is what the poll currently looks like in IE: But this is what I would like it look like, and what it already looks like in other browsers: Anyone know how I can fix this with css? And I am using a IE specific style sheet. Thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> </head> <body> <div style="background-color: red;"><input type="radio" id="radio"></div> </body> </html> Viewing this simple test page in a broswer shows that IE and Mozilla both vertically align the radio button differently within its "box" as well as giving it a different number of pixels of padding and/or margin on all 4 sides. Are there any tricks to getting consistency? I have several <a>'s on my page, where their display is set to block, and I want to put a submit button in each of them. When I put the <button> in the <a></a>, though, the submit button doesn't go to the processing page, it just goes where the <a> was headed. How to I get the submit button to go to the processing page and not where the <a> was headed? I could put the submit button below the <a> block, but that's very unattractive, and I want the user to be able to click anywhere in the block to go to the next page (except for where the submit button is.) Any help much appreciated! Hey, I have a feeling that this will not be difficult to solve, but I've come to the point where I don't really know what to do any more. They say two heads are better than one; that's why working in a team is so great, because there are people from different walks of life. So, any help you can provide me from your experiences would be great! I have five buttons that do not show up on firefox, and the images are called into play through CSS using background. You will find the code below: This is the CSS: Code:
.borderBelowNav
{
position: absolute;
top: 0;
left: 80px;
width: 937px;
height: 141px;
z-index: 2;
}
img.borderBelowNav
{
display: block;
margin-left: auto;
margin-right: auto;
}
.divNav
{
position: absolute;
top: 55px;
left: 175px;
width: 785px;
height: 61px;
z-index: 3;
}
ul#mainNav,
ul#mainNav li
{
margin: 0;
padding: 0;
}
ul#mainNav li
{
display: inline;
}
ul#mainNav li a
{
width: 138px;
height: 69px;
}
ul#mainNav li#quienesSomos a
{
width: 138px;
background: url(../images/quienesSection.gif)
no-repeat 0 0;
top: 0;
left: 0;
}
ul#mainNav li#quienesSomos a:hover
{
background-position: 0 -72.9px;
top: 0;
left: 0;
}
ul#mainNav li#campamentos a
{
width: 138px;
background: url(../images/campamentosSection.gif) no-repeat 12px 0;
top: 0;
left: 0;
}
ul#mainNav li#campamentos a:hover
{
background-position: 12px -71.2px;
top: 0;
left: 0;
}
ul#mainNav li#noticias a
{
width: 150px;
background: url(../images/noticiasSection.gif) no-repeat 14px 0;
top: 0;
left: 0;
}
ul#mainNav li#noticias a:hover
{
background-position: 14px -72.5px;
top: 0;
left: 0;
}
ul#mainNav li#aplicacion a
{
width: 150px;
background: url(../images/aplicacionSection.gif) no-repeat 0px 0;
top: 0;
left: 0;
}
ul#mainNav li#aplicacion a:hover
{
background-position: 0px -76.1px;
top: 0;
left: 0;
}
ul#mainNav li#contactos a
{
width: 150px;
background: url(../images/contactosSection.gif) no-repeat 0px 0;
top: 0;
left: 0;
}
ul#mainNav li#contactos a:hover
{
background-position: 0px -72.2px;
top: 0;
left: 0;
}
This is the HTML: Code: <img class="background" src="images/treesInFog.jpg" alt="" /> <img class="innerBackground" src="images/bgroundmain02.jpg" alt="" /> <!--This div is for the black border behind the nav--> <div class="borderBelowNav"> <img class="borderBelowNav" src="images/borderBelowNav.jpg" alt="" /> </div> <div class="divNav"> <ul id="mainNav"> <li id="quienesSomos"><a href="quienesSomos.php" title="Quienes Somos"> </a></li> <li id="campamentos"><a href="campamentos.php" title="Campamentos"> </a></li> <li id="noticias"><a href="#" title="Noticias"> </a></li> <li id="aplicacion"><a href="aplicacion.php" title="Aplicacion"> </a></li> <li id="contactos"><a href="#" title="Contactos"> </a></li> </ul> </div> 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 I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? Hi this is my first post. I'm having trouble making a horizontal navbar with a picture background. here is the vertical menu. http://school(dot)timswildwackyemporium(dot)com/NewMouseOver/navtest.html replace (dot)s with period I want to make the buttons next to each other, but with about 10px space in between them. Thanks. Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either. http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm PHP Code: echo "<div class=\"tbody2\">"; echo "<div class=\"client\">Client<div class=\"clientname\">Client Name</div></div>"; echo "</div>"; Using the above code it displays Client on top of Client Name. How do I make Client name appear to the right of Client using only css? Has anyone created a CSS horizontal fly-out menu list? I have a 3 level navigation list. The level 1 has 5 items, the first item of which has no sub-list. How can I get the level 2 and 3 lists to fly-out at the same level as its parent item? www. cooperworkskilns.com The CSS worked well for a vertical navbar, but I haven't gotten it to work horizontally. I added a float:left to see if it would do it. This isn't working in IE. Lol, its created a rather interesting stairstep effect. Is there a way to make it span evenly across the page without adjusting the width of each <li>? Also, for some reason the footer <div> margin isn't working in FF. If you look at IE vs FF, there is much more space above the Copyright line. #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar li { margin: 0 0 0 0; } #navbar a { float:left; display: block; text-align:center; color: #000; background-color: #FFF; width: 9em; padding: .2em .8em; text-decoration: none; border-top: 1px solid #fff; border-left: 0px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; } #navbar a:hover { background-color: #003366; color: #FFF; border-top: 1px solid #fff; border-left: 0px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; } I've been working on a site and have a problem with the horiztonal positioning of a div. At http://www.alphaworks.co.uk/problems/nicewag1/ I would like the position of the div with the id "page_footer" to move to the leftmost position. Can someone point out the mistake I'm making? Thanks, Geoff Hi all, I have just found this forum and have an issue to solve... I'm creating my online portfolio and as many photographer I have choosen to use an horizontal scrolling. It works fine on all browsers except IE below version 8. Do you know what can be the trick ? The code is the following : There is a main images container in which two type of images are placed (landscape or portrait orientation) Code: #images {
background-color: #FFF;
overflow: auto;
position: absolute;
left: 0;
right: 0;
height : 600px;
top: 63px;
white-space: nowrap;
z-index:1;
overflow-y: hidden;
}
.imagew {
display: inline-block;
width: 800px;
height: 600px;
text-align: center;
line-height: 600px;
}
.imageh {
display: inline-block;
width: 450px;
height: 600px;
text-align: top;
line-height: 600px;
}
after that the code is : Code: <div id="images"> <div class="imagew"><img alt="" src="offshore/1.jpg"/></div> <div class="imagew"><img alt="" src="offshore/2.jpg"/></div> <div class="imagew"><img alt="" src="offshore/3.jpg"/></div> <div class="imagew"><img alt="" src="offshore/4.jpg"/></div> <div class="imagew"><img alt="" src="offshore/5.jpg"/></div> </div> Hi, I have the following menu that is currently laid out with a table: http://www.ianarmstrong.com/menutest/ I want to switch this to be styled in CSS somehow. I've looked at using a styled unordered list to do this, but that doesn't seem like the best idea as each image in my menu is different. Thus I can't have 5 different <li> elements, each with a different bg image. I need a way to handle the 5 different images, and have a mouseover effect as well. Could someone offer some direction on this problem? I've tried the tutorials on CSS menus but can't seem to get it to work right for my project. I want a spacer to seperate the buttons at 1 pixels wide but currently it's about 10 pixels wide. I've adjusted until i'm blue in the face can somebody help? The code is below: Code:
<tr>
<td width="766">
<div id="navcontainer">
<ul>
<li><a href="">Home</a></li>
<li><a href=""> Project Status</a></li>
<li><a href=""> Tasks</a></li>
<li><a href="">General Information</a></li>
<li><a href="">Completed Tasks</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
CSS Code:
body,html {
margin: 0;
}
#navcontainer ul {
list-style-type: none;
text-align: center;
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0.2em 1em;
color: #fff;
background-image: url(images/back.gif);
height: 24px;
line-height: 23px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #960033;
background-attachment: fixed;
background-repeat: repeat;
background-position: center;
background-image: url(images/backover.gif);
}
--- |
|||||||