Free Weekly Tech Newsletter

mysterio2099 · 08-08-2005, 03:10 PM

I'm working on a simple layout in CSS (for the 1st time) and I have a slight bug. The "left" DIV background color doesn't seem to be working...it's suppose to be white, but it takes on the #333333 of the "body" background-color ....not sure what's going on?

Here's the full code:

HTML Code:

<html>
<head>
<style type="text/css">

body {
	margin: 5px 0px 0px 20%;
	background-color:#333333;
	}

/* MENU START */
ul {
	float:left;
	width:90px;
	padding:0;
	margin:0;
	list-style-type:none;
}

a.MENU {
	float:left;
	width:90px;
	text-decoration:none;
	text-align:left;
	color:#000000;
	background-color:#ffffff;
	padding:5px, 0px, 5px, 5px;
	border-right:1px solid white;
}

a.MENU:hover {
	background-color:gray;
	color:#ffffff;
}	

/* MENU END */

#Content {
	font-family: Verdana, Arial, Helvetica, sans-serif ;
	font-size:11px;
	text-align:left;
	line-height:1.8;
	padding:10px;
	margin-left:15%;
	border-left:1px solid #000000;
	background-color:#eee;
	}

div.container {
	width:75%;
	margin:0px;
	border:1px solid #000000;
	}

div.header {
	border-bottom:1px solid #000000;
	padding:0.5em;
	color:white;
	background-color:gray;
	clear:left;
	}	

div.footer {
	font-family: Verdana, Arial, Helvetica, sans-serif ;
	font-size:11px;
	text-align:center;
	border-top:1px solid #000000;
	padding:0px 0px 0px 5px;
	color:white;
	background-color:gray;
	clear:left;
	}

h1.header {
	padding:0;
	margin:0;
	}

div.left {
	background-color:#FFFFFF;
	float:left;
	width:90px;
	height:100%;
	margin: 0px 0px 0px 0px;
	padding:none;
	}

</style>
</head>
<body>

<div class="container">
<div class="header"><h1 class="header">Main Title</h1></div>
<div class="left">
<ul>
<li><a href="#" class="MENU">Home</a></li>
<li><a href="#" class="MENU">Services</a></li>
<li><a href="#" class="MENU">Portfolio</a></li>
<li><a href="#" class="MENU">Staff</a></li>
<li><a href="#" class="MENU">Contact</a></li>
</ul>
</div>
<div id="content">
<h2>Free cookies!  Come now!</h2>
<p>Ok, we're not really giving out free cookies.. that was just a marketing scheme to pull all the stupid people in... looks like it worked, because here you are! Now, send us $10,000,000 US currency.  Please?  Thank you, it's greatly appreciated.</p>
<p>TheCookie Factory, Inc.</p></div>
<div class="footer">Copyright © 2005 TheCookie Factory</div>
</div>

</body>
</html>

Hope you can help.

Btw, if I were to add the:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

All the colors go to hell..not sure what causes that either?

Thanks.

catacon · 08-08-2005, 03:23 PM

Instead of making the divisions 'div.something', just make them '#something'. So then, in the HTML part, instead of 'div class="something"' it would be 'div id="something"'. Not sure if that will work, but give it a try.

PS

Be sure to use the chevrons (< and >), I didn't put them in, sorry.

mysterio2099 · 08-08-2005, 03:27 PM

Same exact thing man in IE. But Firefox and Netscape 8.0, the left column extends about 1000px straight down...its white though

lol.

More bugs...I hate bugs.

Anymore ideas?

mysterio2099 · 08-08-2005, 03:30 PM

correction....its the same in all browsers. That bug was caused by something else. But the background color is still unsolved.

catacon · 08-08-2005, 03:38 PM

Are the links supposed to be going across the top or side? If you want them on the side, just remove all the list tags.

mysterio2099 · 08-08-2005, 03:40 PM

they are suppose to be vertical...and they are... the links aren't my problem, the background is....

catacon · 08-08-2005, 03:44 PM

Well, with the way you had it, I see only two links, horizontal. The background looks fine to me. I don't know if this is waht you want.

HTML Code:

<html>
 <head>
 <style type="text/css">
 body { margin: 5px 0px 0px 20%; background-color:#333333; }
 
/* MENU START */
 ul { float:left; width:90px; padding:0; margin:0; list-style-type:none; } 
a.MENU { float:left; width:90px; text-decoration:none; text-align:left; color:#000000; background-color:#ffffff; padding:5px, 0px, 5px, 5px; border-right:1px solid white; } 

a.MENU:hover { background-color:gray; color:#ffffff; } 

/* MENU END */

 #Content { font-family: Verdana, Arial, Helvetica, sans-serif ; font-size:11px; text-align:left; line-height:1.8; padding:10px; margin-left:15%; border-left:1px solid #000000; background-color:#eee; }

 div.container { width:75%; margin:0px; border:1px solid #000000; }

 div.header { border-bottom:1px solid #000000; padding:0.5em; color:white; background-color:gray; clear:left; } 

div.footer { font-family: Verdana, Arial, Helvetica, sans-serif ; font-size:11px; text-align:center; border-top:1px solid #000000; padding:0px 0px 0px 5px; color:white; background-color:gray; clear:left; }

 h1.header { padding:0; margin:0px; } 

div.left { background-color:#FFFFFF; float:left; width:91px; height:100%; margin: 0px 0px 0px 0px; padding:0px; }

 </style>

 </head>

 <body>

<div class="container">

 <div class="header">

<h1 class="header">Main Title</h1>

</div>

 <div class="left">

<a href="#" class="MENU">Home</a>
<a href="#" class="MENU">Services</a>
<a href="#" class="MENU">Portfolio</a>
<a href="#" class="MENU">Staff</a> 
<a href="#" class="MENU">Contact</a>
 

</div>

 <div id="content">

 <h2>Free cookies! Come now!</h2> <p>Ok, we're not really giving out free cookies.. that was just a marketing scheme to pull all the stupid people in... looks like it worked, because here you are! Now, send us $10,000,000 US currency. Please? Thank you, it's greatly appreciated.</p> <p>TheCookie Factory, Inc.</p>  <h2>Free cookies! Come now!</h2> <p>Ok, we're not really giving out free cookies.. that was just a marketing scheme to pull all the stupid people in... looks like it worked, because here you are! Now, send us $10,000,000 US currency. Please? Thank you, it's greatly appreciated.</p> <p>TheCookie Factory, Inc.</p>
</div>  
<div class="footer">Copyright © 2005 TheCookie Factory</div> 
</div>

mysterio2099 · 08-08-2005, 03:49 PM

this red box in this picture should be white. That's all I need.

catacon · 08-08-2005, 03:54 PM

I think thats an IE thing. It works in FF until the content section becomes bigger than the left section.

mysterio2099 · 08-08-2005, 05:18 PM

I'm not sure if you just gave me a fix to the problem, or....what?...

neochivers · 08-08-2005, 05:52 PM

right open it in Frontpage and change it there

mysterio2099 · 08-09-2005, 10:33 AM

Quote:

Originally Posted by neochivers

right open it in Frontpage and change it there

I have no idea what that means, and I don't have Frontpage.

Alright, there has to be someone in this forum who knows a little CSS ... c'mon guys, please help me out.

Stryker · 08-09-2005, 10:47 AM

Hiya mysterio,
Can you do me a little favor... please post URLs to your .htm page and any seperate pages for .css or anything? That way I can just right click and save as to get the most current versions of whatever you have.

Once I have everything reproduced on my drive, I'll play around with it. Not giving any guarantee though.

neochivers · 08-09-2005, 10:59 AM

yeah post them up here and we can toy and c if we can get it

foolishone · 08-09-2005, 02:10 PM

In the div.left, change the #FFFFFF in the background to whatever color you want. The white under the links will change to what you picked.

»fo

mysterio2099 · 08-09-2005, 03:17 PM

this may make people angry that tried to help, but that page has been scraped (it was only a css test page)

Now I'm working on an FAQ page for my company which is not going to be scraped (for sure), and I have yet another CSS problem. This one deals with Netscape problems.

I'm posting a new thread right now because it is in fact a new topic.

And I'll post the .html this time.

--Mysterio2099

Stryker · 08-09-2005, 03:20 PM

Quote:

Originally Posted by mysterio2099

this may make people angry that tried to help, but that page has been scraped (it was only a css test page)

Well that was a pretty easy fix!

I'll take a look at the new thread when it's up.
Stryker

neochivers · 08-09-2005, 03:44 PM

well this was a waste of time

Stryker · 08-09-2005, 03:50 PM

Quote:

Originally Posted by neochivers

well this was a waste of time

How is it a waste of time to try and solve a problem someone is having?

I think both of these posts (your and mine) are a bigger waste of time.

mysterio2099 · 08-09-2005, 03:50 PM

I knew someone would be mad

08-08-2005, 03:23 PM	#2
catacon Chop Chop Join Date: Jan 2005 Location: St. Louis, MO Posts: 1,035	Instead of making the divisions 'div.something', just make them '#something'. So then, in the HTML part, instead of 'div class="something"' it would be 'div id="something"'. Not sure if that will work, but give it a try. PS Be sure to use the chevrons (< and >), I didn't put them in, sorry. Share Share this post on Digg Del.icio.us Technorati Twitter

08-08-2005, 03:30 PM	#4
mysterio2099 Banned Join Date: Aug 2003 Posts: 349	correction....its the same in all browsers. That bug was caused by something else. But the background color is still unsolved. Share Share this post on Digg Del.icio.us Technorati Twitter

08-08-2005, 03:38 PM	#5
catacon Chop Chop Join Date: Jan 2005 Location: St. Louis, MO Posts: 1,035	Are the links supposed to be going across the top or side? If you want them on the side, just remove all the list tags. Share Share this post on Digg Del.icio.us Technorati Twitter

08-08-2005, 03:40 PM	#6
mysterio2099 Banned Join Date: Aug 2003 Posts: 349	they are suppose to be vertical...and they are... the links aren't my problem, the background is.... Share Share this post on Digg Del.icio.us Technorati Twitter

08-08-2005, 03:54 PM	#9
catacon Chop Chop Join Date: Jan 2005 Location: St. Louis, MO Posts: 1,035	I think thats an IE thing. It works in FF until the content section becomes bigger than the left section. Share Share this post on Digg Del.icio.us Technorati Twitter

Need Some Help? Type Your Keywords Here:

Still Need Help? Type Your Keywords Here:

Free Weekly Tech Newsletter

08-08-2005, 03:27 PM	#3
mysterio2099 Banned Join Date: Aug 2003 Posts: 349	Same exact thing man in IE. But Firefox and Netscape 8.0, the left column extends about 1000px straight down...its white though lol. More bugs...I hate bugs. Anymore ideas? Share Share this post on Digg Del.icio.us Technorati Twitter

08-08-2005, 05:18 PM	#10
mysterio2099 Banned Join Date: Aug 2003 Posts: 349	I'm not sure if you just gave me a fix to the problem, or....what?... Share Share this post on Digg Del.icio.us Technorati Twitter

08-08-2005, 05:52 PM	#11
neochivers Banned Join Date: Mar 2005 Posts: 210	right open it in Frontpage and change it there Share Share this post on Digg Del.icio.us Technorati Twitter

08-09-2005, 10:47 AM	#13
Stryker It can never be too quiet Join Date: May 2004 Location: Burlington, Ontario Posts: 1,090	Hiya mysterio, Can you do me a little favor... please post URLs to your .htm page and any seperate pages for .css or anything? That way I can just right click and save as to get the most current versions of whatever you have. Once I have everything reproduced on my drive, I'll play around with it. Not giving any guarantee though. Share Share this post on Digg Del.icio.us Technorati Twitter __________________ Athlon XP 2800+ • Asus A7N8X (nVidia Nforce2) • Radeon 9600 Pro 256MB • 2x512MB KVR DDR PC3200 Dual Channel • 120GB Seagate 7200RPM 8MB • 160GB WD 7200RPM 8MB • Liteon DVD±RW DL • AOpen DVD±RW DL • Vantec Ion2 350W PSUSend me your picture for the Member Photo Gallery

08-09-2005, 10:59 AM	#14
neochivers Banned Join Date: Mar 2005 Posts: 210	yeah post them up here and we can toy and c if we can get it Share Share this post on Digg Del.icio.us Technorati Twitter

08-09-2005, 02:10 PM	#15
foolishone Member (9 bit) Join Date: Nov 2004 Location: Flint, MI Posts: 256	In the div.left, change the #FFFFFF in the background to whatever color you want. The white under the links will change to what you picked. »fo Share Share this post on Digg Del.icio.us Technorati Twitter Last edited by foolishone; 08-09-2005 at 02:14 PM.

08-09-2005, 03:17 PM	#16
mysterio2099 Banned Join Date: Aug 2003 Posts: 349	this may make people angry that tried to help, but that page has been scraped (it was only a css test page) Now I'm working on an FAQ page for my company which is not going to be scraped (for sure), and I have yet another CSS problem. This one deals with Netscape problems. I'm posting a new thread right now because it is in fact a new topic. And I'll post the .html this time. --Mysterio2099 Share Share this post on Digg Del.icio.us Technorati Twitter

08-09-2005, 03:44 PM	#18
neochivers Banned Join Date: Mar 2005 Posts: 210	well this was a waste of time Share Share this post on Digg Del.icio.us Technorati Twitter

08-09-2005, 03:50 PM	#20
mysterio2099 Banned Join Date: Aug 2003 Posts: 349	I knew someone would be mad Share Share this post on Digg Del.icio.us Technorati Twitter

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Subscribe to THE INSIDER

Need Some Help? Type Your Keywords Here:

Still Need Help? Type Your Keywords Here:

Free Weekly Tech Newsletter