I'm trying to make a very simple form (picture above) with three columns but without using tables. Unfortunately for me, it's not as simple in code for me as it was in Photoshop. I've been fighting with the HTML/CSS below for an hour and this is the best I could get. Is there any chance somebody could please help me with my code?
<style type="text/css">* {
}
.containerANE {
overflow: hidden;
background: #C6DEFF;
width: 992px;
}
.rightANE {
float: right;
width: 30px;
outline: 1px solid #8191a6;
}
.leftANE {
float: left;
width: 152px;
outline: 1px solid #8191a6;
}
.middleANE {
width:717px;
outline: 1px solid #8191a6;
}</style>
<h1>E-mail US</h1>
<form action="confirmed.php" method="get">
<div class=containerANE>
<div class=rightANE>
<img width="25" src="Help-icon.png">
</div>
<div class=leftANE>
Name
</div>
<div class=middleANE>
<input type="text">
</div>
<div class=rightANE>
<img width="25" src="Help-icon.png">
</div>
<div class=leftANE>
Description
</div>
<div class=middleANE>
<textarea rows="4" cols="50">
</textarea>
</div>
<div class=rightANE>
<img width="25" src="Help-icon.png">
</div>
<div class=leftANE>
E-mail<br><br>Phone
</div>
<div class=middleANE>
<input type="text">
<br> OR <BR>
<input type="text">
</div>
<input type="submit" value="SUBMIT">
Your using floats. so you need a clearfix.
Try adding group to the div's your floating:
.group:after {
content: "";
display: table;
clear: both;
}
your example fixed with .group :
http://jsfiddle.net/agconti/YvQEs/
Adding a clearfix is the best practice way to do it. You can add this class to any element that you're floating to solve similar issues in the future. Additionally the link above will tell you all you need to know about how to use it.
Also, you need to wrap your class names with quotes like class="right" instead of class=right for the classes to apply.
clear add clear right on class .rightANE
.rightANE {
float: right;
width: 30px;
outline: 1px solid #8191a6;
clear: right;
}
Related
I have a radio button which id is someID-1 and a div which id is navi1.
<input name="nappi" type="radio" id="someID-1" />
<div>
<div id="navi1">
<div style="z-index:100;position:fixed;right:0;top:0;bottom:0;">
<label for="someID-2">2</label>
</div>
</div>
</div>
This CSS code works just fine:
div[id^="navi"] {
display: none;
}
But this does not work OK:
input#someID-1:checked #navi1 {
display: block;
}
How should I modify the code?
I have tens of radio buttons (id names between someID-1 and someID-99). I would like to have dynamic code.
I do not want to use JavaScript.
You can make like this. you can read the details of the selector that i used here
#navi1{
display: none;
}
input[type="radio"]#someID-1:checked + div #navi1{
display: block;
}
.box{
border: 1px solid #ddd;
width: 200px;
height: 200px;
text-align: center;
}
<input name="nappi" type="radio" id="someID-1" />
<div class="box">
<div id="navi1">
<div>
<label for="someID-2">2</label>
</div>
</div>
</div>
You need to navigate the document hierarchy correctly in your CSS. So this works:
div[id^="navi"]
{
display: none;
}
#someID-1:checked + div div {
display:block;
}
I'm trying to center a <div> element containing both text and image using <center> tags, but for some reason it only applies on the text and not the image.
HTML:
<body>
<h1 align="center">Search For a Member</h1>
<br>
<br>
<form action="SearchController" method="get">
Enter the member's first name: <input type="text" style="width: 18em;" name="searchBox">
<input style="width:6em;" type="submit" value="Search">
<input style="width:6em;padding-left:7px;" type="submit" value="Back">
</form>
<center>
<div class="profile">
<img style="float:left;" src="default.jpg"height=100 width=100>
First Name
<br>
Last Name
<br>
</div>
</center>
</body>
CSS:
<style>
body {
background-color: #BCD2EE;
margin-left: 20%;
margin-right: 20%;
border: 1px outset #4876FF;
border-width: 5px;
padding: 10px 10px 30px 10px;
}
.profile {
overflow: hidden;
padding-top: 30px;
}
</style>
But if you'll try it, you'll see that only the text "First Name" and "Last Name" gets centered but not the picture. (I know you won't be able to see the picture default.jpg, but it will show you where the image would be).
Why won't the picture get centered? is it because of the float:left; property, which excludes the picture from the <center> tag?
If so, how can it be fixed?
<img style="float:left;"
You shouldn't have style="float:left;"
Remove that, and also add a line break <br> after the img tag
http://jsfiddle.net/jn8zgszy/
Remove float:left inline styling from img tag
Change:
<img style="float:left;" src="default.jpg"height=100 width=100>
To:
<img src="default.jpg" height="100" width="100"><br />
JSFiddle Demo
An alternative idea without the deprecated <center> tag, external CSS and tweaked form elements.
Centering is done via .wrap { display: table; margin: 0 auto; }
Have a jsBin example!
HTML
<div class="wrap">
<form action="SearchController" method="get">
<legend>Search For a Member</legend>
<label for="firstName">Enter the member's first name:</label>
<input name="searchBox" id="firstName" type="text">
<button type="submit">Search</button>
<button type="submit">Back</button>
</form>
<div class="profile">
<img src="http://www.placehold.it/100" />
<dl>
<dt>First Name</dt>
<dd>Greg</dd>
<dt>Last Name</dt>
<dd>Norman</dd>
</dl>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.wrap {
display: table;
margin: 0 auto;
}
form {
padding: 10px;
}
legend {
margin: 20px auto;
font-weight: bold;
font-size: 1.4em;
display: table;
}
.profile img {
margin: 10px 0 10px;
}
.profile dt {
font-weight: bold;
}
.profile dd {
padding: 10px 0;
}
If you wanted the Image and those text to be center and one below the other then you could simple give text-align:center; to your .profile
.profile{
text-align:center;
}
I have been trying for several hours to format my form neatly without the use of a table.
I've floated the labels left and the inputs right but they still don't line up neatly with each other. Ideally it would look like so:
Label(Root Diameter) | Input(text) | label(mm)
I know I can do it using a table but I am looking for a more elegant and professional way of doing it. If someone could just point me in the right direction and perhaps give me an example I would appreciate it greatly.
Here is my code.
html:
<head>
<script src="jquery-1.11.0.min.js"></script>
<script src="criticalSpeedCalc.js"></script>
<link rel="stylesheet" href="calcstyle.css">
</head>
<body>
<div id="calcWrapper">
<form name="calculator" id="calculator">
<label class="type">Unit of Measurement:</label>
<br>
<select name="unit" class="input">
<option value="120904000">Metric (cm)</option>
<option value="4760000">Imperial (inches)</option>
</select>
<br>
<label class="type">Root Diameter:</label>
<br>
<input type="text" name="root" class="input" autocomplete="off">
<label for="unit">mm</label>
<br>
<label class="type">Width between bearings:</label>
<br>
<input type="text" name="bearings" class="input" autocomplete="off">
<label for="unit">mm</label>
<br>
<label class="type">End Fixity:</label>
<br>
<select name="fixity" class="input">
<option value=".36">1</option>
<option value="1.0">2</option>
<option value="1.47">3</option>
<option value="2.23">4</option>
</select>
<br>
<label class="type">Max Speed:</label>
<br>
<input type="text" name="speed" class="input" autocomplete="off">
<label for="rpm">rpm</label>
<br>
<br> Reset
Calculate
Exit
</form>
</div>
</body>
#calcWrapper {
background-image: url("Design1.png");
width: 265px;
height: 365px;
float: left;
/*border-width: 2px;
border-style: solid;*/
}
css:
#calculator {
width: 186px;
height: 230px;
margin-left: 38px;
margin-top: 115px;
padding-left: 5px;
font: bold 11px Helvetica, Arial, sans-serif;
text-align: center;
-moz-box-sizing:content;
/*border-width: 2px;
border-style: solid;*/
}
.input {
margin: 1px;
max-width: 80px;
max-height: 10px;
font: bold 10px Helvetica, Arial, sans-serif;
display: block;
vertical-align:middle;
margin-bottom: 10px;
float: right;
}
select.input {
max-height: 18px;
}
label.type {
width: 80px;
display: block;
vertical-align:middle;
float:left;
clear:left;
margin: 2px;
}
And here is a fiddle link
You can have "normal" html tags and table-like display using the CSS Table Model
Since this is not a tabular data not using table is the right choice however you can use div elements to create a table :)
.table {
display:table;
}
.table-row {
display: table-row;
}
.table-cell {
display:table-cell;
vertical-align:middle;
}
Here is the fiddle: http://jsfiddle.net/3Ej7Q/3/
You can just float your .input class to the left and make it a bit narrower (max-width:70px).
See it here: http://jsbin.com/pepixare/1/edit
I use div's to solve this problem.
my width is in % you can use px if you prefer.
col- represents the width of the div in %.(col-40 == width:40%;)
you can easily implement this with other attributes like inputs,ul,ol,a,img ect.
<div class="table">
<div class="tr">
<div class="th col-40 fl pd-l-2">monday</div>
<div class="td col-2 fl">:</div>
<div class="td col-58 fr txt-alnC">09:30 - 18:00</div>
</div>
<div class="tr">
<div class="th col-40 fl">tuesday</div>
<div class="td col-2 fl">:</div>
<div class="td col-58 fr txt-alnC">09:30 - 18:00</div>
</div>
</div>
.table {
width: 100%;
float: left;
cursor: pointer;
}
.table .tr {
float:left;
width:100%;
height:40px;
}
.table .tr .th,
.table .tr .td {
height:47%;
padding:5% 0;
}
I managed to find the solution to my problem which involved setting all the elements inside the form to display:inline-block, and setting the form's text-aligntment to justify.
For a better explanation than I am able to give give this a squiz. (The answer is in the text align section)
And here is a link to an updated fiddle
Hope I was able to help anyone in the same predicament.
The 'required' text is showing up to the left of the input box. Similar problem in Opera except is displays on the next line (creates a line break). Looks as expected in FF3.1 and chrome. Any suggestions? Eventually I would like to use the display:none attribute on the 'required' span and show this span as necessary with javascript.
<html>
<head>
<title></title>
<style type="text/css">
<!--
input.missing { background-color: #FFFF77; }
div.row {
clear: both;
padding-top: 5px;
}
div.row span.label {
float: left;
width: 100px;
text-align: right;
}
div.row span.formw {
// float: right;
width: 235px;
text-align: left;
padding-right: 0px;
padding-left: 45px;
}
div.spacer {
clear: both;
}
.container{
width: 425px;
background-color: #ccc;
border: 1px dotted #333;
padding: 5px 5px 5px 5px;
margin: 0px auto;
}
.error{
color: #ff0000;
}
.required{
color: #ff0000;
float: right;
// display:none;
// display:inline;
}
-->
</style>
</head>
<body>
<div id="contact_form">
<form action="/jr/index.php" method="POST" id="contact">
<div id="top_message" style="width: 360px; margin: 10px auto;">
Enter Your Information Below</div>
<div class="container">
<div class="row">
<span class="label">Name:</span>
<span class="formw"><input size="30" maxlength="30" name="name" id="name" value=""></span>
</div>
<div class="row">
<span class="label">Email:</span>
<span class="formw"><input size="30" maxlength="30" name="email" id="email" value=""></span>
<span id="email_error" class="required">(required)</span>
</div>
<div class="row">
<span class="label">Shoe size:</span><span
class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="formw">
<input type="image" value="submit" name="submit" class="button" src="submit.png" alt="Submit" /></span>
</div>
<div class="spacer">
</div>
</div>
<div id="message_ajax" style="width: 360px; margin: 10px auto;"></div>
</form>
</div>
</body>
</html>
IE really makes me hate web dev sometimes.
You probably should start by adding the proper DocType tag at the top of your file.
EDIT:
After looking at your code, it appears you are not using your floats properly. First off - // does NOT comment out lines in a CSS file. You need to wrap it in /* and */ to comment it out. So your SPAN.formw style is floating to the right, which is before your SPAN.required, which also floats right. Since you're using SPAN tags, you really don't need to float anything here. If you remove all of those it should just fall into place for you.
Which doctype are you using ? A strict one may prevent that kind of problem... Also, I usually start my CSS design with a reset file to get rid of all those kind of annoyances : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Using double slash "//" is not valid CSS commenting. So this float right rule:
div.row span.formw { // float: right;
Is being applied.
Use:
/* comment */
When commenting CSS.
Put a float:left on the formW class
Float all the boxes in the row to the left, instead of mixing floating and inline elements:
div.row span.label {
float: left;
width: 100px;
text-align: right;
}
div.row span.formw {
float: left;
width: 235px;
padding-left: 45px;
}
.required{
float: left;
color: #ff0000;
// display:none;
}
jriggs, since IE8 is still not completely stable, for some projects you can have IE8 revert to IE7 rendering rules. One of the benefits is that this doesn't give the user the compatibility view button on the right of the location bar.
For more info and specifics see
http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx
Im trying to get away from using the html TABLE tag, but cant figure out how to build, what I want it to look like. I have made a screenshot of me using the table tag,
How would I do this with divs or/and spans etc, and still retain the vertical alignment of the labels (firstname, lastname in this example)?
(font size and color etc is of course irrelevant here)
alt text http://img522.imageshack.us/img522/7857/forme.jpg
thankful for any input,
modano
It's good that you don't want to use the table tag for layout. The thing to keep in mind when switching is to try to make the HTML as semantical as possible. What this means might vary, since there are no real strict rules, but it could look something along these lines:
<form [..]>
<ul>
<li class="hasError">
<em class="feedback">error message here</em>
<div class="attribute">
<label for="firstName">First name:</label>
<em>(required)</em>
</div>
<div class="input">
<input type="text" name="firstName" id="firstName" />
<em class="description">optional description here</em>
</div>
<span class="clearBoth" />
</li>
<li>
<em class="feedback" />
<div class="attribute">
<label for="firstName">Last name:</label>
<em>(required)</em>
</div>
<div class="input">
<input type="text" name="lastName" id="firstName" />
<em class="description">optional description here</em>
</div>
<span class="clearBoth" />
</li>
</ul>
</form>
This achieves the following:
By placing the error feedback message above the divs, you can make an arbitrarily long error message without losing alignment
Each input element (and label) is kept in a single list item, thus grouping them logically. It also reads something like the following in a screen reader: "Form. List of two items. Label [...]". This gives the user a hint of that the form contains two inputs.
By adding the hasError class to a list item, you can easily target the descendant elements with CSS for error specific styling.
A sample CSS file could look something like (note that this is untested):
form li {
width: 300px;
}
form li.hasErrors {
width: 298px;
border: 1px red;
background-color: #C55;
}
form .attribute {
float: left;
clear: left;
width: 60px;
}
form .input {
float: right;
clear: none;
width: 240px;
}
form .feedback {
display: block;
padding-left: 50px;
color: red;
}
form .description {
display: block;
clear: both;
color: #888;
}
.clearBoth { display: block; clear: both; }
A very very good tutorial on creating accessible HTML/CSS forms can be found on A list Apart: Prettier Accessible Forms
Generally a fantastic site for information on how to create good, clean and accessible websites.
Simply give your labels a specific width; this will ensure your fields line up. You can also float your labels and inputs to easily break them into rows. Here's a minimal example:
<style type="text/css">
form { overflow: auto; position: relative; }
input { float: left; }
label { clear: left; float: left; width: 10em; }
</style>
<form>
<label>Field 1</label><input/>
<label>Field 2</label><input/>
<label>Field 3</label><input/>
</form>
I am no CSS expert, but this should get you started. Of course the styles should be in an external style sheet.
<html>
<head>
<style>
html {
font-size: 76%;
}
body {
font-size: 1.0em;
font-family: verdana;
}
div.input {
border: 1px solid white;
clear: left;
width: 25em;
height: 5em;
padding: 2px;
margin-bottom: 1.0em;
}
div.error {
border: 1px solid red;
}
div.label {
float: left;
width: 7em;
}
div.field {
float: left;
}
div.errormessage {
color: red;
}
div.description {
color: #bbb;
}
input.text {
width: 13em;
}
</style>
</head>
<body>
<form>
<div class="input error">
<div class="label">
<div> </div>
<label>First name:<br>(required)</label>
</div>
<div class="field">
<div class="errormessage">error message here</div>
<input type="text" name="FirstName" class="text">
<div class="description">optional description here</div>
</div>
</div>
<div class="input">
<div class="label">
<div> </div>
<label>Last name:<br>(required)</label>
</div>
<div class="field">
<div class="errormessage"> </div>
<input type="text" name="LastName" class="text">
<div class="description">optional description here</div>
</div>
</div>
</form>
</body>
</html>