|
CSS - Css And Form Elements...
hello everyone, 'tis my frist post... Just had'a quick question
I'm working on a page, and l'm trying to create a text input with a background image, that has NO border, so that it nests inside of a table cell with no excess fluff. However the input has a 1 pixel high "line" that spans across the top of the element, and a 1 pixel high "line" across the bottom as well. I can't seem to get rid of it, is it possible? here's the code, l was trying to get to work with this: Code:
<HTML>
<HEAD>
<style>
/*Left searchBar Cap*/
td.leftCap{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x1.gif');
background-position: 0px 0px;
width: 28;
height: 50;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*right searchBar Cap*/
td.rightCap{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x3.gif');
background-position: 0px 0px;
width: 34;
height: 50;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*searchBar Top bar*/
td.searchTop{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x2.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
width: 425;
height: 16;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*searchBar Bottom*/
td.searchBottom{
background-color: #c0c0c0;
background-image: url('images/searchBar_3x1.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
width: 425;
height: 15;
}
/*center of searchBar*/
td.searchCen{
background-color: limegreen;
background-position: 0px 0px;
width: 425;
height: 19;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
BODY {
background-color: #c0c0c0;
background-attachment: scroll;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
}
/*input*/
.input {
background-image: url('images/searchBar_2x1.gif');
color: #191919
border-width: 0px;
padding: 0px;
border-style: hidden;
border: 0;
border-top-width: 0px;
border-bottom-width: 0px;
font-family: Comic Sans MS (cursive);
font-weight: extra-bold;
font-size: 10pt;
width: 425;
height: 19;
}
</style>
</HEAD>
<BODY>
<center>
<form>
<table cellpadding="0" cellspacing="0">
<tr><td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="leftCap">
</table>
<td>
<table bgcolor="#c0c0c0" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="searchTop">
<tr>
<td class="searchCen">
<input type="text" size="40" class="input" value="search google ... ">
<tr><td class="searchBottom">
</table>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="rightCap">
</table>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#c0c0c0" align="center">
<a onClick="javascript:searchGoogle();" href="#">
<img border="0" src="images/searchBar_1x4.gif" width="113" height="50"></a>
</table></table>
</form>
<script>
query = document.forms[0].elements[0].value;
function searchGoogle(){
if(query){
url = "http://www.google.com/search?hl=en&lr=&q="+query+"&btnG=Search";
window.open(url);
}}
</script>
</BODY>
</HTML>
Thanks for your help! Samantha G. Similar TutorialsHi, If I place an input field or select box in a div and set the display to none - will that variable still be sent when the form is submitted? Thanks, Suppose I have: 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>
<script type="text/javascript">
//**********************************************************
// This function adds another field to the form based on
// what field name is passed in.
//**********************************************************
function add_item(field) {
if(!document.getElementById) return; //Prevent older browsers from getting any further.
var field_area = document.getElementById(field + '_field');
var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
// Find the count of the last element of the list. It will be in the format '<field><number>'. If the
// field given in the argument is 'friend_' the last id will be 'friend_4'.
var last_item = all_inputs.length - 1;
var last = all_inputs[last_item].id;
var count = Number(last.split("_")[1]) + 1;
if(document.createElement) { //W3C Dom method.
var li = document.createElement("li");
var input = document.createElement("input");
input.id = field+count;
input.name = field+count;
input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
li.appendChild(input);
field_area.appendChild(li);
} // end if(document.createElement)
else { //Older Method
field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
} // end else
} // end function add_item(field)
//**********************************************************
</script>
</head>
<body>
<form>
<table>
<tr>
<td><label for="images">Images (for banner and sidebar)</label></td>
<td>
<ul id="images_field">
<li><input type="text" id="images_0" name="images_0" /></li>
</ul>
</td>
<td><input type="button" id="button" value="Add another image" onclick="add_item('images');" /></td>
</tr>
<tr>
<td colspan="3">
<label for="misc">Misc. (anything that falls outside of the above categories)</label><br />
<textarea rows="3" cols="3" id="misc" name="misc"></textarea>
</td>
</tr>
<tr>
<td colspan="3"><input type="submit" id="submit" value="Submit project" /></td>
</tr>
</table>
</form>
</body>
</html>
When I click the add another image button, it will create a new form field for another image. But it keeps stacking them on top of the elements below it. I would like for everything below it to be shifted down when a new element is inserted. I tried the clearfix method but couldn't get it to work. Thoughts? Edited to say that this behavior only appears in FireFox. I'm new to CSS. But I need to position four form elements in a very thin nav bar. Here is my HTML code: Code: <div id="nav">
<div id="nav_left">
<a href="index.php">Home</a> |<a href="complete.php"> Browse All Titles</a> | <a href="author.php">About Author</a></div>
<div id="bookmark"><table width="307" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="64" valign="middle">Browse by</td>
<td width="113" valign="middle"><form action="" method="get">
Title
<select name="var" size="1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
<option value="M">M</option>
<option value="N">N</option>
<option value="O">O</option>
<option value="P">P</option>
<option value="Q">Q</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="U">U</option>
<option value="V">V</option>
<option value="W">W</option>
<option value="X">X</option>
<option value="Y">Y</option>
<option value="Z">Z</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="0">0</option>
</select><input type="image" class="inputbutton" src="img/input.jpg" alt="" width="15" height="15">
</form></td><td width="123" valign="middle"><form action="" method="get">Decade <select name="var" size="1">
<option value="1950">1950s</option>
<option value="1960">1960s</option>
<option value="1970">1970s</option>
<option value="1980">1980s</option>
<option value="1990">1990s</option>
<option value="2000">2000s</option>
</select><input type="image" class="inputbutton" src="img/input.jpg" alt="" width="15" height="15">
</form></td>
</tr>
</table>
</div>
</div>
And here are the applicable styles: Code: #nav {
background-image: url(../img/navback.jpg);
background-repeat: no-repeat;
background-position: left top;
border: thin solid #7a8251;
height: 25px;
width: 771px;
}
#nav_left {
width: 400px;
float: left;
text-align: left;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 7px;
padding-left: 5px;
}
#bookmark {
width: 300px;
float: right;
text-align: right;
display: inline;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
}
.inputbutton {
margin-right: 3px;
margin-left: 3px;
}
select {
display: inline-table;
font-size: 75%;
padding: 0px;
}
But, the form elements are sitting low and not aligning as needed. The input buttons are sitting too high. They sit lot in Firefox on a Mac. On IE 7, the dropdowns sit even lower. I don't know what to do! Any ideas? Jeremy Hello all. I'm trying to get the form layout to mimic a table like structure so that all the input elements line up. I have the following: 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">
<head>
<title>Search Home</title>
<style type="text/css">
.csc-mailform-field label { width: 10em; }
#mailformformtype_mail { margin-top: 1em; }
</style>
</head>
<body>
<form action="contact/contact-form/" id="mailform" enctype="multipart/form-data" method="post" onsubmit="return validateForm('mailform','First_Name,First%20Name,Last_Name,Last%20Name,Email,Email,Email_Message,Ema il%20Message','','','')">
<fieldset class="csc-mailform">
<div class="csc-mailform-field">
<label for="mailformFirst_Name">First Name</label>
<input type="text" name="First_Name" id="mailformFirst_Name" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformLast_Name">Last Name</label>
<input type="text" name="Last_Name" id="mailformLast_Name" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformSuffix">Suffix (e.g. Ph.D., M.D.)</label>
<input type="text" name="Suffix" id="mailformSuffix" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformEmail">Email</label>
<input type="text" name="Email" id="mailformEmail" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformPhone_Number">Phone Number</label>
<input type="text" name="Phone_Number" id="mailformPhone_Number" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformCompany">Company/Institution</label>
<input type="text" name="Company" id="mailformCompany" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformEmail_Message">Email Message</label>
<textarea name="Email_Message" id="mailformEmail_Message" cols="14" rows="5"></textarea>
</div>
<div class="csc-mailform-field">
<input type="submit" name="formtype_mail" id="mailformformtype_mail" value="Send Message" class="csc-mailform-submit" />
</div>
</fieldset>
</form>
</body>
</html>
I thought that by setting the width of the labels, it would force the inputs to all line up but apparently this does nothing. Also I did not place the size attributes on the input, this is a form generated by a CMS. Anyone able to guide me to find where to edit form elements? I want to change the 'check box' and 'drop down menu's' Hi guys, I've tried for days but can't solve the problem. I wanna position a text field and button in the middle of a div or table. FF displays well, IE of course not (always on top). Vertical alignment etc doesn't work! Any suggestions? Hi there! I've been diving into trying to make mobile web pages and though a lot of my former CSS experience helps me a great deal I get a bit perplexed about forms. I'd like to have all my form elements at the width of a 100% except for checkboxes and radiobuttons. Now, this almost works out all the way but I have a problem with how the strict rendering handles form elements. I've tried using both XHTML Mobile 1.2 and XHTML Mobile 1.0 but the same problems arise; Apart from wanting the elements to go 100% in width, I also would like them to respect margins. If I simply set the width to a 100% and my right and left margins to, say, 5px, I get the field pushed in 5 pixels from the left but I cannot get the 5 pixel indent from the right. I have tried using a wrapper div but it suffers the same result. I have figured out that this can have something to do with the rules of mobile pages provided by the XHTML mobile rendering specification but I'm now wondering if there's anything I can do to accomplish this. I've found out that mobile pages that have full width elements look (in almost all cases) very good on most handsets I've tested. Thanks in advance! If you have a CSS menu that has drop down menu items and form elements near the top of the page, the menu disappears behind the form elements in IE 6. For an example of what I'm talking about, go he http://www.swingleandassociates.com/catalog/tindex.php?section=c.training.php Hover your mouse over CONDITIONS and you'll see that the menu disappears behind the drop down box. Does anyone know how to fix this? I tried messing with z-index but it didn't seem to work. I may not have done it right thought. Anyone got an answer for that problem? Is it possible to style form elements (specifically checkboxes) with pure CSS, and without JS? I'm thinking of something similar to this (but without the JS): http://ryanfait.com/resources/custo...-radio-buttons/ I have this code that works fine in firefox and MSIE and the whole page validates with tidy (Green checkmark). I can't post a URL because its on a private server. The part that isn't quite right on safari is these: I have a table load of these that are part of a big form named commit. <td width="30" bgcolor ="#e7e7e7"><input type ='submit' class='button_notdone' value='2' onclick="javascript:mapbutt(document.commit,2)" /></td> This is the javascript code for mapbutt function mapbutt(myform,dex) { myform.action.value='map'; myform.qnum.value=dex; } The javascript does not return false so after clicking and setting the action and qnum values it is supposed to fall through to the form's serverside action, which it does. The problem is the styling of the submits. On every other browser they are whatever color I specify in the style I assign to them. Here is the style for button_notdone .button_notdone { font-family: monospace; font-weight: bold; width: 28px; height: 22px; color:#ffffff; background:#000000; } The background color in this case is supposed to be black and the text color is supposed to be white, and on safari it is black text on grey. I tried changing "input" to "button" which does indeed display the background color but unlike a submit it does not display the value. I need the text of the value to show in the text color over the button or submit or whatever it ends up being. How can I get these submits to look like what I want on safari. Thank you. I have a floating div with a solid background and a z-index set to 20. I have a form "behind" the div. For some weird reason, the drop down elements on the form "bleed through" the div. Is there any way to fix this? Hi, I'm having a problem and was wondering if CSS can help me do what I need to. I have to build a form based on dynamic fields taken from a database. The form front end has to look nice and conform to spacing that is laid out in the paper version of it. An example of this would be: Name: ____________________ Address: __________________ That's the first line of one particular form. The problem lies in the fact that these fields are all dynamic, so I have no idea how long the field label will be. In one case it could be "Name" but in another it could be "First Name". I'd like to know if it's possible to set the text fields to automatically size to fill in the empty space left between each label. Otherwise I guess I'm going to have to setup a table that has a fixed width for the labels based on what I think could be the longest label name. The form elements (<select> specifically) on a background layer seem to be showing through a <div> layer positioned above it (at least in IE.) Does anyone know a trick or some such to stop the form elements from the background from showing through the <div>? t h a n k s Hi all I really like the standard form styles in Safari, and until v2 (I guess) Safari didn't react on any custom CSS styling yet. But now with Safari 3 it begins to interpret some of the custom stuff, e.g. background color etc. I really don't like that because I think it's ugly - Mac has cool forms design, and I'd like my websites to have the standard Aqua look. But what's the easiest way to prevent Safari from using my custom CSS (which is quite cool in browsers like IE and FF, but not in Safari)? I'd like best to have some sort of @import rule or conditional comment for Safari that is not interpreted ONLY by safari... Not too much dirty hacks, please. ;-) Thanks for help Josh Can a <form element hold inline elements? For example, Code: <form ... > <input .... /> I'm putting this bare text in this form even if I dunno if it's allowed haha </form> More generally, I know one can NEVER put a block-level element in an inline element. HOWEVER, IS IT ALWAYS possible to put inline elements in block elements ???? Thank you Hello! I've got a <div> inside a <form> which I show/hide when a user clicks on a show/hide link. That div holds several form options which I DON'T want to submit with the form when the div is hidden. At the moment, even when my div is hidden, the values within it are still being submitted with the form. Is it possible to / how do I - hide the div so any values enclosed in it do NOT get submitted along with the form? Thanks, regan. How do I reduce the vertical space between form elements that I put inside a div? I have text "username" with the textbox below it but there is like 25 pixels of vertical space between them. Brad For some reason, I cannot get my 2 form elements to line up as far as height is concerened. No matter what I try, one is always slightly taller than the other, even if I set both to the same height. Any ideas? Code: input[type="text"], select {
color:#888888;
font-size:10px;
height:auto;
}
I've just been given the assignment to write a script that given a set of form elements by the user it will create a page with those form elements displayed and a submit button on the bottom. The form elements the user defines can be text fields, text areas, dropdown boxes, option groups, and checkboxes. The user also gives me a title for each form element. He can give me these form elements in any order and I need to display them in that order on the page. My question is, how do I arrange these form elements so they always look good together and I don't have funny gaps or unprofessional looking design? It would be easy if it was just text fields and area, but then I have to throw in option groups and checkboxes that can be any number in a row. Does anyone have some good form organization rules that could help me? Thanks!! Hello all, I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code:
#wrapper-body ul.staff-list{
list-style-type:none;
padding-top:10px;
position:relative;
}
#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
#wrapper-body ul.staff-list li{
float:left;
width:230px;
position:relative;
padding:8px 0 8px 15px;
z-index:1;
}
#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
#wrapper-body ul.staff-list li p{
padding:0 0 9px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list li small{
padding:0 0 5px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list-clerks li span{
color:#A6302B;
display:block;
float:left;
}
#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
#wrapper-body ul.staff-list li div.staff-list-detail{
display:none;
background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
padding-bottom:3px;
margin-top:-15px;
left:4px;
z-index:10;
top:15px;
position:absolute;
}
#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }
#wrapper-body ul.staff-list li:hover div.staff-list-detail{
display:block;
}
An image of what is happening below: Thanks for reading! |
|||||||