Page 2 of 2

Posted: Sun Feb 26, 2006 4:55 pm
by jayshields
Ok, had to make a stupid work-around for the centering of stuff, but it worked.

The layout is now valid HTML 4.01 Strict and valid CSS (but there are still color warnings...). Works in both IE6 and FF, and probably most others.

Final link http://www.jaysfiles.co.uk/index4.html

CSS:

Code: Select all

body {
	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 0px 0px;
}

form {
	margin: 0px 0px 0px 0px;
}

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

a:link {
	color: #00CC00;
}

a:visited {
	color: #00CC00;
}

a:hover {
	color: #33FF00;
}

.center {
	margin: 0px;
	padding: 0px;
	text-align: center;
}

.textinput {
	border: 1px solid black;
	margin: 0px 0px 5px 0px;
}

.submit {
	border: 1px solid black;
	background-color: #EEEEEE;
	color: black;
	margin: 5px;
}

.content {
	position: relative;
	min-width: 120px;
	margin: 0px 186px 16px 186px;
	border: 1px solid #CCCCCC;
	background-color: white;
	padding: 10px;
}

.navLeft {
	float: left;
	left: 20px;
}

.navRight {
	float: right;
	right: 20px;
}

.navContainer {
	border: 1px solid #CCCCCC;
	background-color: white;
	padding: 10px;
	margin: 0px 0px 16px 0px;
	width: 150px;
}

.header {
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 20px;
	border: 1px solid #CCCCCC;
	line-height: 11px;
	background-color: #EEEEEE;
}

.footer {
	clear: both;
	margin: 0px;
	padding: 5px;
	text-align: center;
}
HTML:

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 class="header">
	<h1><a href="http://www.jaysfiles.co.uk" title="JaysFiles.co.uk">JaysFiles.co.uk</a></h1>
</div>

<div class="navLeft">
	<div class="navContainer">
		<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 class="navRight">
	<div class="navContainer">
		<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 />
			</p>
			<div class="center"><input type="submit" name="submit" class="submit" value="Login" /></div>
		</form>
		<div class="center"><a href="lostpassword.php" title="Lost Password">Lost your password?</a></div>
	</div>

	<div class="navContainer">
		<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 class="footer">
	&copy; Copyright <a href="http://www.jay-designs.co.uk" title="Jay Designs">Jay-Designs.co.uk</a> 2006 | Best viewed in 1024x768 | CSS based on <a href="http://www.bluerobot.com/web/layouts/" title="BlueRobot CSS Layouts">BlueRobot</a>
</div>

</body>
</html>
I'll probably run into some problem or another with the PHP behind this new project, you'll probably know about it in due time :P

Anyway, thanks for all the help and use my layout as you wish :)

Posted: Sat Mar 11, 2006 11:19 pm
by caddyfixr
Hello,

I was intrested in this topic. I too am using the same code and noticed that in Fire Fox any
use of div class="content" more than one time, produced neat and fixed boxes that overlaped
the content of the first box. So to work around I just put everything I want displayed in the
center column in to one div class="content" now it behaves in Fire Fox and IE.

You can view the result here http://www.ipodnewsonline.com

Caddy