Here is my page. I need to insert whole code here.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tabs ul li:first a').addClass("active");
$('#forms').find('form').hide().fadeIn(1500);
$("#tabs ul li").click(function() {
$("#tabs ul li").removeClass("active");
$(this).addClass("active");
$("#forms form").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
<style type="text/css">
* { margin:0; padding:0; }
body { background:#27476B; }
.clear { clear:both; }
#wrapper { width:510px; height:331px; overflow:hidden; padding:10px; }
#tabs ul { padding-left:15px; list-style:none; }
#tabs ul li { display:block; float:left; text-align:center; }
#tabs ul li a { padding:3px 20px 2px 20px; color:#fff; text-decoration:none; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; }
#tabs ul li a:hover { background:#AEBAC1; }
#tabs ul li a.active, #tabs ul li.active a:hover { background:#AEBAC1; color:#333; }
#forms form { background:#AEBAC1; border:2px solid #333; padding-left:5px; }
.twocol { display:block; float:left; width:250px; margin-bottom:10px; }
.twocol label { margin-top:.33em; display:block; width:240px;}
.twocol select, .twocol input[type="text"] { background:#456A87; color:#fff; display:block; width:240px; font-size:16px; }
.twocol span { padding:0 8px 0 5px; }
.search { width:500px; text-align:center; margin-bottom:5px; }
</style>
</head>
<body>
<div id="wrapper">
<div id="tabs">
<ul>
<li>Properties</li>
<li>Developments</li>
<li>Agents</li>
</ul>
</div>
<div class="clear"></div>
<div id="forms">
<!--
Search Form for Properties
-->
<form id="properties" name="properties" method="post" action="">
<div class="twocol">
<label for="city">City:</label>
<select name="city" size="1">
<option>-</option><option>asdfadf</option><option>-</option>
</select>
<label for="bedrooms">Bedroom:</label>
<select name="bedrooms" size="1">
<option>-</option>
</select>
<label for="minprice">Minimum Price:</label>
<select name="minprice" size="1">
<option>-</option>
</select>
<label for="minarea">Minimum Area:</label>
<select name="minarea" size="1">
<option>-</option>
</select>
<label for="propertytype">Property Type:</label>
<select name="propertytype" size="1">
<option>-</option>
</select>
</div>
<div class="twocol">
<label for="location">Location:</label>
<select name="location" size="1">
<option>-</option>
</select>
<label for="addedwithin">Added Within:</label>
<select name="addedwithin" size="1">
<option>-</option>
</select>
<label for="maxprice">Maximum Price:</label>
<select name="maxprice" size="1">
<option>-</option>
</select>
<label for="maxarea">Maximum Area:</label>
<select name="maxarea" size="1">
<option>-</option>
</select>
<label for="searchfor">Search For:</label>
<input name="searchfor" type="radio" value="sale" /><span>Sale</span>
<input name="searchfor" type="radio" value="purchase" /><span>Purchase</span>
<input name="searchfor" type="radio" value="rental" /><span>Rental</span>
</div>
<hr class="clear" /><br />
<div class="search">
<input type="submit" value="Search" />
</div>
</form>
<!--
Search Form for Developments
-->
<form id="developments" name="developments" method="post" action="">
<div class="twocol">
<label for="city">City:</label>
<select name="city" size="1">
<option>-</option><option>asdfadf</option><option>-</option>
</select>
</div>
<div class="twocol">
<label for="developmentname">Development name:</label>
<input type="text" name="developementname" />
</div>
<hr class="clear" /><br />
<div class="search">
<input type="submit" value="Search" />
</div>
</form>
</div>
</div>
</body>
</html>
Here is the perfect view (on Firefox)
Following problems are identified by me, Please let me know if there are some others too.
IE8 and Chrome are showing some extra height (which is displaying a little part of 2nd form)
IE6 not showing the width specified in CSS.
In IE6, initially tabs div is touching with the forms div. But on mouse over it adds some extra spacing.
How can it be solved.
I am not sure what you mean by points 1 & 2, but 3 I got it fixed. I might have fixed 1 & 2(not sure).
Let me know how this works for you.
http://jsfiddle.net/3uMyA/3/
Related
I try to style a video controls.
I want two radio buttons for fast forward / rewind.
<input name="group1" type="radio" id="ff" />
<label for="ff"><i class="material-icons">fast_forward</i></label>
<input name="group1" type="radio" id="fr" />
<label for="fr"><i class="material-icons">fast_rewind</i></label>
How can I style them to appear as buttons with pressed state for the selected radio button?
This is a basic sample you can tweak to suit your needs
#help label {
float:left;
width:120px;
margin:0px;
background-color:#FFF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
}
#help label span {
text-align:center;
font-size: 16px;
padding:10px 0px;
display:block;
}
#help label input {
position:absolute;
top:-20px;
}
#help input:checked + span {
background-color:indigo;
color:white;
}
#help .white {
background-color:#FFFFFF;
color:#000;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="css/fonts.css">
</head>
<body>
<div id="help" class="row halign">
<label class="white">
<input type="radio" name="unemployment">
<span>I</span>
</label>
<label class="white">
<input type="radio" name="unemployment">
<span>need</span>
</label>
<label class="white">
<input type="radio" name="unemployment">
<span>a</span>
</label>
<label class="white">
<input type="radio" name="unemployment">
<span>job</span>
</label>
</div>
</body>
</html>
I am new to HTML5 so all the help I can get is appreciated. I have three fields (First Name, Last Name and Birth Date) and I am trying to align them together. I would like to align the fields together horizontally and vertically.
Here is my simple code so far:
<html>
<!DOCTYPE html>
<html>
<link href="styles.css" rel="stylesheet" type="text/css">
<body>
<form>
<label for="firstname">First Name:</label> <input name="firstname" type="text" size="50" autofocus><br>
<label for="lastname"><br>Last Name:</label> <input type="text" name="lastname" size="50" autofocus><br>
<label for="birthdate"><br>Birth Date:</label> <input type="date" name="bdate" size="50"><br>
<form> </body> </html>
Here is the CSS I have:
input[type=text] {
border: 1px solid #D4E2F1;
}
input[type=date] {
border: 1px solid #D4E2F1;
}
input[type=color] {
border: 1px solid #D4E2F1;
}
I would prefer not use tables as I am not trying to display tabular data. I am looking for a efficient and correct way to do this.
Your help would be greatly appreciated.
Thanks.
AJ
Try this:
HTML:
<form class="user-form">
<div class="field">
<label for="firstname">First Name:</label>
<input name="firstname" type="text" size="50" autofocus />
</div>
<div class="field">
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" size="50" />
</div>
<div class="field">
<label for="birthdate">Birth Date:</label>
<input type="date" name="bdate" size="50" />
</div>
<form>
CSS:
.user-form { padding:20px; }
.user-form .field { padding: 4px; margin:1px; background: #eee; }
.user-form .field label { display:inline-block; width:120px; margin-left:5px; }
.user-form .field input { display:inline-block; }
jsFiddle: http://jsfiddle.net/VuSX4/
Try this
HTML:
<
div style="display:block; position:relative; width:100(or something)px; height:auto; margin:0px auto 0px;"
>
Put your form markup in here
<
/div>
I looked all over for this answer and found the information at W3C Schools and a bit of trial and error
This validates at http://validator.w3.org/
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
I'm trying to create a form with this formatting style:
label a
[input text] SUBMIT
label b
[select]
label c
label from [input text] label to [input texŧ] SUBMIT
This is my html with css code:
<style type="text/css">
form {
width:460px;
}
form label {
font-size:12px;
color:#666;
cursor:auto !important;
}
form input[type=text] {
padding:5px;
height:30px;
line-height:30px;
width:370px;
color:#333;
font-size:14px;
}
form select {
padding:5px;
height:30px;
line-height:26px;
width:370px;
color:#333;
font-size:12px;
border:solid 1px #ccc;
overflow:hidden;
}
form input[type=submit] {
height:20px;
width:20px;
background: url("/mini_glass.png") no-repeat scroll 3px 3px transparent;
border:none;
cursor:pointer;
}
</style>
<div class="margin_top_20">
<form action="">
<div>
<div id="A">
<label>a</label>
<input name="q" value="" type="text">
<input value="" type="submit">
</div>
</div>
<div id="B">
<label>b</label>
<select></select>
</div>
<div id="C">
<label>c</label>
<div id="D">
<label>from</label>
<input name="from" value="" type="text" style="width:50px">
<label>to</label>
<input name="to" value="" type="text" style="width:50px">
<input value="" type="submit">
</div>
</div>
</form>
</div>
I think the problem is that I should set properties like position or float but I don't understand how. Should I use the float:left property for some divs? The way that property works is not very clear to me.
Just add rules specific to the labels in div A and div B
#A label, #B label { display:block}
Demo at http://jsfiddle.net/emTKJ/
I made some changes to your form and CSS and here is the Working Solution as per the format that you want.
The HTML:
<div class="margin_top_20">
<form action="">
<div>
<div id="A">
<label>a</label>
<input name="q" value="" type="text">
<input value="submit" type="button">
</div>
</div>
<div id="B">
<label>b</label>
<select></select>
</div>
<div id="C">
<label>c</label>
<div id="D">
<span>from</span>
<input name="from" value="" type="text" style="width:50px">
<span>to</span>
<input name="to" value="" type="text" style="width:50px">
<input value="submit" type="button">
</div>
</div>
</form>
</div>
The CSS:
form {
width:460px;
}
form label {
font-size:12px;
color:#666;
cursor:auto !important;
display:block;
}
span{
font-size:12px;
color:#666;
cursor:auto !important;
}
form input[type=text] {
padding:5px;
height:30px;
line-height:30px;
width:370px;
color:#333;
font-size:14px;
}
form select {
padding:5px;
height:30px;
line-height:26px;
width:370px;
color:#333;
font-size:12px;
border:solid 1px #ccc;
overflow:hidden;
}
form input[type=submit] {
height:20px;
width:20px;
background: url("/mini_glass.png") no-repeat scroll 3px 3px transparent;
border:none;
cursor:pointer;
}
You just needed to add a display:block; for the form label and a <span> tag for from and to and I changed input type from submit to button and valued as submit. You can change and style it as per your requirement.
Hope this helps.
In my experience, when you want to position a group of element, you should wrapped it with div element and style it. With some element have similar style, add it with the same class. Shouldn't set width of form, just wrap the content inside it with a div and set style for it. I fixed your code here. See full demo in jsfiddle
HTML
<div class="margin_top_20">
<form action="">
<div class="line">
<div id="A">
<div>
<label>Lable A</label>
</div>
<div>
<input name="q" value="" type="text" />
<input value="submit button" type="submit" />
</div>
</div>
</div>
<div class="line" id="B">
<div><label>Label b</label></div>
<div><select></select></div>
</div>
<div class="line" id="C">
<div><label>Label c</label></div>
<div id="D">
<label>from</label>
<input name="from" value="" type="text" style="width:50px" />
<label>to</label>
<input name="to" value="" type="text" style="width:50px" />
<input value="submit button" type="submit" />
</div>
</div>
</form>
</div>
CSS:
form {
}
.line{
padding-top:5px;
}
form label {
font-size:12px;
color:#666;
cursor:auto !important;
}
form input[type=text] {
padding:5px;
width:370px;
color:#333;
font-size:14px;
}
form select {
padding:5px;
width:370px;
color:#333;
font-size:12px;
border:solid 1px #ccc;
overflow:hidden;
}
form input[type=submit] {
border:none;
cursor:pointer;
}
I'm having problems with setting the div and body tags to dynamically expand over the inner contain.
Here is the HTML and CSS that I'm using, it is a little longer.
<!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>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title></title>
</head>
<style>
body, p, b, ul, li, div
{
padding:0;
margin:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
}
body
{
background:white;
}
.clearfix {
min-height: 1px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
#searchform
{
position:absolute;
height:110px;
clear:both;
}
#b2_sbox_middle
{
width:980px;
height:99px;
background:url('img.jpg') repeat-x;
border:1px solid #00CCCC;
}
#b2_inner_sf
{
margin-top:10px;
}
#sf_ch_container
{
clear:both;
margin-left:27px;
font-size:18px;
}
#sf_ch_formtitle
{
float:left;
width:202px;
font-size:18px;
text-align:left;
}
#sf_ch_stype
{
float:left;
}
.stype
{
float:left;
margin-left:27px;
text-align: left;
}
</style>
<body>
<div align="center" class="clearfix">
<div id="searchform" align="center" style="top:105px; width:980px; margin-left:-490px; left:50%;" class="clearfix">
<div id="b2_sbox_middle">
<div id="b2_inner_sf" class="clearfix" style="border:0px solid;">
<div id="sf_ch_container" class="clearfix">
<div id="sf_ch_formtitle">SEARCH </div>
<div id="sf_ch_stype"> SEARCH</div>
</div>
<div class="stype">
<input name="text" class="search-input" type="text" value="key" size="20" maxlength="50" />
</div>
<div class="stype" >
<input name="text2" class="search-input" type="text" value="key" size="20" maxlength="40" />
</div>
<div class="stype" >
<input name="text2" class="search-input" type="text" value="key" size="20" maxlength="40" />
</div>
<div class="stype" >
<input name="text2" class="search-input" type="text" value="key" size="20" maxlength="40" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you run the code in Firefox or Chrome press F12 and watch the height of the body tag and of the first div after the body, you will see that none have dynamically changed their height to include the inner content.
I don't know where the problems is in the CSS.
And a second problem, if you make a preview using IE v.6 you will see that all the input fileds are disorder wich I don't understand why??
Any help will be much appreciated!!
Since #searchform is absolutely positioned, its parents will have a height of 0. You can try:
body, body>div{min-height:100%;}
Here's a fiddle: http://jsfiddle.net/jEfMx/
I've got the following form where everything formats properly with the exception of the submit buttons at the bottom of the form: they should be centered.
I've tried a variety of different combinations of nesting divs in combination with setting widths, margins, and text-aligns, but I can't seem to figure out what I am doing wrong.
http://jsfiddle.net/vM5fp/
Here is what I have so far...
HTML
<form id="myForm" action="#" method="post">
<div>
<label for="pickone" id="ruleTypeLabel">Pick One: </label>
<select id="pickone" name="pickone">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
</div>
<div>
<label for="field1" id="field1label">Field 1: <span class="helpercomment">xx123</span></label>
<input type="text" id="field1" name="field1" />
</div>
<div>
<label for="field2" id="field2label">field 2: </label>
<input type="text" id="field2" name="field2" />
</div>
<div>
<label for="field3" id="field2">field 3: <span class="helpercomment">Separate by commas</span></label>
<textarea id="field 3" name="field 3"></textarea>
</div>
<div>
<label for="field4" id="field4label">field 4: </label>
<input type="text" id="field4" name="field4" />
</div>
<div>
<label for="startDate" id="startDateLabel">Start Date: <span class="helpercomment">MM/DD/YYYY</span></label>
<input type="text" id="startDate" name="startDate" class="date"/>
<a href="#" class="calendaricon">
<img src="Calendar.png" />
</a>
</div>
<div>
<label for="endDate" id="endDateLabel">End Date: <span class="helpercomment">MM/DD/YYYY</span></label>
<input type="text" id="endDate" name="endDate" class="date"/>
<a href="#" class="calendaricon">
<img src="Calendar.png" />
</a>
</div>
<div>
<div class="buttonrow">
<input type="submit" id="submitButton" value="Submit" />
<input type="submit" id="cancelButton" value="Cancel" />
</div>
</div>
</form>
And the css:
form {
width:300px;
margin:10px auto;
}
form div {
clear:both;
width:100%;
}
form div label {
display:block;
text-align:right;
width:140px;
float:left;
}
form div label .helpercomment{
display:block;
font-size:.8em;
font-style:italic;
color:#C1C2D7;
background-color:#FFF;
text-align:right;
}
form div input, form select, form textarea {
float:left;
width:140px;
margin:2px 0 20px 10px;
}
form div input.date {
width:113px;
}
form div a.calendaricon {
}
form div a.calendaricon img {
display:inline;
border:none;
margin-top:2px;
margin-left:4px;
}
form div div.buttonrow {
text-align:center;
width:auto;
margin:auto;
}
.buttonrow #submitButton, .buttonrow #cancelButton {
width:auto;
}
The buttons are floating (because they're inputs too). Either change them to <button> or modify the CSS:
.buttonrow #submitButton, .buttonrow #cancelButton {
float: none;
width:auto;
}
http://jsfiddle.net/UcPD2/
You're far better off using a styled unordered list than DIVs to format forms.
form ul, form li {
margin:0;
padding:0
}
<ul>
<li><label>....</label> <input ... /></li>
...
</ul>