Good morning,
I need some help on a problem I'm having.
I've replaced the old table-based navigation header of SurfShop with a
CSS version, but I'm having a problem aligning the radio buttons and their
labels. I'd like them to be vertically aligned in the search box, like they
are now, but on the right side, just under the 'Find!' button.
The relevant code is listed below, and you can see it in action here:
http://www.surfshopcart.com/cgi-bin/demos/surfshop/shop.cgi
Thanks,
Frank
--------------------------------
<!--//BEGIN NAVIGATION HTML//-->
<div style="clear:right; line-height:20%" > </div><!-- This gives a gap between
the logos and the searchbox. -->
<div id="search_box">
<form action="/demos/surfshop/shop.cgi" method="get" name="search">
<div>
<span id="idf">
<label class="submit">
<input type="submit" name="submit" value="Find!" class="text-small" />
</label>
</span>
<label id="search_store">
<a href="javascript:document.search.submit()">
<img border="0" name="imageField2" src="search.gif" />
</a>
Search Store For: <input type="text" name="searchtext" size="20"
class="text-small" value="Enter # here" />
<div style="white-space:nowrap;">
<input class="searchbox" name="setSearchBox" type="radio" value="itemid"
checked="checked" /><label for="itemid">Product ID</label>
</div>
<div style="white-space:nowrap;">
<input class="searchbox" name="setSearchBox" type="radio" value="description"
/><label for="description">Description</label>
</div>
<div style="white-space:nowrap;">
<input class="searchbox" name="setSearchBox" type="radio" value="searchtext"
/><label for="searchtext">Both</label>
</div>
</label>
</div></form></div>
<div id="main_menu">
<ul>
<li><a href="http://www.surfshopcart.com";><img src="home.gif" /> Home</a> </li>
<li><a href="shop.cgi?c=start.htm" class="text-small-rev" /><img
src="backtostore.gif" /> Shop </a> </li>
<li><a href="shop.cgi?c=viewcart.htm" class="text-small-rev" /><img
src="viewcart.gif" /> View Cart</a> </li>
<li><a href="shop.cgi?c=info.htm"><img src="checkout.gif" /> Check Out</a> </li>
</ul>
</div>
<!--//END NAVIGATION HTML//-->
--------------------------------
/* ------ Search Box CSS ------ */
#search_box {
background-color: rgb(102, 153, 102);
float: right;
margin-left: 4px;
padding: 5px 3px 3px;
-webkit-border-radius: 5px;
-webkit-border-top-left-radius: 0;
-moz-border-radius: 5px;
-moz-border-radius-topleft: 0;
border-radius: 5px;
border-top-left-radius: 0;
}
#search_box label img { vertical-align: bottom; }
#main_menu {
background-color: rgb(102, 102, 255);
border-radius: 5px;
}
#main_menu img { vertical-align: bottom; }
#main_menu a, #search_box {
color: white;
font-size: 9px;
text-decoration: none;
font-family: Verdana,Arial,Helvetica,sans-serif;
}
#main_menu a, #search_store { font-weight: bold; }
#search_store { float: left; }
#main_menu ul {
padding:3px 0;
margin: 0;
list-style-type: none;
text-align: right;
}
#main_menu ul li { display: inline; }
#search_store input {
display: block;
margin-top: 5px;
margin-left: 3px;
width: 150px;
}
#idf {
float: right;
margin-top: 7px;
}
#idf label {
float: left;
clear: left;
}
#idf .submit {
float: right;
clear: none;
position: relative;
width: 57px;
margin-left: 10px;
margin-top: -10px;
padding-left: 4px;
}
.submit input {
position: absolute;
left: 0;
}
label { float:left; clear:none; display:block; padding: 2px 1em 0 0; }
input[type=radio], input.radio { float:left; clear:none; margin: 2px 0 0 2px; }
--------------------------------
http://www.surfshopcart.com/
Setting up shop has never been easier!
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
