Fri, 2004-10-01 13:01
what am i doing not right here....why does my title is not aligned with my form elements such as a text-box?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Feed back </title>
<style type="text/css">
#minibody {
MARGIN-TOP: 52px; MARGIN-LEFT: 185px; WIDTH: 590px
};
#minibody form {
FONT-SIZE: 11px;
COLOR: #000080;
BACKGROUND: #B0C4DE;
PADDING: 5px;
MARGIN-LEFT: 140px;
WIDTH: 200px;
MARGIN-TOP: 10px
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}
.textbox{
FONT-SIZE: 13px;
COLOR: #000080;
BACKGROUND: #FFF;
BORDER: inset 1px #708090;
WIDTH: 170px;
HEIGHT: 20px;
FONT-FAMILY: verdana, thoma, "MS Serif", "New York", serif;
}
.textarea{
PADDING: 0px;
FONT-SIZE: 13px;
COLOR: #000080;
BACKGROUND: #FFF;
BORDER: inset 1px #708090;
WIDTH: 170px;
HEIGHT: 50px;
FONT-FAMILY: verdana, thoma, "MS Serif", "New York", serif;
}
.button{
HEIGHT: 25px; WIDTH: 70px; MARGIN-LEFT: 40px; BACKGROUND: #999999; COLOR: #fff; FONT-WEIGHT: BOLD; FONT-FAMILY: verdana, thoma, arial
}
#title {
FONT-SIZE: 12px; COLOR: #000080; BACKGROUND: #B0C4DE; FONT-WEIGHT: BOLD; FONT-FAMILY: verdana, thoma, arial
}
.clear {MARGIN-TOP: -5px; }
</style>
</head>
<body>
<div id=minibody>
<h6 class=center> Feed Back </h6>
<h6 class=body> Please use the form below to post any comments you have regarding this site or IBCS-PRIMAX in general. Thank you.<BR></h6>
<form method="POST" action="feedback.php">
<div id=title> Name </div>
<input type="text" name="name" class="textbox" size="20" >
<div class="clear"> </br> </div>
<input type="text" name="email" class="textbox" size="20">
<div class="clear"> </br> </div>
<textarea rows="2" name="subject" class="textarea" cols="20"></textarea>
<div class="clear"> </br> </div>
<textarea rows="2" name="comments" class="textarea" cols="20"></textarea>
<div class="clear"> </br> </div>
<input type="submit" value="Send" name="B1" class="button">
</form>
</div>
</body>
</html>
I want to make the title aligned like this page:
[url] http://ibcs.kgbinternet.com/org/ipsb/jsp/feedback.jsp?headerImg=feedback [/url]
Do me this little help pls.
Mon, 2004-10-04 16:12
#1
I am almost done but.........
rather than having your titles as a div and your form elements outside the div, try combining them both in the div and each being it's own span... try something like this:
CSS:
div.row {
clear: both;
padding-top: 10px;
}
div.one span.title {
float: left;
width: 100px;
text-align: right;
}
div.one span.element {
float: right;
width: 335px;
text-align: left;
}
div.spacer {
clear:both;
}
then, your html:
<div style="width: 350px; background-color: #cc9;
border: 1px dotted #333; padding: 5px;
margin: 0px auto";>
<form>
<div class="row">
<span class="title">Name:</span><span
class="element"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="title">Age:</span><span
class="element"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="title">Shoe size:</span><span
class="element"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Comments:</span><span
class="formw">
<textarea cols="25" rows="8">
Go ahead - write something...
</textarea>
</span>
</div>
<div class="spacer">
</div>
</form>
</div>
this is a slightly modified version of a segment of the tutorial fount here: alistapart.com/articles/practicalcss/
hope this helps!
You can't win, you can't lose, you can't break even. You can't even get out of the game!
Mon, 2004-10-04 16:13
#2
I am almost done but.........
sorry... in the css, all the div tags should be:
div.row {
}
div.row span.title {
}
div.row span.element {
}
You can't win, you can't lose, you can't break even. You can't even get out of the game!