Position span below textbox

Forum Moderators: not2easy

Message Too Old, No Replies

Position span below textbox

ProbablyMike

3:28 pm on Nov 25, 2010 (gmt 0)

Hi,

Given for example the following

<input type="text" value="inpt1"><span>span1</span>
<input type="text" value="inpt2">
<input type="text" value="inpt3"><span>span2</span>
<input type="text" value="inpt4">
<input type="text" value="inpt5">
<input type="text" value="inpt6">

How could I position the spans directly below the inputs, so the result is something like (the - represent spaces):


|inpt1 | |inpt2 | |inpt3 | 
<span1 > -------- <span2 >

Cheers,
Mike

birdbrain

4:23 pm on Nov 25, 2010 (gmt 0)

Hi there ProbablyMike,

here is one possible solution for you to try...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="language" content="english">  
<meta http-equiv="Content-Style-Type" content="text/css"> 
 
<title>inputs and spans</title> 
 
<style type="text/css"> 
body { 
 background-color:#eee; 
 } 
#container { 
 width:460px; 
 padding:10px 19px 5px; 
 border:3px double #999; 
 margin:auto; 
 background-color:#ddd; 
 } 
#container div { 
 clear:both; 
 margin-bottom:5px; 
 text-align:center; 
 overflow:hidden; 
 } 
.inpright,.spnright { 
 width:142px; 
 float:right; 
 } 
.inpleft,.spnleft { 
 width:142px; 
 float:left; 
 } 
.spnright,.spnleft { 
 text-align:center; 
 } 
</style> 
 
</head> 
<body> 
 
<form action="#"> 
 
<div id="container"> 
 
<div> 
 <input class="inpright" type="text" value="inpt3"> 
 <input class="inpleft" type="text" value="inpt1"> 
 <input class="inpcenter"type="text" value="inpt2"> 
</div> 
 
<div> 
 <span class="spnright">span2</span> 
 <span class="spnleft">span1</span> 
</div> 
 
<div> 
 <input class="inpright" type="text" value="inpt6"> 
 <input class="inpleft" type="text" value="inpt4"> 
 <input class="inpcenter"type="text" value="inpt5"> 
</div> 
 
<div> 
 <span class="spnright">span4</span> 
 <span class="spnleft">span3</span> 
</div> 
 
</div><!-- end #container --> 
 
</form> 
 
</body> 
</html>

birdbrain

alt131

1:12 am on Nov 26, 2010 (gmt 0)

Hi ProbablyMike, and welcome to WebmasterWorld ;)

Birdbrain's solution is one option, but I'm wondering about the overall structure of your form, and the purpose of those spans. Something like

fieldset {
position:relative;
height:50px;/* adjust to suit*/
}

label {
position:absolute;
top:20px; /* adjust to suit*/
}

<fieldset>
<label for="impt1">span1</label>
<input type="text" value="inpt1">
<input type="text" value="inpt2">
<label for="inpt3">span3</label>
<input type="text" value="inpt3">
</fieldset>

<fieldset>
<label for="impt4">span4</label>
<input type="text" value="inpt4">
<input type="text" value="inpt5">
<label for="inpt6">span6</label>
<input type="text" value="inpt6">
</fieldset>

also does what you want, and because it uses the appropriate html form elements, is accessibility-friendly

caffinated

6:37 am on Nov 27, 2010 (gmt 0)

Another alternative.

You could also wrap each input/span combo in a div of a given width, force a <br /> then float the divs left as follows:

<div class="floatL"><input type="text" value="inpt1"><br /><span>span1</span></div>
<div class="floatL"><input type="text" value="inpt2"></div>
<div class="floatL"><input type="text" value="inpt3"><br /><span>span2</span></div>
<div class="floatL"><input type="text" value="inpt4"></div>
<div class="floatL"><input type="text" value="inpt5"></div>
<div class="floatL"><input type="text" value="inpt6"></div>

css:

.floatL {
display:block;
width:200px; /*change to suit */
float:left;
}

You could then manage the vertical gap between the lines using line-height

.floatL {
display:block;
width:200px; /*change to suit */
float:left;
line-height:1.5em; /*change to suit */
}

and set up your margins to horizontally space the items:

.floatL {
margin-right:10px; /*change to suit */
display:block;
width:200px; /*change to suit */
float:left;
line-height:1.5em; /*change to suit */
}

Then whatever comes next underneath, simply clear the float.
eg.

#nextItemBelow {clear:left;etc. etc. etc.}

ProbablyMike

10:20 am on Nov 29, 2010 (gmt 0)

Hi,

Thanks for the replied & ideas, but I should have described what I was after better, usually better at this but it was home time!

Anyway, what I was after was to position the span with a message below certain textboxes on the page depending on critera from a JavaScript function.
Could be any number of textboxes on the page, and one or more or even none of them would require the span.

I solved it using a bit of jQuery to get the left & top of the textbox and position it using css.


var l = object.position().left;
var t = object.position().top;
t += object.height() + 4;
$("#textboxmsg"+object.attr("id")).css({"left":l,"top":t}).html('&nbsp;Please check&nbsp;').show();