I want to create a form with 3 columns using Div,
Label : Textbox Label : Textbox Label : Textbox
Label : Textbox Label : Textbox Label : Textbox
If someone can help me, I would appreciate it.
Note: The label will be in multilingual, the text could be longer in other language.This is the major problem I see with div method. If the label is longer, the textbox will automatically go under the label and this is not correct .
<style>
.wrapperField{
float:left;
width:200px;
}
</style>
<div class="wrapperField">
<Label .....
<input type="text....
</div>
<div class="wrapperField">
<Label .....
<input type="text....
</div>
<div class="wrapperField">
<Label .....
<input type="text....
</div>
Please try the following layout
<style>
.wrapperField {
float: left;
width: 200px;
overflow: hidden;
}
.wrapperField label {
float: left;
margin-right: 10px;
}
.wrapperField input, .wrapperField textarea {
float: right;
}
</style>
<style>
.wrapperField {
float:left;
width:200px;
margin-left:10px;
}
.wrapperField label{
float:left;
margin-right:10px;
width:90px;
overflow:hidden;
white-space:nowrap;
text-align:right;
}
.wrapperField input, .wrapperField textarea {
float:left;
width:100px;
}
</style>
<div class="wrapperField">
<label>testfasdf asd asd as ff er</label>
<input type="text" />
</div>
<div class="wrapperField">
<label>test asdf asdf asdf asdf asdf </label>
<input type="text" />
</div>
<div class="wrapperField">
<label>test</label>
<input type="text" />
</div>
<br style="clear:left;" />
<div class="wrapperField">
<label>test</label>
<input type="text" />
</div>
<div class="wrapperField">
<label>test</label>
<input type="text" />
</div>
<div class="wrapperField">
<label>test</label>
<input type="text" />
</div>
#mmanco I do change on your solution . It's working great now. Thanks again for your help. I'll never think to use the overflow properties. I Just put the overflow properties on the Label and specify a width on the label.
we'll the textbox is going under the label because you have set a fixed width of 200 px on that div. so if it exceeds 200px he will push it down. it's a normal behaviour
and I don't think using overflow:hidden will help. Better use 2 columns
Related
I have a form where I gave the textfields a padding so it will be a bit bigger and nicer. Underneath the form I have a submit button.
The button and the textfields have a width of 100%, but the problem is, is that the button isn't fully 100% by that it isn't equally even in the width with the textfields. What am I doing wrong? Can't seem to "find" the issue
I have put it here http://jsfiddle.net/zrhB6/3/
The Css
input[type=text],input[type=password]{
display: block;
height: 3em;
width: 100%;
}
.btn {
background-color:#c1d82f;
border:3px solid #97a34b;
display:inline-block;
color:#26328c;
font-family:Verdana;
font-size:20px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
cursor: pointer;
width: 100%;
}
HTML
<div class="grid-container">
<div class="grid-50 login">
<h3>Login</h3>
<form class="grid-100">
<input type="text" name="loginEmail" placeholder="Email"/>
<input type="password" name="loginPassword" placeholder="pass"/>
<input type="submit" name="loginSubmit" class="btn"/>
</div>
<div class="grid-50 login">
<h3>Register</h3>
<form">
<input type="text" name="registerName" placeholder="Name"/>
<input type="text" name="registerEmail" placeholder="Email"/>
<input type="password" name="registerPassword" placeholder="pass"/>
<input type="submit" name="registerSubmit" class="btn"/>
</div>
</div>
I'm using unSemantic grid, but that shouldn't be a issue I think
To both CSS selectors, add:
box-sizing:border-box;
The reason is the default box sizing doesn't include padding and margins in the width, so you're getting 100% + padding + border + margin for the total width.
I want to center the div box im making here but i dont want to center the text in the box and i cant seem to find how to do this. For now what i have is this:
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
display: inline-block;
width: 200px;
}
and
<div class=box>
Login
<form method ="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name"/>
<label for="password">Password:</label>
<input name="password"/>
<p>
<input name="submit" type="Submit" value="Register"/>
<input name="reset" type="reset" value="Clear Form">
</form>
</div>
Thanks in advance!
Remove display: inline-block; & text-align:center
inline-block is not necessary when you are defining the width/height for the div.
By default div is a block element.
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
width: 200px;
}
DEMO
Use dead centre...
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -75px;
}
Note: Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height/width.
More info:
CSS Tricks Example
jsFiddle Demo
jsFiddle DEMO
Alternate jsFiddle DEMO with Centered Form and also this CSS3 Version.
The key to making the form look correct is to use padding, which is part of box model. Doing so allows you to fill in the sides, and keeps the text left-hand aligned.
HTML
<div class=box>Login
<form method="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name" />
<label for="password">Password:</label>
<input name="password" />
<div class="buttons">
<input name="submit" type="Submit" value="Register" />
<input name="reset" type="reset" value="Clear Form" />
</div>
</form>
</div>
CSS:
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 150px;
padding: 10px;
}
.buttons{
padding-top: 20px;
}
Screenshot:
I want a row of blocks from left to right, followed by a block underneath.
Here is a picture of what I would like to see rendered in the browser.
I need to do all positioning by CSS, not by tables. Here is my HTML and my CSS...
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="demo.css" /><head>
<body>
<form action="">
<fieldset>
<legend>Field set A</legend>
<label for="password">Password
<input id="password" name="password" type="text" value="my password" />
</label>
</fieldset>
<fieldset class="radio">
<legend>Chaining mode</legend>
<label for="chain-cfb">
<input id="chain-cfb" name="chain" type="radio" />CFB
</label>
<label for="chain-cbc">
<input id="chain-cbc" name="chain" type="radio" />CBC
</label>
</fieldset>
</form>
<hr />
<p style="padding-top: 1em;">Some text underneath</p>
</body>
</html>
... and here is the content of demo.css...
fieldset
{
float: left;
display: block;
width: 17em;
margin: 0 1em 1em 0;
padding: 0 1em 1em 1em;
}
fieldset.radio input
{
clear: both;
float: left;
width: auto;
}
input
{
display: block;
width: 15em;
}
label
{
display: block;
margin-bottom: 1em;
font-weight: bold;
}
label.first
{
padding-top: 1em;
}
The way I read it, should be getting the desired result with this code. But I am not. Here is what renders instead ....
What changes do I need to make to my html/css in order to get the stated desired result?
A way without clearing is:
form { overflow: hidden; }
I usually create a class called floatbox and use this on every container which contains floating elements
.floatbox { overflow: hidden; }
the matching html then is
<form class="floatbox" action="">
<fieldset><p>I'm floating</p></fieldset>
<fieldset><p>me too</p></fieldset>
</form>
you need to make the <hr /> element clear the floats. hr { clear: left; }
Add:
hr {
clear: left;
}
to your style sheet to clear your floats.
You could use the ole' dummy clearing element trick:
<form action="">
<fieldset>
<legend>Field set A</legend>
<label for="password">Password
<input id="password" name="password" type="text" value="my password" />
</label>
</fieldset>
<fieldset class="radio">
<legend>Chaining mode</legend>
<label for="chain-cfb">
<input id="chain-cfb" name="chain" type="radio" />CFB
</label>
<label for="chain-cbc">
<input id="chain-cbc" name="chain" type="radio" />CBC
</label>
</fieldset>
<div style="clear:both"> </div>
</form>
This ensures your form actually occupies as much space as the elements inside it.
The problem with simply clearing the hr is that the form has zero width and height, which could be problematic if you're applying styling to the form as well.
I'm asking as a last-ditch effort to comply with my conscience and do this with CSS. I want to layout this simple form using CSS, but I've spent two hours trying to get it and always end up with alignment issues. I did it in ten minutes using tables.
I need labels right-justified, the name row split in two, the labels properly vertically aligned with the input text, and all the right edges of the inputs to line up. What does it take to do this in CSS?
EDIT: Adding my CSS to see where I'm going wrong.
Here's as far as I got with the CSS:
.form_row {
width: 500px;
}
.form_row label {
text-align: right;
width: 150px;
float: left;
margin-top: 6px;
padding-right: 6px;
}
#id_first_name, #id_last_name {
width: 130px;
}
#id_email, #id_password {
width: 300px;
}
The Markup:
<div class="form_row">
<label for="id_first_name">Name:</label>
<input id="id_first_name" type="text" name="first_name" />
<input id="id_first_name" type="text" name="last_name" />
</div>
<div class="form_row">
<label for="id_email">Email:</label>
<input type="text" name="email" id="id_email"/>
</div>
<div class="form_row">
<label for="id_password">Password:</label>
<input id="id_password" type="password" name="password" />
</div>
And the result:
You tempted me into taking up the challenge :) I just about did it in 10 minutes using CSS.
As long as you're ok with tweaking line-height's and settings dimensions in px for some elements I think its achievable.
Other things to note are how font-size, padding and line-height's affect textboxes and their dimensions.
Have a look at this: http://jsbin.com/osibu3/4
Tested in IE6+, FF3.6+, Chrome, Safari
Pasting for reference as well:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button,fieldset { margin:0; padding:0 }
body { font:normal 62.5% lucida grande, lucida sans unicode }
#my-form { font-size:1.1em; width:500px; padding:20px; background:#E9E9E9;}
#my-form fieldset { border:0; margin-bottom:2px; height:20px; line-height:18px; }
#my-form fieldset label { width:70px; display:block; float:left; text-align:right; padding-right:5px; color:#61515C; }
input.text { border:1px solid #ddd; font:inherit; font-size:11px; line-height:14px; height:14px; padding:2px;
border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;}
.text.long { width:395px }
.text.short { width:193px }
</style>
</head>
<body>
<form action="" id="my-form">
<fieldset class="name">
<label for="first"><strong>Name:</strong></label>
<input type="text" name="first" value="first" class="text short"/>
<input type="text" name="last" value="last" class="text short"/>
</fieldset>
<fieldset>
<label for="email"><strong>Email:</strong></label>
<input type="text" name="email" class="text long"/>
</fieldset>
<fieldset>
<label for="password"><strong>Password:</strong></label>
<input type="text" name="password" class="text long"/>
</fieldset>
</form>
</body>
</html>
http://www.blueprintcss.org/
The blueprint css framework can help you with tabular layout with divs. It has simple usage and good documentation.
It's hard to give another answer with such little information in your question.
I have a really simple search form with the following
Label ("Search")
Textbox (fixed width)
Submit button
"Advanced" link
Label, textbox and submit are all on one horizontal line and centered.
Now I would like my advanced link to be under the submit button.
Any ideas?
If I understand the question you want:
Search [xxxxxxxxxxxxxxxx] [Submit]
Advanced
You'll have to add some more elements in to do that:
<div style="width: 300px; margin: auto; text-align: center;">
Search [xxxxxxxxxxxxxxx] [Submit]
<div style="text-align: right">Advanced</div>
</div>
<style type="text/css">
#searchpanel
{
width: <displaywidth of controls>px;
text-align: center;
}
#button
{
text-align: right;
}
</style>
<div ="searchpanel">
<label for="textbox">Search</label><input type="text" id="textbox" />
<input type="submit" value="Search" />
</div>
<div id="button">
Advanced
</div>
Hope this helps.