Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

CSS forms

CSS

  • Please log in to reply
4 replies to this topic

#1 camouser1s

camouser1s

    CC Lurker

  • Just Joined
  • Pip
  • 6 posts

Posted 03 November 2011 - 01:07 PM

I can't seem to get my CSS form to look the way I want it to. I've validated the CSS and XHTML and still have not found why I am getting this undesired behavior. Here is the code for the form page and the external style sheet used


<!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">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="myEmail">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 © 2011 JavaJam Coffee House<br />
<a href="chris@mouser.com">chris@mouser.com</a>
</div>

</div>

</body>
</html>


and now 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;
}

The form items are supposed to be floating left and right aligned but the text areas and input boxes are not lined up. anyone help?
  • 0

#2 Dartim3nia

Dartim3nia

    CC Lurker

  • Just Joined
  • Pip
  • 1 posts

Posted 06 November 2011 - 01:29 PM

What do you mean by floating left and right aligned? It seems to me that's exactly what it does
[ATTACH=CONFIG]4288[/ATTACH]
  • 0

#3 DarkLordCthulhu

DarkLordCthulhu

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 422 posts
  • Location:The bash shell
  • Programming Language:C, JavaScript, Bash, Others
  • Learning:Ruby, Others

Posted 08 November 2011 - 05:50 AM

Don't use the float property, period. It sucks. Use absolute or relative positioning and set the display to inline-block if you want your divs to line up properly.

Keep in mind I'm lazy and didn't read your code. Still, I think I can tell what the problem is.

Also, valid HTML and CSS does not guarantee that a page will look good. It guarantees successful parsing and makes a page load faster, but it has little effect on the actual appearance of a page.
  • 0
Programming is a journey, not a destination.

#4 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 08 November 2011 - 06:15 AM

Don't use the float property, period. It sucks. Use absolute or relative positioning and set the display to inline-block if you want your divs to line up properly.

Keep in mind I'm lazy and didn't read your code. Still, I think I can tell what the problem is.

Also, valid HTML and CSS does not guarantee that a page will look good. It guarantees successful parsing and makes a page load faster, but it has little effect on the actual appearance of a page.

May I ask, why would absolute positioning be better than using float?
  • 0

#5 DarkLordCthulhu

DarkLordCthulhu

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 422 posts
  • Location:The bash shell
  • Programming Language:C, JavaScript, Bash, Others
  • Learning:Ruby, Others

Posted 09 November 2011 - 07:10 AM

May I ask, why would absolute positioning be better than using float?


Just my personal experience. (By the way I said absolute or relative.) Besides, there are only three possible values for float, so what if you want to have four divs or five divs and control their position, width, etc.?
  • 0
Programming is a journey, not a destination.





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download