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!
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 { }