I have the following HTML
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style>
.box
{
border:solid black 1px;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<input class="box" style="width:300px;" /><br />
<input class="box" style="width:150px;" />
<input class="box" style="width:150px;" /><br />
<input class="box" style="width:100px;" />
<input class="box" style="width:100px;" />
<input class="box" style="width:100px;" />
</form>
</body>
</html>
The idea is that the textboxes should finish pixel perfect on the right hand side.
I will eventually add spacing on rows 2 and 3 enlarging the widths to compensate, but for the moment I would like to get this simple sample to render.
So how can I remove the margins of these textboxes such that the align properly?
They're not lining up because of the whitespace between them.
If you were to remove all the newlines and tabs between the <input> elements, it would display as you want.
I found adding float: left; to .box did what you wanted.
.box {
padding:0px;
margin:0px;
float: left;
}
Are you talking about right justifying all the textboxes?
If so, that's not a margin question. That's simply putting the textboxes in a containing element. Perhaps a and then set the text-align: right; css style on the div.
The border is not included in the width, so a box with a 1px border and a width of 150px will actually be 152 px wide.
Related
I would like to vertically align a text input field with the adjacent text, namely, with a heading that precedes it and a radio button that follows it (all styled with display: inline). Here is an image of what I would like to see:
Now, without a vertical-align property on the input field, I get the following:
I.e., the input field is lower than the adjacent text. Playing around with the possible values of vertical-align on the input field, I realized that vertical-align: super gives me what I want (i.e, what can be seen in the first image). But I do not understand why it gives me what I want. I would have expected that vertical-align: baseline or vertical-align: text-bottom would do what I need. So my question is this: Why does vertical-align: super produce the result that it does? Is it a coincidence that it gives me what I want (i.e., a workaround rather than the solution)? If so, what would be the proper solution?
Here is my HTML and CSS:
h1,
form,
div.search {
display: inline;
}
input#search_string {
vertical-align: super;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h1>Heading</h1>
<form>
<div class="search">
<input type="text" id="search_string" />
<input type="radio" id="option" />
<label for="option">Some option</label>
</div>
</form>
</body>
</html>
The default setting for vertical-align is indeed "baseline", and it also works that way in your example. What you are forgetting is that the baseline alignment doesn't align the bottom borderline of the input box, but the baseline of the text that is inside that box. If you write something in there, you'll see it. (BTW, it's the same if you create a div with a border and text inside it.)
In the following snippet (which is almost identical to your code except that the alignment is not defined , i.e. default, i.e. "baseline") I added a value text to the input tag, so here you see the baseline alignment.
h1,
form,
div.search {
display: inline;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h1>Heading</h1>
<form>
<div class="search">
<input type="text" id="search_string" value="here's some text" />
<input type="radio" id="option" />
<label for="option">Some option</label>
</div>
</form>
</body>
</html>
And I would say that YES, it's a coincidence that the super setting gives you something so close to the desired result that you see it as correct. super actually just means that the element is "raised" (sorry, i don't know the English word, but its like the number "2" in "three to the power of two").
I guess the safest way to achieve what you want would be to apply position: relative; to that input field, and a bottom setting to offset it from the default alignment. If you use the em unit in that (as I did below), it's relative to the font size, but to find an adequate value will still be a matter of trial and error:
h1,
form,
div.search {
display: inline;
}
#search_string {
position: relative;
bottom: 0.3em;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h1>Heading</h1>
<form>
<div class="search">
<input type="text" id="search_string" />
<input type="radio" id="option" />
<label for="option">Some option</label>
</div>
</form>
</body>
</html>
Consider the following HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="border-style: solid; border-width: thin; width:100%">
<input type="button" style="width:20px;float:right;" value="a" />
<div style="padding-right:35px;">
<input type="text" style="width: 100%;" />
</div>
</div>
</body>
</html>
This is the correct layout, and how it looks in IE 9 in normal mode. If you stretch the browser, the button remains on the right of the input box, and the input box stretches accordingly.
This is how it looks in IE 9 in compatibility mode. As you can see, the input box jumps onto the next line:
So, is there a way to fix this, so that it works regardless of whether or not compatibility mode is set?
Obviously I'm looking for a solution with minimal hackiness :)
Thanks!
Try this HTML:
<div class="search"><input name="btn" type="button" value="a" /><span><input type="text" name="search_input" /></span></div>
With this CSS:
.search > span {
display: block;
overflow: hidden;
padding-right: 10px;
}
.search input[type=text] {
width: 100%;
}
.search input[type=button] {
float: right;
}
Here's a jsfiddle to test it out for yourself:
http://jsfiddle.net/KVhUC/
I was able to get it to work with FF, IE9 (with/without compatibility mode)
http://jsfiddle.net/Cytkx/4/
<div style="border-style: solid; border-width: thin;">
<input type="button" style="width:20px;float:right;overflow:hidden;" value="a" />
<div style="overflow:hidden;padding-right:10px;">
<input type="text" style="display:block;width:100%;" />
</div>
</div>
I believe this is close to what you're looking for. Note this may not be backwards compatible.
You can try using <Table> </Table> instead of Div. They are better containers compared with divs.
I'm trying to reduce the amount of html markup related to presentation in my front end code. In a form I'm currently working on, I want to have 2 column of form fields. One way that will definitely do what I want is this:
<html>
<head>
<style>
body {width:400px;}
.col {width:200px; height: 100px; float:left; display:block;}
label, input {display:block;}
</style>
</head>
<body>
<div class="col">
<label>Field1:</label>
<input>
</div>
<div class="col">
<label>Field2:</label>
<input>
</div>
</body>
</html>
I want to achieve the same results when rendered in browser WITHOUT the div tags in the mark up. So I did something like this:
<html>
<head>
<style>
body {width:400px;}
label,input {width:200px; height: 30px; float:left; display:block;}
</style>
</head>
<body>
<label>Field1:</label>
<label>Field2:</label>
<input>
<input>
</body>
</html>
This is close, but I want the <label> markup tag to appear before each <input> markup tag in the code like so:
<label>field1</label>
<input>
<label>field2</label>
<input>
But problem here is that I can't think of maintainable css code that will make the label appear on top of each input field. Is there a good way to make both the mark up and the rendered result appear the way I want to?
One solution is to put the input inside the label..
<label>Field1:<input></label>
<label>Field2:<input></label>
then example CSS..
label {width:200px; height: 30px; display:inline-block;}
input {display: block;}
or
label,input {width:200px; height: 30px; display:inline-block;}
Seem's hacky, but this works.
http://jsfiddle.net/pxfunc/VCaMe/1/
using class="col1" or class="col2"...
HTML:
<form>
<label for="i1" class="col1">Label 1</label>
<input id="i1" class="col1" type="text" value="Input 1" />
<label for="i2" class="col2">Label 2</label>
<input id="i2" class="col2" type="text" value="Input 2" />
</form>
CSS:
form {width:600px;background-color:#eee;overflow:hidden;}
.col1 {display:block;float:left;line-height:30px;width:301px;height:30px;background-color:#f00;border:0;}
.col2 {position:relative;top:-30px;display:block;float:right;line-height:30px;width:299px;height:30px;background-color:#ff0;border:0;}
That said I still agree with the first comment under the question, seems like over-thinking a solution that could use div's or some kind of <label> & <input> wrapper
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
I have two <fieldset>s inside a single div (nothing else), that are positioned next to eachother (positon: absolute, div is set to relative).
Is there any way to make these fieldsets both the same height without setting a fixed height?
I have some idea that maybe I can make both have a max height of the parent, and a min height of auto?
Also, would it then be possible to make the content of the fieldsets position centred vertically?
I'm not concerned if it works with IE, but needs to work on Firefox and Webkit, and if possible Opera.
Thanks
Edit: You can see the page here: https://dl.dropbox.com/u/2318402/SO/login.html
You can put them in a parent container like a table or div, and have the two children be at height=100%.
The only other two options are the ones you didn't want, at a fixed height like height=59px, or you can do it via javascript.
For the vertical positioning, you can stick them in a parent container like a table or div and then slap on there a vertical-align:center
I'm a bit late but you can always use tables (don't like those either but well.. table works in this situation).
<table>
<tr>
<td style="vertical-align:top">
<fieldset></fieldset>
</td>
<td style="vertical-align:top">
<fieldset></fieldset>
</td>
</tr>
</table>
The following works, without using js/jQuery, but does rely on -in this example- using a css3 psuedo-element :nth-of-type(odd), though this could be replaced by applying a css class to the odd-numbered fieldsets.
It also relies on using height: 100% for the fieldsets, which itself is dependant upon the parent element (in this case the form) having a specified height. If that's a problem then, for the purpose of demonstration, I've used overflow-y: auto; on the fieldsets to restrict their dimensions to that of their parent, but with a scroll behaviour to reveal the overflow.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://davidrhysthomas.co.uk/mindez/css/stylesheet.css" />
<style type="text/css" media="all">
form {
width: 50%;
height: 200px;
}
fieldset {
width: 30%;
height: 100%;
margin: 0 1em 0 0;
padding: 0.5em 1em;
overflow-y: auto;
}
fieldset:nth-of-type(odd)
{
float: left;
}
label {
display: inline-block;
width: 30%;
}
input[type=text]
{
display: inline-block;
width: 50%;
}
</style>
</head>
<body>
<div id="wrap">
<form enctype="form/multipart" method="post" action="">
<fieldset>
<label for="one">Label 1</label><input id="one" name="one" type="text" />
<label for="two">Label 2</label><input id="two" name="two" type="text" />
</fieldset>
<fieldset>
<label for="three">Label 3</label><input id="three" name="three" type="text" />
<label for="four">Label 4</label><input id="four" name="four" type="text" />
<label for="five">Label 5</label><input id="five" name="five" type="text" />
<label for="six">Label 6</label><input id="six" name="six" type="text" />
</fieldset>
</form>
</div>
</body>
</html>
Demo online at: http://www.davidrhysthomas.co.uk/so/fieldsets.html.
Obviously, if there's any questions or problems feel free to raise them in the comments and I'll try my best to help you out. =)