• Locked
1 reply [Last post]
Tue, 2010-03-09 21:47
kmckay
kmckay's picture
User offline. Last seen 24 weeks 2 days ago. Offline
newbie
Timezone: GMT-5
Joined: 2009-12-10
Posts: 2
Points: 4

The form worked but when I tried to align the input boxes with the CSS form.contact label.fixedwidth the lines looked like they all wrapped. Below is the CSS excerpt for the form and the HTML plus images of my output and what I want it to look like. I cannot see why the input boxes are not aligning.

CSS Style Sheet (excerpt)

form.contact fieldset {
  border: 2px solid navy;
  padding: 10px;
}
 
form.contact legend {
  font-weight: bold;
  font-size: small;
  color: navy;
  padding: 5px;
}
form.contact {
  padding: 0;
  margin: 0;
  margin-top: -15px; 
  line-height: 150%;
}
 
form.contact label {
  font-weight: bold;
  font-size: small;
  color: blue;
}
form.contact label.fixedwidth {
  display: block;
  width: 340px;
  float: left;
 
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Contact Us at Bubble Under.</title>
<link href="style1.css" rel="stylesheet" type="text/css"/>
</head>
 
<body>
 <div id="header">
      <div id="sitebranding">
        <h1>BubbleUnder.com</h1>
      </div>
      <div id="tagline">
        <p>Diving club for the south-west UK - let's make a
            splash!</p>
      </div>
 </div> <!-- end of header div -->
 
 <div id="navigation">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="aboutus.html">About Us</a></li>
        <li><a href="contact.html">Contact Us</a></li>
	<li><a href="gallery.html">Image Gallery</a></li>
        <li><a href="events.html">Club Events</a></li>
      </ul>
 </div> <!-- end of navigation div -->
 
 <div id="bodycontent">
 
   <h2>Contact Us</h2>
   <p>To let us know about a forthcoming dive event, please use the
    form below.</p>
 
 <form action="" method="post" class="contact">
  <fieldset>
    <legend>Tell us About a Dive Event</legend>
 
    <div>
      <label for="contactname" class="fixedwidth">Contact Name</label>
      <input type="text" name="contactname" id="contactname"/>
    </div>
 
    <div>
      <label for="telephone" class="fixedwidth">Telephone Number</label>
      <input type="text" name="telephone" id="telephone"/>
    </div>
 
    <div>
      <label for="email" class="fixedwidth">Email Address</label>
      <input type="text" name="email" id="email"/>
    </div>
 
  </fieldset>
 
</form>
 
 
    <p>If you need to get in touch urgently, please call Bob Dobalina
    on 01793 641207. For anything else, please <a
    href="mailto:bob@bubbleunder.com">drop us a line by
    email</a>.
    </p>
 
 </div> <!-- end of bodycontent div -->
 
</body>
</html>

My output:
example1_0.png

What I am trying to get it to do:
fig-07-labelsstyled_thm.jpg

Top
Tags:
Wed, 2010-03-10 11:10
#1
Hugo
Hugo's picture
User offline. Last seen 3 hours 47 min ago. Offline
rank Moderator
Moderator
Timezone: GMT+1
Joined: 2004-06-06
Posts: 14200
Points: 1256

Try a width on the wrapping

Try a width on the wrapping div element matching the width you would like and then float label left input right and ensure that the parent div has float containment in place.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Top
  • Locked