I'm having a problem with the positioning of text relative to an inline-block div to the right of it. Here's a jsfiddle which demonstrates this problem.
And here's the demo HTML/CSS:
HTML
Select Date:
<div class="inputblock">
<input type="radio" name="dateselect" value="0" />Todays Date<br />
<input type="radio" name="dateselect" value="1" />Another Date
</div>
CSS
.inputblock {
display:inline-block;
background-color:#DDD;
}
What I want is for the text to the left of the block of radio buttons which says 'Select Date', to be positioned next to the top of the div to the right of it, not at the bottom. How can I achieve this? Will I have to wrap the label in a div?
I would appreciate any advice with this issue.
All childs of inline elements can be vertically positioned at the top using the vertical-align:top CSS property.
So, your CSS needs one extra line:
.inputblock {
display:inline-block;
background-color:#DDD;
vertical-align: top;
}
Fiddle: http://jsfiddle.net/6CtT8/1/
If you wrap both the label and the inputblock in a div and set vertical-align: top on that div you get what you want like this:
<div style="vertical-align:top;">
Select Date:
<div class="inputblock">
<input type="radio" name="dateselect" value="0" />Todays Date<br />
<input type="radio" name="dateselect" value="1" />Another Date
</div>
</div>
Not sure if there's a better way using negative margins and relative positioning.
EDIT This works for me in Chrome as well:
.inputblock {
display:inline-block;
background-color:#DDD;
vertical-align: top;
}
Related
I'm beginner on CSS.
I want to add a label on the top of the two textarea. When I tried Label tag (as shown below) , the second textarea ends up beeing under the first textarea( basically I want them side by side ).
Here is my JSFIDDLE
<label for="Coords">Past Coordinates here: </label>
<textarea id="Coords" cols="35" rows="20"></textarea>
<label for="Time">Time: </label>
<textarea id="Time" cols="25" rows="20"></textarea>
My two textarea are wrapped to put them on the right.
Can anyone help me ?
Thanks!
use this. http://fiddle.jshell.net/sherali/agr3a07m/209/show/
UPDATED:
Tip: remove your cols and rows from textarea. you should define from css(thorugh width, height)
in HTML:
<div class="box">
<label for="Coords">Title of Coords: </label>
<textarea id="Coords"></textarea>
</div>
<div class="box">
<label for="Time">Title of Time: </label>
<textarea id="Time"></textarea>
</div>
in CSS:
textarea#Coords{
width:270px;
height:300px;
}
textarea#Time{
width:215px;
height:300px;
}
label {display:block;}
.box{
display:inline-block;
}
Probably the simplest way is to wrap each label/textarea pair in a div and set display: inline-block; on each div. Though I'd recommend checking out some frameworks with grid systems, like Bootstrap, that abstract and simplify this.
Is it possible to put a checkbox over an image without using 'top' and 'position:absolute' ?
<div class="main">
<img src="http://www.standard.co.uk/incoming/article9760552.ece/binary/original/Rooney.jpg" class="image"/>
<input class="checkbox" type="checkbox" value="1" />
</div>
JSFIDDLE
There's a few possible ways. If you want to avoid top and absolute you could position it using negative margins. Or if you simply want checkbox to be checked when the image is clicked you could wrap the image in a label and tie the label to the checkbox. I've done both here.
HTML:
<div class="main">
<label for="checkbox">
<img src="http://www.standard.co.uk/incoming/article9760552.ece/binary/original/Rooney.jpg" class="image" />
</label>
<input id="checkbox" type="checkbox" value="1" />
</div>
CSS:
.image {
height: 200px;
width: 250px;
}
input {
display: block;
margin-top: -200px;
position: relative;
}
A quick explanation: position: relative allows the checkbox to sit on top of the image (z-index won't cut it here), the negative margin-top pulls it up onto the image, and display: block makes it so that the top margin can be applied (I'm not sure why it doesn't work on inline elements.) I expected to have to use negative margins on margin-left as well, but it seems to naturally move to the left on it's own. I'm not sure why for that either. But it does work and it does not need position: absolute or top.
I have the following code:
<div class="w25">
<span>True</span>
<input data-ng-model="answer.correct"
type="checkbox">
</div>
The div is approximately 150px wide. What happens is that the input appears in the center with about 70px on each side.
How can I get the <input> to go to the left ?
span and input elements are both inline by default, and the checbox will be placed next to the span element. I assume no further styling is applied on any of the elements. If it is, please post your css.
If you want to place the checkbox on the left, you can either:
Turn around the span and input (input first, then the span)
Float the input to the left (style="float: left;")
Use explicit positioning (eg. postition: absolute; left: 0;)
As illustrated here
<input data-ng-model="answer.correct" style="float:left" type="checkbox">
Probably you have inherit styles from your div class="w25". But you can try with this:
One change the order:
<div class="w25">
<input data-ng-model="answer.correct" type="checkbox">
<span>True</span>
</div>
Two add this properties on your CSS to be sure each element has the correct properties:
.w25 input, .w25 span {
margin:0;
padding:0;
vertical-align:middle;
}
View this demo http://jsfiddle.net/W7YE7/1/
First, change the positions of input and span (if you can do it) and see if it works:
<div class="w25">
<input data-ng-model="answer.correct" type="checkbox">
<span>True</span>
</div>
If it doesn't work, try to change the input for:
<input data-ng-model="answer.correct" style="float: left" type="checkbox">
If it doesn't work too, try it:
<div class="w25">
<div style="width:70px; display: inline;"><span>True</span></div>
<div style="float:left; width:70px; display: inline;"><input data-ng-model="answer.correct" type="checkbox"></div>
</div>
You can add the CSS style float: left;
Usually it's a better practice to put the styling in a separate CSS file, not inline, so if you can do that, assign a class to the input, like this:
<div class="w25">
<span>True</span>
<input class="yourclass" data-ng-model="answer.correct" type="checkbox">
</div>
And in the css file:
.yourclass {float: left;}
Here you have the JsFiddle: http://jsfiddle.net/A52nS/
try this css
.w25{
float:left;
}
Currently I have the following HTML code.
<div class="field">
<label>E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip"></div>
</div>
However, I want the text in the div element (class = 'tip') to be aligned with the start of the form's text field.
How should I do this using HTML and CSS?
Here's what is looks like now:
http://jsfiddle.net/pEJMD/embedded/result/
This would be a quick workaround. You should put both the .tip div and the input into a wrapping div.
You can set a fixed size to the label. Than push the div to the right with the size of the label:
<div class="field">
<label style="width:100px;">E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip" style="margin-left:100px;">
The quick brown fox jumps over the lazy dog
</div>
</div>
And the result.
Well, either you use a <table>, putting in one cell the <label> and in the other the <input>, or you use fixed widths/margins or paddings.
Solution 1: Table
Table solution
In this solution you use a table to hold the form. On column is for labels, the other column is for inputs. In this case you will have the tip in the input column, and it will align automatically with the input.
This has the pro to be working for flexible dimensions of your label/inputs. And tables are not always evil. Just remember that, if you want to keep your label aligned with the input, add a vertical-align:top to your CSS.
Solution 2: Fixed width
Fixed-width solution
In this solution you give a fixed width to your label, and move the .tip div using either margin, padding or left.
This will hold your layout in place, so be careful of extremely long labels!
You don't need an explicit width at all, nor tables; just use CSS tables (see my answer to this related question):
CSS
form { display: table; }
p { display: table-row; }
label { display: table-cell; }
input { display: table-cell; }
HTML
<form>
<p>
<label for="a">Short label:</label>
<input id="a" type="text">
</p>
<p>
<label for="b">Very very very long label:</label>
<input id="b" type="text">
</p>
</form>
Here's a JSFiddle: http://jsfiddle.net/DaS39/1/
And if you need the labels right-aligned, just add text-align: right to the labels: http://jsfiddle.net/DaS39/
Use margin-left:
Change:
<div class="tip" id="emailTip">
To:
<div class="tip" id="emailTip" style="margin-left:95px;">
DEMO
Learn more about the CSS margin property here.
You can give a height to the label, give a width to the parent div and float your tip. See the demo: http://jsfiddle.net/pEJMD/4/
Here you go: http://jsfiddle.net/4sJ2t/
You just need to give your label a fixed width, and then your tip a left margin
label {width:100px; text-align:right; margin-right:5px;}
.tip {margin-left:105px; padding: 5px 0;}
I have a 50x50 image and an <input type="text" /> field that I want to be on the right side of the image. I've tried this:
<img src="missing-image.png" />
<div name="image_input">
<input type="text" />
</div>
And with this CSS:
#image_input {
position: absolute;
top: 10px;
}
But the text input won't go to the right side of the image. Also as you can see I want it to be centralized with the height of the image and as I can see it won't work too. How I can correct this?
PS: All that is inside a <form>
Position absolute gives you more control:
HTML
<div name="image_input">
<img src="missing-image.png" />
<input type="text" />
</div>
CSS
div {
position:relative;
}
input{
position:absolute;
right:10px;
bottom:20px;
}
Try this:
<div id="image_input">
<img src="missing-image.png" />
<input type="text" />
</div>
and the CSS:
#image_input img {
float: left;
clear: none;
}
Note that I changed the div's "name" attribute to an "id" attribute.
there are a couple of ways to center align text next to an image. you can put it in a list and make the image the list style type. The other thing you can do it properly pad the element to center align it.
Try changing to this:
<div name="image_input">
<img src="missing-image.png" />
<input type="text" />
</div>
And the CSS:
.img {
display: inline-block;
}
To center the height, you might want to use one of the vertical-align options on the input tag.
such as:
input {
vertical-align: middle;
}
I don't use vertical-align very much, so you might have to tweak it a little to get it to work, but see here: http://www.w3schools.com/css/pr_pos_vertical-align.asp