41 replies [Last post]
DeborahJ
Offline
Regular
Last seen: 11 years 48 weeks ago
Timezone: GMT-4
Joined: 2008-08-17
Posts: 15
Points: 0

Hi,

I'm new to CSS and am struggling with my first design. I'm so tempted to go back to tables but am trying not to!

I have posted my HTML and CSS below. Very simply, I would like 3 columns that should look like (in order from top of page):

A "banner image" that goes across the entire page - 100%.

A container that is 65% the width of the page, that houses:

-A header that is currently in three divs, but could be in one, if I could
figure out how.

-A horizontal ul navigation bar.

-Three columns, the middle being for the main content.

A footer that spans the main content (65%)

I have copied and pasted from here and there (very generously explained and
offered), but am missing something.

Here is my HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
<meta http-equiv="Content-Language" content="en-ca">
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="djh_styles_sheet.css">
 
</head>
 
<body>
<div id="banner">
	<img src="djh_banner.jpg" width="100%" height="100"
		alt="Welcome"
		</div>
 
 
 
<div id="wrapper1"><!-- sets background to white and creates full length leftcol-->
 
	<div id="wrapper2"><!-- sets background to white and creates full length rightcol-->
 
		<div id="maincol"><!-- begin main content area -->
 
			<div id="leftcol"><!-- begin leftcol -->
				<p> <img src="djh_logo.jpg" width="150" height="100"</p>
			</div><!-- end leftcol -->
 
			<div id="rightcol"><!-- begin rightcol -->
				<p><img src="people.jpg" width="275" height="150"</p>
			</div><!-- end righttcol -->
 
			<div id="centercol"><!-- begin centercol -->
				<h1><p>&nbsp;</p>
 
 
				<p>Build Your People...</p>
				<p>&nbsp&nbsp&nbsp&nbspBuild Your Business.</p></h1>
 
 
				</div><!-- end centercol -->
 
 
		<p class="clear"></p>		
<div id="nav_bar"><!-- begin nav_bar -->
			<ul>
			<li><a href=#"index.htm">Home &nbsp</a</li>
			<li><a href="#about_us.htm">About Us &nbsp</a</li>			
			<li><a href="#services.htm">Services &nbsp</a</li>
			<li><a href="#">Training &nbsp</a</li>
			<li><a href="#contact_us.htm">Contact Us &nbsp</a</li>
			<li><a href="#links.htm">Links &nbsp</a</li>
			<li><a href="#">Library &nbsp</a</li>
			<li><a href="#testimonials.htm">Testimonials &nbsp</a</li>
			<li><a href="#find_us.htm">Find Us &nbsp</a</li>
			<li><a href="#employment.htm">Employment &nbsp</a</li>
 
	</ul>
	</p>
		</div><!-- end nav_bar -->			
		<div id="maincol2"><!-- begin second main content area -->
 
			<div id="leftcol2"><!-- begin leftcol -->
				<p> sfsdfsdfsdfskdfklsd jflsdlf sdklf jsdf</p>
			</div><!-- end leftcol -->
 
			<div id="rightcol2"><!-- begin rightcol -->
				<p>ksdlfslf jlskdf jklsdj fl dlsfj dsf</p>
			</div><!-- end righttcol -->
 
			<div id="centercol2"><!-- begin centercol -->
				<p>dsfldsklf jf sdklf jlf dlf jdfjl fl</p>
 
 
				</div><!-- end centercol -->		
		<!-- end main content area -->
 
	</div><!-- end wrapper1 -->
 
</div><!-- end wrapper2 -->
 
 
 
 
 
 
 
 
</body>
 
</html>

And here is my CSS file:

/* Make sure to use background-color: xxx and color: xxx in background rule, because different browsers use different rules */
/* The following has the html for older browers like Opera */
html, body			{margin: 0; padding: 0; font-family: verdana, geneva, arial, helvetica, sans-serif; margin-top: 0; margin-bottom: 0.5em;
						background-color: #AE2623; color: #AE2623; text-align: center}
h1           		{font-family: trebuchet ms, verdana, geneva, arial, helvetica, sans-serif; font-size: 110%; color: #841518; font-weight: bold;    margin-bottom: .1em; }
p            		{font-family: trebuchet ms, verdana, geneva, arial, helvetica, sans-serif; font-size: 85%; color: #000000; margin-top: 0; margin-bottom: 0.5em }
.clear {clear: both;}
#wrapper1 {
	position:relative;
	text-align:left;
	width:65%;
	background:#FFF url("../images/rightcolor_bg.gif") repeat-y top right;
	}
#wrapper2 {
	position:relative;
	text-align:left;
	width:100%;
	}
#wrapper3 {
	position:relative;
	text-align:left;
	width:100%;
	background:#FFF url("../images/rightcolor_bg.gif") repeat-y top right;
	}
#wrapper4 {
	position:relative;
	text-align:left;
	width:100%;
	background:url("../images/leftcolor_bg.gif") repeat-y top left;
	}
#header {
	position: relative
	background:#BB62AB;
	padding:10px;
	width: 100%
	margin:0;
	align: center
	float:center;
	color:#FFF;
	}
#header h1 {
	font-size:200%;
	}
#header a:hover {
	color:#7A2875;
	}
#nav_bar {position: relative; margin: 0 auto;   ;/* align for good browsers */
		text-align: left; /* counter the body center */
; column-span: 3; font-family: verdana, geneva, arial, helvetica, sans-serif; font-size: 75%; text-decoration: none; width: 100%; }
#nav_bar ul {list-style: none; margin-right: 1em; padding: 0.2em 0.6em 0.2em 0.6em; padding-top: 1em; white-space: nowrap;}
#nav_bar li {display: inline;}
 
#nav_bar li a:link, #nav_bar li a:visited {font-size 70%; display: inline; padding: 0.4em 0.1em 0.4em 0.5em; width:117px;white-space:normal;text-align:center;
border-left: 4px solid #efb22D; border right: 1px dash #efb22D; background-color: #cc0000; color: #ffffff; text-decoration: none; margin-right: .1em; width: 75px}
 
#maincol {
	position:relative;
	margin:0;
	padding:10px;
	}
#maincol2 {
	position:relative;
	margin:0;
	padding:10px;
	}
#leftcol { 
	position:relative;
	top:10px;
	left:-10px;
	float:left;
	width:150px;  /* for IE5/WIN */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:130px; /* actual value */
	margin:0 0 -10px 0;
	padding-left:0px;
	background:#FFFFFF;
	z-index:100;
	}
#leftcol2 { 
	position:relative;
	top:10px;
	left:-10px;
	float:left;
	width:150px;  /* for IE5/WIN */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:130px; /* actual value */
	margin:0 0 -10px 0;
	padding:0px;
	background:#FFFFFF;
	z-index:100;
	}
#rightcol {
	position:relative;
	top:-10px;
	right:-10px;
	float:right;
	width:300px;  /* for IE5/WIN */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:280px; /* actual value */
	margin:0 0 -10px 0;
	padding:0px;
	background:#FFFFFF;
	z-index:99;
	}
 
#rightcol2 {
	position:relative;
	top:-10px;
	right:-10px;
	float:right;
	width:300px;  /* for IE5/WIN */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:280px; /* actual value */
	margin:0 0 -10px 0;
	padding:0px;
	background:#FFFFFF;
	z-index:99;
	}
#centercol {
	position:relative;
	right:-10px;
	float:left;
	margin:0 0 -10px 0;
	padding:10px;
	background:#FFFFFF;
	z-index:99;
	}
 
 
#centercol p {
	font-family: verdana, geneva, arial, helvetica, sans-serif; font-size: 120%; color: #CC0000; font-weight: bold; margin-bottom: 0; text-align: left; padding-left: 200px; 
 
	}
#centercol2 {
	position:relative;
	right:-10px;
	float:left;
	margin:0 0 -10px 0;
	padding:0px;
	background:#FFFFFF;
	z-index:99;
	}
#centercol2 a {
	color:#666;
	}
#centercol2 a:hover {
	border-bottom:1px solid;
	color:#9343B9;
	}
#footer {
	position:relative;
	top:1px;
	background:#7A2875;
	width:100%;
	clear:both;
	margin:0;
	padding:1% 0;
	text-align:center;
	color:#CCC;
	}

Any help would be GREATLY appreciated!

Thank you!

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 7 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hello DeborahJ, thank you

Hello DeborahJ, thank you for posting all your code Smile

While I don't think I can solve your problems, I may be able to point you in the right direction.

    *1. If you don't have a good reason for using the Transitional Doctype, switch to HTML 4.01 Strict - it will help keep browser vagaries at bay. Read about Doctypes in the How To Forum.

    *2. Run your HTML and CSS through the validators. You have some basic errors which may help resolve some of your problems. "Why Validation Helps" in the How To forum.

    *3. There seem to be an awful lot of wrappers and divs. You may have a case of Divitis. Worth checking out.

    *4. Check out the "Floatutorial" on Max Design.

    *5. If you use FireFox, get "Firebug" the Web Developer Toolbar (the links are in the validation article in Point 2 above) - it will help you see where your divs are sitting and where things may be clashing.

Finally, if you have further problems or are still stuck, come back and hopefully someone will be able to clear up the remainder. Good luck! Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

DeborahJ
Offline
Regular
Last seen: 11 years 48 weeks ago
Timezone: GMT-4
Joined: 2008-08-17
Posts: 15
Points: 0

Thank you!

Hi there,

Thanks so much for your time. I will go through each of the links you sent and try to learn enough that I'm no longer dangerous! Smile

Much appreciated!
Deborah J.

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 11 years 50 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

Your question is simple.

Your question is simple. Pulling it off, may not be as simple. To make matters easier cross-browser, for the time being, set a fixed width rather than 65% on the width (I used 960px). Some of us prefer to put primary content first in source order. Doing so in the situation you have might yield a 100% width banner, a 3 col fixed width header with h1 first in source, followed by the nav, followed by another fixed width 3col layout (different widths than the header) with the middle column first in source, followed by the footer. Negative-margin layouts work well for source ordered documents.

Something like this may, or may not, be what you're after-- either way, I hope it helps getting you started...

Online:
http://www.chelseacreekstudio.com/ca/cssd/test-26.html
Cursory checked in IE/6 & IE/7; and, compliant browsers.

(X)HTML/CSS for the archives below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>test-26</title>
 
<style type="text/css">
 
html, body {
margin : 0;
padding : 0;
}
body {
font : 100% arial, serif;
text-align : center;
}
img {display: block;margin: 20px auto;}
h1 {
font-size : 180%;
text-align : center;
margin : 50px 0 0 0;
}
p {
margin : 0;
}
 
#banner {border-top : 1px solid red;border-bottom : 1px solid red;height : 100px; width :100%;}
#page { border: 1px solid fuchsia; border-top: none; margin: 0 auto; text-align: left; width: 960px; overflow:hidden;}
#one
	{
	float: left;
	width: 455px;
	margin-left: 190px;
	}
* html #one
	{
	display: inline;
	}
#two
	{ background: #eee; 
	float: left;
	width: 190px;
	margin-left: -645px;
	}
#three
	{ background: #eee; 
	float: left;
	width: 315px;
	}
 
 
#four
	{
	float: left;
	width: 460px;
	margin-left: 200px;
	}
* html #four
	{
	display: inline;
	}
#five
	{
	float: left;
	width: 200px;
	margin-left: -660px;
	}
#six
	{
	float: left;
	width: 300px;
	}
 
 
.wrapper
	{
	width: 960px; 
	}
 
.wrapper
	{
	float: left;
	float/**/: none;
	}
/* easy clearing */
.wrapper:after
	{
	content: '.'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
.wrapper
	{
	display: inline-block;
	}
/*\*/
.wrapper
	{
	display: block;
	}
/* end easy clearing */
#footer
	{
	clear: both;width:960px;border-top: 1px solid red;
	}
#header
	{
	width: 960px; border-bottom: 1px solid red;
	}
ul { margin: 0; padding:0;
border-bottom : 1px solid red;
clear : both;padding: 5px 0;text-align: center;
}
li {
display : inline;
list-style-type : none;
padding : 0 20px 0 0;
font-size : 80%;
}
</style>
</head>
<body>
 
<div id="banner">&nbsp;</div>
 
<div id="page">
 
<div id="header">
<div class="wrapper">
<div id="one">
<h1>h1 Document Title</h1>
</div>
<div id="two">
<img src="test-26/left.gif" alt="" width="150" height="100" />
</div>
<div id="three">
<img src="test-26/right.gif" alt="" width="275" height="150" /></div>
</div>
</div>
 
<ul>
<li><a href="#">item one</a></li>
<li><a href="#">item two</a></li>
<li><a href="#">item three</a></li>
<li><a href="#">item four</a></li>
<li><a href="#">item five</a></li>
<li><a href="#">item six</a></li>
<li><a href="#">item seven</a></li>
<li><a href="#">item eight</a></li>
<li><a href="#">item nine</a></li>
<li><a href="#">item ten</a></li>
</ul>
 
<div class="wrapper">
<div id="four">
<p><b>Aenean semper erat nec erat.</b> Aliquam erat volutpat. Morbi egestas. Nullam vel odio eget dui consequat mattis. Sed et dui. Donec justo. Sed non purus vitae orci eleifend eleifend. Fusce metus elit, convallis sit amet, suscipit vitae, ullamcorper sit amet, magna. Phasellus ac metus quis arcu congue pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras dapibus leo vitae orci. Donec malesuada tempus ipsum. Donec luctus semper lectus. Phasellus nisl elit, fringilla quis. Cras dapibus leo vitae orci. Donec malesuada tempus ipsum. Donec luctus semper lectus. Phasellus nisl elit, fringilla quis. Fusce metus elit, convallis sit amet, suscipit vitae, ullamcorper sit amet, magna. Phasellus ac metus quis arcu congue pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras dapibus leo vitae orci.</p>
</div>
 
<div id="five">
<p>Aenean semper erat nec erat. Aliquam erat volutpat. Morbi egestas. Nullam vel odio eget dui consequat mattis. Sed et dui. Donec justo. Sed non purus vitae orci eleifend eleifend. Fusce metus elit, convallis sit amet, suscipit vitae, ullamcorper sit amet, magna. Phasellus ac metus quis arcu congue pellentesque. </p>
</div>
 
<div id="six">
<p>Aenean semper erat nec erat. Aliquam erat volutpat. Morbi egestas. Nullam vel odio eget dui consequat mattis. Sed et dui. Donec justo. Sed non purus vitae orci eleifend eleifend. Fusce metus elit, convallis sit amet, suscipit vitae, ullamcorper sit amet, magna. Phasellus ac metus quis arcu congue pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras dapibus leo vitae orci. Donec malesuada tempus ipsum. Donec luctus semper lectus. Phasellus nisl elit, fringilla quis, tristique a, semper ut, erat. Vivamus luctus ultrices sapien.tristique a, semper ut, erat. </p>
</div>
 
<div id="footer">
<p>footer</p>
</div>
 
</div></div>
</body>
</html>

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 7 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Thanks for helping out

Thanks for helping out David. I figured I'd given Deborah enough reading to go on with till someone could help her more specifically Smile

Deborah wrote:

Thanks so much for your time. I will go through each of the links you sent and try to learn enough that I'm no longer dangerous! Smile

You're welcome, points 1 & 2 are the most pertinent (and a little bit of dangerous is fine Smile)

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

DeborahJ
Offline
Regular
Last seen: 11 years 48 weeks ago
Timezone: GMT-4
Joined: 2008-08-17
Posts: 15
Points: 0

Thank you!

I have been reading and trying things all day. Actually, for about 15 hours a day, every day, for about the last week!

I actually got it to work and am starting to understand how things flow, thanks to the help received earlier, but now am totally stumped with a new problem. I will be looking at the site you sent to learn more. Thank you.

I have been trying to create a horizontal navigation bar that has a drop down. I have tried the Suckerfish method, but don't know where to put the javascript.

I tried another couple of places, and almost got it to work, but the sub menu items weren't wide enough.

Any help would be so appreciated. I'm really against a wall.

Thanks to you both so much!

DeborahJ
Offline
Regular
Last seen: 11 years 48 weeks ago
Timezone: GMT-4
Joined: 2008-08-17
Posts: 15
Points: 0

Nav Bar Generator

At the risk of sounding like I'm giving up (OK, I'm kind of at that point)... I have everything the way I wanted it thanks to you guys...

But, again, this horizontal nav bar with drop down menu is just not working. I came across Coffee Cup Menu Builder and it looks so easy.

I have a feeling you're going to tell me it's not a good idea Smile

Any advice would be great.

Thanks so very much.

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 11 years 50 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

I will defer to others to

I will defer to others to answer your question, other than to say "first things first."

Establish a valid mark-up and valid css layout that works cross-browser first (meaning "works" without issue in compliant browsers (Opera, FF/3.0.1, Camino, and Safari), and IE/6, IE/7.

Bells, whistles, stuff that "glows" in the dark, music, video, "flash o'rama," and things that "drop-down," "shoot-out," or otherwise go "thump in the night" can be added once the basic structure works.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

There is no royal easy road

There is no royal easy road to learning proper web design as much as we might like there to be. CSS and html go together and html is the basis. Trying to design with CSS without first having valid and semantic html is like trying to build a house with no foundation. You might get the house up, but you shouldn't be surprised when the first strong wind blows it down.

If you are wise you will go to Html Dog, or some similar site, and work through the tutorials to get that basis.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

DeborahJ
Offline
Regular
Last seen: 11 years 48 weeks ago
Timezone: GMT-4
Joined: 2008-08-17
Posts: 15
Points: 0

You're Right

I will put a regular nav bar in, test everything, and then take it from there.

Thanks for your help and tips. I've been reading my head off! Smile

DeborahJ
Offline
Regular
Last seen: 11 years 48 weeks ago
Timezone: GMT-4
Joined: 2008-08-17
Posts: 15
Points: 0

Thank You

I'm heading to HTML Dog right now. Smile

Thanks for the advice.

I'm off to build a solid house (I hope)!

nonbreakingspace
Offline
Enthusiast
Auckland, New Zealand
Last seen: 10 years 2 weeks ago
Auckland, New Zealand
Timezone: GMT+12
Joined: 2008-02-24
Posts: 64
Points: 1

Could you give us a link to

Could you give us a link to the page in it's current state? I might be able to give you a helping hand with the menu bar you describe, and javascript-less too. (behaviour.htc file don't count Tongue)

DeborahJ
Offline
Regular
Last seen: 11 years 48 weeks ago
Timezone: GMT-4
Joined: 2008-08-17
Posts: 15
Points: 0

Here is the Link

Thanks for offering your help!

I am including a link to my "test" page. Please excuse the weird colors, etc. I've been using them to see clearly what's referring to what - I wouldn't dream of actually using them Smile

http://www.djhsolutions.ca/test/cssscreator.htm

I also have all kinds of extra css code from trying things. I'll get as much learning in and then start from scratch, line by line.

So, my 2 problems are:

1. The horizontal navigation - I am trying to achieve a drop down from Training that would contain Computer Training, then under it, Professional Skills.

Don't worry - I don't teach CSS! Smile

2. My footer seems to be hiding under my main column - this just happened - I guess I messed something up when trying to fix my other stuff!

Thank you!

nonbreakingspace
Offline
Enthusiast
Auckland, New Zealand
Last seen: 10 years 2 weeks ago
Auckland, New Zealand
Timezone: GMT+12
Joined: 2008-02-24
Posts: 64
Points: 1

Your navigation is missing

Your navigation is missing some structure, try this:

<div id="menuh">
				<ul>
					<li><a href="#index.htm" class="top_parent">Home</a></li>
					<li><a href="#about_us.htm" class="top_parent">About Us</a></li>
					<li><a href="#services.htm" class="top_parent">Services</a></li>
					<li><a href="#" class="top_parent">Training</a>
						<ul>
							<li><a href="#comp_training.htm" class="parent">Computer Skills</a></li>
							<li><a href="#prof_skills.htm" class="parent">Professional Skills</a></li>
						</ul>
					</li>
					<li><a href="#contact_us.htm" class="top_parent">Contact Us</a></li>
					<li><a href="#links.htm" class="top_parent">Links</a></li>
					<li><a href="#library.htm" class="top_parent">Library</a></li>
					<li><a href="#testimonials.htm" class="top_parent">Testimonials</a></li>
					<li><a href="#find_us.htm" class="top_parent">Find Us</a></li>
					<li><a href="#employment.htm" class="top_parent">Employment</a></li>
				</ul>
			</div>

Now, this is really messy, but I didn't want to potentially break to much of your code

/* Begin CSS Drop Down Menu */
#menuh {
	margin: 0;
	padding: 0;
	height: 1em;
	}
 
	#menuh li {
		list-style: none;
		float: left;
		position: relative;  /* Added by &nbsp; */
		}
 
	#menuh li a {
		display: block;
		padding: 3px 8px;
		background-color: #5e8ce9;
		color: #fff;
		text-decoration: none;
		}		
 
#menuh2 {
	position: relative;
	margin: 0 auto; /* align for good browsers */
	text-align: left; /* counter the body center */
	font-family: "trebuchet ms", verdana, geneva, arial, helvetica, sans-serif;
	font-size: 80%;
	text-decoration: none;
	}
 
#menuh a {
	text-align: center;
	border: 1px solid #555;
	white-space: nowrap;
	margin:0;
	padding: 0.3em;
	}
 
#menuh a:link, #menuh a:visited, #menuh a:active {	/* menu at rest */
	font-size: 70%;
	display: inline;
	/*padding: 0.4em 0.1em 0.4em 0.5em;*/
	/*white-space: normal;*/
	text-align:center;
	border-left: 4px solid #efb22D;
	background-color: #cc0000;
	color: #ffffff;
	text-decoration: none;
	/*margin-right: .1em;
	width: 75px;*/
	}
 
#menuh2 a:hover	/* menu at mouse-over  */
	{/*
	color: white;
	background-color: blue;
	text-decoration:none;*/
	}	
 
#menuh2 a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */
	{
	background-image: url(navdown_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}
 
#menuh2 a.parent, #menuh a.parent:hover 	/* attaches side-arrow to all parents */
	{
	/*display: block;*/
	background-image: url(nav_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}
 
#menuh2 ul
	{list-style: none; margin-right: 1em; padding: 0.2em 0.6em 0.2em 0.6em; white-space: nowrap;	}
 
#menuh li ul {
	display: none;
	width: 10em; /* Width to help Opera out */
	margin: 0;
	padding: 0;
	background-color: #69f;
	position: absolute;  /* Added by &nbsp; */
	left: 0;  /* Added by &nbsp; */
	top: 23px;  /* Added by &nbsp; */
	z-index: 999;
	}
 
	#menuh li:hover ul {
		display: block;  /* Added by &nbsp; */
		}
 
	#menu li li, #menu li li a {
		height: 33px;
		float: none;
		}
 
	#menuh2 li
	{
	display: inline; 
    min-height: 1px; 			/* Sophie Dennis contribution for IE7 */
    vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
	}
 
#menuh2 ul ul
	{
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1em;
	margin: .01em 0 .5em -5em;
	}
 
#menuh2 ul ul ul
	{
	top:0;
	left:100%;
	}
 
div#menuh li:hover
	{
	cursor:pointer;
	z-index:100;
	}
/*
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}
 
div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}
*/
/* End CSS Drop Down Menu */

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 11 years 50 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

Your question was answered,

Your question was answered, long, long ago...

DeborahJ
Offline
Regular
Last seen: 11 years 48 weeks ago
Timezone: GMT-4
Joined: 2008-08-17
Posts: 15
Points: 0

As Advised

As advised in this forum, I have saved the help you gave me to use in the future (thanks!), but have gone with a very basic layout to start with. Here is my link: http://www.djhsolutions.ca/test/index3.htm

I am having two problems:

1. My banner is making my page too wide and I'm not sure why. I would like it to span the 100% width of the window.

2. The main column is longer than my subcontainer div and I'm not sure why.

I have printed everything out and gone through it, but am obviously missing something.

If I could figure those two things out, I may just be ready to get this site going!

Any and all help would be very appreciated. It may seem obvious to you guys, but I'm still in the learning curve mode!

Thank you!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 33 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Valiidate your markup. That

Valiidate your markup. That first image element has serious errors. Then fix the others.

We'll be better able to help you once the syntax is correct.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

DeborahJ
Offline
Regular
Last seen: 11 years 48 weeks ago
Timezone: GMT-4
Joined: 2008-08-17
Posts: 15
Points: 0

Oops

I had validated CSS, but I guess you must also validate HTML?

In any case, I've validated and have no errors.

I don't know what you meant by the first image element having serious errors. That's something that didn't seem to get picked up.

I validated at W3. Should I use another validator?

Thanks so much for your help! I'm very new to CSS and need all the help I can get!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

DeborahJ wrote:I had

DeborahJ wrote:

I had validated CSS, but I guess you must also validate HTML?

Yes, you must.

Without valid html there is no CSS standard to apply. The standard is only defined for valid html. Browsers should error correct but there is no standard way to error correct. It's hard enough writing a standard for html that follows the rules, writing a standard for all the possible ways of writing html invalidly would be one heck of a task!

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

DeborahJ
Offline
Regular
Last seen: 11 years 48 weeks ago
Timezone: GMT-4
Joined: 2008-08-17
Posts: 15
Points: 0

Validated Code Is Done

Hi again,

I have made sure my code is validated for my test site: http://www.djhsolutions.ca/test/index3.htm

I have also rewritten some of the code after seeing that my div boxes didn't flow properly in a variety of browsers.

I'm almost there, but it seems that when I display the page in Safari, for example, the background colour of the container "bleeds through" the header div.

The placement of the container is also off.

I apologize for asking for so much help, but be assured that I'm working long hours, reading and trying things, etc. etc.

I truly appreciate your help. Thank you all very much.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 7 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hi Deborah - it seems to be

Hi Deborah - it seems to be coming along Smile And yes, it's change and validate, change and validate - both html and css.

I can't help with Safari but I think the usual answer to the problem of the main container not being centered is to apply
margin: 0 auto;
to the container holding everthing below your banner.

If I'm wrong someone will hopefully correct me, but give it a try. Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 7 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Sorry Deb - just had another

Sorry Deb - just had another quick look.
Stick the blue thing up the top as a background on body then put everything else in #container and apply the margin thin above to that.

Now I'm running late for work, I'll try to help again tonight if no one has sorted you in the meantime.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

DeborahJ
Offline
Regular
Last seen: 11 years 48 weeks ago
Timezone: GMT-4
Joined: 2008-08-17
Posts: 15
Points: 0

Hello and Thanks

It worked like a charm, of course! Thank you.

The only problem now is that my two containers on the right of the page displays very nicely in my browser, but in older versions of IE, they seem to have a white rectangle (background, I guess) showing between the two boxes.

Of course, now that I've made changes, I'm stumped by a validation error that I can't resolve. Time to take a break, I think!

Thanks so very much!

P.S. I've changed it quite a few times this afternoon!djhsolutions.ca/test/index3.htm

DeborahJ
Offline
Regular
Last seen: 11 years 48 weeks ago
Timezone: GMT-4
Joined: 2008-08-17
Posts: 15
Points: 0

Tried Your Suggestion

But it didn't work. Maybe I'm just too tired right now - it's all starting to look like Greek to me! Actually, I think they should change that expression to It's CSS to me! Smile

I'll have to try again later or tomorrow - it's getting late here.

Thanks for your help - I really appreciate it!

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 7 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Firstly Quote:Of course, now

Firstly

Quote:

Of course, now that I've made changes, I'm stumped by a validation error that I can't resolve.

This error is misleading you a bit. You are missing a closing div before the one you think is closing the newsletter.

Quote:

The only problem now is that my two containers on the right of the page displays very nicely in my browser, but in older versions of IE, they seem to have a white rectangle (background, I guess) showing between the two boxes.

You only have to worry about IE6 and up. #right is being pushed over because you have a right margin of 25px on it but it is 25px from its parent's (#right_container) right edge.

Quote:

Maybe I'm just too tired right now - it's all starting to look like Greek to me! Actually, I think they should change that expression to It's CSS to me! Smile

I know how you feel! Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

DeborahJ
Offline
Regular
Last seen: 11 years 48 weeks ago
Timezone: GMT-4
Joined: 2008-08-17
Posts: 15
Points: 0

See Problem, but Can't Figure out Solution

Hi again,

OK, I've been at it for hours again. I actually stooped to putting a table in Sad I was wondering if it would help.

Well, it didn't make a difference, but... what I DID realize is that there is a funny white and beneath my phone numbers rounded corner box on the right. I put a different coloured bottom left corner image so you could see the white space beneath the image.

I'm not sure how to get rid of that white space. It seems to be a bottom margin of some sort, but I can't seem to figure out where it's coming from.

Thank you, as always, for your guidance and help. It's nice to know there's someone to throw me a life line!

djhsolutions.ca/test/index3.htm

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 41 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

nameofimg {

nameofimg {
vertical-align: bottom;
}

?

Whenever I'm looking for the source of funny space, I start throwing ugly primary colours on the backgrounds of various things. It's temporary, doesn't distort the true box sizes like borders do, and helps me see how different browsers are sizing and spacing stuff. You could add one colour to your phone numbers (background-color, not "color"), another to their container, and so on. It's extremely useful in debugging!

And don't forget!! Even when you stick something in your code temporarily, validate it! Every time you make a change, check the validator!

You might want to give Opera a try for debugging-- it has this nifty built-in feature, I think it's ctrl alt v or something and it sends your page to the validator for you.

I'm no expert, but I fake one on teh Internets

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

In IE6, if there is no

In IE6, if there is no apparent reason for white space, it is sometimes due to IE deciding to render spaces where other browsers would collapse them, that is, it thinks it needs a line under the corner image for some reason.

Can you put back your table-free version ... perhaps as a second page if you don't want to mess up your current version?

Also, rather than using foreground images for decoration (e.g. rounded corners) try leaving them in the background. Your boxes are fixed width, so you can make an image for the top and bottom or if you want to keep four corners, do something like:

<div class="curvebox2">
  <!-- all the content -->
  <div class="corners"><b class="tl"></b><b class="tr"></b><b class="bl"></b><b class="br"></b></div>
</div>
 
where
 
.curvebox2 {
  position: relative;
  padding: 20px 0;
  background: #fff;
}
.corners b {
  position: absolute;
  width: 20px;
  height: 20px;
}
.tl { top: 0; left: 0; }
.tr { top: 0; right: 0; }
.bl { bottom: 0; left: 0; }
.br { bottom: 0; right: 0; }
 
.curvebox2 .tl { background: url(white_on_blue-upper_left.jpg); }
.curvebox2 .tr { background: url(white_on_blue-upper_right.jpg); }
.curvebox2 .bl { background: url(white_on_blue-lower_left.jpg); }
.curvebox2 .br { background: url(white_on_blue-lower_right.jpg); }

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 7 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Okay Deborah...the cavalry

Okay Deborah...the cavalry has arrived!!!
So I'll leave you in their more than capable hands Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

DeborahJ
Offline
Regular
Last seen: 11 years 48 weeks ago
Timezone: GMT-4
Joined: 2008-08-17
Posts: 15
Points: 0

Thank you all!

I was out of town all day, but will roll up my shirt sleeves and get on these suggestions first thing in the morning.

Just wanted to thank you all for your input in the meantime, though. It is greatly appreciated as I learn and struggle through this stuff.

Will keep you posted!

DeborahJ
Offline
Regular
Last seen: 11 years 48 weeks ago
Timezone: GMT-4
Joined: 2008-08-17
Posts: 15
Points: 0

I'm Back - With One Problem Left

I have been working on my site and thought I had things right, but...

When displaying in IE6, the content (container) background shows through its "child" div.

I used the voice inherit hack which resolved the problem in IE5.5, but not 6.

Any help would be so appreciated!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
<meta http-equiv="Content-Language" content="en-ca">
<meta http-equiv="keywords" content="computer training, sales, computer consulting, computer, course, courses, software, logiciel, training, ottawa, orleans, ontario, west island, montreal, quebec, st laurent, pointe claire, beaconsfield, dorval, excel, powerpoint, access, word, windows, microsoft, frontpage, internet, e-mail, leadership, customized, personal, corporate, outlook, visio, photoshop, french, english, anglais, francais, formation, informatique, ordinateur">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>DJH Training Solutions, Computer &amp; Prof. Development Training-Montreal QC &amp; 
Ottawa ON</title>
<link rel="stylesheet" type="text/css" href="djh_styles.css">
</head>
 
<!--BEGIN BODY  --> 
<body id="home"> 
 
<!--BEGIN Banner (entire page 100%) --> 
<div id="banner">  
	<img src="bluebanner6.jpg" alt="" height="80"> </div>
 
<!--BEGIN Wrapper (centered 800 pixel container) -->
<div id="wrapper"> 
 
	<!--BEGIN Header  -->	
	<div id="header"> 
		<div class="headertop" style="width: 100%; height: 18px"> 
		 </div>	  
 
			<!-- BEGIN logo -->
			<div id="logo"> 
			<img src="djh_logo.jpg"  alt="DJH Logo">
			<!-- END logo --> </div>  
 
			<!-- BEGIN francais -->
			<div id="francais" > 
				<a href="djhsolutions.ca/indexf.htm">Français &nbsp &nbsp</a>
			 <!-- END francais --> </div> 
 
			<!-- BEGIN people --> <div id="people"> 
			<img src="people_small.jpg" alt="Business People"> 
			<!-- END people  --></div> 
 
			<!-- BEGIN slogan --><div id="slogan"> 
			<h1> Build your people... <br> &nbsp &nbsp &nbsp Build your business.</h1>
			<!-- END slogan  --></div> 
 
	<!-- END Header  --></div> 
 
		 <!-- BEGIN Nav -->	<div id="nav">
				<ul id="tabnav">
					<li class="home"><a href="index.htm" >Home</a></li>
					<li class="about"><a href="about_us.htm" >About Us</a></li>
					<li class="services"><a href="services.htm" >Services</a></li>
					<li class="training"><a href="training.htm" >Training</a></li>
					<li class="contact"><a href="contact_us.htm">Contact Us</a></li>
					<li class="links"><a href="links.htm" >Links</a></li>
					<li class="library"><a href="library.htm" >Library</a></li>
					<li class="testimonials"><a href="testimonials.htm">Testimonials</a></li>
					<li class="find"><a href="find_us.htm" >Find Us</a></li>
					<li class="employment"><a href="employment.htm" >Employment</a></li>
				</ul>
 
		<!-- END nav --></div> 
 
		<!-- BEGIN Tagline -->	<div id="tagline">Innovative training solutions since 1980. 
		<!-- END Tagline  --></div> 
 
		<!-- BEGIN Content -->	
		<div id="content"> 
 
			<table border="0" width="800" id="table1" cellspacing="0" cellpadding="0" >
			<tr>
			<td rowspan="3" valign="top" width="540">
 
			<div id="contentleft"  >  <!-- BEGIN Content Left -->		
 
				<div class="roundedcornr_box">
   				<div class="roundedcornr_top"><div></div></div>
      				<div class="roundedcornr_content">
								<h2>Welcome to our Web site…	</h2>
 
								<p>	<b>DJH Training Solutions </b>is a “roll-up-your-sleeves” type company. We 
								provide computer software and professional development skills training and support.</p>
			<br>
								<h2>We make a few assumptions about our clients…</h2>
 
								<ul>
									<li>You want high quality solutions that are tailored to what you need.</li>
									<li>You want knowledgeable, professional, yet friendly trainers.</li>
									<li>You want great post-training support and coaching.</li>
								</ul>
 
								<p>	OK. We admit it. We didn’t just assume those things. We simply listened – our customers have told us exactly what they want.</p>
			<br>
 
								<h2>Solutions for success…	</h2>
 
								<ul>
									<li><b>Computer software training and support</b> for products like Excel, Project, Access, Word, PowerPoint, Visio, Outlook and more…</li>
									<li><b>Professional development training</b>, including leadership, management, customer loyalty, time management, strategic planning and more…</li>
								</ul><br>
 
								<p>We are happy to train at your office or ours. Or we can meet on-line, in real time, for those who want to train employees in 
								various locations and save on gas and travel expenses. <br><br>Our training is affordable, with personalized solutions geared to 
								you – whether you’re a solo entrepreneur or an executive with a multi-national outfit – or anywhere in between. <br><br></p>
 
								<h3>We Depend On Our Reputation. So Can You.</h3> 
     					       </div>
 
  					 <div class="roundedcornr_bottom"><div></div></div>
  					 </div>
 
				</div> </td><!-- END Content Left -->	
 
			<tr>
			<td valign="top" width="220" height="172">
 
			<div id="contentright">  <!-- BEGIN Content Right -->		
 
 
 
			<div class="roundedcornr_box">
   				<div class="roundedcornr_top"><div></div></div>
      				<div class="roundedcornr_content">
								<h4>Looking for solutions?<br>Give us a call! </h4><br>	<p class="tel"><table id="tel"><tr><td><b>Montreal:</b></td> <td>(514)&nbsp 342-9494<br></td></tr>
																			<tr><td><b>Ottawa: &nbsp </b></td><td>(613)&nbsp 656-4229</td></tr></table>
 
 
     					       </div>
  					 <div class="roundedcornr_bottom"><div></div></div>
 
				</div></div></td>
 
 
 
			<tr>
			<td valign="top" width="220" height="399">
 
			<div id="contentright2">  <!-- BEGIN Content Right2 -->		
 
 
 
			<div class="roundedcornr_box">
   				<div class="roundedcornr_top"><div></div></div>
      				<div class="roundedcornr_content">
								<!-- BEGIN: Constant Contact Stylish Email Newsletter Form -->
<div align="center">
<div style=" background-color: #ffffff;">
<form name="ccoptin" action="http://visitor.constantcontact.com/d.jsp" target="_blank" method="post" style="margin-bottom:3;"><span style="background-color: #006699; float:right;margin-right:5;margin-top:3"></span>
<h5>Subscribe now to our free e-newsletter for effective and proven tips and articles </h5><h6>Type your email address 
	&amp; click "Go"!</h6><br>
<input type="text" name="ea" size="20" value="" style="font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:10px; border:1px solid #999999;">
<input type="submit" name="go" value="GO" class="submit"  style="font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10px;">
<input type="hidden" name="m" value="1102115604730">
<input type="hidden" name="p" value="oi">
</form>
</div>
</div>
<!-- END: Constant Contact Stylish Email Newsletter Form -->
<!-- BEGIN: SafeSubscribe -->
<div align="center" style="padding-top:5px;">
<a href="http://www.constantcontact.com/safesubscribe.jsp" target="_blank"><img src="http://img.constantcontact.com/ui/images1/safe_subscribe_logo.gif" border="0" width="160" height="14" alt=""></a>
</div>
<!-- END: SafeSubscribe -->
 
<!-- BEGIN: Email Marketing you can trust -->
<div align="center" style="font-family:Arial,Helvetica,sans-serif;font-size:10px;color:#000000;">
We NEVER share email addresses<br>
We promise NOT to bombard you<br>
You can easily unsubscribe any time
</div>
<!-- END: Email Marketing you can trust -->			
 
     					       </div>
  					 <div class="roundedcornr_bottom"><div></div></div>
					</div>
 
					</div><!-- END Content Right2 -->
				</td>
 
<tr>
					<td colspan="2"><div id="footer">Website Design and Content &copy; DJH Training Solutions 2008</div><p>
				    <a href="http://validator.w3.org/check?uri=referer"><img
		        src="http://www.w3.org/Icons/valid-html401-blue"
		        alt="Valid HTML 4.01 Transitional" height="21" width="78"></a>
		  </p>
					</td></tr>	
 
 
 
 
</table>
			</div> <!-- END Content -->	
 
 
 
 
		</div>  <!-- END Wrapper -->		
 
 
 
</body>
 
</html>

/* Make sure to use background-color: xxx and color: xxx in background rule, because different browsers use different rules */
/* The following has the html for older browers like Opera */
 
html, body	{
				text-align: center;  
				font-family: arial, helvetica, sans-serif; 
				font-size: 13px; 
				color: #000000; 
				margin: 0; 	
				padding: 0;
				background-color: #678FC2; background: #678FC2;
				width: 100%;
}
 
/* Heading Styles */
 
h1	{
				text-align: left; 
				padding-left: 20%; 
				padding-top: 5%; 
				font-size: 120%; 
				color: #123980; 
				font-weight: bold;    
				margin-bottom: .1em
}
h2old  {
				text-align: left; 
				font-size: 110%; 
				color: white; 
				background-image: url(blue_background2.jpg') ;
 				border-bottom: 3px solid #FCB01C; 
 				font-weight: bold; 
 				margin: 0; 
 				padding-left: 12px 
}
 
h2	{
				font-family:  "trebuchet ms", verdana, geneva, arial, helvetica, sans-serif;
				text-align: left; 
				font-size: 115%; 
				color: #10509E;
				border-bottom: 1px solid #FCB01C; 
				font-weight: bold; 
 				margin: 0; 
 				padding-left: 5px; 
}
 
h3  {
				text-align: center; 
				font-size: 100%; 
				color: #123980;  
				font-weight: bold; 
				margin: 0;
}
 
h4  {
				text-align: center; 
				font-size: 110%; 
				color: #10509E;  
				font-weight: bold; 
				margin-top: 0; 
				margin-bottom: 0;	
				border-bottom: 2px solid #FCB01C;
				line-height: 1.25;
}
 
h5	{			
				text-align: center; 
				font-size: 95%; 
				color: white;
				font-weight: bold;
				background: #336699;
				padding-left: 2px;
				padding-right: 2px;
				margin: 0;
}
 
h6	{
				text-align: center;
				font-size: 70%;
				color: #10509E;
				background: #FFCC33;
				margin: 0;
}
p	{
				font-family: arial, helvetica, sans-serif; 
				text-align: left; 
				font-size: 90%; 
				color: black; 
				padding-left: 10px; 
				margin-top: .5em; 
				margin-right: 8px; 
				margin-bottom: .75em;
				line-height: 1.25;
}
 
 
ul	{			margin-top: .5em; 
				list-style: square; 
				font-size: 90%; 
}
 
ul li	{
				margin-bottom: .25em;
}
 
#banner {
				width: 100%;
				margin: 0 auto;
				overflow: hidden;	
}
 
#wrapper {
				text-align: left;
				margin: 0px auto;
				padding: 0;
				width: 800px;
				background: white;
				margin-top: -3px;
}
 
#francais {
				margin-top: -15px;
				margin-bottom: 2px;
				font-family: arial, geneva;
				text-align: right;
				font-size: 70%;
 
}
 
#francais a:link, a:visited {
				text-decoration: none;
				font-weight: bold;
				color: #123980;
}
 
#header {
				position: relative;
				width: 100%;
				background: #ffffff;
}	
 
#slogan {
				position:relative;
				margin-top: -10px;
				margin-left: 150px;
				text-align: right;
				font-size: 115%;
}
 
 
.headertop {
				background: url('gold_bar.jpg') no-repeat right top;
}
 
#logo {
				position:relative;
				top:12px;
				left:10px;
				float:left;
				width:140px;  /* for IE5/WIN */
				voice-family: "\"}\"";
				voice-family:inherit;
				width:130px; /* actual value */
				margin:0 0 -10px 0;
				padding-left:0px;
				background:#FFFFFF;
}
 
#people {
				position:relative;
				float:right;
				width:200px;  /* for IE5/WIN */
				voice-family: "\"}\"";
				voice-family:inherit;
				width:200px; /* actual value */
				margin:0 0 0 0;
				padding:0px;
				background:#FFFFFF;
}		
 
#tagline {
				position: relative;
				clear: both;
				font-size: 100%;
				font-weight: bold;
				color: #ffffff;
				background: #10509E;
				border-top: solid 1px #123980;
				margin: 0;
				padding: 5px 0 0 25px;
				text-align: left;
}
 
 
#nav {
				float: left;
				position:relative;
				width:  92%;
				font-size: 90%;
				background-color: #ffffff;
				border-top: 2px solid #FCB01C;
				border-bottom: 1px solid #FCB01C;
				padding: 0 0 0 8%;
				margin-bottom: 0.2em;
}
 
#nav ul {
				margin: 0;
				padding: 0.5em 0 0 0 ;
				list-style: none;
}
 
#nav li {
				float: left;
				background-image: url('tab_left.jpg');
				background-repeat: no-repeat;
				margin-left:0; margin-right:1px; margin-top:0; margin-bottom:0; padding-left:8px; padding-right:0; padding-top:0; padding-bottom:0
}
 
#nav a {
				float: left;
				display: block;
				background-image: url('tab_right.jpg');
				background-repeat: no-repeat;
				background-position: right top;
				text-decoration: none;
				font-weight: bold;
				color: #ffffff; padding-left:0; padding-right:10px; padding-top:0.2em; padding-bottom:0.2em
}
 
#home #nav li.home,
#about #nav li.about,
#services #nav li.services,
#training #nav li.training,
#contact #nav li.contact,
#links #nav li.links,
#library #nav li.library,
#testimonials #nav li.testimonials,
#find #nav li.find,
#employment #nav li.employment {
    			background-image: url('tab_active_left.jpg');
}
 
 
#home #nav li.home a,
#about #nav li.about a,
#services #nav li.services a,
#training #nav li.training a,
#contact #nav li.contact a,
#links #nav li.links a,
#library #nav li.library a,
#testimonials #nav li.testimonials a,
#find #nav li.find a,
#employment #nav li.employment a {
  			background-image: url('tab_active_right.jpg');
  			background-color: transparent;
  			color:#FFFFFF
}
 
 
.tel  {
			margin: 0;
			text-align: center;
			font-size: 90%;
			padding: 0 0 0 0;
}
 
.services	{
			margin: 0 2px 0 0;
			text-align: center;
			padding: 0px 0 0 0;
			color: white;
			font-weight: bold;
}
 
#content {
			text-align: left;
			margin: 0 0 0 0;
			width: 800px;
			background: green;
			padding: 0;
			line-height: 1.3;
 
}
 
 
#contentleft {
			position:relative;
 
 
			margin: 20px 15px 0 25px;
			padding: 0;
			voice-family: "\"}\"";
			voice-family:inherit;
			background: white;
 
}
 
#contentright {
			position:relative;
 
			margin: 20px 8px 0 10px;
			padding: 0;
			background:white;
			line-height: 1;
 
}
 
#contentright2 {
			position:relative;
			margin: 5px 8px 0 10px;
			padding: 0;
			background:white;
 
}
 
#contentfull {
			position:relative;
			margin: 20px 40px 0 40px ;
			padding: 0;
			background:#FFFFFF;
}
 
#contentservices1 {
			position:relative;
			margin: 20px 30px 0 30px;
			padding: 0;
			background:#FFFFFF;
}
 
#contentservices2 {
			position:relative;
			margin: 20px 30px 0 30px;
			padding: 0;
			background:#FFFFFF;
}
 
 
 
 
#footer {
			margin: 12px 0 0 20px;
			background: #10509E;
			text-align:left;
			color:#FFF;
			font-size: 70%;
}
 
 
/* Main Content Box and Rounded Corners */
 
.roundedcornr_box {
   background: #ffffff;
}
.roundedcornr_top div {
   background: url('roundedcornr_tl.png') no-repeat top left;
}
.roundedcornr_top {
   background: url('roundedcornr_tr.png') no-repeat top right;
}
.roundedcornr_bottom div{
   background: url('roundedcornr_bl.png') no-repeat bottom left;
}
.roundedcornr_bottom {
   background: url('roundedcornr_br.png') no-repeat bottom right;
}
 
.roundedcornr_top div, .roundedcornr_top, 
.roundedcornr_bottom div, .roundedcornr_bottom {
   width: 100%;
   height: 15px;
   font-size: 1px;
}
.roundedcornr_content { margin: 0 10px; }
 
.roundedcornr_content_tel { margin: 0 2px 0 2px; background: white; }

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 33 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Deborah, I'm ignoring your

Deborah,

I'm ignoring your last problems because the version you have linked is broken in Firefox. That's a good indication of broken code. From your code, you seem to be over-thinking things. Applying css piecemeal to the elements is not very elegant.

My favored method is to work from the top down. Set the styles for the major sections, then work your way down within each context to the individual elements.

Here's an example, lacking the rounded corners. Follow Chris's advice on that.

/*simplified style sheet for 
  <a href="http://www.djhsolutions.ca/test/index3.htm" rel="nofollow">http://www.djhsolutions.ca/test/index3.htm</a> */
 
html, body { 
  margin: 0;
  padding: 0;
  }
 
body { 
  font: 83.33% "trebuchet ms", verdana, geneva, arial, helvetica, sans-serif; 
  color: #000000; 
  background: #678FC2 url(bluebanner6-shrunk.jpg) center top no-repeat;
  }
 
p { 
  font-size: 1em;
  margin-bottom: 0;
  }
 
h1, h2, h3 { 
  margin-bottom: 0;
  }
 
#wrapper { 
  background-color:#10509E;
  color: black;
  width: 800px;
  margin: 80px auto 0;
  }
 
#heading { 
  background: white url(gold_bar2.jpg) right top no-repeat;
  }
 
#lang-opt { 
  background: url(white_corner2.jpg) left top no-repeat;
  height: 30px;
  line-height: 30px;
  text-align: right;
  padding-right: 1.5em;
  }
 
#logo { 
  overflow: hidden;
  background: white url(people_small.jpg) top right no-repeat;
  zoom: 1; /*for ie<=6*/
  }
 
#logo h1 { 
  float: left;
  margin: 0 1.5em 0 0;
  }
 
#tag { 
  color:#123980;
  font-size: 1.8em;
  font-weight: bold;
  margin-top: .75em;
  overflow: hidden;
  padding-left: 4em;
  text-indent: -2em;
  }
 
#tag2 { 
  text-align: center;
  }
 
#tabnav { 
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  }
 
#tabnav li { 
  display: inline;
  margin: 0 .75em;
  }
 
#main { 
  overflow: hidden;
  padding: 20px 20px 0;
  zoom: 1; /*for IE <=6*/
  }
 
#main p, 
#main h2, 
#main h3 { 
  padding: 0 10px;
  }
 
#content { 
  background-color: white;
  color: black;
  float: left;
  padding-top: 20px;
  width: 520px;
  }
 
#main h2 { 
  background: blue url(blue_background2.jpg) left;
  border-bottom: 3px solid #FCB01C; 
  color: white;
  font-size: 1.2em;
  }
 
#sidebar { 
  background-color: white;
  color: black;
  float: right;
  padding-top: 20px;
  width: 200px;
  }
 
#sidebar h2 { 
  font-size: 1.2em; 
  }
 
#content h2.first,
#sidebar h2.first { 
  margin-top: 0;   /*because IE doesn't do margin collapse properly*/
  }
 
#footer { 
  text-align: center;
  }
And, the modified html, losing the tables.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 6 November 2007), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
  <meta http-equiv="Content-Language"
        content="en-ca" />
  <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />
 
  <title>Test page</title>
  <link rel="stylesheet"
        type="text/css"
        href="test_files/djh_styles3gt.css" />
</head>
 
<body id="home">
  <div id="wrapper">
    <div id="heading">
      <p id="lang-opt"><a href=
      "http://www.djhsolutions.ca/test/djhsolutions.ca/indexf.htm">Français</a></p>
 
      <div id="logo">
        <h1><img src="test_files/djh_logo.jpg"
             alt="DJH Logo" /></h1>
 
        <p id="tag">Build your people …
        <br />
        Build your business.</p>
      </div>
 
      <ul id="tabnav">
        <li class="home"><a href="#index.htm">Home</a></li>
 
        <li class="about"><a href=
        "#about_us.htm">About&nbsp;Us</a></li>
 
        <li class="services"><a href=
        "#services.htm">Services</a></li>
 
        <li class="training"><a href=
        "#training.htm">Training</a></li>
 
        <li class="contact"><a href=
        "#contact_us.htm">Contact&nbsp;Us</a></li>
 
        <li class="links"><a href="#links.htm">Links</a></li>
 
        <li class="library"><a href="#library.htm">Library</a></li>
 
        <li class="testimonials"><a href=
        "#testimonials.htm">Testimonials</a></li>
 
        <li class="find"><a href=
        "#find_us.htm">Find&nbsp;Us</a></li>
 
        <li class="employment"><a href=
        "#employment.htm">Employment</a></li>
      </ul>
 
      <p id="tag2">Innovative training solutions since 1980.</p>
    </div><!-- END header -->
 
    <div id="main">
      <div id="content">
        <h2 class="first">Welcome to our Web site…</h2>
 
        <p><b>DJH Training Solutions</b> is a
        “roll-up-your-sleeves” type company. We provide computer
        software and professional development skills training and
        support.
        <br /></p>
 
        <h2>We make a few assumptions about our clients…</h2>
 
        <ul>
          <li>You want high quality solutions that are tailored to
          what you need.</li>
 
          <li>You want knowledgeable, professional, yet friendly
          trainers.</li>
 
          <li>You want great post-training support and
          coaching.</li>
        </ul>
 
        <p>OK. We admit it. We didn’t just assume those things. We
        simply listened — our customers have told us exactly what
        they want.</p>
 
        <h2>Solutions for success…</h2>
 
        <ul>
          <li><b>Computer software training and support</b> for
          products like Excel, Project, Access, Word, PowerPoint,
          Visio, Outlook and more…</li>
 
          <li><b>Professional development training</b>, including
          leadership, management, customer loyalty, time
          management, strategic planning and more…</li>
        </ul>
 
        <p>We are happy to train at your office or ours. Or we can
        meet on-line, in real time, for those who want to train
        employees in various locations and save on gas and travel
        expenses.</p>
 
        <p>Our training is affordable, with personalized solutions
        geared to you — whether you’re a solo entrepreneur or an
        executive with a multi-national outfit — or anywhere in
        between.</p>
 
        <p><strong>We Depend On Our Reputation. So Can You.</strong></p>
 
    </div><!-- end content -->
 
    <div id="sidebar">
      <h2 class="first">How can we help you?</h2>
 
      <p><b>Montreal:</b> (514)&nbsp;342-9494
      <br />
      <b>Ottawa:</b> &nbsp;(613)&nbsp;656-4229</p>
    </div> <!-- end sidebar -->
 
  </div><!-- end main -->
  <p id="footer">
    Web Page Design and Content by DJH
    Training Solutions Copyright 2008</p>
 
  </div><!-- end wrapper -->
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 7 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Wow!

Wow! Gary's kindly rewritten things for you Smile
And it works as is (I tried it Tongue ) but because it's second nature to him, I'll point out a couple of things if I may, that might trip you up.

Firstly something I fell over a week or so ago Smile
1. Check the file paths, he set it up on his system so they are relative to that e.g. your .css file is probably not sitting in a folder/directory called test_files

  <title>Test page</title>
  <link rel="stylesheet"
        type="text/css"
        href="test_files/djh_styles3gt.css" />

2. Gary uses XHTML 1.0 Strict doctype. As I said, you can use this as is and it will work but be aware that it requires space/> to end some things which you will not be used to. e.g.
<h1><img src="test_files/djh_logo.jpg" alt="DJH Logo" /></h1>

It won't validate with this doctype if you take out the spaces or the slashes to "tidy" it up.

Pop in Chris' rounded corners and you should be good to go! Smile

ETA: Just noticed the ? instead of " in your text. Probably because of the charset=utf-8

<meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />

Leave that but you will need to either retype all your ' and " or better still replace them with the HTML Character codes (either numeric or alpha)

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 33 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Smee wrote:<snip> 1. Check

Smee wrote:

1. Check the file paths, he set it up on his system so they are relative to that e.g. your .css file is probably not sitting in a folder/directory called test_files

This is a good argument for embedding the styles when posting examples; it sidesteps some confusion.

Quote:

ETA: Just noticed the ? instead of " in your text. Probably because of the charset=utf-8

<meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />

Hmmm, I'm not experiencing that, either on my example (which I did convert to utf-8) or on the OP's linked example. Deborah's using MSFT's proprietary windows-1252 charset. That's fine, since she also specifies that charset in the document. In all Unicode charsets, entities falling in the range &#128 to &#159 inclusive are reserved for control characters. MSFT has chosen to use some of those values for characters, including the single and double quotes. This can lead to their being unknown to UAs that don't recognize the windows-125x charset for whatever reason.

BTW, what is ETA? Estimated Time of Arrival doesn't seem to fit. Is that some Aussie thing? Due, maybe, to being on the bottom of the world where you spend your days hanging upside-down?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 41 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

"smee" wrote:It won't

"smee" wrote:

It won't validate with this doctype if you take out the spaces or the slashes to "tidy" it up.

If I understand correctly it will validate without the spaces but the spaces are for buggy browser reaction to properly closed tags as teh XHTML is served as HTML and the buggy behaviour becomes a problem. So, I dunno that the validator will find any accidentally left-out spaces before the slash.

Charset-- I've had pages on the Windows machines at work showing ?? when I saved the document as utf-8, set the meta tag to utf-8, and set on our server which is utf-8... turns out the browser on the windows machine was either set to the win charset or something. UNix machines had no problems. Letting all browsers auto-detect seemed to work best.

For some reason when I read ETA my head said "ATM" (at the moment)... dunno why...

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

ETA? don't either of you

ETA? don't either of you know what it stands for? it's the Basque separatist movement :rolleyes:

Oh all right "Edited to Add"

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

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 7 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

I knew I should have stayed

Shock I knew I should have stayed out of it, we've probably scared off Deborah again Tongue

Charset - I don't know the reason why I got the ? but I once had someone tell me they saw ? when it was showing just fine in IE6 & FF and none of you were complaining. I knew the 12whatever was aligned to MS and that UTF-8 is probably the most universal, so that's what and why I use it. Which works. Beyond that I don't know what you're talking about. Smile

Poes - I strangled this in the telling, I'm afraid. I started to write something about Deb could keep using the HTML 4.1 if she wanted, then remembered she had Transitional and it would be better to go to Strict - and if she did that it wouldn't validate with the space/ - so I decided to leave that idea unborn, edited, took the shortest route because it was late, and stuffed it up, sorry Smile

Quote:

BTW, what is ETA? Estimated Time of Arrival doesn't seem to fit. Is that some Aussie thing? Due, maybe, to being on the bottom of the world where you spend your days hanging upside-down?

Laughing out loud Cheeky!

Quote:

For some reason when I read ETA my head said "ATM" (at the moment)...

This is a subliminal message Poes Cool
And while we're on the subject, what does your nick mean? Somehow, from your intro in Burlster's saga and the oh so cute av, I have it in my mind it means "stupid cat" - so I hope I keep calling you Cat and not Stupid which you're definitely not! Laughing out loud

Hugo - wot 'e said.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 33 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Smee wrote:And while we're

Smee wrote:

And while we're on the subject, what does your nick mean? Somehow, from your intro in Burlster's saga and the oh so cute av, I have it in my mind it means "stupid cat" - so I hope I keep calling you Cat and not Stupid which you're definitely not!

I feel very uncomfortable with the nick. The English translation would be a disparagingly sexist epithet here in the states. I'm not in the least concerned about the sensitivities of N.O.W and other feminazi groups, but just don't like to address a woman with that term until she has proven she has earned it. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 7 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

ohdearohdearohdear I think

:? ohdearohdearohdear I think you've totally lost me.

If indeed that's what it means, it in no way refers to our poster!

ohdearohdearohdear Sad

Note to self: Do not post in the morning!

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 41 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:but just don't like to

Quote:

The English translation would be a disparagingly sexist epithet here in the states.

Only if you translated it as Stupid Pussy. Poes is a very well-used term for cat. I think it actually gets more use than "kat" or "kater" (which is a tom). When people have free kittens, the sign always says "jonge poezen, gratis". Pussy in English doesn't get such usage-- only with Tweety Bird or something.

Quote:

but just don't like to address a woman with that term until she has proven she has earned it.

I can do that : ) Just you wait. You grew up in the era where saying such things got you a whack in the head with a heavy purse or something.

It means stupid cat. We have a stupid cat, and we're always yelling at it when it does stupid things (Hey! Out! Stupid cat!) and I thought it was the perfect name when I was starting with HTML and CSS and knowing nothing (and feeling like our stupid cat).

Now I'm starting all over again-- Javascript. Name comes back into perfect use : )

Plenty of people who don't know what it means shorten it to Poes. Works for me.

If I had a problem with being called stupid, I wouldn't have chosen the name, would I?

Just as, if some dude walks in here with a Russian name that means "King of 'Tards", I'll use it to him and gladly : )

I'm no expert, but I fake one on teh Internets

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 33 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Quote:Pussy in English

Quote:

Pussy in English doesn't get such usage-- only with Tweety Bird or something.

Pretty much true. When we do use it, it's usually combined with cat, as in pussycat. Tweety doesn't use it at all; he says, "I tawt I taw a putty-tat." Aw, close enough, I guess. Smile

Quote:

I can do that : )[earn the appellation] Just you wait. You grew up in the era where saying such things got you a whack in the head with a heavy purse or something.

So true. I spent the seventies married to the president of the local chapter of Women for Change, plus my only child is of the female persuasion. I may have been over-sensitized. :shrug:

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 7 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Gary wrote:I feel very

Gary wrote:

I feel very uncomfortable with the nick.

Well if "Poes" doesn't want to give another name perhaps you could resort to calling her Kitty or Kit which seems innocuous enough Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile