Page 1 of 2

CSS Layout Questions [w/ example]

Posted: Fri Feb 24, 2006 8:30 am
by jayshields
Yo :)

Right. I'm starting a new project. This time it's for the public eye, so I'm going to attempt a neat design. I almost jumped into Photoshop and knocked up a HTML table/jpg image template sort of thing, but I've seen a lot of nice CSS based layouts lately so I'm going to try for one of those.

I have v. little experience with CSS except for simple stuff, so I decided I should use an OpenSource CSS layout and modify it slightly. I've always liked the BlueRobot ones - so I used the 3 column BlueRobot one.

All is going well, but there's a few things I want to do and without everlong trial and error I'll never accomplish it.

My current layout is here: http://www.jaysfiles.co.uk and my CSS is below:

Code: Select all

body {
	color: #333;
	background-color: white;
	margin: 20px;
	padding: 0px;
	font: 11px verdana, arial, helvetica, sans-serif;
	background-image: url('dot.jpg');
}

h1 {
	letter-spacing:  10px;
	font-weight:  bold;
	font-size:  30px;
}

h2 {
	margin: 0px 0px 15px 0px;
	padding: 0px;
	font-size: 28px;
	font-weight: 900;
	color: #ccc;
}

h3 {
	font: bold 12px/14px verdana, arial, helvetica, sans-serif;
	color: white;
	margin: 0px 0px 5px 0px;
	padding: 0px;
	border: 1px solid black;
	background-color: #00CC00;
	padding: 3px;
}

p {
	font: 11px/20px verdana, arial, helvetica, sans-serif;
	margin: 0px 0px 16px 0px;
	padding: 0px;
}

.Content>p {margin: 0px;}
.Content>p+p {text-indent: 30px;}

a {
	color: #00CC00;
	text-decoration: none;
}

a:link {color: #00CC00;}
a:visited {color: #00CC00;}
a:hover {color: #33FF00;}
  
/* All the content boxes belong to the content class. */
.content {
	position: relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
	width: auto;
	min-width: 120px;
	margin: 0px 210px 20px 170px;
	border: 1px solid black;
	background-color: white;
	padding: 10px;
	z-index: 3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}

#navAlpha {
	position: absolute;
	width: 150px;
	top: 90px;
	left: 20px;
	border: 1px solid black;
	background-color: #eee;
	padding: 10px;
	z-index: 2;

	/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
	Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
	IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
	declaration. The incorrect IE5/Win value is above, while the correct value is 
	below. See http: //glish.com/css/hacks.asp for details. */
	voice-family:  "\"}\"";
	voice-family: inherit;
	width: 128px;
}

/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct 
length values to user agents that exhibit the parsing error exploited above yet get 
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#navAlpha {width: 128px;}
		
#navBeta {
	position: absolute;
	width: 190px;
	top: 90px;
	right: 20px;
	border: 1px solid black;
	background-color: #eee;
	padding: 10px;
	z-index: 1;

	/* Again, the ugly brilliant hack. */
	voice-family:  "\"}\"";
	voice-family: inherit;
	width: 168px;
}

/* Again, "be nice to Opera 5". */
body>#navBeta {width: 168px;}

#Header {
	margin: 5px 0px 10px 0px;
	padding: 17px 0px 0px 20px;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height: 33px; /* 14px + 17px + 2px = 33px */
	border-style: solid;
	border-color: black;
	border-width: 1px 1px; /* top and bottom borders:  1px; left and right borders:  0px */
	line-height: 11px;
	background-color: #eee;

	/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
	Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
	IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
	declaration. The incorrect IE5/Win value is above, while the correct value is 
	below. See http: //glish.com/css/hacks.asp for details. */
	voice-family:  "\"}\"";
	voice-family: inherit;
	height: 14px; /* the correct height */
}

/* Again, "be nice to Opera 5". */
body>#Header {height: 14px;}

#Footer {
	margin: 5px 0px 10px 0px;
	padding: 17px 0px 0px 20px;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height: 33px; /* 14px + 17px + 2px = 33px */
	border-style: solid;
	border-color: black;
	border-width: 1px 1px; /* top and bottom borders:  1px; left and right borders:  0px */
	line-height: 11px;
	background-color: #eee;

	/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
	Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
	IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
	declaration. The incorrect IE5/Win value is above, while the correct value is 
	below. See http: //glish.com/css/hacks.asp for details. */
	voice-family:  "\"}\"";
	voice-family: inherit;
	height: 14px; /* the correct height */
}

/* Again, "be nice to Opera 5". */
body>#Footer {height: 14px;}
Most of it is the same as the CSS from BlueRobot: http://bluerobot.com/web/layouts/view_c ... ut=layout3

Anyway, a couple of things I want to achieve but have no clue where to start:
- I want a duplicate of the header, but at the bottom of the page, to act as a footer. You can see I've C&P'd the Header CSS and after thinking about how to alter it to make it appear at the bottom rather than the top I gave up :( I don't really understand the position attribtute and it's use or if that's how I should accomplish it.
- I also want the blocks on the left and right to automatically position themselves 10px under the header, instead of me hard-coding the top attrribute like now. This is proabably related to my last problem.
- It would be nice if I could continually add blocks on the left and right and they appear under the existing left/right blocks, similar to how the content block works, I know I need position: relative for this, but I think I would need a class rather than the existing (id?) for this to work?

If someone can point me in the right direction of give me an example to look at it would be grand :) Also, don't hesitate to comment on the design.

Thanks a million.

Posted: Fri Feb 24, 2006 3:03 pm
by matthijs
A short answer, but hope I can help a bit.
- to position a footer below both sidecols is difficult. Because they are positioned absolutely, they are taken "out of the flow" of the document. So what that basicly means is that you'll not be able or at least it's more difficult to position the footer below them. I think there's a good explanation on http://css-discuss.incutio.com/?page=FooterInfo
- if you want to add blocks in the left and right cols: just add them inside the navAlpha and navBeta. You'll have to change the styles of the navAlpha and navBeta a bit and then style the blocks seperately to achieve the desired effect.

And did you also try floats? My experience is that floats are a bit easier to work with - if you keep some bugs in mind - then positioning layouts.

Posted: Fri Feb 24, 2006 3:10 pm
by feyd
I just do this basically.

Code: Select all

<div style="clear:both"></div><div>footer</div>
it's worked for quite a while and is fairly easy. ;)

Posted: Fri Feb 24, 2006 4:15 pm
by matthijs
feyd wrote:I just do this basically.

Code: Select all

<div style="clear:both"></div><div>footer</div>
it's worked for quite a while and is fairly easy. ;)
Unfortunately that doesn't work if you don't use floats. With the sidebars absolutely positioned, they will overlap the footer if the content of those sidebars is longer.

Posted: Fri Feb 24, 2006 4:19 pm
by feyd
true, I avoid using absolute positioning because it's silly.

Posted: Fri Feb 24, 2006 4:28 pm
by matthijs
ok, jay, this is your chance to ask everything about not using absolute positioned layouts ;)

Posted: Fri Feb 24, 2006 5:59 pm
by jayshields
I will try the ideas mentioned; avoid floats and then do the footer as feyd said.

I see what you mean about including the extra blocks inside navalpha and navbeta, sounds like a good idea, I'll attempt that aswell.

I'll let you know how it goes.

Thanks for the suggestions :)

Edit: Damn, I just misread your second post! You used a double negative in there - misleading.

How can I change the blocks into floats then?

Posted: Sat Feb 25, 2006 2:35 am
by matthijs
Ok, I made a quick example:

Code: Select all

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

<html>
<head>
	<title>JaysFiles.co.uk</title>
	<style type="text/css" media="screen">@import "layout.css";</style>
	
	<style type="text/css">
<!-- 
 
/* General layout stuff --- */
body {
   color: #333;
   background-color: white;
   margin: 20px;
   padding: 0px;
   font: 11px verdana, arial, helvetica, sans-serif;
   background-image: url('dot.jpg');
}

h1 {  
   letter-spacing:  10px;
   font-weight:  bold;  
	font-size:  30px;
}
h2 {
   margin: 0px 0px 15px 0px;
   padding: 0px;
   font-size: 28px;
   font-weight: 900;
   color: #ccc;
}
h3 {
   font: bold 12px/14px verdana, arial, helvetica, sans-serif;
   color: white;
   margin: 0px 0px 5px 0px;
   padding: 0px;
   border: 1px solid black;
   background-color: #00CC00;
   padding: 3px;
}
p {
   font: 11px/20px verdana, arial, helvetica, sans-serif;
   margin: 0px 0px 16px 0px;
   padding: 0px;
}

.Content>p {margin: 0px;}
.Content>p+p {text-indent: 30px;}

a {
   color: #00CC00;
   text-decoration: none;
}
a:link {color: #00CC00;}
a:visited {color: #00CC00;}
a:hover {color: #33FF00;}
/* Layout
------------------------------------------------------ */

#Header {
   margin: 5px 0 10px 0;
   padding: 17px 0 0 20px;
   border: 1px solid #000;
   background: #eee;
}
#Header h1 {
  height: 33px;
  line-height: 11px;
}

#contentwrapper {
  float:left;
  width:100%;
  }
.content {
   width: auto;
   min-width: 120px;
   margin: 0px 210px 20px 170px;
   border: 1px solid #bbb;
   background: white;
}
.inner { padding: 10px; }

#navAlpha {
   float:left;
   width: 150px;
   border: 1px solid black;
   background: #eee;
}
#navBeta {
   float:right;
   width: 190px;
   border: 1px solid black;
   background: #eee;
}

#Footer {
   clear:both;
	width:100%;
	margin: 10px 0 10px;
   padding: 10px 0;   
}
#Footer p {
  border: 1px solid black;
  background-color: #eee;
  margin:0;
  padding: 10px 20px;
  line-height: 11px;
}

-->
</style>


</head>

<body>

<div id="Header">
	<h1><a href="http://www.jaysfiles.co.uk" title="JaysFiles.co.uk">JaysFiles.co.uk</a></h1>
</div>

<div id="contentwrapper">

<div id="navAlpha">
  <div class="inner">
	<h3>Links</h3>
	<p>
		> <a href="http://www.alistapart.com/" title="A List Apart: For People Who Make Websites">A List Apart</a><br />
		> <a href="http://greasyskillet.org/" title="The Website of Dave Elfving">Greasy Skillet</a><br />
		> <a href="http://royrosenow.com/" title="Sketches, illustrations, and Voodoo Bob">Roy Rosenow</a><br />

		> <a href="http://swankyal.com/" title="A swanky weblog">SwankyAl</a><br />
		> <a href="" title="">Fake Link One</a><br />
		> <a href="" title="">Nothing Here</a><br />
		> <a href="" title="">Links Nowhere</a><br />
		> <a href="" title="">Fake Link Four</a><br />

		> <a href="" title="">Fifth Fake Link</a><br />
	</p>
	</div>
	
</div>


<div id="navBeta">
  <div class="inner">
   <h3>A Call To Action</h3>
   <p>Much effort has been made to ensure that the layouts in the BlueRobot Layout Reservoir appear as intended in CSS2 compliant browsers. The content should be viewable, though unstyled, in other web browsers. If you encounter a problem that is not listed as a known issue, I am most likely not aware of it. <em>Please</em> <a href="mailto:rob@bluerobot.com?subject=Layout Reservoir" title="Email BlueRobot about a layout issue">email me</a> a heads-up. Your help will benefit the other five or six people who visit this site.</p>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
   laoreet dolore magna aliquam erat volutpat consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
  </div>
</div>

<div class="content">
  <div class="inner">
   <h2>Flanking Menus</h2>
   <p>With the popularity of three column layouts, this layout is bound to be useful to many. You may have seen this technique used at <a href="http://www.wrongwaygoback.com/" title="wrongwaygoback">dynamic ribbon device</a>. In fact, this "flanking menus" technique was devised by BlueRobot for that site. Surprisingly, the technique has caused quite a bit of talk. The concept is simple: a content box with large margins is flanked by two additional (menu) boxes.</p>
   <p>An important benefit of this technique is the order of elements in the HTML source. Here, the order is essentially content, menu one, menu two. For old browsers, text-only browsers, screen-readers, and many alternative devices, this means that the content is displayed before the menus. And, after all, most users visit a page for its content.</p>
  </div>
</div>

<div class="content">
  <div class="inner">
	<h3>Known Issues</h3>
   <p>This layout fails in IE4.5/Mac. That browser has poor support for CSS absolute positioning, yet it recognizes and executes the CSS @import statement used to hide CSS from broken browsers. Currently, there is no known solution.</p>
  </div>
</div>

<div class="content">
  <div class="inner">	
   <a href="default.asp" title="Layouts to make your own...">< Return to the Layout Reservoir</a> &nbsp;::&nbsp; <a href="view_css.asp?layout=layout3" title="">View the CSS</a>
  </div>
</div>


</div><!-- end #content -->


<div id="Footer">
  <p>Thois is my footLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
  laoreet dolore magna aliquam erat volutpat consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
</div>

</body>
</html>
I changed quite some things:
- change to float layout
- added a content div around the whole content area (incl navbars) to be able to clear the footer well
- changed some css rules to shorter ones (f.e. border:1px solid #000)
- removed all box model hacks and instead of that added divs with class "inner". Then I gave those classes the padding. That way you don't need to work around ie5 anymore with those ugly box-model hacks. of course adding redundant divs isn't nice either, but for this example it makes it clear. If you work this out further, I would remove the "inner" divs and give all the elements inside both the navbars and the main area the necessary padding. Hope that's clear? The thing is: just try to avoid using both a width, border, margin and/or padding at the same time on one block level element. Instead, give the parent block element the width, and give the children the padding.
if you realy cannot avoid having to hack, I would use conditional comments to feed ie5 it's own stylesheet. Keeps your main css file clean. And in a few years, when it's time to ditch ie5, the only thing you'll have to do is remove the ie5 css file.
- removed the fixed height of header and footer. I would let the content of those define the height. If a visitor has a larger font-size, the header or footer divs expand gracefully.

There's lot more to do and the example is a bit rough on the edges, but I hope the basics are clear. This layout should work in almost any browser without having to hack around.

One thing I always try to do with floats is keep a little space or breathing room around the layout elements. That way you avoid the strange bugs that happen if some browser decides to expand a div with 1px due to some rendering bug.

Another thing to watch out for with floats is the IE double margin bug.

Please let me know if you encounter further problems or have questions.

Posted: Sat Feb 25, 2006 7:19 am
by jayshields
Thanks so much for doing all that, but I was working on it last night before I saw your example and have managed to get it how I want it. I used your idea about making the side panels containers for the blocks and it works nicely. The footer just worked as it was!

I just had a look at your code and most of it works, obviously some little tweaks would be needed to get it exactly right but the foundations are fantastic.

The only thing wrong with my layout now is that if the nav bars/blocks are longer than the content blocks then they will overlap the footer - as you guys already said if I don't use floats I can't stop this happening because of the absolute positioned blocks on the left and right.

I'm going to have a fiddle with my CSS based on looking at yours and see if I can come up with something.

At the moment my page looks like this http://www.jaysfiles.co.uk/index2.html

My CSS is here:

Code: Select all

body {
	color: #333;
	background-color: white;
	margin: 20px;
	padding: 0px;
	font: 11px verdana, arial, helvetica, sans-serif;
	background-image: url('dot.jpg');
}

h1 {
	letter-spacing:  10px;
	font-weight:  bold;
	font-size:  30px;
}

h2 {
	margin: 0px 0px 15px 0px;
	padding: 0px;
	letter-spacing: 5px;
	font-size: 28px;
	font-weight: bold;
	color: #CCCCCC;
}

h3 {
	font: bold 12px/14px verdana, arial, helvetica, sans-serif;
	color: white;
	margin: 0px 0px 5px 0px;
	border: 1px solid black;
	background-color: #00CC00;
	padding: 3px;
}

hr {
	border: 1px solid black;
	width: 75%;
}

p {
	font: 11px/20px verdana, arial, helvetica, sans-serif;
	margin: 0px 0px 16px 0px;
	padding: 0px;
}

.Content>p {margin: 0px;}
.Content>p+p {text-indent: 30px;}

a {
	color: #00CC00;
	text-decoration: none;
}

a:link {color: #00CC00;}
a:visited {color: #00CC00;}
a:hover {color: #33FF00;}

.textinput {
	border: 1px solid black;
}

.submit {
	border: 1px solid black;
	background-color: #00CC00;
	color: white;
	font-weight: bold;
}

/*Workarounds to stop IE giving forms big margins by default*/
form {margin: 0px 0px 0px 0px;}

/* All the content boxes belong to the content class. */
.content {
	position: relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
	width: auto;
	min-width: 120px;
	margin: 0px 210px 20px 170px;
	border: 1px solid #CCCCCC;
	background-color: white;
	padding: 10px;
	z-index: 3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}

#navAlpha {
	position: absolute;
	width: 150px;
	top: 74px;
	left: 20px;
	z-index: 2;

	/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
	Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
	IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
	declaration. The incorrect IE5/Win value is above, while the correct value is 
	below. See http: //glish.com/css/hacks.asp for details. */
	voice-family:  "\"}\"";
	voice-family: inherit;
	width: 128px;
}

/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct 
length values to user agents that exhibit the parsing error exploited above yet get 
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#navAlpha {width: 128px;}
		
#navBeta {
	position: absolute;
	width: 150px;
	top: 74px;
	right: 20px;
	z-index: 1;

	/* Again, the ugly brilliant hack. */
	voice-family:  "\"}\"";
	voice-family: inherit;
	width: 128px;
}

/* Again, "be nice to Opera 5". */
body>#navBeta {width: 128px;}

#Header {
	margin: 5px 0px 10px 0px;
	padding: 17px 0px 0px 20px;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height: 33px; /* 14px + 17px + 2px = 33px */
	border-style: solid;
	border-color: black;
	border-width: 1px;
	line-height: 11px;
	background-color: #eee;

	/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
	Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
	IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
	declaration. The incorrect IE5/Win value is above, while the correct value is 
	below. See http: //glish.com/css/hacks.asp for details. */
	voice-family:  "\"}\"";
	voice-family: inherit;
	height: 14px; /* the correct height */
}

/* Again, "be nice to Opera 5". */
body>#Header {height: 14px;}

#Footer {
	margin: 5px 0px 10px 0px;
	padding: 5px;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height: 33px; /* 14px + 17px + 2px = 33px */
	border-style: solid;
	border-color: black;
	border-width: 1px;
	line-height: 11px;
	background-color: #eee;
	text-align: center;

	/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
	Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
	IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
	declaration. The incorrect IE5/Win value is above, while the correct value is 
	below. See http: //glish.com/css/hacks.asp for details. */
	voice-family:  "\"}\"";
	voice-family: inherit;
	height: 14px; /* the correct height */
}

/* Again, "be nice to Opera 5". */
body>#Footer {height: 14px;}

#navContainerAlpha {
	border: 1px solid black;
	background-color: #eee;
	padding: 10px;
	margin: 16px 0px 0px 0px;

	/* Again, the ugly brilliant hack. */
	voice-family:  "\"}\"";
	voice-family: inherit;
	width: 128px;
}

/* Again, "be nice to Opera 5". */
body>#navContainerAlpha {width: 128px;}

#navContainerBeta {
	border: 1px solid black;
	background-color: #eee;
	padding: 10px;
	margin: 16px 0px 0px 0px;

	/* Again, the ugly brilliant hack. */
	voice-family:  "\"}\"";
	voice-family: inherit;
	width: 168px;
}

/* Again, "be nice to Opera 5". */
body>#navContainerBeta {width: 168px;}
Hopefully I'll be able to modify the side bars so they don't overlap the footer on my own, but if you have any suggestions that aren't blatant in your previous example just say :)

I'm going to look at your example a bit more now and see what I can do, I'll let you know how it goes.

Posted: Sat Feb 25, 2006 7:54 am
by jayshields
Finally sorted it out to as much of an extent that I can be bothered with :)

The one and only fault I can find is the footer wont position exactly where I want it if the nav blocks are longer than the content blocks. It's to do with the bottom margins on the nav blocks and the content blocks but I've messed with it enough and it's not happening, so to counteract it I changed the style of the footer so it's pretty much unnoticeable, not that you will be able to tell because on my example the content blocks are longer than the nav blocks.

Anyway, the finished product is here: http://www.jaysfiles.co.uk/index3.html

My CSS:

Code: Select all

body {
	color: #333;
	background-color: white;
	margin: 20px;
	padding: 0px;
	font: 11px verdana, arial, helvetica, sans-serif;
	background-image: url('dot.jpg');
}

h1 {
	letter-spacing:  10px;
	font-weight:  bold;
	font-size:  30px;
}

h2 {
	margin: 0px 0px 15px 0px;
	padding: 0px;
	letter-spacing: 5px;
	font-size: 28px;
	font-weight: bold;
	color: #CCCCCC;
}

h3 {
	font: bold 12px/14px verdana, arial, helvetica, sans-serif;
	color: white;
	margin: 0px 0px 5px 0px;
	border: 1px solid black;
	background-color: #00CC00;
	padding: 3px;
}

hr {
	border: 1px solid black;
	width: 75%;
}

p {
	font: 11px/20px verdana, arial, helvetica, sans-serif;
	margin: 0px 0px 16px 0px;
	padding: 0px;
}

.Content>p {margin: 0px;}
.Content>p+p {text-indent: 30px;}

a {
	color: #00CC00;
	text-decoration: none;
}

a:link {color: #00CC00;}
a:visited {color: #00CC00;}
a:hover {color: #33FF00;}

.textinput {
	border: 1px solid black;
}

.submit {
	border: 1px solid black;
	background-color: #00CC00;
	color: white;
	font-weight: bold;
}

/*Workarounds to stop IE giving forms big margins by default*/
form {margin: 0px 0px 0px 0px;}

/* All the content boxes belong to the content class. */
.content {
	position: relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
	width: auto;
	min-width: 120px;
	margin: 0px 210px 16px 190px;
	border: 1px solid #CCCCCC;
	background-color: white;
	padding: 10px;
	z-index: 3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}

#navAlpha {
	/*position: absolute;*/
	float: left;
	width: 150px;
	/*top: 74px;*/
	left: 20px;
	z-index: 2;

	/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
	Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
	IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
	declaration. The incorrect IE5/Win value is above, while the correct value is 
	below. See http: //glish.com/css/hacks.asp for details. */
	voice-family:  "\"}\"";
	voice-family: inherit;
	width: 148px;
}

/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct 
length values to user agents that exhibit the parsing error exploited above yet get 
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#navAlpha {width: 148px;}
		
#navBeta {
	/*position: absolute;*/
	float: right;
	width: 150px;
	/*top: 74px;*/
	right: 20px;
	z-index: 1;

	/* Again, the ugly brilliant hack. */
	voice-family:  "\"}\"";
	voice-family: inherit;
	width: 168px;
}

/* Again, "be nice to Opera 5". */
body>#navBeta {width: 128px;}

#Header {
	margin: 5px 0px 10px 0px;
	padding: 17px 0px 0px 20px;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height: 33px; /* 14px + 17px + 2px = 33px */
	border: 1px solid #ccc;
	line-height: 11px;
	background-color: #eee;

	/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
	Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
	IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
	declaration. The incorrect IE5/Win value is above, while the correct value is 
	below. See http: //glish.com/css/hacks.asp for details. */
	voice-family:  "\"}\"";
	voice-family: inherit;
	height: 14px; /* the correct height */
}

/* Again, "be nice to Opera 5". */
body>#Header {height: 14px;}

#Footer {
	clear: both;
	margin: 5px 0px 0px 0px;
	padding: 5px;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height: 33px; /* 14px + 17px + 2px = 33px */
	/*border-style: 1px solid black;*/
	line-height: 11px;
	/*background-color: #EEEEEE;*/
	text-align: center;

	/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
	Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
	IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
	declaration. The incorrect IE5/Win value is above, while the correct value is 
	below. See http: //glish.com/css/hacks.asp for details. */
	voice-family:  "\"}\"";
	voice-family: inherit;
	height: 14px; /* the correct height */
}

/* Again, "be nice to Opera 5". */
body>#Footer {height: 14px;}

#navContainerAlpha {
	border: 1px solid #ccc;
	background-color: white;
	padding: 10px;
	margin: 0px 0px 16px 0px;

	/* Again, the ugly brilliant hack. */
	voice-family:  "\"}\"";
	voice-family: inherit;
	width: 148px;
}

/* Again, "be nice to Opera 5". */
body>#navContainerAlpha {width: 148px;}

#navContainerBeta {
	border: 1px solid #ccc;
	background-color: white;
	padding: 10px;
	margin: 0px 0px 16px 0px;

	/* Again, the ugly brilliant hack. */
	voice-family:  "\"}\"";
	voice-family: inherit;
	width: 168px;
}

/* Again, "be nice to Opera 5". */
body>#navContainerBeta {width: 168px;}
I won't be leaving the example online forever, so if anyone is viewing this thread after it's been deleted the HTML is here:

Code: Select all

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

<html>
<head>
	<title>JaysFiles.co.uk</title>
	<style type="text/css" media="screen">@import "layout.css";</style>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
</head>

<body>

<div id="Header">
	<h1><a href="http://www.jaysfiles.co.uk" title="JaysFiles.co.uk">JaysFiles.co.uk</a></h1>
</div>

<div id="navAlpha">
	<div id="navContainerAlpha">
		<h3>:: Navigation</h3>
		<p>
			> <a href="http://www.alistapart.com/" title="A List Apart: For People Who Make Websites">A List Apart</a><br />
			> <a href="http://greasyskillet.org/" title="The Website of Dave Elfving">Greasy Skillet</a><br />
			> <a href="http://royrosenow.com/" title="Sketches, illustrations, and Voodoo Bob">Roy Rosenow</a><br />
			> <a href="http://swankyal.com/" title="A swanky weblog">SwankyAl</a><br />
			> <a href="" title="">Fake Link One</a><br />
			> <a href="" title="">Nothing Here</a><br />
			> <a href="" title="">Links Nowhere</a><br />
			> <a href="" title="">Fake Link Four</a><br />
			> <a href="" title="">Fifth Fake Link</a><br />
		</p>
	</div>
</div>

<div id="navBeta">
	<div id="navContainerBeta">
		<h3>:: Login</h3>
		<form action="" method="post">
			<p>
				Username:<br />
				<input type="text" name="username" class="textinput" maxlength="20" value="" /><br />
				Password:<br />
				<input type="password" name="password" class="textinput" maxlength="20" /><br />
				<center><input type="submit" name="submit" class="submit" value="Login" /></center>
			</p>
		</form>
		<p>
			<center><a href="lostpassword.php" title="Lost Password">Lost your password?</a></center>
		</p>
	</div>

	<div id="navContainerBeta">
		<h3>:: User Info</h3>
		<p>
			# user(s) online.<br />
			Most online ever: #<br />
		</p>
	</div>
</div>

<div class="content">
	<h3>:: Flanking Menus</h3>
	<p>With the popularity of three column layouts, this layout is bound to be useful to many. You may have seen this technique used at <a href="http://www.wrongwaygoback.com/" title="wrongwaygoback">dynamic ribbon device</a>. In fact, this "flanking menus" technique was devised by BlueRobot for that site. Surprisingly, the technique has caused quite a bit of talk. The concept is simple: a content box with large margins is flanked by two additional (menu) boxes.</p>
	<p>An important benefit of this technique is the order of elements in the HTML source. Here, the order is essentially content, menu one, menu two. For old browsers, text-only browsers, screen-readers, and many alternative devices, this means that the content is displayed before the menus. And, after all, most users visit a page for its content.</p>
</div>

<div class="content">
	<h3>:: Notes</h3>
	<p>This layout fails in IE4.5/Mac. That browser has poor support for CSS absolute positioning, yet it recognizes and executes the CSS @import statement used to hide CSS from broken browsers. Currently, there is no known solution.</p>
</div>

<div class="content">
	<a href="default.asp" title="Layouts to make your own...">< Return to the Layout Reservoir</a> &nbsp;::&nbsp; <a href="view_css.asp?layout=layout3" title="">View the CSS</a>
</div>

<div id="Footer">
	&copy; Copyright <a href="http://www.jay-designs.co.uk" title="Jay Designs">Jay-Designs.co.uk</a> 2006
</div>

</body>
</html>
Thanks for all the help - I've certainly learnt alot about CSS these last few days!

Posted: Sat Feb 25, 2006 8:25 am
by matthijs
Jay, glad to hear that. You may want to check the layout in FF and Mozilla though. The right panel falls of the screen partially and the header content (jayfiles...) is being pushed out of the header grey block and partly hidden behind the main content area.

The fact that it's perfect in IE6 (winXP) makes me think you develop/test in IE first? Is that the case? Because normally a better way is to use a real browser first ( ;) ) like FF and only start looking at the others after everything is ok in the first one. If you develop for IE first you'll make it yourself very dificult.

Posted: Sat Feb 25, 2006 10:04 am
by MinDFreeZ
I agree with that ^ somewhat.. it's easier to start with firefox and just add IE hacks to make it look the same (and work the same) in both... it's a lot harder to do it backwards.

Posted: Sun Feb 26, 2006 11:49 am
by jayshields
Well, as stated in my first post. I don't often bother with nice front-end's. This is the first time I've used CSS for a layout. I do indeed use IE6 (Win XP) for all my web browsing :P

I will have to check it out in FF and make some changes... I usually check cross-browser compatibility, but this time I've just forgot, so much trial and error - besides it's a habit for me to just hit my IE6 quick launch icon :P

Posted: Sun Feb 26, 2006 12:37 pm
by jayshields
Tidied up the CSS a little, deleted some stuff that wasn't needed and generally made it easier to read. Now looks the same in both FF and IE. Some slight changes to the design but nothing drastic.

It is HTML 4.1 valid, except for

Code: Select all

element "CENTER" undefined
which is doing my head in.

Code: Select all

<span align="center">whatever</span>
and

Code: Select all

<span style="text-align: center">whatever</span>
are obviously what I should use when using the strict doctype, but they do not centre elements such as submit buttons! How the smurf can I centre submit buttons or anything but text without using the <center> tag?

It is also CSS valid, except for stupid colour warnings. I still cannot understand why it would be practical in any way, shape or form to define a background-color attribute with every color attribute (and vice-versa)? Surely in 99% of cases the developer wants the background colour to be the same as the element they're placing the element upon? So if you define that on every one and then want to change the background colour of only certain elements they will have to define different styles for elements placed upon different background colours - sounds very stupid to me.

Anyway, if someone can help me out on these last issues I'll go right ahead and make a final posting of my work :)

Posted: Sun Feb 26, 2006 1:22 pm
by MinDFreeZ
http://realworldstyle.com/forms.html

if u add the submit buttons just as the rest of the inputs are.. they are centered..