2 replies [Last post]
crazytopu
Offline
Regular
Last seen: 15 years 47 weeks ago
Joined: 2004-09-20
Posts: 26
Points: 0

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.

obsidian
Offline
Enthusiast
South Carolina
Last seen: 13 years 43 weeks ago
South Carolina
Joined: 2004-08-15
Posts: 136
Points: 0

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">
  &nbsp;
  </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!

obsidian
Offline
Enthusiast
South Carolina
Last seen: 13 years 43 weeks ago
South Carolina
Joined: 2004-08-15
Posts: 136
Points: 0

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!