I need to build a form for data input, let's say FirstName and LastName. I know how to do this with a table. In the first <td> I'd put a label tag and in the second I'd use an input tag with a type="text" attribute. This way the labels and textboxes would be lined up in two columns.
Is there a way to do this with CSS?
Here's a tutorial for this.
You do NOT need tables to make great HTML forms. In fact, you don't want them! Try this code at home and see what you think..
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact info</title>
<LINK href="main2.css" type="text/css" rel="stylesheet">
<!--[if IE]>
<style>
fieldset.nested
{
position: relative;
margin-top: 15px;
}
fieldset.nested legend
{
position: absolute; top: -8px; left: 1em;
}
</style>
<![endif]-->
</head>
<body>
<div>
<form>
<fieldset class="main">
<legend>Contact info</legend>
<fieldset class="nested">
<legend>Name</legend>
<ol>
<li>
<label for="textboxName">Name</label>
<input id="textboxName" name="textboxName" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxName" >Title</label>
<input id="textboxName" name="textboxTitle" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxCompany">Company</label>
<input id="textboxCompany" name="textboxCompany" type="text" style="width: 15em;"/>
</li>
</ol>
</fieldset>
<fieldset class="nested">
<legend>Address</legend>
<ol>
<li>
<label for="textboxAddress1" >Street address</label>
<input id="textboxAddress1" name="textboxAddress1" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxAddress2" >Street address</label>
<input id="textboxAddress2" name="textboxAddress2" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxCity" >City</label>
<input id="textboxCity" name="textboxCity" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxRegion" >City/Region</label>
<input id="textboxRegion" name="textboxRegion" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxPostalCode" >Postal code</label>
<input id="textboxPostalCode" name="textboxPostalCode" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxCountry" >Country</label>
<input id="textboxCountry" name="textboxCountry" type="text" style="width: 15em;"/>
</li>
</ol>
</fieldset>
<fieldset class="nested">
<legend>Phone numbers</legend>
<ol>
<li style="display:none">
<label for="textboxName" >Name</label>
<input id="text1" name="textboxName" type="text" style="width: 15em;"/>
</li>
<li style="display:none">
<label for="textboxAddress1" >Address</label>
<input id="text2" name="textboxAddress1" type="text" style="width: 15em;" />
</li>
<li>
<label for="textboxAddress2" >Phone</label>
<input id="text3" name="textboxAddress2" type="text" style="width: 15em;"/>
</li>
</ol>
</fieldset>
<div class="buttonsContainer">
<input class="button" type="submit" value="OK" />
<input class="button" type="button" value="Cancel" />
</div>
</fieldset>
</form>
</div>
</body>
</html>
CSS:
body
{
margin: 0;
padding: 0;
font-family: Verdana, Tahoma, Arial, sans-serif;
}
fieldset.main
{
margin: 1.5em 0 0 1.5em;
padding: 1em 0 0 0;
width: 400px;
font-size: .9em;
}
fieldset.main legend
{
margin-left: 1em;
color: #000000;
font-weight: bold;
}
fieldset.main ol
{
padding: 1em 1em 0 1em;
list-style: none;
}
fieldset.main li
{
padding-bottom: .5em;
}
fieldset.main ol li label
{
float: left;
width: 10em;
margin-right: 1em;
}
/* ----------------------------------------- */
fieldset.nested
{
margin: 0 0 1em 1em;
padding: 0;
width: 93%;
font-size: .8em;
border: 1px solid gray;
background: #B0C4DE;
}
fieldset.nested legend
{
margin-left: 1em;
font-weight: normal;
font-size: .9em;
color: black;
background-color: white;
padding: 0 1em 0 1em;
border: 1px solid black;
}
fieldset.nested ol
{
padding: 0 1em 0 1em;
list-style: none;
}
fieldset.nested li
{
/* Control leading between rows. */
padding-bottom: .7em;
}
fieldset.nested ol li label
{
float: left;
width: 10em;
margin-right: 1em;
}
/* ----------------------------------------- */
input.button
{
/* border-style: none; */
width: 6em;
height: 2.5em;
}
div.buttonsContainer
{
float: right;
margin: 1em 1em 1em 0;
}
CSS will work fine -- IF you are okay with entering pixel widths for things But sadly fails when you need to localize your strings and discover labels don't fit. For an address entry form, I would stick to using Tables, as they do all the right re-sizing and wrap behaviour and work w/o issues on almost every browser there is.
EDIT: I kinda wonder if any of the down-voters has checked the layout for these S.O. pages
A really good way to do this yourself is to install firebug on firefox and inspect elements on websites which implement this really well.
There is a great smashing maagzine on sign up forms. Several approaches in CSS can be seen, with some really great examples.
Related
I've managed to convert my html form to have some fields side-by-side in a form-group to reduce the overall height of the form, but I can't get rid of the excessive white space to the right of the fields. Is the red box below coming from the container, the fieldset or the form-group? I am very new to html/Boostrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="robots" content="noindex,nofollow" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
<link rel="icon" href="https://wonderfest.com/wp-content/uploads/2017/01/favicon.ico" type="image/x-icon"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Search</title>
<style>
#outline {
position: relative;
height: auto;
width: auto;
/*margin: 18px auto 0;*/
margin: 10px 24px 0 24px;
border: 1px groove #ddd !important;
}
.logoimages {
width: auto;
height: auto;
position: absolute;
text-align: center;
top: 30px;
left: 15px;
}
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#title {
width: auto;
top: 90px;
position: absolute;
visibility: visible;
left: 0px;
}
#title .title-content {
font-family: 'Roboto', sans-serif;
font-weight: bolder;
font-size: 32px;
color: #e6bb57;
}
.line-bottom {
border-bottom: 5px solid #E6BB57;
width: 400px;
margin-left: auto;
margin-right: auto;
}
p {
color: #666;
font-size: 16px;
font-family: 'Roboto', sans-serif;
font-weight: normal;
margin-top: 5px;
}
h3 {
color: #666;
font-size: 60px;
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-align: center;
letter-spacing: -1px;
width: auto;
}
h4 {
font-weight: bold;
font-family: 'Roboto', sans-serif;
text-align: center;
margin: 1.33em 0;
}
h5 {
font-weight: 500;
font-family: 'Roboto', sans-serif;
text-align: center;
margin: 1.33em 0;
}
a {
color: #666;
font-family: 'Roboto', sans-serif;
text-decoration: underline;
}
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.scheduler-border {
font-family: 'Roboto', sans-serif;
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width:auto;
padding:0 10px;
border-bottom:none;
}
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
background: rgba( 255, 255, 255, .8 )
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: block;
}
</style>
</head>
<body>
<noscript>
<style>
.pagecontainer {display:none;}
</style>
<div class="noscriptmsg">
<h4>JavaScript is disabled on your browser. You will not be able to use this application until it is enabled.</h4>
<h5>Please refer to your browser's specific configuration details to change this setting.</h5>
<p align="center">© <?php echo date('Y')?> USA, INC.</p>
<p align="center">Version <?php echo $pageVer?></p>
</div>
</noscript>
<div class="pagecontainer">
<div id="outline">
<div id="bckgrnd" style="text-align: center">
<img src="../common/img/background-1.jpg"/>
<div class="logoimages" style="text-align: center">
<img src="../common/img/combined_images.png" class="center-block img-responsive" id="top-img1" width="454" height="61" />
</div>
<div id="title" style="text-align: center">
<h3 class="title-content">Search</h3>
<div class="line-bottom"></div>
</div>
</div>
<div>
<p align="center">
<a href="javascript:window.location.href = '../common/php/logout.php';" class="btn btn-info btn-sm">
<span class="glyphicon glyphicon-log-out"></span> Log out
</a>
</p>
</div>
<div class="container" style="padding:10px 10px;">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Search criteria</legend>
<form id="searchForm" name="searchForm" class="form-horizontal">
<div class="fields-search"> <!--for textfields -->
<div class="form-group">
<div class="col-sm-2">
<label for="barcode" class="sr-only"></label>
<input id="barcode" name="barcode" class="form-control input-group-lg" type="text" placeholder="Barcode" value="">
</div>
<div class="col-sm-5">
<label for="entry-number" class="sr-only"></label>
<input id="entry-number" name="entry-number" class="form-control input-group-lg" type="text" placeholder="Entry # (separate multiple entries with commas)" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label for="first-name" class="sr-only"></label>
<input id="first-name" name="first-name" class="form-control input-group-lg" type="text" placeholder="First name" value="">
</div>
<div class="col-sm-4">
<label for="last-name" class="sr-only"></label>
<input id="last-name" name="last-name" class="form-control input-group-lg" type="text" placeholder="Last name" value="">
</div>
</div><!--/form-group-->
<div class="form-group">
<div class="col-sm-7">
<label for="title-name" class="sr-only"></label>
<input id="title-name" name="title-name" class="form-control input-group-lg" placeholder="Title or name of entry" value="">
</div>
</div>
</div>
</form>
</fieldset>
</div>
<br/>
<br/>
<div id="footer">
<p align="center">© <?php echo date('Y')?>USA, INC.</p>
<p align="center">Version <?php echo $pageVer?></p>
</div>
</div>
</div>
<div class="modalLoading"></div>
</body>
</html>
I believe my problem is different than How to remove or reduce the white space in bootstrap? as I tried the no-padding class and made no difference.
Changed col-sm-* classes in the form group elements. Also add ad row and col-sm-7 divs before fieldset div
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="robots" content="noindex,nofollow" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
<link rel="icon" href="https://wonderfest.com/wp-content/uploads/2017/01/favicon.ico" type="image/x-icon" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Search</title>
<style>
#outline {
position: relative;
height: auto;
width: auto;
/*margin: 18px auto 0;*/
margin: 10px 24px 0 24px;
border: 1px groove #ddd !important;
}
.logoimages {
width: auto;
height: auto;
position: absolute;
text-align: center;
top: 30px;
left: 15px;
}
img {
max-width: 100%;
height: auto;
width: auto\9;
/* ie8 */
}
#title {
width: auto;
top: 90px;
position: absolute;
visibility: visible;
left: 0px;
}
#title .title-content {
font-family: 'Roboto', sans-serif;
font-weight: bolder;
font-size: 32px;
color: #e6bb57;
}
.line-bottom {
border-bottom: 5px solid #E6BB57;
width: 400px;
margin-left: auto;
margin-right: auto;
}
p {
color: #666;
font-size: 16px;
font-family: 'Roboto', sans-serif;
font-weight: normal;
margin-top: 5px;
}
h3 {
color: #666;
font-size: 60px;
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-align: center;
letter-spacing: -1px;
width: auto;
}
h4 {
font-weight: bold;
font-family: 'Roboto', sans-serif;
text-align: center;
margin: 1.33em 0;
}
h5 {
font-weight: 500;
font-family: 'Roboto', sans-serif;
text-align: center;
margin: 1.33em 0;
}
a {
color: #666;
font-family: 'Roboto', sans-serif;
text-decoration: underline;
}
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.scheduler-border {
font-family: 'Roboto', sans-serif;
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
}
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
background: rgba( 255, 255, 255, .8)
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>') 50% 50% no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: block;
}
</style>
</head>
<body>
<noscript>
<style>
.pagecontainer {display:none;}
</style>
<div class="noscriptmsg">
<h4>JavaScript is disabled on your browser. You will not be able to use this application until it is enabled.</h4>
<h5>Please refer to your browser's specific configuration details to change this setting.</h5>
<p align="center">© <?php echo date('Y')?> USA, INC.</p>
<p align="center">Version <?php echo $pageVer?></p>
</div>
</noscript>
<div class="pagecontainer">
<div id="outline">
<div id="bckgrnd" style="text-align: center">
<img src="../common/img/background-1.jpg" />
<div class="logoimages" style="text-align: center">
<img src="../common/img/combined_images.png" class="center-block img-responsive" id="top-img1" width="454" height="61" />
</div>
<div id="title" style="text-align: center">
<h3 class="title-content">Search</h3>
<div class="line-bottom"></div>
</div>
</div>
<div>
<p align="center">
<a href="javascript:window.location.href = '../common/php/logout.php';" class="btn btn-info btn-sm">
<span class="glyphicon glyphicon-log-out"></span> Log out
</a>
</p>
</div>
<div class="container" style="padding:10px 10px;">
<div class="row">
<div class="col-sm-7">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Search criteria</legend>
<form id="searchForm" name="searchForm" class="form-horizontal">
<div class="fields-search">
<!--for textfields -->
<div class="form-group">
<div class="col-sm-4">
<label for="barcode" class="sr-only"></label>
<input id="barcode" name="barcode" class="form-control input-group-lg" type="text" placeholder="Barcode" value="">
</div>
<div class="col-sm-8">
<label for="entry-number" class="sr-only"></label>
<input id="entry-number" name="entry-number" class="form-control input-group-lg" type="text" placeholder="Entry # (separate multiple entries with commas)" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label for="first-name" class="sr-only"></label>
<input id="first-name" name="first-name" class="form-control input-group-lg" type="text" placeholder="First name" value="">
</div>
<div class="col-sm-6">
<label for="last-name" class="sr-only"></label>
<input id="last-name" name="last-name" class="form-control input-group-lg" type="text" placeholder="Last name" value="">
</div>
</div>
<!--/form-group-->
<div class="form-group">
<div class="col-sm-12">
<label for="title-name" class="sr-only"></label>
<input id="title-name" name="title-name" class="form-control input-group-lg" placeholder="Title or name of entry" value="">
</div>
</div>
</div>
</form>
</fieldset>
</div>
</div>
</div>
<br/>
<br/>
<div id="footer">
<p align="center">©
<?php echo date('Y')?>USA, INC.</p>
<p align="center">Version
<?php echo $pageVer?>
</p>
</div>
</div>
</div>
<div class="modalLoading"></div>
</body>
</html>
i have a horizontal navigation bar.
i wish to add a search bar to the navigation bar, but when i insert it, my navigation bar is misaligned.
https://jsfiddle.net/r6ntxg2f/
as you can see my menu is hovering above the green line, and the right side menu is hovering even more. i wish to align the whole menu to the green line.
<li id="searchbar">
<form id="search" method="post" style="">
<input id="bb" type="text" style="" />
<input id="cc" type="submit" value="Search" style="" />
</form>
</li>
this is how it is without search. https://jsfiddle.net/q476f585/ (working)
Seems like your sizes and padding was causing the issue, see the jsfiddle for an updated solution. All I done was updated the padding and display style. For the bottom border you will have to ensure that the other padding on the first two buttons are correct.
You can fix the issue by adjusting padding. Here is the working code.
ul#menu_left {
position: relative;
left: 100px;
width: 75%;
font: 75% verdana;
list-style-type: none;
padding: 10px 10px 5px 10px;
border-bottom: 1px solid green;
}
ul#menu_right {
padding-right: 10px;
float: right;
padding-top: 2px
}
ul#menu_left li {
display: inline;
}
ul#menu_left li a {
padding: 6px 4px;
border-bottom: 1px solid green;
text-decoration: none;
color: white;
background-color: green;
}
ul#menu_left a:hover {
color: black;
background: yellow;
border-bottom: 1px solid yellow;
}
li#searchbar {
background-color: green;
padding: 6px 4px;
border-bottom: 1px solid green;
}
li#searchbar form {
display: inline;
}
li#searchbar input {
width: 50px;
}
<ul id="menu_left">
<li><a id="tab1" href="#">The We</a>
</li>
<li><a id="tab2" href="#">Book</a>
</li>
<li><a id="tab3" href="#">Tab</a>
</li>
<li id="searchbar">
<form id="search" method="post">
<input id="bb" type="text" />
<input id="cc" type="submit" value="Search" />
</form>
</li>
<ul id="menu_right">
<li><a id="tab5" style="" href="#">Up</a>
</li>
<li><a id="tab6" href="#">Contact</a>
</li>
</ul>
</ul>
I am working on creating a page which has a fixed links on the top and fixed submit buttons at the bottom. The content in between is scrollable using overflow:auto;
I am noticing, when I reduce the browser window size the scroller slowly disappears.
How can I fix this? Are there any hacks?
I am working Firefox 19.0 and chrome version 26.0.1410.12 and IE9
Here is my code in its entirety:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow based Layout</title>
<style type="text/css">
<!--
/* Pretty Stuff
================================== */
/* Zero down margin and paddin on all elements */
* {
margin: 0;
padding: 0;
}
body {
font: 92.5%/1.6"Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}
h1 {
font-size: 2.4em;
font-weight: normal;
}
h2 {
font-size: 2.0em;
font-weight: normal;
}
p, li {
font-size: 1.4em;
}
h1, h2, p {
margin: 1em 0;
}
#branding h1 {
margin: 0;
}
#wrapper {
background-color: #fff;
}
#branding {
height: 50px;
background-color:#b0b0b0;
padding: 20px;
}
#form-b {
height: 500px;
overflow: auto;
position: fixed;
top: 164px;
width: 98%;
}
#mainNav {
list-style: none;
background-color:#eee;
}
#footer {
background-color:#b0b0b0;
padding: 1px 20px;
}
/* The Core Technique
================================= */
body {
text-align: center;
min-width: 1260px;
}
#wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
#content {
width: 100%;
float: right;
}
#mainNav li {
/* width: 180px;
float: left; */
display:inline;
}
#submit-b {
border: 0px solid red;
bottom: 77px;
position: fixed;
text-align: cemter;
width: 100%;
}
#footer {
clear: both;
}
/* Add some padding
================================== */
#mainNav {
padding-top: 20px;
padding-bottom: 20px;
position: fixed;
width: 100%;
}
#mainNav * {
padding-left: 20px;
padding-right: 20px;
}
#mainNav * * {
padding-left: 0;
padding-right: 0;
}
#content * {
padding-right: 20px;
}
#content * * {
padding-right: 0;
}
-->
/* fieldset styling */
fieldset {
margin: 1em 0;
/* space out the fieldsets a little*/
padding: 1em;
border : 1px solid #ccc;
background-color:#F5F5F5
}
/* legend styling */
legend {
font-weight: bold;
}
form p {
position: relative;
width: 100%;
}
/* style for labels */
label {
float: left;
width: 10em;
}
#remember-me label {
width: 4em;
}
/* style for required labels */
label .required {
font-size: 0.83em;
color:#760000;
}
/* style error messages */
label .feedback {
position: absolute;
margin-left: 11em;
left: 200px;
right: 0;
font-weight: bold;
color:#760000;
padding-left: 18px;
background: url(images/error.png) no-repeat left top;
}
/* :KLUDGE: Explicitly set the width for IE6- */
* html .feedback {
width: 10em;
}
input {
width: 200px;
}
input[type="text"], textarea {
border-top: 2px solid #999;
border-left: 2px solid #999;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
input.radio, input.checkbox, input.submit {
width: auto;
}
/* style form elements on focus */
input:focus, textarea:focus {
background: #ffc;
}
input.radio {
float: left;
margin-right: 1em;
}
textarea {
width: 300px;
height: 100px;
}
/* Date of Birth form styling */
#monthOfBirthLabel, #yearOfBirthLabel {
text-indent: -1000em;
width: 0;
}
#dateOfBirth {
width: 3em;
margin-right: 0.5em;
}
#monthOfBirth {
width: 10em;
margin-right: 0.5em;
}
#yearOfBirth {
width: 5em;
}
/* Color form styling */
#favoriteColor {
margin: 0;
padding: 0;
border: none;
background: transparent;
}
#favoriteColor h2 {
width: 10em;
float: left;
font-size: 1em;
font-weight: normal;
}
#favoriteColor div {
width: 8em;
float: left;
}
#favoriteColor label {
/*width: 3em;*/
float: none;
display: inline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="branding">
<h1>Branding</h1>
</div>
<div id="content">
<ul id="mainNav">
<li class="first">
Home
</li>
<li>
About
</li>
<li>
News
</li>
<li>
Products
</li>
<li>
Services
</li>
<li>
Clients
</li>
<li>
Case Studies
</li>
</ul>
<div id="form-b">
<form id="comments_form" action="#" method="post">
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset id="submit-b">
<legend></legend>
<p>
<input id="submit" class="submit" name="submit" type="submit" />
</p>
</fieldset>
</form>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Reduce the padding to 10px:
#content * {
padding-right: 10px; /* Line 106 */
}
OK, so my stupid little login form almost looks how I want it to look. (This is basically my first CSS project ever and first HTML project since updating attempting to update my 15 year old HTML skills.) For the life of me, I can't figure out how to get the "forgot password?" link to move down, either aligned with the middle or bottom of the "Login" button. I've tried moving the display: inline; and vertical-align: middle; to all kinds of different selectors and none of them work! I've even tried setting the height of the anchor and/or the <li> elements. I don't understand what the deal is! Any help is greatly appreciated!
Here is my code:
form.login {
margin: 10px 10px 20px 20px;
padding: 0 0 0 0;
}
form.login fieldset{
margin: 0 0 0 0;
padding: 2px 2px 2px 2px;
border:2px solid;
border-radius: 5px;
width: 348px;
height: 90px;
}
form.login fieldset legend {
font-weight: bold;
font-size: 1.2em;
margin-left: 10px;
}
form.login fieldset ul {
margin: 0;
padding:0;
}
form.login fieldset fieldset {
border: 0;
width: 100%;
height: 40%;
display: inline;
vertical-align: middle;
}
form.login fieldset fieldset li{
float: left;
list-style: none;
width: 165px;
margin: 0 4px 0 4px;
}
form.login input {
width: 165px;
}
form.login label {
display: none;
}
form.login a:link,
form.login a:visited {
color: black;
font-size: 0.8em;
}
form.login a:hover {
color: blue;
}
form.login a:active {
color: blue;
}
form.login fieldset ul fieldset li button#submitLogin {
float: right;
}
and the HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="formstyle.css" />
</head>
<body>
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="login">
<fieldset>
<legend>Login</legend>
<ul>
<fieldset>
<li>
<label for="email">Email Address</label>
</li>
<li>
<input id="email" type="text" name="email">
</li>
<li>
<label for="password">Password</label>
</li>
<li>
<input id="password" type="password" name="password">
</li>
</fieldset>
<fieldset>
<li>
Forgot Password?
</li>
<li>
<button id="submitLogin" value="submit" name="submitLogin" type="submit">Login</button>
</li>
</fieldset>
</ul>
</fieldset>
</form>
</body>
</html>
EDIT:
Here's a screen shot of what it looks like with the code above.
Try changing:
<li class="middle">
Forgot Password?
</li>
<li class="middle">
<button id="submitLogin" value="submit" name="submitLogin" type="submit">Login</button>
</li>
and add this to your css:
.middle {
height: 22px;
line-height: 22px;
}
This explicitly gives it a set-height and and then through the line-heightproperty tells it to center the text and form objects in the li vertically.
I reworked your markup to remove the fieldsets and to make the style's more consistent. What I am doing here is making the li's all half of the width and height of the UL. That way, if you want to changed the fieldset's height and/or width, you just have to change the one spot and maybe tweak your other styles.
I also condensed and removed some other unnecessary property declarations (padding: 0 0 0 0 to padding: 0). Let me know if you have any questions.
EDIT
I worked on it to make it more consistent between Chrome and Firefox.
And I actually think you'd be better putting the height on the li elements:
http://jsfiddle.net/QRNBg/13/
Try viewing the above and run it while commenting out the display: none on the CSS .hide class declaration.
CSS
form.login {
margin: 10px 10px 20px 20px;
padding: 0;
font-size: 1.2em;
}
form.login fieldset {
margin: 0;
padding: 5px;
border: 2px solid;
border-radius: 9px;
display: inline-block;
}
form.login fieldset legend {
font-weight: bold;
font-size: 1.2em;
margin-left: 10px;
}
form.login fieldset ul {
margin: 0;
padding: 0;
height: 90px;
width: 348px;
}
form.login fieldset ul li {
width: 50%;
height: 45%;
float: left;
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}
form.login input {
border: 1px solid #aaa;
}
form.login input,
form.login li.common a {
width: 93%;
height: 80%;
display: block;
margin: 5px;
font-size: 1em;
}
form.login .hide {
display: none;
}
form.login a:link,
form.login a:visited {
color: black;
font-size: 0.8em;
}
form.login a:hover,
form.login a:active {
color: blue;
}
form.login li.common {
text-align: left;
display: table-cell;
line-height: 2.5em;
}
#submitLogin {
text-align: right;
margin: 0 5px 0 -5px;
}
#submitLogin button {
padding: 5px 8px;
}
HTML
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="login">
<fieldset>
<legend>Login</legend>
<ul>
<li class="hide">
<label for="email">Email Address</label>
</li>
<li>
<input id="email" type="text" name="email">
</li>
<li class="hide">
<label for="password">Password</label>
</li>
<li>
<input id="password" type="password" name="password">
</li>
<li class="common">
Forgot Password?
</li>
<li id="submitLogin" class="common">
<button value="submit" name="submitLogin" type="submit">Login</button>
</li>
</ul>
</fieldset>
</form>
http://jsfiddle.net/QRNBg/11/
you want it beside the login button, yet you define it in an 'li' tag before the login button? have you tried putting that anchor in the same 'li'? using a 'table' and putting them in the same 'tr' would work for sure.
Here's a quick fix. http://jsfiddle.net/xNAnz/
I offset the li 10px from the top.
I'm currently having a problem with CSS styles in Webkit browswers (Chrome 4.0.249.89 & safari 4.0.4) in which I have a modal window that has a list of labels, radio buttons and some more text describing the what each radio button does. The modal displays correctly in FF 3.5.7
Here's the html for inside the modal,
<div id="rta_top">
<img src="pb_close_off.png" width="17" height="15" alt="Close this window" title="Close this window" id="rta_close" />
<h2 class="rta">Report</h2>
</div>
<div id="pb_bottom">
<div id="error_holder">
<div id="error"></div>
</div>
<br />
Please choose a reason for reporting this ad:
<form action="submit.php" method="post" id="report_form">
<fieldset>
<br />
<label for="incorrect_address">Wrong Address:</label>
<div class="report_ad_radio">
<input type="radio" id="incorrect_address" name="description" value="1" />
</div>
<div class="report_ad_text">
<label for="incorrect_address"> (Ad has wrong address).</label>
</div>
<br />
<label for="duplicate">Duplicate:</label>
<div class="report_ad_radio">
<input type="radio" id="duplicate" name="description" value="2" />
</div>
<div class="report_ad_text">
<label for="duplicate"> (Identical to another ad on-site).</label>
</div>
<br />
<label for="mis_classified">Mis-Classified:</label>
<div class="report_ad_radio">
<input type="radio" id="mis_classified" name="description" value="3" />
</div>
<div class="report_ad_text">
<label for="mis_classified"> (Ad is in the wrong section).</label>
</div>
<br />
<label for="inaccurate">Inaccurate:</label>
<div class="report_ad_radio">
<input type="radio" id="inaccurate" name="description" value="4" />
</div>
<div class="report_ad_text">
<label for="inaccurate"> (No longer available / price changed).</label>
</div>
<br />
<label for="photos">Photo Issue:</label>
<div class="report_ad_radio">
<input type="radio" id="photos" name="description" value="5" />
</div>
<div class="report_ad_text">
<label for="photos"> (Photos are inappropriate or do not belong to this ad).</label>
</div>
<br />
<label for="spam">Spam:</label>
<div class="report_ad_radio">
<input type="radio" id="spam" name="description" value="6" />
</div>
<div class="report_ad_text">
<label for="spam"> (Ad is spam/scam and is not exclusive).</label>
</div>
<br />
<label for="other">Other:</label>
<div class="report_ad_radio">
<input type="radio" id="other" name="description" value="7" />
</div>
<div class="report_ad_text">
<label for="other"> (Other reason, please specify).</label>
</div>
<br />
<br />
<label for="more_info">More Info:</label>
<textarea id="information" name="information"></textarea>
<br />
<br />
<div id="sending">
<div id="loader"></div>
<input type="hidden" name="submit_report_ad" value="1" />
<input type="image" src="/i/button_send_off.png" id="reply_button" name="submit_reply" value="Send »" />
</div>
</fieldset>
</div>
</div>
and the css for each element:
#rta_background {
padding: 10px;
background: url(/i/bg_modal_ra.png) no-repeat;
}
#ra_background_sent{
padding: 10px;
background: url(/i/bg_modal_ra_sent.png) no-repeat;
}
#rta_top {
padding: 0 8px 0 18px;
background: #355eae url(/i/bg_linkbar_off.png) repeat-x;
height: 30px;
line-height: 30px;
}
#rta_top h2 {
overflow: hidden;
width: 495px;
height: 30px;
font-size: 14px;
color: #fff;
}
#rta_close {
margin: 7px 0 0;
float: right;
}
#rta #pb_bottom fieldset {
background: #dff;
}
.report_ad_radio {
padding: 5px 0 0 5px;
float: left;
}
#rta #pb_bottom .rta_warning {
margin: 0 auto 6px;
border: 1px solid #f00;
padding: 2px 0;
width: 80%;
height: 15px;
line-height: 15px;
font-size: 12px;
font-weight: bold;
color: #000;
text-align: center;
background: #fdd;
}
#rta #pb_bottom .report_ad_text {
white-space: nowrap;
}
#rta #pb_bottom .report_ad_text label {
margin: 0;
padding: 10px 0 0 0;
width: auto;
font-size: 12px;
font-weight: normal;
cursor: pointer;
background: #00f000;
}
#information {
margin: 5px 0 0 5px;
padding: 2px 2px 2px 2px;
width: 370px;
height: 76px;
border: 1px solid #ccc;
color: #888;
line-height: 1.4;
resize: none;
}
#sending {
float:right;
margin-right: 24px;
}
#pb_bottom #error {
margin: 0 20px 0 50px;
height: 20px;
width: 420px;
}
#loader {
margin-right: 20px;
margin-top: 6px;
float:left;
}
In Safari it looks like this:
Safari http://neilcremins.com/img_dump/modal-saf.png
In Firefox it looks like this:
Firefox http://neilcremins.com/img_dump/modal-ff.png
Wow. Div-soup with everything defined in absolute measures. I don't know where to start. I know, I'll start here: you can only have one label per input, so... let's try this:
HTML:
<label><span class="intro">Wrong address</span><input type="radio" id="wrongaddress"/>(Ad has wrong address)</label>
CSS:
label{display: block}
.intro{width: 12em; float: left; font-weight: bold}
Demo.
Less is more.