homepage Welcome to WebmasterWorld Guest from 54.211.95.201
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Position span below textbox
ProbablyMike




msg:4234929
 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




msg:4234949
 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




msg:4235094
 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




msg:4235543
 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




msg:4236183
 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();

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved