Make something like in html/css
+1
A:
It's crude, but you could add an absolutely positioned div with that text in it and position it where it's needed. You'd probably also have to position the textboxes absolutely.
You might also be able to get away with a negative margin at the top (probably not in IE, though).
JoshD
2010-10-01 23:04:36
A:
Use a label for each text box but place it after the text box in the HTML code and then in the CSS give them both the same width but give the label a top margin greater than the height of the text box. Or something like that anyway!
Padwah
2010-10-01 23:08:29
not the greatest answer dude. To be helpful, you need to assume 'something like that' doesn't mean the same to everyone.
Glycerine
2010-10-01 23:21:51
@Padwah, I didn't down-vote, but I'd be remiss if I didn't point you towards a great guide for [answering questions on Stackoverflow](http://msmvps.com/blogs/jon_skeet/archive/2009/02/17/answering-technical-questions-helpfully.aspx) and (as a bonus!) a guide to [asking great questions](http://tinyurl.com/so-hints/)
David Thomas
2010-10-01 23:54:26
+3
A:
You can do what you want by wrapping each input and label in div elements, and floating the divs.
HTML:
<div class="boxwrap">
<div>
<input type="text" size="6" />
<h5>label1</h5>
</div>
<div>
<input type="text" size="6" />
<h5>label2</h5>
</div>
<div>
<input type="text" size="6" />
<h5>label3</h5>
</div>
</div>
<div class="clearfloat"></div>
CSS:
div.boxwrap div {
float: left ;
}
div.boxwrap div h5 {
text-align: center ;
}
div.clearfloat {
clear: both ;
}
Gus
2010-10-01 23:09:43
@Gus I realise that paying attention to real (x)html elements seems to have fallen out of vogue, but seriously? There are several more-semantic elements easily available and purpose-built for this `<label for="idOfInput">` for example, it provides a nice onClick-focus event as well as a semantic relationship between elements (the `label` and the `input`)... There are more, but I sort of feel like I'm being petty.
David Thomas
2010-10-01 23:31:31
+3
A:
Edited to make it a just a little prettier...
This is similar to @Gus' answer, but a little more semantic:
<form action="" method="post">
<fieldset>
<input type="text" name="day" id="day" />
<label for="day">Day</label>
</fieldset>
<fieldset>
<input type="text" name="hour" id="hour" />
<label for="hour">Hour</label>
</fieldset>
<fieldset>
<input type="text" name="min" id="min" />
<label for="min">Min</label>
</fieldset>
<fieldset>
<input type="text" name="sec" id="sec" />
<label for="sec">Sec</label>
</fieldset>
</form>
With the following CSS:
fieldset {
display: inline-block;
width: 10em;
margin: 0 1em 0 0;
border: 1px solid #ccc;
}
fieldset > input,
fieldset > label {
display: block;
width: 8em;
text-align: center;
margin: 0 auto;
}
Live demo posted at: jsbin.
Edited to make it a just a little prettier...
New CSS:
form {
width: 49.5em;
overflow: hidden;
border: 1px solid #ccc;
}
fieldset {
display: block;
float: left;
width: 10em;
margin: 0 1em 0 0;
border: 1px solid #ccc;
}
fieldset:last-child {
margin: 0;
}
fieldset > input,
fieldset > label {
display: block;
text-align: center;
margin: 0 auto;
}
fieldset > input {
width: 80%;
font-size: 1.4em;
}
And revised demo (again) at jsbin
David Thomas
2010-10-01 23:14:25
A:
No hacking involved - should be all browsers friendly.
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
}
.date-container {
height: 50px;
border: solid 1px;
}
.input {
width: 35px;
float: left;
margin: 5px;
}
.field input {
font-size: 12px;
margin: 0;
width: 35px;
text-align: center;
}
.name {
font-weight: bold;
text-transform: capitalize;
font-size: 11px;
text-align: center;
}
</style>
<div class="date-container">
<div class="input">
<div class="field">
<input type="text" name="day" id="day">
</div>
<div class="name">
day
</div>
</div>
<div class="input">
<div class="field">
<input type="text" name="hour" id="hour">
</div>
<div class="name">
Min
</div>
</div>
<div class="input">
<div class="field">
<input type="text" name="min" id="min">
</div>
<div class="name">
day
</div>
</div>
<div class="input">
<div class="field">
<input type="text" name="sec" id="sec">
</div>
<div class="name">
Sec
</div>
</div>
</div>
Glycerine
2010-10-01 23:19:26
A:
Here's the most semantic approach (and it works all the way back to IE6, no worries):
<html>
<head>
<title>Title</title>
<style type="text/css">
fieldset {
border: none;
overflow: auto;
}
label {
display: block;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 75%;
margin-right: 10px;
text-align: center;
width: 30px;
}
input {
width: 30px;
}
</style>
</head>
<body>
<form action="#">
<fieldset>
<label>
<input type="text" name="day" id="day">
Day
</label>
<label>
<input type="text" name="hour" id="hour">
Hour
</label>
<label>
<input type="text" name="minute" id="minute">
Min
</label>
<label>
<input type="text" name="second" id="second">
Sec
</label>
</fieldset>
</form>
</body>
</html>
Marcus
2010-10-02 03:54:43