3 Replies - 1149 Views - Last Post: 03 November 2011 - 09:48 PM

#1 chrismouser  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 27-October 11

CSS forms

Posted 03 November 2011 - 02:38 PM

I'm trying to make a very simple form with CSS and XHTML but for some reason I cannot get the form to appear the way I want. I've validated both the XHTMl and the CSS and I still cannot find the problem(s). Here is the XHTML code as well as the CSS stylesheet

<!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" lang="en" xml:lang="en">

<head>
  <title>Javajam Coffee House - Jobs</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link href="javajam.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <div id="container">
  
    <div id="logo">
      <img src="javalogo.gif" width="100%" height="150" alt="JavaJam Coffee House" />
    </div>
	
    <div id="nav">
	  <ul>
	    <li><a href="index.html">Home</a></li>
	    <li><a href="menu.html">Menu</a></li>
	    <li><a href="music.html">Music</a></li>
	    <li><a href="jobs.html">Jobs</a></li>
      </ul>
    </div>
	
    <div id="content">
	
	  <p>Want to work at JavaJam? Fill out the form below to start your application.</p>
	  
	  <form method="post" action="http://webdevfoundations.net/scripts/javajam.asp">
	   
	    <div class="myRow">
		  <label class="labelCol" for="myName" id="myName">Name:</label>
		  <input type="text" name="myName" id="myName" />
		</div>
		
		<div class="myRow">
		  <label class="labelCol" for="myEmail">E-mail:</label>
		  <input type="text" name="myEmail" id="myEmail" />
		</div>
		
		<div class="myRow">
		  <label class="labelCol" for="myExperience">Experience:</label>
		  <textarea name="myExperience" id="myExperience" rows="2" cols="20">
		  </textarea>
		</div>
		
		<div class="mySubmit">
		  <input type="submit" value="Apply Now" />
		</div>
		
	  </form>
   
    </div>
	
    <div id="footer">
      Copyright &copy; 2011 JavaJam Coffee House<br />
      <a href="chris@mouser.com">chris@mouser.com</a>
    </div>
	
  </div>
  
</body>
</html>



Here is the stylesheet...

body { background-color: #ffffcc;
      color: #330000;
	  font-family: Verdana, Arial, sans-serif;
	  background-image: url(background.gif); 
}
h1 {   background-color: #ccaa66;
      color: #000000;
	  text-align: center;
}
h2 {   background-color: #ccaa66;
      font-size: 1.2em;
	  padding-left: 10px;
	  padding-bottom: 5px;
}
img {  border: 0;
}
table { width: 100%;
      margin: auto;
}
td, th { 
      padding: 10px;
	  height: 80px;
	  text-align: center;
}
#nav { text-align: center; 
      background-color: #f1e8b0;
      font-size: 1em;
	  float: left;
	  width: 150px;
	  padding-top: 10px;
	  height: 100%;
	  position: absolute;
	  overflow: hidden;
}
#footer { background-color: #ccaa66;
       color: #000000;
	   border-top: 2px double #000000;
	   padding-top: 20px;
	   padding-bottom: 20px;
       font-size: .60em;
	   font-style: italic;
	   text-align: center;
	   position: relative;
}
#container { 
       margin-left: auto;
       background-color: #e8d882;
	   color: #000000;
	   border: 2px double #000000;
	   min-width: 700px;
       margin-right: auto;
	   width: 80%;
	   height: 100%;
	   position: relative;
	   overflow: hidden;
}
#logo { background-color: #ccaa66;
       color: #000000;
	   text-align: center;
	   margin: 0;
	   border-bottom: 2px double #000000;
}
#content { 
       margin-left: 150px;
	   background-color: #e8d882;
	   color: #000000;
	   padding: 10px 20px;
	
}
#nav a { text-decoration: none;
       margin: 5px;
	   text-align: center;
	   display: block;
}
#nav  a:hover {
       color: #ff0000;
}
#nav ul {
       list-style-type: none;
}
.floatright { 
       padding-left: 20px;
	   float: right;
}
.details { 
       padding-left: 20%;
       padding-right: 20%;
}
.altrow { 
       background: #ccaa66;
}
.labelCol {
      float: left;
	  width: 100px;
	  text-align: right;
	  padding-right: 10px;
}
.myRow {
      padding-bottom: 20px;
}
.mySubmit {
      margin-top: 10px;
	  margin-left: 110px;
}



Is This A Good Question/Topic? 0
  • +

Replies To: CSS forms

#2 Sho Ke  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 110
  • View blog
  • Posts: 250
  • Joined: 13-October 11

Re: CSS forms

Posted 03 November 2011 - 03:59 PM

Looks fine to me. What isn't working for you?
Was This Post Helpful? 0
  • +
  • -

#3 chrismouser  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 27-October 11

Re: CSS forms

Posted 03 November 2011 - 06:10 PM

The textboxes on the form page are not lined up and spaced evenly.
Was This Post Helpful? 0
  • +
  • -

#4 Sho Ke  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 110
  • View blog
  • Posts: 250
  • Joined: 13-October 11

Re: CSS forms

Posted 03 November 2011 - 09:48 PM

Testing on Firefox, the textbox and input fields all start at hte same positioning on the left, but the input fields are both shorter than the textarea. If you want both the textarea and input fields to be the exact same size(excluding height, textareas should usually be taller), try this:

textarea, input[type=text]{
width:200px;
}


I put that on the very bottom of your external CSS file and it worked fine :)

-Sho Ke
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1