5 Replies - 1012 Views - Last Post: 07 August 2009 - 09:10 AM

#1 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

CSS Stylesheet issues

Posted 06 August 2009 - 05:37 PM

I cannot figure out whats wrong with my stylesheet I originally had it in a much bigger window then this but I don't see why that would matter bringing it into a smaller window. Can anyone begin to point me in the right direction with what is wrong with my CSS I've tried modifying the width of .formcontentfixedwidth with zero success. Thanks for any help in advance :)

<!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=utf-8" />
<title>Jacqueline Zinn Design</title>
<style type="text/css">
#body
{
	margin: 100px 0 0 0;
	background-color: #ffffcc;
	font-size: 90%;
	text-align: center;
	font-family: arial, helvetica, sans-serif;
}


	
#outsidebox
{
	background-color: #393a43;
	margin: 0 auto;
	width: 867px;
	height: 800px;
	padding: 0;
	text-align: center;
}
#header
{
	background-color: #3C2214;
	float: left;
	height: 125px;
	width: 860px;
	margin: 4px 4px 2px 4px;
	padding: 0;
}
.about
{   
	float: left;
	margin: 100px 20px 0 40px;
	background-image: url(images/aboutdbl.gif);
	width: 81px;
	height: 24px;
	text-indent: -1000em;
	overflow:hidden;
  
	background-position: left top;
	border:none;
}

.about:hover 
{
	background-position: left bottom;
}
.trend
{
	float: left;
	margin: 98px 30px 0 20px;
	background-image: url(images/trends.gif);
	width: 87px;
	height: 24px;
	text-indent: -1000em;
	overflow:hidden;
  
	background-position: left top;
	border:none;
}
.trend:hover
{
	background-position: left bottom;
}

.port
{
	float: left;
	margin: 98px 30px 0 20px;
	background-image: url(images/portnav1.gif);
	width: 87px;
	height: 24px;
	text-indent: -1000em;
	overflow:hidden;
  
	background-position: left top;
	border:none;
}
.port:hover
{
	background-position: left bottom;
}
.service
{
	float: left;
	margin: 98px 30px 0 20px;
	background-image: url(images/services.gif);
	width: 87px;
	height: 24px;
	text-indent: -1000em;
	overflow:hidden;
  
	background-position: left top;
	border:none;
}
.service:hover
{
	background-position: left bottom;
}
.client
{
	float: left;
	margin: 97px 30px 0 0px;
	background-image: url(images/become.gif);
	width: 147px;
	height: 24px;
	text-indent: -1000em;
	overflow:hidden;
  
	background-position: left top;
	border:none;
}
.client:hover
{
	background-position: left bottom;
}

#jzlogo
{
	padding: 5px;
	float: right;
	
}



#leftnav
{
	background-color: #fff;
	float: right;
	width: 238px;
	height: 408px;
	padding: 40px 0 0 0;
	margin: 0 2px 2px 1px;
}
form.contact fieldset {   
  border: 2px solid white;   
  padding: 10px; 
}  

form.contact legend {   
  font-weight: bold;   
  font-size: small;   
  color: #3C2214;   
  padding: 5px; 
}

form.contact {   
  padding: 0;   
  margin: 0;   
  margin-top: -15px;
  line-height: 150%;
}

form.contact label {
  font-weight: bold;
  font-size: small;
  color: #6c6344;
}

form.contact label.fixedwidth {   
  display: block;   
  width: 240px;   
  float: left; 
}

form.contact .buttonarea input {   
  background: #3C2214;
  color: white;   
  font-weight: bold;   
  padding: 5px;   
  border: 1px solid white; 
}

form.contact .buttonarea {   
  text-align: center;   
  padding: 4px;   
  background-color: #6c6344; 
}
.spacing
{
	padding: 0 5px 0 7px;

}

#border
{
	float: right;
	padding: 0px;
	margin: 0px 0 0 0;
	
}

	
</style>
</head>

<body>
<div id="outsidebox">

	<div id="header">
		<a href="about.html" class="about" id="aboutov" style="text-decoration:none">About</a>
		<a href="trends.html" class="trend" style="text-decoration:none">Trend</a>
		<a href="portfolio.html" class="port" style="text-decoration:none">port</a>
		<a href="services.html" class="service" style="text-decoration:none">serv</a>
		<a href="clients.html" class="client" style="text-decoration:none">become</a>  

		<img src="images/jz.gif" alt="home" class="jzlogo" id="jzlogo" />
		
	  </div>
		
		
		<div id="leftnav">
		</div>
		
		<div id="bodycontent">
	
	  
			<form action="" method="post" class="contact">
		<fieldset>
		  <legend>Contact Information</legend>
		  <div>
			<label for="contactname" class="fixedwidth">Name</label>
			<input type="text" name="contactname" id="contactname"/>
		  </div>
		  <div>
			<label for="telephone" class="fixedwidth">Phone</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>
		  <div>
			<label for="eventname" class="fixedwidth">Address</label>
			<input type="text" name="eventname" id="eventname"/>
		  </div>
				  <div>   
			  <label for="region" class="fixedwidth">State</label>
			  <select name="region" id="region">	 
				<option value="AK">AK</option>
					<option value="AL">AL</option>
					<option value="AR">AR</option>
					<option value="AZ">AZ</option>
					<option value="CA">CA</option>
					<option value="CO">CO</option>
					<option value="CT">CT</option>
					<option value="DE">DE</option>
					<option value="FL">FL</option>
					<option value="GA">GA</option>
					<option value="HI">HI</option>
					<option value="IA">IA</option>
					<option value="ID">ID</option>
					<option value="IL">IL</option>
					<option value="IN">IN</option>
					<option value="KS">KS</option>
					<option value="KY">KY</option>
					<option value="LA">LA</option>
					<option value="MA">MA</option>
					<option value="MD">MD</option>
					<option value="ME">ME</option>
					<option value="MI">MI</option>
					<option value="MN">MN</option>
					<option value="MO">MO</option>
					<option value="MS">MS</option>
					<option value="MT">MT</option>
					<option value="NC">NC</option>
					<option value="ND">ND</option>
					<option value="NE">NE</option>
					<option value="NH">NH</option>
					<option value="NJ">NJ</option>
					<option value="NM">NM</option>
					<option value="NV">NV</option>
					<option value="NY">NY</option>
					<option value="OH">OH</option>
					<option value="OK">OK</option>
					<option value="OR">OR</option>
					<option value="PA">PA</option>
					<option value="RI">RI</option>
					<option value="SC">SC</option>
					<option value="SD">SD</option>
					<option value="TN">TN</option>
					<option value="TX">TX</option>
					<option value="UT">UT</option>
					<option value="VA">VA</option>
					<option value="VT">VT</option>
					<option value="WA">WA</option>
					<option value="WI">WI</option>
					<option value="WV">WV</option>
					<option value="WY">WY</option>
			  </select> 
			</div>
		   
			   <div>
			<label for="eventdate" class="fixedwidth">Zipcode</label>
			<input type="text" name="eventdate" id="eventdate"/>
		  </div>
		   </fieldset>
			<div>
			 
				  
				  <fieldset>
				   <legend>Professional Information</legend>
			  <label for="details" class="fixedwidth">General Description Of Project</label>
			  <textarea name="details" id="details" cols="30" rows="7"></textarea>
			  <p></p>
			  <div>
				<label for="budget" class="fixedwidth">Estimated Budget</label>
				<input type="text" name="budget" id="budget"/>
				  </div>
				 
				 <div>
				<label for="budget" class="fixedwidth">Square Footage Of Project</label>
				<input type="text" name="budget" id="budget"/>
				  </div>
				<div>
				
				<label for="budget" class="fixedwidth">Location Of Project</label>
				<input type="text" name="budget" id="budget"/>
				  </div>
			   
   
			  <legend> Style </legend>
			  <input type="checkbox" class= "spacing" name="modern" id="modern" value="Modern" />
			  <label for="modern">Modern</label>
			  
			   <input type="checkbox" class= "spacing" name="contemporary" id="contemporary" value="Contemporary"  />
			  <label for="contemporary">Contemporary</label>
			  
			   <input type="checkbox" class= "spacing" name="traditional" id="traditional" value="Traditional" />
			  <label for="traditional">Traditional</label>
			  
			  <input type="checkbox" class= "spacing" name="country" id="country" value="Country"/>
			  <label for="country">Country</label>   
			  
			  <input type="checkbox" class= "spacing" name="classical" id="classical" value="Classical"/>
			  <label for="classical">Classical</label>   
			  
			  <input type="checkbox" class= "spacing" name="oldworld" id="oldworld" value="OldWorld"/>
			  <label for="oldworld">Old World</label>
			  
			  <p></p>
		  
				  
			  <p></p>
			  <br />
			  
 
			<div class="buttonarea">	
			  <input type="submit" value="Send Us the Info"/>
			</div>
			
		</fieldset>
	  </form>
		 </div><!-- end of bodycontent div -->	 
			
</div>

</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: CSS Stylesheet issues

#2 crazyjugglerdrummer  Icon User is offline

  • GAME OVER. NERD WINS.
  • member icon

Reputation: 124
  • View blog
  • Posts: 690
  • Joined: 07-January 09

Re: CSS Stylesheet issues

Posted 06 August 2009 - 05:58 PM

what problems are you having? you need liquid design/relative widths to get a page to mold to the size of the screen.
Was This Post Helpful? 0
  • +
  • -

#3 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

Re: CSS Stylesheet issues

Posted 06 August 2009 - 07:30 PM

I"ve tried to play around with the code and can't get it to fit properly on the page
Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: CSS Stylesheet issues

Posted 06 August 2009 - 08:47 PM

Quote

.formcontentfixedwidth


This class doesn't exist - the only style that has fixedwidth is:
form.contact label.fixedwidth

And it is setting up at 240pxs just fine. Is your problem how it is all blown out of the container.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#5 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

Re: CSS Stylesheet issues

Posted 06 August 2009 - 11:32 PM

Yes I've just now realized that I've made some modifciations and added a seperate classes to certain objects but that seems to only cause more problems by them either not moving how I want them or not moving at all please refer to the .fixedbudget class, and fixedemail those control just the white space for there respective fields, firstchoice controls all the rest of the white space boxes, and fixedwidth controls moving the actual names here is my latest stab at it with no success

<!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=utf-8" />
<title>Jacqueline Zinn Design</title>
<style type="text/css">
#body
{
	margin: 100px 0 0 0;
	background-color: #ffffcc;
	font-size: 90%;
	text-align: center;
	font-family: arial, helvetica, sans-serif;
}


	
#outsidebox
{
	background-color: #393a43;
	margin: 0 auto;
	width: 867px;
	height: 800px;
	padding: 0;
	text-align: center;
}
#header
{
	background-color: #3C2214;
	float: left;
	height: 125px;
	width: 860px;
	margin: 4px 4px 2px 4px;
	padding: 0;
}
.about
{   
	float: left;
	margin: 100px 20px 0 40px;
	background-image: url(images/aboutdbl.gif);
	width: 81px;
	height: 24px;
	text-indent: -1000em;
	overflow:hidden;
  
	background-position: left top;
	border:none;
}

.about:hover 
{
	background-position: left bottom;
}
.trend
{
	float: left;
	margin: 98px 30px 0 20px;
	background-image: url(images/trends.gif);
	width: 87px;
	height: 24px;
	text-indent: -1000em;
	overflow:hidden;
  
	background-position: left top;
	border:none;
}
.trend:hover
{
	background-position: left bottom;
}

.port
{
	float: left;
	margin: 98px 30px 0 20px;
	background-image: url(images/portnav1.gif);
	width: 87px;
	height: 24px;
	text-indent: -1000em;
	overflow:hidden;
  
	background-position: left top;
	border:none;
}
.port:hover
{
	background-position: left bottom;
}
.service
{
	float: left;
	margin: 98px 30px 0 20px;
	background-image: url(images/services.gif);
	width: 87px;
	height: 24px;
	text-indent: -1000em;
	overflow:hidden;
  
	background-position: left top;
	border:none;
}
.service:hover
{
	background-position: left bottom;
}
.client
{
	float: left;
	margin: 97px 30px 0 0px;
	background-image: url(images/become.gif);
	width: 147px;
	height: 24px;
	text-indent: -1000em;
	overflow:hidden;
  
	background-position: left top;
	border:none;
}
.client:hover
{
	background-position: left bottom;
}

#jzlogo
{
	padding: 5px;
	float: right;
	
}



#leftnav
{
	background-color: #fff;
	float: right;
	width: 238px;
	height: 408px;
	padding: 40px 0 0 0;
	margin: 0 2px 2px 1px;
}
form.contact fieldset {   
  border: 2px solid white;   
  padding: 10px; 
}  

form.contact legend {   
  font-weight: bold;   
  font-size: small;   
  color: #3C2214;   
  padding: 5px 5px 0 0;
  margin: 0 5px 0 0; 
}

form.contact {   
  padding: 0;   
  margin: 0;   
  margin-top: -15px;
  line-height: 150%;
}

form.contact label {
  font-weight: bold;
  font-size: small;
  color: #6c6344;
}

form.contact label.fixedwidth {   
  display: block;   
  float: left;
  margin: 0 140px 0 0; 
}

form.contact .buttonarea input {   
  background: #3C2214;
  color: white;   
  font-weight: bold;   
  padding: 5px;   
  border: 1px solid white; 
}

form.contact .buttonarea {   
  text-align: center;   
  padding: 4px;   
  background-color: #6c6344; 
}
.spacing
{
	padding: 0 5px 0 7px;

}

#border
{
	float: right;
	padding: 0px;
	margin: 0px 0 0 0;
	
}

.firstchoice 
{
	margin: 5px 0 0 -450px;
}
.fixedemail
{
	margin: 5px 0 0 -490px;
}
,fixedbudget
{
	margin: 5px 0 0 -250px;	
}	
</style>
</head>

<body>
<div id="outsidebox">

	<div id="header">
		<a href="about.html" class="about" id="aboutov" style="text-decoration:none">About</a>
		<a href="trends.html" class="trend" style="text-decoration:none">Trend</a>
		<a href="portfolio.html" class="port" style="text-decoration:none">port</a>
		<a href="services.html" class="service" style="text-decoration:none">serv</a>
		<a href="clients.html" class="client" style="text-decoration:none">become</a>  

		<img src="images/jz.gif" alt="home" class="jzlogo" id="jzlogo" />
		
	  </div>
		
		
		<div id="leftnav">
		</div>
		
		<div id="bodycontent">
	
	  
			<form action="" method="post" class="contact">
		<fieldset>
		  <legend>Contact Information</legend>
		  <div>
			<label for="contactname" class="fixedwidth">Name</label>
			<input type="text" class="firstchoice" name="contactname" id="contactname"/>
		  </div>
		  <div>
			<label for="telephone" class="fixedwidth">Phone</label>
			<input type="text" class="firstchoice" name="telephone" id="telephone"/>
		  </div>
		  <div>
			<label for="email" class="fixedwidth">Email Address</label>
			<input type="text" class="fixedemail" name="email" id="email"/>
		  </div>
		  <div>
			<label for="eventname" class="fixedwidth">Address</label>
			<input type="text" class="fixedemail" name="eventname" id="eventname"/>
		  </div>
				  <div>   
			  <label for="region" class="fixedwidth">State</label>
			  <select name="region" class="firstchoice" id="region">	 
				<option value="AK" >AK</option>
					<option value="AL">AL</option>
					<option value="AR">AR</option>
					<option value="AZ">AZ</option>
					<option value="CA">CA</option>
					<option value="CO">CO</option>
					<option value="CT">CT</option>
					<option value="DE">DE</option>
					<option value="FL">FL</option>
					<option value="GA">GA</option>
					<option value="HI">HI</option>
					<option value="IA">IA</option>
					<option value="ID">ID</option>
					<option value="IL">IL</option>
					<option value="IN">IN</option>
					<option value="KS">KS</option>
					<option value="KY">KY</option>
					<option value="LA">LA</option>
					<option value="MA">MA</option>
					<option value="MD">MD</option>
					<option value="ME">ME</option>
					<option value="MI">MI</option>
					<option value="MN">MN</option>
					<option value="MO">MO</option>
					<option value="MS">MS</option>
					<option value="MT">MT</option>
					<option value="NC">NC</option>
					<option value="ND">ND</option>
					<option value="NE">NE</option>
					<option value="NH">NH</option>
					<option value="NJ">NJ</option>
					<option value="NM">NM</option>
					<option value="NV">NV</option>
					<option value="NY">NY</option>
					<option value="OH">OH</option>
					<option value="OK">OK</option>
					<option value="OR">OR</option>
					<option value="PA">PA</option>
					<option value="RI">RI</option>
					<option value="SC">SC</option>
					<option value="SD">SD</option>
					<option value="TN">TN</option>
					<option value="TX">TX</option>
					<option value="UT">UT</option>
					<option value="VA">VA</option>
					<option value="VT">VT</option>
					<option value="WA">WA</option>
					<option value="WI">WI</option>
					<option value="WV">WV</option>
					<option value="WY">WY</option>
			  </select> 
			</div>
		   
			   <div>
			<label for="eventdate" class="fixedwidth">Zipcode</label>
			<input type="text" class="firstchoice" name="eventdate" id="eventdate"/>
		  </div>
		   </fieldset>
			<div>
			 
				  
				  <fieldset>
				   <legend>Professional Information</legend>
			  <label for="details" class="fixedwidth">General Description Of Project</label>
			  <textarea name="details" class="firstchoice" id="details" cols="30" rows="7"></textarea>
			  <p></p>
			  <div>
				<label for="budget" class="fixedwidth">Estimated Budget</label>
				<input type="text" class= "fixedbudget" name="budget" id="budget"/>
				  </div>
				 
				 <div>
				<label for="budget" class="fixedwidth">Square Footage Of Project</label>
				<input type="text" class= "firstchoice" name="budget" id="square"/>
				  </div>
				<div>
				
				<label for="budget" class="fixedwidth">Location Of Project</label>
				<input type="text" class= "firstchoice" name="budget" id="location"/>
				  </div>
			   
   
			  <legend> Style </legend>
			  <input type="checkbox" class= "spacing" name="modern" id="modern" value="Modern" />
			  <label for="modern">Modern</label>
			  
			   <input type="checkbox" class= "spacing" name="contemporary" id="contemporary" value="Contemporary"  />
			  <label for="contemporary">Contemporary</label>
			  
			   <input type="checkbox" class= "spacing" name="traditional" id="traditional" value="Traditional" />
			  <label for="traditional">Traditional</label>
			  
			  <input type="checkbox" class= "spacing" name="country" id="country" value="Country"/>
			  <label for="country">Country</label>   
			  
			  <input type="checkbox" class= "spacing" name="classical" id="classical" value="Classical"/>
			  <label for="classical">Classical</label>   
			  
			  <input type="checkbox" class= "spacing" name="oldworld" id="oldworld" value="OldWorld"/>
			  <label for="oldworld">Old World</label>
			  
			  <p></p>
		  
				  
			  <p></p>
			  <br />
			  
 
			<div class="buttonarea">	
			  <input type="submit" value="Send Us the Info"/>
			</div>
			
		</fieldset>
	  </form>
		 </div> <!-- end of bodycontent div -->
		
	   
	
			
		 
			 
			 
			
			
		   
			
</div>

</body>
</html>



Was This Post Helpful? 0
  • +
  • -

#6 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: CSS Stylesheet issues

Posted 07 August 2009 - 09:10 AM

Out of curiosity - why did you take it out of tables. I am all for using divs and killing tables, but there IS a time and a place for tables. And personally - I consider forms to be tabular data, to an extent.

Because you always want

label -> input
label -> input

And you are going to be hard pressed to pull that off EASILY with divs.

Sure you can do it:

HTML:
<div class="formItem">
  <label>Name</label>
  <div class="inputArea">
	   <input type="text"/>
  </div>
</div>



CSS:
.formItem {
   width: 600px;}

.formItem label, .inputArea {
	float: left;
}

label {
	width: 250px;
	background: green;
	display: block;
}

.inputArea {
   width: 350px;
}

.clear {
	clear: both;}



So see it's possible, and by all means swap your code out with the ones above, I just personally (and I am sure I will be debated on this) feel that forms fall into the tabular data area.

Because right now your problem is your floats, you are floating the input boxes themselves and the labels and didn't take into account the widths and padding necessary to make it work right.

The above code will produce:
Attached Image

Obviously you may want to reduce the space some.

Let me know if you have any questions on how to implement that with your form.

--

Greg
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1