|
CSS - Form Creation
hello people,
If you click the link "Search this Forum" above, a popup window appear(about 40x30) and you may now search you Thread. The popup window and the form created inside is what I wanted to do but dont know how start. Can you help? Is css behind all this or simple a script? What's best thing to use? Thanks! Similar TutorialsWhenever 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'm relatively new to css and i'm hoping this forum will help me get better acquainted by working out some of the problems i'm running into. the address is: thenserenity.com/form.html this form looks fine in everything except IE. in IE there is no margin and the text starts in the top left of the div, as you can see if you check it out in ie. i have two css's, 1 general and 1 for ie. here is the ie css: --------------------------- @charset "utf-8"; /* CSS Document */ div#wrapper { background:none; filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='colhead-tl.png' ,sizingMethod='crop'); } .nav { margin-top:49px; } .rounded_STYLE { background-color: white; /* if needed */ border: 25px solid white; /* if needed */ position: relative; } .rounded_STYLE > .tl, .rounded_STYLE > .tr, .rounded_STYLE > .bl, .rounded_STYLE > .br { width: 750px; height: 25px; position: absolute; } .rounded_STYLE > .tl { background: url(../images/colhead-tl.jpg) top left no-repeat; top: -25px; left: -25px; } .rounded_STYLE > .tr { background: url(../images/colhead-tr.jpg) top right no-repeat; top: -25px; right: -25px; } .rounded_STYLE > .bl { background: url(../images/colhead-bl.jpg) bottom left no-repeat; bottom: -25px; left: -25px; } .rounded_STYLE > .br { background: url(../images/colhead-br.jpg) bottom right no-repeat; bottom: -25px; right: -25px; } br.clear { clear:both; } /* FORM -----------*/ .rounded_STYLEform { background-color: white; /* if needed */ border: 25px solid white; /* if needed */ position: relative; width:auto; height: 200px; } .rounded_STYLEform > .tl, .rounded_STYLEform > .tr, .rounded_STYLEform > .bl, .rounded_STYLEform > .br { width: 750px; height: 25px; position: absolute; } .rounded_STYLEform > .tl { background: url(../images/colhead-tl.jpg) top left no-repeat; top: -25px; left: -25px; } .rounded_STYLEform > .tr { background: url(../images/colhead-tr.jpg) top right no-repeat; top: -25px; right: -25px; } .rounded_STYLEform > .bl { background: url(../images/colhead-bl.jpg) bottom left no-repeat; bottom: -25px; left: -25px; } .rounded_STYLEform > .br { background: url(../images/colhead-br.jpg) bottom right no-repeat; bottom: -25px; right: -25px; } ---------------------- anyone know how to make this form look, in ie, as it does in everything else. thanks, jtn Hello, I am creating a form based an ordered list. I want to have two columns: - Left column with labels and 20% width. - Right column with inputs with 80% width. The total width is defined by a div that contains the list ... or by the list itself. In this moment I have a few problems: 1. The inputs don't take the total width; 2. The labels get outside of the container on the left; 3. The required icon does not take a space to the input; 4. The input button is not aligned with other inputs. Could someone please help me out in solving these problems and improving my code? I created a sample project and uploaded it to: http://www.27lamps.com/Labs/Form/Form.html Any help would be great! Thank You, Miguel Is there a way to alter the <form> starting tag so that it doesn't add white space before and after it? I have this form tag that is really screwing with my design because of the spacing it's adding to the page ... I have found CSS to make an entire form pretty, but not something to remove the space that this tag adds to my page. how would i change the colour of a text box in css? and also not sure if this is css or javascript but how do i clear a text box when the user clicks on it to write in their username? thanks tony I'm reading around, wondering how I get form fields to change style and the text that is inserted in the form fields to change style (font/size).. Is there an easy way to do this? for example http://member.classifieds.com/userjoin.php the entry boxes are smaller, and the text is smaller.. I looked at their code and I'm not quite sure how they achieved this. Hi, I'm having difficult with learning forms and how to style them. I've gotten mostly what I am looking for just now I don't seem to be able to make adjustments: Adjusting the size of the text-window, wrapping the frame boarder around the fieldset. Those are my main issues, any help would be greatly appreciated. Hi there, I've been battling to get this right...basically I have the following HTML setup: <input class="tboxes" type="textbox" /> <input class="tboxes2" type="textbox" /> "span.label01" is an inline element, and appears to the left of the textbox "input.tboxes". What I am trying to do attach some style to "span.label01" AND "div.box10" when the textbox receives focus. I have tried the following CSS code: input.tboxes:focus { color:#FF9900; } input.tboxes2:focus { color:#FF9900; } but nothing happens. I know this is a CSS selector issue, but I just can't seem to get it right. I have even tried adjacent sibling selectors, and nothing. Can anyone help me here? TIA! How do you keep a dropdown box on top of all other windows? hey What i want is to have one line with a select box and a submit button on it. But when i put those 2 elements in a form it takes up 2 lines. How can i make it so that the form wont require an extra line? When i click on the Login at the loginform on www.ipan.be the form is jumping under the text, IE is good... Is there anyone who has this porblem or a solution? Hi all, I am looking for information on overlaying a form over a site. You see this technique used for advertisements and the like, generally in flash. Most of what I am finding is suggesting the z-index using div tags, and I am looking to corroborate that. Any information or links to good examples or tutorials would be great. Thanks Caden Hello. I have created a form with CSS and Divs. My problem is my "Submit your Testimonial" button background is all messed up and doesn't look like my "Reset Form" button in IE 6.0 SP2. It looks fine in Firefox. Not sure how or where this gets changed. It seems to be adding a thicker border or something? Here is the page: http://www.nessphysiotherapy.com/testimonials.php Suggestions? Thanks Matt I need css relative positioning for a web form interface on a browser page, so it is located (Center/middle) despite browser size. Then I need each of the elements inside of the form table absolutely positioned in relation to the box. The are eight graphics that surround the table. I would actually like to get rid of the table completely if it was possible. I believe the is a cleaner and more efficient way of doing this in css, but I haven't got a clue as to where to start? I have just read that I can apply the styles to this page in the header instead of being pulled from a universal style sheet, I would like to do this as this is a login page and is page is unique from the rest of the site. Any and all help greatly appreciated. Hello, my code uses span tags within a link tag to make an html form become visible when the link is hovered. It works perfectly in everything except IE7/8. I would really appreciate it if anyone is able to help me stomp out this bug. Bug description: After text has been entered into the form, the form will then close prematurely when the cursor is moved over the fields (specifically, while crossing the tiny gap between the fields). Recipe to reproduce bug: 1. Hover the link to reveal the form, and fill the fields with text. 2. Close the form by moving the mouse off of the form. 3. Mouse back onto the link and move the cursor continuously over the text fields. If you're in IE7/8 then the form will seem to suddenly close at random. I've uploaded a stripped down version of the code for your convenience: http://mobile.sheridanc.on.ca/~goodalek/test2.htm CSS code: Code: .hyperLeft2:hover{
background-color: #E9F1F9;
text-decoration:none;
z-index:50;
}
.hyperLeft2 span{ /*CSS for enlarged image*/
text-decoration:none;
position: absolute;
background-color: #E9F1F9;
text-align:left;
left: 20px;
font-size: 13px;
color: #474747;
top: -95px;
visibility: hidden;
color: black;
width: 500px;
}
.hyperLeft2:hover span{ /*CSS for enlarged image on hover*/
background-color:#aaaaaa;
visibility: visible;
left: 20px;
top: -95px;
z-index:60;
}
HTML code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
<br><br><br><br><br><br>
<a href="#" class="hyperLeft2">Request a Quote<span>
<form name="form1">
<input type="text" name="name" ><br>
<input type="text" name="custEmail" ><br>
<input type="text" name="phone" ><bR>
<input type="text" name="domain" ><br>
<input type="text" name="name2" ><br>
<input type="text" name="custEma3il" ><br>
<input type="text" name="phon4e" ><bR>
<input type="text" name="domai4n" ><br>
<input type="submit">
</form>
</span></a>
</body>
</html>
Please let me know if any further information is required. I am not able to give a width to Label. so i tried to put a span around it and provide a width. still it doesnt work I want to shift the text fields to the right so that all are alligned at a right vertical line even if the label is of different char length. http://www.variable3.com/clients/be...gerDetails.html I'm having a really odd problem. I created a page to upload a file. The problem I'm having is that the text in the paragraph above the form is not showing up in Internet Explorer. The text does show up in Netscape. 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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>File Upload</title>
<style type="text/css">
div#content { background-color: #EEEEEE;
color: #111111; }
div#content input, label { display: block;
float: left; }
div#content label { width: 80px;
text-align: right;
clear: left; }
div#content form p { clear: left; }
</style>
</head>
<body>
<div id="content">
<p>
Enter File Name to be uploaded.
</p>
<form method="post" enctype="multipart/form-data" action="UploadOne.html">
<p>
<label>File Name:</label>
<input type=file size=50 name="file1" />
</p>
<p>
<input type=submit value="Upload" />
</p>
</form>
</div>
</body>
</html>
If I remove the color and background color from the content division's style the text appears. Any idea why this is happening? Anne Hi. Can anyone think of I way I can do this w/o the wrapper coulmn divs? Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Mail Form</title>
<style>
label, input, textarea{
position: relative;
float: left;
clear: both;
}
label{
font-size: .7em;
}
div.formCol{
position: relative;
float: left;
}
#contactMessageContainer{
clear:both;
}
</style>
</head>
<body>
<div class="contactForm">
<div class="formCol">
<label for="lastName">Last Name</label>
<input type="text" name="lastName" size="20" />
<label for="emailAddres">E-mail Address</label>
<input type="text" name="emailAddress" size="20" />
<label for="subject">Subject of Your Message</label>
<input type="text" name="subject" size="30" />
</div>
<div class="formCol">
<label for="firstName">First Name</label>
<input type="text" name="firstName" size="20" />
<label for="phoneNumber">Phone Number</label>
<input type="text" name="phoneNumber" size="20" />
</div>
<div id="contactMessageContainer">
<label for="message">Enter YourComments in the Box</label>
<textarea name="message" cols="40" rows="5" ></textarea>
</div>
</div>
</body>
</html>
Sea-2-Sky.com is the site in question. I'm working on the layout, forms right now which is where I'm having the problem. For some reason that I can't find, the labels for my input/select boxes are not showing up in IE, though they show up fine in Firefox/Netscape. I view the source code and it's all there which leads me to believe it's something in the CSS portion of the page, though I can't seem to find it. Can someone take a look and see if they notice anything that IE doesn't like? I've tried the same form code (CSS & HTML) w/o all of the other junk and it works just fine which leads me to believe it's in a previous part of the CSS portion. I just can't seem to find it. Thanks in advance. Tim |
|||||||