re navigation
here is the source for one of two pages that may help with the formatting..using css to create the features
[pre]
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> Stu Nicholls | The CSS Playground | Fixed Layout - cross browser</title>
<meta name="Author" content="Stu Nicholls" />
<style type="text/css">
/* the bit that does the work */
body {
margin:0;
border:0;
padding:0;
height:100%;
max-height:100%;
background:#fff;
font-family:arial, verdana, sans-serif;
font-size:76%;
overflow: hidden;
}
/* for internet explorer */
* html body {
padding:120px 0 50px 0;
}
#container {
font-family:"times new roman", serif;
font-size: 1.2em;
position:fixed;
top:120px;
left:0;
bottom:50px;
right:0;
overflow:auto;
background:#fff;
padding:20px;
text-align:center;
}
* html #container {
height:100%;
width:100%;
}
#header {
position:absolute;
top:0;
left:0;
width:100%;
height:116px;
overflow:auto;
background:#53829d;
border-bottom:4px solid #73a2bd;
}
* html #header {height:120px;}
#footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:45px;
overflow:auto;
text-align:right;
background:#73a2bd;
border-top:5px solid #53829d;
}
* html #footer {height:50px;}
/* end of bit that does the work */
h1 {font-size:4em; margin:0; padding:0;}
#footer p {
color:#fff;
margin:5px 10px 0 10px;
}
#header img {
margin:10px 10px 0 10px;
}
#container img {margin:5px;}
#absolute {
position:absolute;
top:400px;
right:100px;
width:200px;
background:#ddd;
padding:10px;
border:1px solid #000;
}
#left {
float:left;
background:#eee;
padding:10px;
border:1px solid #000;
color:#000;
width:50%;
}
#right {
float:right;
background:#ddd;
padding:10px;
border:1px solid #000;
color:#000;
}
a, a:visited {
font-size:1.1em;
text-decoration:none;
color:#ddd;
}
a:hover {
color:#fff;
text-decoration:none;
}
.grey {color:#888;}
.ltgrey {color:#ddd;}
img#mascot {float:right;}
#header ul {
clear:both;
text-align:center;
border-top:1px solid #73a2bd;
}
#header ul {
margin:0;
padding:0;
list-style-type:none;
background:transparent;
height:3em;
}
#header ul li {
display:inline;
color:#73a2bd;
}
.strike {text-decoration:line-through;}
.lft {float:left;}
.rgt{float:right;}
.columnone, .columntwo {width:31%; float:left; text-align:justify; margin-right:2%;}
.columnthree {text-align:justify; border:1px solid #fff;}
* html .columnthree {border:0;}
hr {clear:both; border:0; height:1px; color:#888; background-color:#888;}
.columnthree a, .columnthree a:visited {font-size:1em; color:#000; text-decoration:underline;}
.columnthree a:hover {color:#888; text-decoration:none;}
</style>
</head>
<body>
<div id="container">
<h1>THE PLAYGROUND NEWS</h1>
<h4>Saturday April 23rd 2005</h4>
<div class="columnone">
<h2>The all new fixed layout</h2>
<p>by Stuart A Nicholls</p>
<p>This layout has been tested successfully on a PC running Mozilla 1.7.5, Netscape 7.1 (yes even NN), FireFox 1.0.3, Opera 8, Internet Explorer IE5.01, IE5.5 and IE6. It resizes down to almost nothing and adds scroll bars when necessary, the vertical scroll bar even stays on screen.</p>
</div>
<div class="columntwo">
<p>Any feedback on Mac browser compatibility would be nice.</p>
<p>Latest news ~ Works on Mac, Safari (1.3) and FireFox (1.0.3) - Thanks Todd.</p>
<p class="strike">The fixed left navigation will get lost under the footer with very small screen sizes and would probably look better in the top header or as part of the body scrolling area.</p>
</div>
<div class="columnthree">
<p>Now modified to simplify the style and move the navigation to the header area. The whole of the content area can now be treated as if it were the body on a normal page.</p>
<p>Oh...and the mousewheel still doesn't work in FF. It's about time they fixed this bug!</p>
<p>A full tutorial on this layout can be found at <a href="http://www.webreference.com/programming/css_frames/" title="A CSS Franed Layout">www.webreference.com - article</a></p>
</div>
<hr />
<div class="columnone">
<h2>The one that got away</h2>
<p>A tall story by Stu Nucholls</p>
<p class="grey">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat.
</p>
</div>
<div class="columntwo">
<p class="grey">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
<div class="columnthree">
<p class="grey">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
<hr />
<div class="columnone">
<h2>Floating around</h2>
<p>by S A Nicholls</p>
<div id="left">
<h3>FLOATING LEFT</h3>
<p>
This should be floating left.
</p>
</div>
</div>
<div class="columntwo">
<p class="grey">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
<div class="columnthree">
<div id="right">
<h3>FLOATING RIGHT</h3>
<p>
This should be floating right.
</p>
</div>
</div>
<hr />
<div class="columnone">
<h2>Getting the BIGGER picture</h2>
<p>by Stu Nicholls</p>
<p class="grey">
<img class="rgt" src="../images/tortoise.gif" alt="tortoise" title="tortoise" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="columntwo">
<p class="grey">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
<div class="columnthree">
<p class="grey">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
<img class="rgt" src="../images/mascot2.gif" alt="bat" title="bat" />
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
<hr />
<img id="boat" src="../images/boat2.jpg" alt="fishing boat" title="fishing boat" />
<h3>A fishing boat</h3>
<div id="absolute">
<h3>ABSOLUTE POSITIONED</h3>
<p>Opera puts it in the wrong vertical position and does some strange??? things when resizing the window.</p>
</div>
</div> <!-- end of container -->
<div id="header">
<img src="../images/name.gif" title="The CSS Playground" alt="The CSS Playground" />
<ul>
<li><a href="../index.html" title="AccessKey: 1" accesskey="1">Home</a> | </li>
<li><a href="../menu/index.html" title="AccessKey: a" accesskey="a">Demos</a> | </li>
<li><a href="../menus/index.html" title="AccessKey: b" accesskey="b">Menus</a> | </li>
<li><a href="../layouts/index.html" title="AccessKey: c" accesskey="c">Layouts</a> | </li>
<li><a href="../boxes/index.html" title="AccessKey: d" accesskey="d">Boxes</a> | </li>
<li><a href="../mozilla/index.html" title="AccessKey: e" accesskey="e">Mozilla</a> | </li>
<li><a href="../ie/index.html" title="AccessKey: f" accesskey="f">Explorer</a> | </li>
<li><a href="../opacity/index.html" title="AccessKey: g" accesskey="g">Opacity</a> | </li>
<li><a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=New fixed layout" title="AccessKey: h" accesskey="h">Comments</a></li>
</ul>
</div>
<div id="footer">
<p class="lft">valid <a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.1!">xhtml 1.1</a> and <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.cssplay.co.uk/layouts/fixit.html" title="Valid CSS!">css 1/2/3</a></p>
<p>Copyright © 2004/2005 Stu Nicholls - all rights reserved.</p>
</div>
</body>
</html>
[/pre]
here is the source for the second, to keep the navigation on the screen using css:
[pre]
<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<title> stu nicholls | CSS PLaY | CSS frame emulation </title>
<meta name="Author" content="Stu Nicholls"/>
<meta name="Keywords" content="Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML1.1, w3c, doing it with style, recommendations, opacity, box model, mozilla, opera, netscape, internet explorer, v6, v7.23, techniques, layout, three column, cutting edge, experimental, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS Frames, CSS menu, CSS menus"/>
<meta name="Description" content="CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS"/>
<style type="text/css">
/* commented backslash hack v2 \*/
* html {overflow:hidden;}
/* end of hack */
body {background:url(menu_body.gif); background-repeat:repeat-y; background-color:#f8f8f8; background-attachment:fixed; margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow-y:scroll;}
#menu {position:fixed; display:block; top:160px; left:20px; width:130px; height:400px; background-color:transparent; z-index:20;}
* html #menu {position:absolute;}
#hand {position:fixed; display:block; top:185px; left:6px; width:207px; height:250px; background-color:transparent; z-index:20;}
* html #hand {position:absolute;}
#face {position:fixed; display:block; top:0; left:0; width:590px; height:210px; background-color:transparent; z-index:20;}
* html #face {position:absolute;}
#shadow {position:fixed; display:block; top:156px; left:98px; width:490px; height:248px; background-color:transparent; z-index:1;}
* html #shadow {position:absolute; z-index:-1;}
body {font-family:arial, sans-serif; font-size:12px; letter-spacing:1px;}
#menu a, #menu a:link {display:block; width:120px; height:25px; color:rgb(250,111,0); text-decoration:none; line-height:25px; margin-top:5px; border:5px solid #000; background:#fff; font-size:18px; text-align:center;}
#menu a:visited {display:block; width:120px; height:25px; color:rgb(250,111,0);}
#menu a:hover {font-weight:bold; color:#000;}
#menu a:active {font-weight:bold;}
#content {position:relative; display:block; margin:0 0 0 131px; background:transparent; overflow:hidden; letter-spacing:.08em; z-index:10;}
.text {display:block; padding:10px 10px 10px 10px; width:41%; margin-left:5px; text-align:justify; float:left; color:#000;}
.text {width/* */:/**/44%;
width: /**/44%;}
.text img {float:right;}
#topper {position:fixed; display:block; top:0; right:0; width:100%; height:156px; background:url(menu_top.gif); background-repeat:repeat-x; font-size:40px; font-style:italic; line-height:80px; font-family:times new roman, serif; overflow:hidden; color:#000; z-index:12;}
* html #topper {position:absolute; right:0;
right/* */:/**/17px;
right: /**/17px;}
#topper img {float:right;}
.clear {clear:both; height:1px;}
#foot {display:block; padding:10px 10px 0 100px; text-align:justify; background:transparent; font-size:10px; color:#000; text-align:center;}
.h4 {font-size:40px; color:rgb(250,111,0); margin-bottom:5px; border-bottom:1px solid #000; letter-spacing:1px; font-weight:bold;}
#rl {position:fixed; display:block; top:-10px; left:10px; width:600px; height:130px; font-size:60px; line-height:90px; font-family:arial, verdana, sans-serif; overflow:hidden; color:rgb(250,111,0); z-index:25; font-weight:bold;}
* html #rl {position:absolute;}
#rl div {color:#000; font-size:30px; margin-top:-40px;}
.bold {font-size:14px; font-weight:bold;}
#pad {display:block; height:200px;}
</style>
</head>
<body>
<div>
<div id="topper"><img src="frame_files/tuck1.gif" alt="Friar Tuck" title="Friar Tuck"/></div>
<div id="shadow"><img src="frame_files/menu_shadow.gif" alt="" title=""/></div>
<div id="face"><img src="frame_files/menu_face.gif" alt="" title=""/></div>
<div id="hand"><img src="frame_files/menu_hand.gif" alt="" title=""/></div>
<div id="rl">Friar Tuck-Inn.....?<br/><div>The Holy Grill</div></div>
<div id="menu">
<a href="#">Sausage</a>
<a href="#">Eggs</a>
<a href="#">Bacon</a>
<br/><br/>
<a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=Holy%20Grill" title="Your comments">Comments</a>
</div>
<div id="content">
<div id="pad"/>
<div class="text">
<div class="h4">Stu's caf?</div><img src="frame_files/tuck2.gif" alt="Friar Tuck" title="Friar Tuck"/>
<p>Just for a laugh 
</p>
<p>A layout based on the 'old fashioned HTML Frames' where the header and left column stay fixed, along with the background, and the content scrolls.</p>
<p>This allows the navigation to stay on screen at all times.</p>
<p>This works in IE6 (surprise!), NN7, Mozilla, Firefox and Opera.</p>
<p>Fails to work in IE5.x where the whole page scrolls.</p>
<p>
A bit of jiggery-pokery with the images and z-index allow the content to scroll over the shadows but under the main image.<br/>
Scrolls smoothly in IE6 and Opera, but is a bit jerky in Mozilla, NN7 and Firefox.<br/>
IE5.x scrolls the whole page.
</p>
<p>The only link that works is the <span class="bold">'Comments'</span> one. Please feel free to leave any <span class="bold">comments</span> here, ta.</p>
<p><img src="frame_files/tuck4.gif" alt="Friar Tuck" title="Friar Tuck"/>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div><!-- end of col1 -->
<div class="text">
<div class="h4">On the Menu</div>
<p><img src="frame_files/tuck3.gif" alt="Friar Tuck" title="Friar Tuck"/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<img src="frame_files/tuck5.gif" alt="Friar Tuck" title="Friar Tuck"/>
<div class="clear"/>
<div class="h4">I'll be back!!</div>
</div><!-- end of col2 -->
<div class="clear"/>
</div> <!--content-->
<div id="foot"><p>?2004/2005 Stuart A Nicholls ~ all rights reserved.</p>
<a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=Holy%20Grill" title="Your comments">Comments</a> | <a href="http://www.cssplay.co.uk/index.html" title="Home Page">Home Page</a>
<p>This web site uses the very latest techniques in XHTML and CSS and should be available to all the latest browsers.</p>
<p>Served up as application/xhtml+xml to browsers who accept it.</p>
</div>
<br/><br/>
</div>
</body>
</html>
[/pre]
by combining the two, a navigation menu that stays onscreen can be created, solving the worst aspect of the site navigation problem.
TR site navigation is crap!
I've been using your site alot in the last 30 days, so much so that I am number six, and the worst thing about your site is your useless navigation.
I don't want a millon emails in my Inbox, so I don't use your email me a response. So when I answer a question I don't bother selecting send me an email. I already getting spam form TR that I can't unsubscribe too.
Any way The list of Questions I have answered runs out after twenty, If I check thoses twenty to see which have been rated and find non rated but I have the stats telling me I got 4 rated answers I have to go through al the Q & A again and that is crap!
Navigating in the duscusion area is not much better either. once I've posted a reply the tread becomes the most resent in the list of threads I am surcjing this is majorly annoying because I have to search through all the threads again. Again I don't want spam from TR so I don't use the send me and email. and again I have to remmebr all the places I've visited so I see replise and that to is crap.
Please make the navigaiton better.
After I post a reply I can only return to the discussion, and to continue searching theads I have to start all over again.
This is also a problem with Q & A, after the question is answered I have to start from the begining again I can't easly go to the next or previous question.
For Q & A
What would be really help full is If I could click in the answer histry and it link to where the question that has been rated. And A go to next question or previous question.
And for Disscusions
Non of that rearging of threads that is so annoying. Go to next thread or privous thread after posting reply or return I would like the ability to return to the last place I was before I answered a thread.
Bells and whistles I would like.
A spell checker, cuz I can't spell for **** and I'm to lazy to prof.
Hope you TR guys take some of this on board.
This conversation is currently closed to new comments.