What is the css-way to do this...
text | input
text text | input
text | input input
text text text | input
where text is some label for the input field input
UPD usually you can see such a layout in user registration forms
CSS:
label {
float: left;
text-align: right;
width: 100px;
margin-right: 1em;
}
HTML:
<label for="i1">text</label><input id="i1" name="i1" /><br>
<label for="i2">text text</label><input id="i2" name="i2" /><br>
<label for="i3">text</label><input id="i3" name="i3" /> <input id="i5" name="i5" /><br>
<label for="i4">text text text</label><input id="i4" name="i4" /><br>
http://jsfiddle.net/wEcGf/
Another way to do it.
HTML:
<div class='form'>
<p><label>Test</label><input /></p>
<p><label>Longer test</label><input /></p>
<p><label>Even longer test</label><input /></p>
</div>
CSS:
.form p {
clear: both;
float: none;
}
.form p label {
display: block;
float: left;
text-align: right;
width: 10em;
}
.form p input {
float: left;
}
Yelds: http://jsfiddle.net/QWH2J/
You can also use ul or ol with li.
Depends on the HTML code. You can play with float: left;, float; right and clear: both for example. But without at least some HTML code, it's impossible to give you a complete solution.
Here's a little example : http://jsfiddle.net/xm5aL/1/
HTML :
<div>
<label for="input1">Input 1</label>
<input name="input1" />
<label for="input2">Some long Input 2</label>
<input name="input2" />
<label for="input3">Input 3</label>
<input name="input3" />
<label for="input4">short</label>
<input name="input4" />
<label for="input5">Input 5</label>
<input name="input5" />
</div>
CSS :
div {
width: 20em;
}
label {
clear: both;
float: left;
text-align: right;
width: 10em;
}
label:after {
margin: 0em 1em;
content: " | "
}
input {
float: right;
width: 10em;
}
input {
border: 1px solid #ccc;
background: #f5f5f5;
padding-left:5px;
}
label {
display: block;
width:auto;
width: 100px;
float: left;
margin: 2px 6px 6px 4px;
text-align: right;
font-weight:bold;
color:#555;
}
br{
clear:both;
}
Check working example at http://jsfiddle.net/LW2Ss/3
See http://jsfiddle.net/fXeX2/
<html>
<head>
<title></title>
<style type="text/css">
label {
display: inline;
float: left;
width: 10em;
text-align: right;
}
input {
margin-left: 15em;
display: block;
}
</style>
</head>
<body>
<fieldset>
<label>text</label>
<input type="text" style="width:10em;" />
<label>text</label>
<input type="text" style="width:10em;" />
<label>text text</label>
<input type="text" style="width:20em;" />
<label>text text text</label>
<input type="text" style="width:10em;" />
</fieldset>
</body>
</html>
Related
I have the following input textboxes, but I have aligned them in css with {width: xxx px;} which is not a good practice as it will not always align correctly.
<style>
#left_col p {
margin-top: 15px;
margin-bottom: 15px;
}
.notvis {
display: none;
margin-top: 5px;
margin-bottom: 5px;
}
#ws_doc_txt {
width: 350px;
}
#ws_end_txt {
width: 358px;
}
#ws_ns_txt {
width: 340px;
}
#ws_op_txt {
width: 25%;
}
#left_col {
float: left;
width: 480px;
padding: 0 0 0 0;
}
#right_col {
margin: 0 0 0 500px;
padding: 0 0 0 0;
text-align: left;
}
#textarea1 {
text-align: left;
}
#button1 {
margin-top: 20px;
margin-bottom: 20px;
}
.greentxt {
color: green;
}
.redtxt {
color: red;
}
</style>
</head>
<body>
<div id="left_col">
<p>
<label>
<input type="radio" name="ws_type" value="WSDL" id="ws_type_0">
WSDL</label>
<label>
<input type="radio" name="ws_type" value="NOWSDL" id="ws_type_1">
Endpoint</label>
</p>
<p id="ws_doc">
<label for="ws_doc">Document:</label>
<input type="text" name="ws_doc" id="ws_doc_txt">
</p>
<p id="ws_end">
<label for="ws_end">Endpoint:</label>
<input type="text" name="ws_end" id="ws_end_txt">
</p>
<p id="ws_ns">
<label for="ws_ns">Namespace:</label>
<input type="text" name="ws_ns" id="ws_ns_txt">
</p>
<p>
<label for="ws_op">Operation:</label>
<input type="text" name="ws_op" id="ws_op_txt">
</p>
<p>
<label for="ws_par">Parameter:</label>
<input type="text" name="ws_par" id="ws_par_txt">
</p>
<p>
<label for="ws_val">Value:</label>
<input type="text" name="ws_val" id="ws_val_txt">
</p>
<input type="submit" name="test" value="Test">
</div>
What would be the correct way to make the width of the textboxes always stop at a certain point on the right side? Also, is using <p> tags to make inputs behave like block elements wrong? Could I just use css to have them stay 1 at each line? Thanks
Consider using a table to have all inputs aligned on the left side. Giving all inputs the same width should then align them perfectly on the right as well.
#left_table input {
width:350px;
}
<table id="left_table">
<tr>
<td><label for="ws_doc">Document:</label></td>
<td><input type="text" name="ws_doc" id="ws_doc_txt">
</tr>
<tr>
<td><label for="ws_end">Endpoint:</label></td>
<td><input type="text" name="ws_end" id="ws_end_txt">
</tr>
<!-- etc... -->
</table>
if you want all your text boxes to have the same attribute with proper positioning you can try this(obviously set proper values):
input[type='text']
{
width: 270px;
height: 30px;
top: 167px;
left: 43px;
position:relative;
margin-left: 10px;
background-color: #F3F3F3;
border: 1px solid #D6D6C2;
border-radius: 3px;
}
I have the home.html page where I have a menu. On clicking the link I want the addnew.html page to load into the part of the code. I get the page but it is shown in an small section.....
Home.html
<!DOCTYPE html>
<head>
<title>Contact Manager</title>
<link rel="stylesheet" type="text/css" href="Style1.css" />
<script>
function Load_addnew()
{
document.getElementById("load_here").innerHTML='<object type="text/html" data="Addnew.html"></object>'
}
</script>
</head>
<body>
<div id="main">
<div id="logo">
<h1><center>Contact Manager</center></h1>
</div>
<div id="menu">
<ul>
<li>ADD NEW CONTACT</li>
<li>EDIT A CONTACT</li>
<li>DELETE CONTACT</li>
<li>SEARCH CONTACTS</li>
<li>LIST OF CONTACTS</li>
</div>
<div id="load_here"></div>
</div>
</body>
</html>
Style1.css
#main
{
background-repeat: repeat;
}
#logo a, #menu a
{
text-decoration: none;
}
#menu ul
{
line-height: 1.5em;
font-size: x-large;
float: left;
list-style: none;
}
#load_here
{
}
#logo
{
background-color:
}
#menu
{
margin: 0px auto;
left: 0px;
right: 0px;
}
AddNew.html
<!DOCTYPE HTML>
<html>
<head>
<title>Add Contact</title>
<link rel="stylesheet" type="text/css" href="addnew.css"></link>
</head>
<body>
<div id="main">
<ul id="errors">
<li id="info">Please recheck your form and Submit again: </li>
</ul>
<p id="success">Details Saved Successfully!!</p>
<div id="form1">
<form action="" method="" id="add_new">
<label for="Fname">First Name <span class="required">*</span>:</label>
<input type="text" id="First_Name" name="FirstName" value="" pattern="[A-Z a-z]" required="required" autofocus="autofocus"/>
<label for="Mname">Middle Name :</label>
<input type="text" id="Middle_Name" name="MiddleName" pattern="[A-Z a-z]" value=""/>
<label for="Lname">Last Name <span class="required">*</span>:</label>
<input type="text" id="Last_Name" name="LastName" value="" pattern="[A-Z a-z]" required="required"/>
<label for="dob">Date of Birth <span class="required">*</span>:</label>
<input type="date" id="DOB" name="dob" value="" required="required"/>
<label for="Phone1">Phone 1 <span class="required">*</span>:</label>
<input type="text" id="contactHome" name="Phone1" value="" required="required"/>
<label for="Phone2">Phone 2:</label>
<input type="text" id="contactOffice" name="Phone2" value=""/>
<label for="email">Email <span class="required">*</span>:</label>
<input type="email" id="email" name="Email" value="" placeholder="username#example.com" required="required"/>
<label for="Address">Address Line 1 <span class="required">*</span>:</label>
<input type="text" id="address" name="Address" required="required"/>
<label for="Address">Address Line 2:</label>
<input type="text" id="address1" name="Address1"/>
<label for="city">City <span class="required">*</span>:</label>
<input id="city" name="City" required="required" value=""/>
<label for="state">State <span class="required">*</span>:</label>
<input id="state" name="State" required="required" value=""/>
<label for="country">Country<span class="required">*</span>:</label>
<input id="country" name="Country" required="required" value=""/>
<label for="zip">PIN<span class="required">*</span>:</label>
<input id="zip" name="Zip" required="required" value=""/>
<input type="Submit" value="Submit" id="submit-button"/>
<input type="Reset" value="Reset" id="reset_button"/>
<p id="required-desc"><span class="required">*</span> indicates a required field</p>
</form>
</div>
</div>
</body>
</html>
addnew.css
#main
{
width: 465px;
padding: 20px;
margin: 0px auto;
border: 6px solid #8fb5c1;
border-radius: 15px;
position: absolute;
background-repeat: repeat;
left: 0px;
right: 0px;
}
#main input, #main select, #main textarea, #main label
{
font-size: 15px;
margin-bottom: 2px;
}
#main input, #main select, #main textarea
{
width: 450px;
border: 1px solid #cee1e8;
margin-bottom: 20px;
padding: 4px;
}
#main input:focus, #main select:focus, #main textarea:focus
{
border: 1px solid #afcdd8;
background-color: #ebf2f4;
}
#main textarea
{
height: 80px;
resize: none;
}
#main label
{
display: block;
}
#main .required
{
font-weight: bold;
color: #f00;
}
#main #submit-button, #main #reset_button
{
width: 100px;
background-color:#333;
color:#FFF;
border:none;
display:block;
float:right;
margin-bottom:0px;
margin-right:6px;
background-color:#8FB5C1;
}
#main #submit-button:hover, #main #reset_button :hover
{
background-color: #A6CFDD;
}
#main #submit-button:active, #main #reset_button:active
{
position:relative;
top:1px;
}
#main #loading
{
width:32px;
height:32px;
display:block;
position:absolute;
right:130px;
bottom:16px;
display:none;
}
#errors
{
border: solid 1px #e58e8e;
padding: 10px;
margin: block;
width: 437px;
border-radius: 8px;
background: #ffe6e6 no-repeat 405px center;
display: none;
}
#errors li
{
padding: 2px;
list-style: none;
}
#errors li:before
{
content: '-';
}
#errors #info
{
font-weight: bold;
}
#errors #info:before
{
content: '';
}
#success
{
border: solid 1px #83d186;
padding: 25px 10px;
margin: 25px 0px;
display: block;
width: 437px;
border-radius: 8px;
background: #d3edd3 no-repeat 405px center;
font-weight: bold;
display: none;
}
#errors.visible, #success.visible
{
display: block;
}
#form1 #req-field-desc
{
font-style: italic;
}
Easy enough if you set a width and height.
#load_here object
{
width: 100%;
height: 500px;
}
The problem you'll run into is that there is proportional sizing for this. You'd have to specify both a width and a height, or it will default width: 300px; and height: 150px;. So, if you set width: 100%; but don't set height, it'll render the height at 150px, and vice versa.
I hope this helps. ^^
I'm currently busy with this informatics project(Build a sample datingsite) of mine. The problem is that I'm having some troubles with getting everything in the right place. Everything went fine until my email-box showed up at the wrong place(However, Dreamweaver displays it as I want it). I don't know how, I don't know why but I think it has to do something with my margins or paddings. Any help is appreciated!
Thanks in advance,
HTML+CSS(many words are dutch and I am a beginner to this all, so please don't expect a high quality code. I do have my HTML and CSS in separate files in my real project.):
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
padding:0;
margin:0;
border:0;
}
body {
background-color:#666;
font-family:corbel;
}
.container {
width: 1240px;
}
#HomeLeftSideRegister {
float:left;
}
.Form {
width: 1240px;
height: 600px;
display:block;
background-color:white;
border-radius: 10px;
margin-top: 111px;
margin-left:auto;
margin-right:auto;
}
#Registreernu {
margin-left:45px;
color: #3c948b;
font-size: 70px;
}
#Home-email {
color: #000;
font-size: 30px;
margin-top: 30px;
margin-left: 245px;
}
.Email {
color:#666;
font-weight:bold;
}
#useremail {
height: 22px;
width: 281px;
font-size: 20px;
border-width: 1px;
border-style:solid;
margin: 10px 0px 10px 149px;
}
.Gender {
color: #000;
font-size: 18px;
height: 155px;
width: 130px;
border: none;
float: left;
margin-left: 25px;
margin-top: 10px;
}
#gender-1 {
margin-left:150px;
}
.Radiolabel {
margin-top: 20px;
}
.Roundbutton {
background-color: #3c948b;
height: 74px;
width: 196px;
border-radius: 10px;
color: white;
font-size: 25px;
font-weight: 500;
float:none;
margin-left:193px;
}
#input {
margin-top: 220px;
}
#BlouseManImage {
float:right;
margin: 44px 70px auto auto;
}
</style>
</head>
<body>
<div id="Content" class="Container">
<section id="Home-Register">
<form class="Form" action="#" >
<div id="HomeLeftSideRegister">
<div id="Registreernu">REGISTREER NU</div>
<h2 id="Home-email">EMAIL:</h2>
<input name="email" type="email" class="Email" id="useremail"/>
<fieldset class="Gender" id="gender-1">
<H3>IK BEN EEN:</H3>
<div class="Radiolabel">
<label>
<input type="radio" name="amman" class="styled-radio" value="Man"/>
Man
</label> <br />
<label>
<input type="radio" name="amvrouw" class="styled-radio" value="Vrouw"/>
Vrouw
</label>
</div>
</fieldset>
<fieldset class="Gender">
<H3 class="">IK ZOEK EEN:</H3>
<div class="Radiolabel">
<label>
<input type="radio" name="likeman" class="styled-radio" value="Man"/>
Man
</label>
<br />
<label>
<input type="radio" name="likevrouw" class="styled-radio" value="Vrouw"/>
Vrouw
</label>
<br />
<label>
<input type="radio" name="likebeide" class="styled-radio" value="Beide"/>
Beide
</label>
</div>
</fieldset>
<div id="input">
<input type="submit" value="GA VERDER" class="Roundbutton">
</div>
</div>
<div id="BlouseManImage"><img src="Images/Man_Registreer.jpg" alt="Ik probeer het gewoon" height="535" width="577" />
</div>
</form>
</section>
<section id="reclame">
</section>
</div>
</body>
</html>
it seems you're another victim of the 'float' rule :-)
Your .Gender divs have float: left and it makes these divs go to the left and your email field had to appear to the right.
I solved it making the email field also float, so it gets there first... Also, I had to separate your 2 divs for gender because they are different and one needed to clear the float above so it goes to the row below.
Also, the html had to have name the 2 separated div classes, for GenderBen and GenderZoek.
(I don't know Dutch but I presume it stands for what you are and what you're looking for :-D)
The modified code is:
.Email {
color:#666;
font-weight:bold;
float: left;
}
.GenderBen {
color: #000;
font-size: 18px;
height: 155px;
width: 130px;
border: none;
float: left;
clear: both;
margin-left: 25px;
margin-top: 10px;
}
.GenderZoek {
color: #000;
font-size: 18px;
height: 155px;
width: 130px;
border: none;
float: left;
margin-left: 25px;
margin-top: 10px;
}
And the html with the changed divs:
<fieldset class="GenderBen" id="gender-1">
<H3>IK BEN EEN:</H3>
<div class="Radiolabel">
<label>
<input type="radio" name="amman" class="styled-radio" value="Man"/>
Man
</label> <br />
<label>
<input type="radio" name="amvrouw" class="styled-radio" value="Vrouw"/>
Vrouw
</label>
</div>
</fieldset>
<fieldset class="GenderZoek">
<H3 class="">IK ZOEK EEN:</H3>
<div class="Radiolabel">
<label>
<input type="radio" name="likeman" class="styled-radio" value="Man"/>
Man
</label>
<br />
<label>
<input type="radio" name="likevrouw" class="styled-radio" value="Vrouw"/>
Vrouw
</label>
<br />
<label>
<input type="radio" name="likebeide" class="styled-radio" value="Beide"/>
Beide
</label>
</div>
</fieldset>
Check the result here http://jsfiddle.net/yn8bjfbf/
Alright, I know how the fieldset/legend works out in HTML.
I cannot encircle form html with legend
i don't know why it is not working please HELP!
why my form is not surrounded with my legend
<form id="contact_form" action="#" method="post">
<h5>Contact me</h5>
<fieldset>
<legend>Formularz kontaktowy</legend>
<ul>
<li>
<label for="nom">Nom</label>
<input id="nom" type="text" />
</li>
<li>
<label for="prenom">Prenom</label>
<input id="prenom" type="text" />
</li>
<li>
<label for="mel">Email</label>
<input id="mel" type="text" />
</li>
<li>
<label for="telephone">Telephone</label>
<input id="telephone" type="text" />
</li>
<li>
<label for="mobile">Mobile</label>
<input id="mobile" type="text" />
</li>
</ul>
<p class="submit">
<input type="button" value="ok" alt="send form" id="btn-send" />
</p>
</fieldset>
</form>
MY CSS:
/* --FORMULAIRE-- */
#content #c2 #contact_form{
margin: 5em auto;
width: 330px;
background-color:#E03336;
}
legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: 3px #000000 solid;
}
#content #c2 #contact_form h5 {
display: none;
}
#content #c2 #contact_form fildset {
overflow: hidden;
}
#content #c2 #contact_form ul {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
}
#content #c2 #contact_form ul li {
margin-bottom: 10px;
}
#content #c2 #contact_form ul li label {
float: left;
padding: 8px 10px 0 0;
width: 90px;
background-color:#36A643;
color: #348096;
font-size: 1.2em;
font-weight: bold;
text-align: right;
}
#content #c2 #contact_form ul li input {
border-style: ridge;
padding: 3px;
width: 200px;
font-size: 1.2em;
}
#content #c2 #contact_form p.submit {
text-align: center;
}
#content #c2 #contact_form #btn-send{
border-radius:10px;
background-color: #348096;
border-color: #348096;
color: #fff;
}
/* #content #c2 #form_contact {
width: 300px;
margin-left:118px;
margin-top: 59px;
}
#content #c2 input {
float:right;
display:inline;
}
#content #c2 #form_contact label{
font-size: 20px;
width:50px;
display: block;
color: #348096;
clear:both;
float:left;
}
#content #c2 #form_contact #btn_sub {
width: 40px;
margin-top: 25px;
margin-left: 25px;
border-radius:10px;
background-color: #348096;
border: #348096;
}
*/
what i'm doing wrong
Because it is NOT wrapped in legend. Your html should be like so, if you really want to wrap it with the legend tag:
<form id="contact_form" action="#" method="post">
<h5>Contact me</h5>
<fieldset>
<legend>Formularz kontaktowy
<ul>
<li>
<label for="nom">Nom</label>
<input id="nom" type="text" />
</li>
<li>
<label for="prenom">Prenom</label>
<input id="prenom" type="text" />
</li>
<li>
<label for="mel">Email</label>
<input id="mel" type="text" />
</li>
<li>
<label for="telephone">Telephone</label>
<input id="telephone" type="text" />
</li>
<li>
<label for="mobile">Mobile</label>
<input id="mobile" type="text" />
</li>
</ul>
<p class="submit">
<input type="button" value="ok" alt="send form" id="btn-send" />
</p>
</legend>
</fieldset>
</form>
But this makes me wonder why you want to wrap it with legend? Your code was correct. A legend tag in html is just to define the caption of a fieldset.
In addition the answer of uapuap: What you might want to do is to give the fieldset, or the formular the css border.
I'm close but I can't get my radio buttons to line up next to a label.
I've change the css a million times but I can't seem to get all my text boxes, radio buttons and commment box to line up under each other. Specifically, the second radio button isn't lining up with the rest of the stuff.
Any ideas?
Appreciate it!
Here's the code in action: http://jsfiddle.net/NpJ55/
My html and css:
<fieldset>
<label for="name" class="formlabel">Name:</label>
<input id="fName" name="name" type="text" class="forminput" />
<label for="co" class="formlabel">Company:</label>
<input id="fCo" name="co" type="text" class="forminput" />
<label for="email" class="formlabel">Email:</label>
<input id="fEmail" name="email" type="text" class="forminput" />
<label for="phone" class="formlabel">Phone:</label>
<input id="fPhone" name="phone" type="text" class="forminput" />
<label for="contact" class="formlabel">Contact:</label>
<div id="radio_form">
<input id="radio_form_1" name="Sales" type="radio" value="Sales" />
<label for="radio_form_1">Sales</label>
<input id="radio_form_2" name="Technical" type="radio" value="Technical" />
<label for="radio_form_2">Technical</label>
</div>
<label for="name" class="formlabel">Comments:</label>
<textarea name="comments" rows="5" cols="50" class="forminput"></textarea>
<input id="submit" name="submit" type="submit" class="forminput" value="Submit" />
</fieldset>
.formlabel {
clear:left;
display:block;
float:left;
margin:0 0 1em 0;
padding:0 0.5em 0 0;
text-align:right;
width:8em;
}
.forminput {
float:left;
margin:0 0.5em 0.5em 0;
}
fieldset {
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
}
input, textarea {
-moz-border-radius:5px;
border-radius:5px;
border:solid 1px #999;
padding:2px;
}
#submit {
background:grey;
height:30px;
width:100px;
border:1px;
color:white;
font:family:Arial;
font-weight:bold;
font-size:15px;
cursor:pointer;
}
#submit:hover {
background:#4498e1;
}
#radio_form input {
float: left;
}
#radio_form label {
float: left;
}
#radio_form label + input {
clear: both;
}
Well - without making too many changes... http://jsfiddle.net/billymoon/NpJ55/3/
#radio_form{
float: left;
}
And drop the #radio_form ... rules!
Remove the rule:
#radio_form label + input {
clear: both;
}
jsFiddle example
Here's a Fiddle
#radio_form {
float: left;
margin-bottom: 13px;
}
input[type="radio"] {
display: block;
margin: 3px 7px 0 0;
}
You can avoid having to fight with floats by using inline-block instead
http://jsfiddle.net/NpJ55/8/
.fieldwrap {
margin: 15px 0;
}
.formlabel {
display: inline-block;
vertical-align: middle;
text-align:right;
width:8em;
font-size: 24px;
}
.radiolabel {
display: inline-block;
vertical-align: middle;
font-size: 20px;
margin-right: 15px;
}
.radio {
display: inline-block;
vertical-align: middle;
}
.forminput {
display: inline-block;
vertical-align: middle;
}
Or conversely, add the rule:
#radio_form {
float: left;
}
Fiddle