I'm having trouble containing CSS to a single div without scrambling everything.
I'm trying to get hospital/name/title/dep on seperate lines(vertical) with aligned text boxes then the other sections on the same line respectively(horizontal)
Any help would be greatly appreciated
<div class="main" id="boxalign">
<p>
<label>Hospital:</label> <input type="text"/><br>
<label>Name:</label> <input type="text"/><br>
<label>Title:</label> <input type="text"/><br>
<label>Department:</label> <input type="text"/><br>
</p>
</div>
CSS
#boxalign, label p{
display: inline-block;
float: left;
clear: left;
width: 70px;
text-align: right;
}
Not sure if my problem really shows with the code above so heres all of in jsfiddle: http://jsfiddle.net/f8qa2/
I think your CSS selector is malformed, try this instead:
#boxalign label p {
display: inline-block;
float: left;
clear: left;
width: 70px;
text-align: right;
}
Also, rather than use <br>s to break lines, put each <label>/<input> pair in it's own <p>:
<div class="main" id="boxalign">
<p>
<label>Hospital:</label>
<input type="text" />
</p>
<p>
<label>Name:</label>
<input type="text" />
</p>
<p>
<label>Title:</label>
<input type="text" />
</p>
<p>
<label>Department:</label>
<input type="text" />
</p>
</div>
Fiddle
I don't think you meant to put that comma there, everything looks good without it.
#boxalign label p{
display: inline-block;
float: left;
clear: left;
width: 70px;
text-align: right;
}
Link
#boxalign, label p Means that you want to target elements with the id boxalign and p tags within labels.
#boxalign label p Means that you want to target p tags within labels with a parent element with the id boxalign.
I think you just have a rouge , and your p and label are the wrong way round in your selector.
Try
#boxalign p label{
display: inline-block;
float: left;
clear: left;
width: 70px;
text-align: right;
}
Example here
Your selector is wrong. It should be #boxalign p label {}.
label and p are round the wrong way based on your HTML.
remove the unceccesary "," from the css selector.
Hope that helps.
Related
I am currently trying to make a simple form. As an example, this is what I'm trying to get it to look like.
This is the current architecture for each field:
<p>
<label>First Name</label>
<input></input>
</p>
I struggle once I get to the CSS part. Here's a full example, and any help would be greatly appreciated
div {
text-align: center;
}
form p {
display: inline-block;
}
form label {
text-align: left;
display: block;
}
<div>
<form>
<p><label>Name:</label> <input type="text"></p>
<p><label>Password:</label> <input type="text"></p>
</form>
</div>
I just cannot figure out how to get a line break after the input with the current CSS.
can use float instead of inline-block
form {
max-width: max-content;
margin: auto;
}
form p {
float: left;
clear: left;
}
I know that a lot of questions related to this topic have been asked. I went through most of them, but I still cannot figure out why it does not work in my case.
My website is divided into two parts using the aside and article tags. I would like my form to be inside the article tag. Moreover, I would like my labels to be aligned next to my inputs. I tried:
label{ display: inline-block; width: XXpx; text-align: right;}
label{ display: block; width: XXpx; float: left;}
and other configurations, but it does not work. The fact is I use display: table-cell in the aside and article tags to get the background color to extend all the way down the page. I am wondering if it has an impact.
HTML
<section>
.
.
.
<article>
.
.
.
<form method="post" action="Y.php">
<label for="name" id="name1"> Name<em>*</em> </label>
<input type="text" name="name" id="name2" placeholder="Ex : Tom" autofocus="" required="" /> <br>
<label for="email"> Email<em>*</em> </label>
<input type="email" name="email" id="email1" placeholder="Ex : Tom#gmail.com" required="" /> <br>
</form>
</article>
</section>
CSS
aside, article{ display: table-cell; vertical-align: top; text-align: justify; line-height: 1.5em;}
label{ display: inline-block; width: XXpx; text-align: right;}
Any idea is welcome!
Do you mean you want the labels to have the same width, so that all elements line up nicely?
You can do that by adding a min-width to your labels:
label {
min-width: 100px; /* Or whatever value and unit you want. */
}
Live example with your code: http://codepen.io/TheDutchCoder/pen/GggQRR
I'm using a form like the following:
<form action="#" method="post">
<div class="row">
<label for="email">E-Mail</label>
<input type="text" name="email" id="email">
</div>
<div class="row">
<label for="password">Password</label>
<input type="password" name="password" id="password">
<br>
<label for="passwordRepeat">Repeat Password</label>
<input type="password" name="passwordRepeat" id="passwordRepeat">
</div>
<div class="row">
<label for="phonenumber">Phone Number</label>
<input type="text" name="phonenumber" id="phonenumber">
</div>
</form>
with the following styles:
.row {
background-color: #eee;
margin-bottom: 10px;
padding: 5px;
}
.row > * {
display: inline-block;
vertical-align: middle;
}
.row > label {
width: 200px;
}
Take a look at the JSFiddle.
I'm using a <br> tag to break the line between a bunch of elements with the property display: inline-block. I'm aware that it is of course bad practice to use <br> instead of margin and padding. That's the reason it became so unpopular.
As far as I know there is no good reason to not use a single <br> tag in an inline element as it is intended to be: As a line break in text without creating a new text section. With display: inline-block, you simulate the inline behaviour to your block elements. Spaces between elements appear as they would in an inline element.
In my case, the <br> is used instead of two wrapper <div>'s. I do like my HTML code clean, so I hesitate in using to many wrapper <div>'s. Is it bad practice to use a <br> in this exact case? I think it is very clear what happens here, if you just read the HTML flie. What do you think about that (without any prejudgments about <br> in general)?
I believe the answer is Yes. <br /> is for line breaks in text and not for positioning, But I will give you a situation where it would hurt you in the long run. Say you have a mobile layout for your fields, and you want them to be 100% width on small screens - with labels above... and then in another case you want them to vertically align next to another... and then in another situation land in a grid like setup. Those linebreaks are going to become cumbersome.
Here is a jsFiddle of that.
I did see someone using them in a clever way where they used display: none; on them at certain break points that rendered them inactive. I didn't expect that to work. I can only really imagine using them for:
Cosmo magazine
style - huge
text layouts
and even then I would use lettering.js to insert spans. But hey --- it's not that people will say you were wrong... it's what does the job best. And I don't think that <br /> ever really suits positioning.
With HTML5, it seems like everything has an element now, so div's are for positioning. That seems pretty semantic to me.
HTML
<div class="input-wrapper">
<label data-required="required">E-Mail</label>
<input type="email" name="email" />
</div>
CSS
.your-form .input-wrapper {
width: 100%;
float: left;
margin-bottom: 2em;
}
.your-form label {
display: block;
width: 100%;
float: left;
}
[data-required="required"]:after{
content: "*";
color: red;
font-size: .8em;
vertical-align: top;
padding: .2em;
}
.your-form input{
display: block;
width: 100%;
float: left;
}
#media screen and (min-width: 28em) {
.your-form label {
width: auto;
float: none;
display: inline-block;
vertical-align: middle;
min-width: 10em;
}
.your-form input{
width: auto; /* overide previous rule */
float: none; /* overide previous rule */
display: inline-block; /* center vertically */
vertical-align: middle; /* center vertically */
/* min-width: 20em; */
font-size: 1.4em; /* just to show vertical align */
}
} /* end break point */
Yes, as you are using a content element for styling.
It might be shorter, but that doesn't mean it's cleaner.
Adding elements just for styling purposes should be avoided if possible.
And in this case it's possible: Demo
HTML:
<form action="#" method="post">
<div class="row">
<label>E-Mail <input type="text" name="email" /></label>
</div>
<div class="row">
<label>Password <input type="password" name="password" /></label>
<label>Repeat Password <input type="password" name="passwordRepeat" /></label>
</div>
<div class="row">
<label>Phone Number <input type="text" name="phonenumber" /></label>
</div>
</form>
CSS:
.row {
background-color: #eee;
margin-bottom: 10px;
padding: 5px;
}
.row > label {
display: block;
overflow: hidden;
width: 350px;
}
.row > label > input {
float: right;
}
I would avoid it where possible. You may be able to achive what you want, and not use floats by adding a margin to the input element like:
.row > input
{
margin-right:50%;
}
http://jsfiddle.net/pwtA4/
You may need to add some media queries if you want for smaller view ports
I am designing a web page with multi line Label name & input type file. i tried very hard to arrange in same line sequence but failed to do. Is there any idea about it?
please take a look enter link description here , it looks very ugly and
I am not really sure what you are looking for, but check out the jsfiddle changes I had made. I modified both CSS classes a little bit.
Have a look at this tutorial: http://www.websiteoptimization.com/speed/tweak/forms/
You can check this fiddle with the following modifications:
removing deprecated attributes align from div and moving inlined CSS style (style attribute) to the CSS file
same for b element used for the text of the label: span is better, and it's already bold as its parent. Or font-weight: bold; would be added in CSS
display: inline-block; is used instead of floats. No need to clear them afterward. IE7 and 6 need a fix (in comment) if you support them. This allow you to give the element a width (like you could do with any block element) and still get them on the same horizontal line (like you could do with any inline element). You'll have 4px due to whitespace in your HTML code, because whitespace shows up in inline element like two span separated by a space but there's a fix.
HTML code
<div id="divid1">
<p>
<label class="labelname"> <span> select Image* :</span>
<input type="file" name="file1" class="hide-file" />
</label>
</p>
<p>
<label class="labelname"> <span>XML File* :</span>
<input type="file" name="file2" class="hide-file" />
</label>
</p>
</div>
CSS
#divid1 {
padding: 50px;
}
.labelname {
width: 100%; /* or at least approx. 380px */
min-height: 30px;
display: block;
background: lightgreen;
font-weight: bold;
margin-bottom: 2px;
}
/* Only for IE7 */
/*.labelname span,
.hide-file {
display: inline;
zoom: 1;
}
*/
.labelname span {
display: inline-block;
width: 140px;
text-align: right;
background-color: lightblue;
}
.hide-file {
display: inline-block;
opacity:0.5;
}
now it looks good :)
html
<div id="divid1" align="center" style="padding:50px;">
<div class="formrow">
<label class="labelname" for="hide-file">Select Image* :</label>
<input type="file" name="file1" class="hide-file" />
</div>
<div class="formrow">
<label class="labelname" for="hide-file">XML File* :</label>
<input type="file" name="file2" class="hide-file" />
</div>
</div>
css
.labelname {
background: green;
font: bold 2px;
margin-bottom: 2px;
font-weight: bold;
float: left
}
.hide-file {
position: relative;
opacity: 0.5;
float: right
}
.formrow {
width: 400px
}
My form looks like:
**
<p><label>first name</label><input type=text name=fn /></p>
<p><label>last name</label><input type=text name=ln /></p>
</div>
<div id="rightform">
<p><label>state</label><input type=text name=state /></p>
<p><label>city</label><input type=text name=city /></p>
</div>
**
I want the layout so all the labels line up on the left (with the label text right-aligned), and the input box all lined up, floating to the left.
So the form should look like:
asdf-label INPUTBOX
123-label INPUTBOX
yet-another-label INPUTBOX
There will be another form on the right side of the above form (with the id=#rightform)
Really confused how to do this properly...
Personally I seldom use the floating technique, even though it's very common. The reason: It's very brittle for more complex situations.
I almost always do this:
<form ...>
<p>
<label for="id1">Label 1</label>
<input id="id1" ... />
</p>
<p>
<label for="id2">Label 2</label>
<input id="id2" ... />
</p>
</form>
And CSS:
p {
position: relative;
}
label {
position: absolute;
width: 150px;
left: 0;
top: Xpx /* x to align nicely with the baseline of the text in the input */
}
input {
margin-left: 160px;
}
It's very seldom a problem with multiline labels that overflow the <p>.
To make it work in IE6 and possibly IE7 you need to throw in something to give the <p> hasLayout. zoom: 1; does the trick, or specifying a width.
This should do it:
label {
width: 150px;
margin-right: 10px;
text-align: right;
float: left;
}
No need for any special styling for the input elements.
As for the divs, just give them a fixed width and float: left;, they'll align next to each other nicely. Just use clear: both; where necessary.
You will need to float all your labels to the left, set them to a fixed with, and then text-align them right:
label {
float:left;
text-align:right;
width:20em;
}
p {
clear:right;
}
The easiest way is to float elements and set a width and text-align: right for labels.
Something like:
label {
width:200px;
text-align:right;
}
input {
float:left;
}
You can check http://jeffhowden.com/code/css/forms/ for an all css example
Well easy way is table, but that is not correct.
<div style="float: left; width: 100px;">
<label>last name</label>
</div>
<div style="margin-left: 100px;">
<input type=text name=state />
</div>