|
CSS - Form: Nice Radiobuttons With Images
Hello,
I'm trying to build a form (without tables) where the user can choose between images using radiobuttons, like this: URL http://www.karmaweb.it/varie/example-form.png (img bbcode does not seem to work, so I just inserted the link to the example image) I've tried to insert each element (radio button, image, and label or text) in a separate div with float:left and then wrap these 3 divs in an outer div, like this: Code:
.input-row
{
clear: both;
margin-bottom: 20px;
}
.input-radio
{
float: left;
width: 20px;
height: 100px;
}
.input-thumbnail
{
float: left;
width: 220px;
}
.input-label
{
float: left;
width: 200px;
}
and the html: Code: <div class="input-row"> <div class="input-radio"> <input type="radio" name="" value="" id="1" checked /> </div> <div class="input-thumbnail"> <img src="image.png" alt=""></a><br /> </div> <div class="input-label"> <label for="1">Some text</label> </div> </div> <br style="clear:both" /> but I cannot find a way to vertically center the radiobutton (image height is not fixed), besides the clear:both on the outer div doesn't seem to work (why? I had to add a br style="clear:both" after each line), and does not look very good in older browsers. Any idea how to do this? I'd appreciate any help you could offer. Thank you, Fibi Similar TutorialsI have a floated div that contains a h1, img, and then a p. For some reason, IE is putting extra space between the h1 and img, and between the img and p. Here is the xhtml: Code: <div id="row_b_left"> <h1>Header</h1> <img src="images/row_b_divider.png" alt="" /> <p>Hello! This is where the text goes.</p> </div> and here is the relevant css: Code: #row_b_left h1 {
color: #0b819e;
font: bold 1em Tahoma, arial, sans;
margin-bottom: 0px;
}
#row_b_left p{
color: #060606;
font: .8em/1.3em arial, sans;
text-align: justify;
margin: 0px 15px 0px 0;
}
I have no idea what is causing IE to add extra space between these elements. It works perfectly in Firefox and Opera. Any help would be appreciated. Thanks in advance. I don't know how to get my radiobuttons, defined as, Code: <div id="options">
<fieldset id="fset">
<legend>Pick car</legend>
<label for="id_gm">
<input type="radio" value="gm" id="id_gm">gm</label>
<label for="id_vw">
<input type="radio" value="vw" id="id_vw">vw</label>
</fieldset>
</div>
lined up so they a Floated to the left; Each choice (radiobutton and its label) on its own row; With the radiobutton prior to its label; and With the radiobutton and its label aligned horizontally. Would be grateful for your help. Hello there, I Have a radiobutton with a label beside it. It only isn't aligned that nicely. The radiobutton it self is a few pixels heigher then the label it self. Now i have partitialy fixed this by using float: left on the radiobutton(s) itself. But it doesn't work in all browsers. Is there some kind of standard way to fix this? Thx in advance. Hi guys I'm having a little trouble working with CSS While doing the website in IE, i didn't notice that CSS is not working good in Firefox. PLEASE SEE THIS IMAGE FIRST SO U CAN SEE DIFFERENCES BETWEEN 2 BROWSERS: http://www.appinformatica.com/firefoxie.jpg and here is the CSS code i used. in IE it looks good, but not in Firefox.. Code:
BODY {
SCROLLBAR-FACE-COLOR: #D3F0EC; SCROLLBAR-HIGHLIGHT-COLOR: #32AAA1; SCROLLBAR-SHADOW-COLOR: #35AAA4; SCROLLBAR-3DLIGHT-COLOR: #BAEDE8; SCROLLBAR-ARROW-COLOR: #32AAA1; SCROLLBAR-TRACK-COLOR: #EFEFEF; SCROLLBAR-DARKSHADOW-COLOR: #35AAA4;
}
.verde-com-big {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: 0EB7B2;
font-weight: bold;
}
select {
background-color: #FFFFFF;
color: 4B4B4A;
font-size: 11px;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
border: 1px inset #003300;
}
form {
margin: 0px;
padding: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: inset;
border-left-style: inset;
border-top-color: #A7D8C2;
border-right-color: #A7D8C2;
border-bottom-color: #A7D8C2;
border-left-color: #A7D8C2;
}
input {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF6600;
textarea {
color: #015953;
border-top: 1px inset #003300;
border-right: 1px inset #003300;
border-bottom: 1px inset #003300;
border-left: 1px inset #003300;
background-color: #FFF0B9;
border: 1px solid #A5D9C2;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #FFF0B9;
color: #FF6600;
border: 1px solid #A5D9C2;
}
Any ideas about how to make look good in Firefox too ? thanks ALOT in advance. Henry. I'm not sure if this is in the right place, but I'm just asking for a TEENSY BIT of code help. My first full CSS design isn't playing nicely with Internet Explorer and I can't for the life of me figure out WHY!! cabernetstudios dot com Take a look at it in firefox and in IE and you'll see the problem right away. I've managed to fix the navigation float, but I'm out of ideas on how to get the billboard images to stay up top. Email me if you think you can help! I am new to design but really doing my best to keep up with the big boys. I am trying to tweak my site on Wordpress to have a oversized, and fluid footer. Long story short I want my site (sac247[dot]sacobserver[dot]com) to have a footer that looks like venturebeat[dot]com or mashable[dot]com. Can someone help me get started on how to break my colors out of the widget box? Ok, I am building a site for a model and I have a stripped background for the left navigation. IE7 wont display it, but of course all the other browsers do. I cant post a link cause im a newbie to this forum, but I can post my code! any help would be great: Css Code Code:
.container {
width: 1000px;
margin: 0px auto;
}
.header {
background: url(../images/headerbg.jpg);
height: 200px;
width: 995px;
margin-right: auto;
margin-left: auto;
}
.background {
background: url(../images/backgroud.jpg) repeat-x;
width: 14px;
}
.leftnav {
background: url(../images/stripes.jpg) repeat;
float: left;
width: 150px;
color: #FFFFFF;
visibility: visible;
margin-right: auto;
margin-left: auto;
}
.maincontent {
background: #FFFFFF;
width: 487px;
margin-right: auto;
margin-left: auto;
padding-right: 5px;
padding-left: 5px;
text-align: left;
float: left;
}
.rightside {
background: url(../images/body.jpg);
float: right;
height: 461px;
width: 351px;
margin-right: 2px;
}
.border1 {
background: url(../images/border1.gif) repeat-x;
height: 14px;
}
XHTML Code Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
<!--
body {
background: url(../images/temp_slices_03.jpg) repeat-x;
width: 1px;
margin-top: 0px;
margin-bottom: 0px;
}
-->
</style>
</head>
<body>
<div align="center">
<div class="container">
<div class="header">Content for class "header" Goes Here</div>
<div class="leftnav">Content for class "leftnav" Goes Here</div>
<div class="maincontent">Content for class "maincontent" Goes Here</div>
<div class="rightside">Content for class "rightside" Goes Here</div>
</div>
</div>
</body>
</html>
I have a form that has background images for the inputs. In both IE 6 and IE 7, the background images will move if the text goes outside of the image. You can see what I'm talking about here. Here is the xhtml: Code: <div class="contact">
<form action="sendmail.php" method="post" id="contactform">
<ul>
<li>
<label for="name"><img class="label" src="images/name.png" alt="" /></label>
<input class="inputbox" type="text" name="name" value="" id="name" />
</li>
<li>
<label for="email"><img class="label" src="images/email.png" alt="" /></label>
<input class="inputbox" type="text" name="email" value="" id="email" />
</li>
<li>
<label for="tele"><img class="label" src="images/phone.png" alt="" /></label>
<input class="inputbox" type="text" name="tele" value="" id="tele" />
</li>
<li class="special">
<label for="last">Don't fill this in:</label>
<input type="text" name="last" value="" id="last" />
</li>
<li>
<label for="message"><img class="label" src="images/message.png" alt="" /></label>
<textarea rows="5" cols="30" name="message" class="messagebox"></textarea>
</li>
<li class="submitbutton">
<input type="submit" value="" class="formbutton" />
</li>
</ul>
</form>
</div>
and here is the relevant css: Code: .inputbox {
height: 39px;
width: 246px;
border: none;
padding: 10px 10px 0 10px;
background: url("../images/inputbox.png") no-repeat 0 0;
font: bold italic 1.25em/1.1em Lucida, sans;
color: #3d2d06;
}
I'm sure this is an easy one but I can't really figure it out and googling has not produced any results. Thanks in advance. Im just curious, what are the advantages of using css to import all your images (that arnt dynamic) as apposed to inserting them into your html using the <img> tag? Whenever I specify <form> in an html page I find that the browser will skip a space after I'm done with the form. Overly simplified example: Code: <html> <body> <form name="input" action="html_form_action.asp" method="post"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> test (notice that this is two lines below the input box instead of one) </body> </html> Is there any way to use a <form> tag but still have the text after the form appear right after the form and not skip extra spaces? i can only find the script to show background images in a css style sheet..but how would I go about for example showing an image not as background? i have style switcher, but I'm wanting to use buttons aswell for example blue.gif and red.gif using 2 different styles. how would I show the image in css?, which I can also put a link on maybe in the html or css? HElP! thanks hey guys.. I was thinking about changing my site from being mostly table based for the layout to css based but for some reason theres a small gap between images in IE... no gap in FF though.. I made two example pages 1 without using images, and just a colored background, and one with images... the height and width for the backgrounds and for the images are both the same. small gap at the bottom of each of the divs after the image ends. www.wmbclan.com/test.php just some background colors.. without any gap between the colors. www.wmbclan.com/test2.php anyone know how to fix this? Hi, I can't believe I'm posting this but I can't seem to get this to work. I cannot load a background image through a simple div tag. It works if I switch the id selector to the BODY tag in my code and displays the image but does not work if I use the selector with the DIV tag. I have no idea why. Please help My HTML file Quote: <!DOCTYPE html> <html> <head> <title>Title of the document</title> <LINK REL=StyleSheet HREF="styles.css" TYPE="text/css"> </head> <div id="header"> Div Tag here </div> <body> The content of the document...... </body> </html> My CSS file Quote: #header { background-image: url(navtext.png); background-image: no-repeat; } Use any image you have to test. I'm trying to get the 2 tabs of this mini calendar to be right next to each other. I've changed the names of all the divs surrounding the images and still can't get it to take out that padding. I've also tried img { margin:0px; padding:0px; } and it still doesn't work. Any ideas? In IE, this will produce the look that I'm looking for. The image and a couple of details are provided inside of a blue box. In FF, they overlap eachother. Not the text, just the image. How can I adjust my CSS? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
.fieldset {
border: #26a solid 1px;
width: 85%;
margin-bottom: 5px;
padding: 10px;
}
-->
</style>
</head>
<body>
<div class="fieldset"> 1: dfas <br />
<hr />
<img src="../../imageApp/images/smallrear.JPG"
width="160"
height="120"
border="0"
align=left hspace="12"/> etwrThis is an edit </div>
<div class="fieldset"> 2: <br />
<hr />
<img src="../../imageApp/images/small100_1737 (Small).JPG"
width="89"
height="120"
border="0"
align=right hspace="12"/> </div>
</body>
</html>
I have a site that will be relying heavily on background images sitting behind all the tables. These backgrounds will work in concert with the overall background-color: property. My question is this, on the style sheet, of which I would like to have ONE. Is there a way to change entire background-images for each page within the site. In another post, we went over how to change images within the same <div> by simply making the <div> a holder and swapping the image on each page by using something like: <div id="image" class="page_two"> Is there a way to do something similar using an entire background image? Or do I need a separate style sheet for each page? Perhaps the main style sheet which has a body like this body { margin:0px; } and then attach an additional style sheet to each page that supersedes the body tag in the main sheet? I hope I am making sense... thanks jon Hi All, I am trying to fix a problem with IE 6. In Firefox everything lines up correctly. in IE6 the images in the gallery on the left side of the page and the full size image have 5px of padding underneath. I cannot get this to disappear no matter what I've tried. Any ideas? Top shots l:andy p:andy Here is some code of the thumbnails.. This will probably look like a mess since I am programming on a huge monitor.. But anyway. Code:
<div id="pagebody">
<?php include 'mainmenu.html' ?>
<div id="contentpane">
<div id="content_port">
<div id="port_menu">
<span id="gallerymenu1">
<span id="submenu1" class= "submenu" > <a class="portmenu" href="#" id = "portmenulink1" onClick="changeCategory(1);return false;"> --Wedding--</a> </span>
<span id="submenu2" class ="submenu"> <a class="portmenu" href="#" id = "portmenulink2" onClick="changeCategory(2);return false;" > --Promotional--</a> </span>
</span>
</div>
<span id="thumb">
<div id="thumb1div" class = "thumb">
<img src="images/blank.gif" title = "1 <?php echo "$title"; ?> 1" alt = "<?php echo "1 $alt"; ?> 2" height = "<?php echo $thumb_height; ?>" onMouseOver="changeMain(1);"
width = "<?php echo $thumb_width; ?>" name = "thumb1" id = "thumb1">
<input type="hidden" id="t1" value="">
</div>
<div id="thumb2div" class = "thumb">
<img src="images/blank.gif" title = "2 <?php echo "$title"; ?> 2" alt = "2 <?php echo "$alt"; ?> 4" height = "<?php echo $thumb_height; ?>" onMouseOver="changeMain(2);"
width = "<?php echo $thumb_width; ?>" name = "thumb2" id = "thumb2">
<input type="hidden" id="t2" value="">
</div>
Im trying to replicate the vertical navigation style that is used on the Mozilla Firefox Website (as seen to the left). I have sucessfully done this useing images, with the exclusion of a space problem between the items and the end images in FireFox. I am using the strict.dtd and am frustrated with this problem. Iff anyone can help me create a nav with this style that would be wonderful. Here is the css im using: Code:
.cssnavend {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
display: block;
width: 209px;
height: 9px;
margin: 0;
margin-bottom:0px;
padding: 0;
}
.cssnav {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(images/but-over.jpg);
background-repeat: no-repeat;
display: block;
width: 209px;
height: 31px;
margin: 0;
margin-bottom:0px;
padding: 0;
}
.cssnav a {
display:block;
font-size: 11px;
width: 209px;
height: 31px;
display: block;
float: left;
margin: 0;
padding: 0;
color: #096CCE;
text-decoration: none;
}
.cssnav img {
width: 100%;
height: 100%;
border: 0;
}
.cssnav a:hover{
color: #000;
}
* html a:hover {
visibility:visible
}
.cssnav a:hover img{
visibility:hidden
}
.cssnav span {
position:absolute;
left:7px;
top:7px;
margin:0;
cursor: pointer;
}
#box {
margin-top: 10px;
padding: 0;
width: 209px;
display: block;
}
#boxtop {
width: 209px;
height: 11px;
}
#boxcontent {
width: 209px;
background: #DFE5EB;
}
#boxbottom {
width: 209px;
height: 11px;
}
#boxtext {
width: 209px;
background: #DFE5EB;
padding: 2px;
}
The following code is me testing my css. The first group is useing the cssnav styles. The 2nd group is using the box styles. The 3rd group is a try at making a content box with rounded corners that is a spacific width. Unfortunatly, the content of the box will not wrap to the width of the box, instead it continues on 1 line and outside the box. Code: <div class="cssnavend"><img src="images/but-top.jpg"></div> <div class="cssnav"><a href="index.php"><img src="images/but-up.jpg" /><span>Home</span></a></div> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>This is a test</span></a></div> <div class="cssnav"><a href="phpbb/index.php" target=_blank><img src="images/but-up.jpg" /><span>Forum</span></a></div> <div class="cssnavend"><img src="images/but-bot.jpg"></div> <br><br> <div class="box"> <div class="boxtop"><img src=images/but-top.jpg></div> <div content="boxcontent"> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>Home</span></a></div> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>This is a test</span></a></div> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>Forum</span></a></div> </div> <div class="boxbottom"><img src=images/but-bot.jpg></div> </div> <br><br> <div class="box"> <div class="boxtop"><img src=images/box-top.jpg></div> <div class="boxcontent"> <div class="boxtext">This is some text inside of the box. This text should wrap and be padded.</div> </div> <div class="boxbottom"><img src=images/box-bot.jpg></div> </div> Thank you all who help. Hello. I was wondering how I would go about doing this. I have a div, the left and right side of it is an image that I want the size to be able to be fluctuated, say, if the div goes larger than say 50 px, then it will start repeating and get larger. I have tried to start this already, but I havent had any luck. I also am not having any luck on getting the backgroun image to show. Anyone here know how I would make it to where my left or right side (border-right, border-left) will automatically resize if it is needed to go larger or get my background image to show? It's for a news conent box for my website I am coding, and I need it to go larger than just a set value. Thanks for your help. P.S. this is what I have so far Code:
<div style="width:460; height: auto; border-right: url("images/border_right.gif"); border-left: url("images/border_left.gif"); background-image: url("images/content_content.gif"); background-repeat: repeat;">
News content will go here
</div>
|
|||||||