Web Hosting Talk






PDA

View Full Version : placing text next to input boxes

hopesfall
09-09-2008, 11:22 PM
I can't get the text I want to go right next to the input boxes that I am using. They always keep floating on the top left of the cell but I want them right next to the cell, on the left. Can anyone help? Here's the code if anyone can help please.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHost</title>

<link href="riot.css" type="text/css" rel="stylesheet">
</head>
<body bgcolor="white" topmargin="0">
<table border="0" cellpadding="0" cellspacing="0" width="900" bgcolor="#33ffff" height="100%" align="center">
<tr>
<td valign="top">




<!--bannerlogo at top--->
<table border="0" cellpadding="0" cellspacing="0" width="900" bgcolor="#579696" height="90" >
<tr>
<td>
<id class="logo1"> <!--img src="bannerlogo.jpg"></img--> </h1>
</td>

<!---login tab--->
<td>
<table border="1" cellpadding="0" cellspacing="0" width="300" bgcolor="#579696" align="right" class="logintable">
<tr>
<td>

Login:<input type="text" name="login" style="float:right;"></td>
<tr>
<td>Password:<input type="text" name="password" style="float:right;"></td>
</tr>

<td><input value="Login!" type="submit"></td>
</td>
</tr>
</table>
</tr>
</table>
<!---first seperation bar and row--->
<img src="sepbar1.jpg"> </img>
<!---end sep bar--->



</body>
</html>
sammy659
09-10-2008, 04:22 AM
what about this:

<table border="1" cellpadding="0" cellspacing="0" width="300" bgcolor="#579696" align="right" class="logintable">
<tr>
<td><div style="float:left"> Login:</div>
<input type="text" name="login" style="float:right;"></td>
<tr>
<td><div style="float:left">Password:</div>
<input type="text" name="password" style="float:right;"></td>
</tr>
<td><input value="Login!" type="submit"></td>
</td>
</tr>
</table>
</tr>
</table>
bear
09-10-2008, 07:36 AM
I'm all for CSS, but if you're using tables anyway, why not just make a new TD for the "label"?
<tr><td>label</td><td>input, etc</td></tr>

Pointless to use floats if you're using tables to lay out the content here.
hopesfall
09-10-2008, 09:12 PM
Well, how could I better fit this into CSS?
allportpc
09-11-2008, 01:41 PM
you could do....



<table border="1" cellpadding="0" cellspacing="0" width="300" bgcolor="#579696" align="right" class="logintable">
<tr><td><div align="right">Login:
<input type="text" name="login" style="">
</div></td></tr>
<tr><td><div align="right">Password:
<input type="text" name="password" style="">
</div></td></tr>
<tr><td><div align="right">
<input value="Login!" type="submit">
</div></td></tr>
</table>
Adam-AEC
09-11-2008, 02:41 PM
You would use something like this for a CSS-P form.


<style type="text/css">
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
min-width: 100px;
padding-right: 20px;
}

input {
width: auto;
}

br {
clear: left;
}
</style>

<form>
<label for="login">Login</label><input type="text" name="login" /><br />

<label for="password">Password</label><input type="password" name="password" /><br />
<input value="Login!" type="submit">
</form>