Input not displaying inline - html

I am struggling to see why 1 input element is not dropping to line up withe the label. I have tried various options, but still the same. I have included a grab and the css and would be grateful if someone could show me my error. Thanks
.adduserform {
width:425px;
font:12px Arial, Helvetica, sans-serif;
color:#777;
background-color:#fff;
font-weight:bold;
padding: 10px;
}
.adduserform label {
display:block;
width:110px;
float:left;
font-weight:normal;
font-size:12px;
padding: 0 0 0 30px;
z-index:1000;
clear:both;
}
.adduserform .inputbox {
float:right;
border:1px solid #ccc;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
width:40%;
}
.adduserform textarea {
padding:8px 3px 2px 3px;
margin:2px 0 10px 3px;
border:1px solid #ccc;
}
.adduserform select {
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
outline:none;
clear:right;
}
+++UPDATE HTML+++++
<dl>
<dt>
<label for="AUSR_phone">Phone:</label>
</dt>
<dd>
<input id="AUSR_phone" name="AUSR_phone" type="text" size="32" maxlength="128" value = "" />
</dd>
</dl>

You're floating the input box right, but the top select is not wide enough to force the input onto a second line. The bottom two are being forced down because the area is not wide enough to accommodate both input fields.
You can try putting both your label and input/select inside a div and use float to control positioning within that div:
html:
<div>
<label>text</label>
<input type="text"/>
</div>
css:
label {float:left; width:30%; margin:0 1em; }
input, select {float:left; width:60%; }
div {overflow:hidden; width:100%;}

Put a <div> around each label and input or select combo and style the div with clear: both;. That will force a new line for each div.
little demo: http://jsfiddle.net/6sQw5/4/
edit: the float on the input is not even needed, fixed the demo.

Related

How do I convert my table-based design to CSS?

im trying to learn how to use css instead of tables. i'm starting at the basics with a block of text with same height and width
margin-right: 60%;
margin-left:10px;
margin-top: 10px;
margin-bottom:0;
border:thin;
background-color:#FFF;
font: 9pt "trebuchet ms", arial, sans-serif;
color:#003318;
display:block;
margin-left: 60%;
margin-right:10px;
margin-top: 10px;
border:thin;
background-color:#FFF;
font: 9pt "trebuchet ms", arial, sans-serif;
color:#003318;
display:block;
however, the results are not good. there's no border. how can i fix this?
I recommend the shorthand border property:
border:solid 1px black;
Try cutting the other border properties and just using that and see if that does the job.
More info: http://www.w3schools.com/css/css_border.asp
Tables are like structure groups of layers while divisions are simple layers.
Think that every division is a . The problem is how to structure your divisions. This is where stylesheets come to your rescue.
ex.:
<div class="table">
<div class="right-td"> </div>
<div class="left-td"> </div>
</divd
And in your stylesheet
div.table { width:100%; float:none; margin:0px auto;}
div.right-td { border:1px solid #000;float:rightt; width:45%; padding:6px;}
div.left-td { border:1px solid #000;float:left; width:45%; padding:6px;}
This is just an example

Displaying Label Inside Text-area

I want to make a square shape text area of fixed size.The label of the text-area will be inside the text-area as shown in the picture below.This heading will always be displayed.It will not dissapear on entering text inside the text area like a placeholder.
I tried it in this fiddle http://jsfiddle.net/jwB2Y/2/ but was not able to place it inside the text-area..
The CSS code..
label
{
float: top;
width:120px;
padding:10px 10px;
font-weight:bold;
}
The Desired Output..
I moved the label under the textarea and added the following CSS.
http://jsfiddle.net/kkctL/1/
textarea {
display: block;
width: 300px;
height: 300px;
padding-top: 30px;
}
label {
display: block;
margin: -330px 5px 0 5px;
width: 290px;
height: 25px;
font-weight:bold;
background-color: white;
}
try this;
CSS
.wrapper{
position:relative;
border:1px solid #000;
overflow:auto;
display:inline-block;
width:350px;
padding:10px;
}
.wrapper .first-heading {
width:100%;
text-align:center;
font-weight:bold;
float:left;
text-decoration:underline;
}
.wrapper .second-heading {
width:100%;
text-align:center;
float:left;
}
.wrapper .textarea1{
width:100%;
height:300px;
float:left;
display:block;
border:none;
outline:none;
}
HTML
<div class="wrapper">
<label for="qual" >The main heading underlined:</label>
<textarea id="qual" rows="5" cols="20" style="resize:none" placeholder="The secondary heading of this space in brackets"></textarea>
</div>
New Jsfiddle => http://jsfiddle.net/jwB2Y/7/
Old Jsfiddle => http://jsfiddle.net/jwB2Y/5/
Absolutely position the label over the text area and then add some top padding to the textarea. Remove 'float:top' as this doesn't do anything.
I would wrap the whole lot in a div, then place a span inside the label to format the font:
CSS
div {
border:1px solid black;
width:250px;
height:250px;
padding:10px;
}
span {
display:block;
font-weight:bold;
text-decoration:underline;
}
label {
display:block;
margin-bottom:10px;
}
textarea {
border:none;
width:100%;
}
HTML
<div>
<label for="qual"><span>The main heading underlined </span>Sub heading</label>
<textarea id="qual" rows="5" cols="20" placeholder="Placeholder text"></textarea>
</div>
see updated demo here.

I cant reduce the height of input with following css code

Please see this css code
#ContactForm .wrapper {
min-height:30px;
padding-bottom:8px;
}
#ContactForm .bg {
border:1px solid #aaaaaa;
background-color:#e9e9e9;
float:left;
}
#ContactForm .input {
width:200px;
height:12px;
background:none;
padding:6px 10px 6px 10px;
color:#000;
font:10px Arial, Helvetica, sans-serif;
}
When I test it in browser (firefox) the input block is of some height.. I try reducing the top and bottom padding value from 6 to zero but no avail.
Also reducing height from 12 to lower value does not help.
It is stubborn and fixed to some height. What could be wrong??
I can provide with other data also, if needed.
This is html code
<div class="wrapper"> <strong>Phone:</strong>
<div class="bg">
<input type="text" class="input" >
</div>
</div>
Thanks in advance
i think reducing the height from wrapper will halp.. if not the height must be controlled from some other factor.. check that..
on a look on your code this is the solution..
update us for the same..
#ContactForm .wrapper {
min-height:30px; (CHECK THIS)
padding-bottom:8px;
}
Make sure the form your input is in is has the id "ContactForm"
Remove the space between #ContactForm and .input like the following example
#ContactForm.input {
width:200px;
height:12px;
background:none;
padding:6px 10px 6px 10px;
color:#000;
font:10px Arial, Helvetica, sans-serif;
}
That should work.

Vertical top align 2 column divs of different height with float:left

The problem is that i have a form with different fields of different sizes. Each field is inside a div with float:left. And they distribute automaticlly in 2 columns. If they are all of the same height there is no problem but if not it happens the following:
The divs are selected in blue. I need that the last div for example goes up because if not i have a dead space there and in many other forms of my site. They are dinamic forms so i cant solve it manually. The placement must be automatic. I searched in Stack Overflow and in the internet but i couldnt find any solution.
Here is the Divs CSS
#popup #form .left{
float:left;
margin-left:25px;
display:inline-block;
vertical-align:top;
}
And the General CSS
#popup{
width:645px;
height:auto;
background-color:#e3e3e3;
border-style:solid;
border-width:1px;
border-radius:5px;
border-color:#afafaf;
padding:15px;
color:#4d4d4d;
}
#popup #titulo{
font-size:15px;
font-weight:bold;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#afafaf;
padding-bottom:10px;
}
#popup #form #input{
display:block;
width:289px;
margin-top:10px;
}
#popup #form .left{
float:left;
margin-left:25px;
display:inline-block;
vertical-align:top;
}
#popup #form .right{
float:right;
margin-right:25px;
}
#popup #form #input label{
font-size:12px;
font-weight:bold;
}
#popup #form #input input[type='text'], #popup #form #input select, #popup #form #input textarea{
font-size:12px;
border-radius:5px;
border-style:solid;
border-width:1px;
border-color:#afafaf;
width:280px;
background-color:#f0f0f0;
}
#popup #form #input #foto{
width:191px;
height:87px;
background-image:url(images/img_background.png);
border-style:solid;
border-width:1px;
border-color:#afafaf;
border-radius:5px;
}
#popup #form input[type='button']{
text-align:center;
border-radius:5px;
border-style:solid;
border-width:1px;
border-color:#afafaf;
font-size:12px;
color:#4d4d4d;
-moz-box-shadow: inset 1px 1px 1px #ffffff;
-webkit-box-shadow: inset 1px 1px 1px #ffffff;
box-shadow: inset 1px 1px 1px #ffffff;
}
#popup #form #input input[type='button']{
width:82px;
height:17px;
margin-left:4px;
line-height:14px;
}
#popup #form #submit_buttons{
text-align:right;
border-top-style:solid;
border-top-width:1px;
border-top-color:#afafaf;
padding-top:10px;
margin-top:15px;
}
#popup #form #submit_buttons input[type='button']{
width:82px;
height:30px;
}
#popup #form input[type='button']:hover{
background-color:#cccccc;
cursor:pointer;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#popup #form #input table{
width:284px;
margin-top:2px;
margin-bottom:5px;
}
#popup #form #input table tr{
text-align:right;
vertical-align:top;
}
#datepicker{
background-image:url(images/datepicker.png);
background-repeat:no-repeat;
background-position:right;
}
#popup #form #input textarea{
height:115px;
max-height:115px;
min-height:115px;
width:275px;
max-width:275px;
min-width:275px;
}
I'm providing a simplified version of the problem, but is simple enough to carry on to your example. You just need to alternate the float between left and right so they don't break :)
HTML Code:
<div class="box boxSize1"></div>
<div class="box boxSize1"></div>
<div class="box boxSize1"></div>
<div class="box boxSize2"></div>
<div class="box boxSize3"></div>
CSS Code:
.box {float:left; width:48%; height:40px; background:red; margin:0 1% 2%;}
.box:nth-child(even){float:right;}
.boxSize2 {height:80px; background:green;}
.boxSize3 {height:120px; background:blue;}
Live example:
http://jsfiddle.net/h4kE8/
I would try throwing a position:relative; in with those two DIVs. I've found that any sort of positioning problem can usually be fixed by setting a clear position attribute.
Also helps when using position:absolute; to have it's parent's position set. If that doesn't work, don't underestimate tables. People might not like them much, but if you know how to use them, they work well for stuff like this.
Lengthy, but the best advice I can give.
The Multi-column Layout module spec has been around for a long time, but browsers have been slow to implement, so IE is almost definitely out (though there may be a polyfill that will help it limp along).
http://www.quirksmode.org/css/multicolumn.html
http://www.opera.com/docs/specs/presto28/css/multicolumnlayout/
Note that this will change the order that your elements display, but it will eliminate the gap.
I would in your case have the id, nombre and descripcion sit in the same div, call it left div. Then have the rest of the content on the right sit on another div call it right div and have them both float left. as follows
css
.left {
float:left;
}
.right {
float:left;
}
HTML
<div id="left">
/*id, nombre and descripcion */
</div>
<div id="right">
/* the rest */
</div>

Button rendered differently in Firefox vs Webkit

I have a couple of buttons inside a div with a specific width, and I am facing a problem where the buttons are being rendered differently in firefox vs chrome and safari.
In firefox, the buttons are bigger and are messing up my layout.
<div id="sort_by">
<button id="sort_by_price" class="sortButton" value="1">Price</button>
<button id="sort_by_bedrooms" class="sortButton" value="1">Bedrooms</button>
<button id="compareButton" class="sortButton">Compare</button>
</div>
CSS:
button {
display:inline;
float:left;
background-color:orange;
border:1px solid orange;
border-radius:5px;
-moz-border-radius:5px;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:14px;
text-decoration:none;
font-weight:bold;
color:#FFFFFF;
cursor:pointer;
padding:4px 10px 3px 7px;
}
#sort_by {
width:265px;
height:35px;
border-bottom-style:solid;
border-bottom-width:2px;
border-color:#c9c9c9;
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
}
Rendered in firefox:
Rendered in Chrome:
It can be seen that the buttons in firefox are bigger. How can I fix this? Thanks.
Firefox adds an extra margin/padding to button elements that cannot be changed by standard CSS, you can however add the following to make it behave
button::-moz-focus-inner {
border: 0;
padding: 0;
}