Forum Moderators: not2easy
1. In your main style sheet, set margin and padding to zero (needed for the following internet explorer hack) and declare the desired positioning like this:
body
{
margin: 0;
padding: 0;
}
div.nav {
position: absolute;
top: x;
left: y;
}
body>div.nav {
position: fixed;
}
2. For internet explorer 6, make a second style sheet and remove the scroll mechanism from the root element and assign it to the document body; position:absolute will work like position:fixed now.
html
{
overflow: hidden;
}
body
{
height: 100%;
overflow: auto;
}
3. In the head element call the style sheet for internet explorer after the main style sheet using the 'conditional comment', like this:
<link ... >//themain stylesheet
<!--[if IE 6]>
<link ... >//IE hack stylesheet
<![endif]-->
I confess it uses a couple of proprietary CSS extensions regarding alpha transparency but I consider this an experimental design as opposed to a production design. It is even more effective with the background image. I don't know how to include it here and I gather giving a URL would be a TOS violation (Nick_W has already spanked me once :()
I hope there will be a couple of interesting ideas here for folks.
DE
The HTML:
[1]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
<head>
<meta name="author" content="David Elliott">
<title>Iris Style</title>
<link rel="stylesheet" href="iris.css" type="text/css">
<!--[if IE]>
<style type="text/css" media="screen">
/* hacks for IE - wish I didn't have to use them */
html {overflow:hidden}
body {height:99%; overflow:hidden; margin:0;padding:.5%;}
#content {top:14.5%;right:.5%;padding-right:1%; width:75%;height:70%;}
h1, h2, h3, h4, h5 {padding-left:0; margin-left:0}
#banner {margin-bottom:.5%}
.apart {width:94%;}
</style>
<![endif]-->
</head>
<body>
<div id="banner">
#banner "Iris Style" template
</div>
<div id="nav">#nav background
<!--Nothing should go in this div, it is the nav background-->
</div>
<div id="button">#button
<a class="button" href="">Button 1</a>
<a class="button" href="">Button 2</a>
<a class="button" href="">Button 3</a>
<a class="button" href="">Button 4</a>
<!-- uncomment this if you need more
<a class="button" href="">Button 5</a>
<a class="button" href="">Button 6</a>
<a class="button" href="">Button 7</a>
<a class="button" href="">Button 8</a>
-->
</div>
<div id="blurb">
#blurb<br />
<p class="apart">
blurby stuff here<br />
yada yada yada
yada yada yada<br />
</p>
</div>
<div id="middle">#middle background
<!--Nothing should go in this div, it is the content colored background-->
</div>
<div id="middle-iris">
<!--Nothing should go in this div, it is the content bitmap background-->
</div>
<div id="content">
<h1>H1 heading</h1>
#Content in a scrolling absolute div
<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>Repeat paragraphs to demonstrate scrolling</p>
<div class="apart"><h3>H2 heading</h3>
<p>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 class="dot"> 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>
<div id="footer">
<div style="float: right; text-align: right; padding-right: 1em; z-index: 101;">© David Elliott :: 2002.12.16</div>
#footer</div>
</body>
</html>
[/1]
[1]
/*
Iris style CSS by David Elliott
*/
/*
Additional Comments courtesy of ByteWizard
An overflow of hidden means that the browser should 'clip'
the contents, displaying only the contents which are
visible within the specified width and height.
*//*
Block elements are separated from surrounding elements in
the flow of the HTML page. Browsers generally give block
elements a standard margin to the top and bottom. With
cascading style sheets, you can redefine the margin around
block elements. Examples of block elements are <p> and <h1>
A width of auto is the default width of an item. This
means it will be as wide as it needs to be to fully display
its content.
*//*
An overflow of auto means that the browser should add
scrollbars as needed to enable users to scroll horizontally
and/or vertically to show hidden contents of the element.
*/
/*Placement and sizing*/
html {/*Browser Hack proposed by Tantek Celik to correct
IE5 box model misinterpretation*/
voice-family: "\"}\"";
voice-family: inherit;
height:100%; margin:0; padding:0;
min-width:600px; min-height:400px;
}
body {height:99%; margin:0; border:0; padding:.5%;
overflow:hidden;
}
#banner {display:block; height:13%; width:auto;
padding-left:24%; margin:0; overflow:hidden;z-index:10;
}
#middle {display:block; height:72%;width:auto; margin:.5% 0;
z-index:10;
}
#footer {display:block;z-index:10; overflow:hidden;
height:13%; padding-left:24%; width:auto; margin:0%;
}
#content {display:block; position:absolute;
left:auto; right:.5%; top:17%;
height:65%; width:75%; overflow:auto; margin: 0;
z-index:100;
}
/*A top of auto places the element with no offset up or
down the page. (It is used in positioning
sometimes because top and left take precedence over bottom
and right. Sometimes you have to
say top:auto and left:auto if you are specifying
right:xxpx or bottom:xxpx)*/
#nav {display:block; position:absolute;
top:0; left:0; width: 20%; height:92%; margin:2%;
text-align:center; z-index:100;
}
/*block to contain buttons overlying the nav
background*/
#button
{display:block; position:absolute;
top:16%; left:3%; width: 18%; height:34%;
text-align:center; z-index:200;overflow:hidden;
voice-family: "\"}\"";
voice-family: inherit;
left:4%;
}
/*block to contain site info in a scrolling box below
the buttons*/
#blurb {display:block; position:absolute;
top:52%; left:3%; width: 18%; height:42%;
text-align:left; z-index:200; overflow:auto;
voice-family: "\"}\"";
voice-family: inherit;
left:3%;width: 19%; line-height:100%;height:44%;text-align:left;
}
/*colors and flourishes*/
body {background-color:#000066;
}
#banner {-moz-border-radius:16px; background:#76b;/*#8B7ECD;#6699CC;*/
color:#FFFF99;
}
/* -moz-border-radius is a proprietary Gecko CSS extension
that puts rounded corners on elements*/
#middle{background:#66cc99;color:silver;
-moz-border-radius: 16px; z-index:10;
}
/*the following div is needed because I can't get rounded corners
if a div has a bitmap background*/
#middle-iris {display:block;position:absolute;left:2%; top:16%; height:68%;width:80%; z-index:11;
background: url("siberian_bg2.gif")
no-repeat fixed 0% 50%;
}
#footer {background-color:#cc9966; -moz-border-radius:10px;
}
#content {background:transparent;
scrollbar-base-color:#66cc99;
scrollbar-arrow-color:#000;
scrollbar-highlight-color:#99ffbb;
color:#000066;
}
#nav {background:#333;/*#CC6666;#6666cc;*/
color:#f00; border:thick solid black;
-moz-opacity:.5;
filter:alpha(opacity=50);
-moz-border-radius:16px;
}
#button {scrollbar-base-color:#6666cc;
scrollbar-arrow-color: #ffff99;
scrollbar-highlight-color:#cc9966;
}
#blurb {color:#ffff99;
scrollbar-base-color:#6666cc;
scrollbar-arrow-color: #ffff99;
scrollbar-highlight-color:#cc9966;overflow:hidden;
}
.apart {width:96%; border:1px solid goldenrod;
-moz-border-radius: 16px;
padding:1%;
}
.dot {border:3px dotted #993366;
padding:.2%;
}
/*
A background-color of transparent ensures that whatever
is behind an element is visible, rather than obscured by
the background of the element. This is particularly useful
with positioned elements, which might overlap two or more
elements.
*/
/*Fontography*/
body, td {font:normal 600 1em/1.2em 'cg omega',
verdana, tahoma, helvetica, arial, sans-serif;
color:#000;
}
#banner {font-variant:small-caps;
font-weight:900;
font-size: 18pt;
font-family: verdana, sans-serif;
line-height:100%;
}
#footer {font:normal normal normal 14px/18px 'cg omega',
verdana, tahoma, helvetica, arial, sans-serif;
color:#000;
}
#nav {font:normal normal bold 22px/24px'cg omega',verdana,
tahoma, helvetica, arial,sans-serif;
color:#000;
}
#button {font:small-caps bold 14px/12px
verdana, tahoma, helvetica,arial,sans-serif;
}
#blurb {font-size:80%;
}
/*buttons*/
#button a.button, #button a.button:visited {
/*button common features*/
display:block; width: 80%;margin:1px auto;
height:auto; clear:both;
text-decoration:none;
color:#333399;
vertical-align: middle; padding: 0px 2px 4px 2px;
background-color: #99cc66;border:3px outset #669933;
-moz-border-radius: 20px;
-moz-opacity:.6;
filter:alpha(opacity=60);
}
#button a.button:hover, #button a.button:active {
background-color:#669933;
border:3px inset #669933;
position:relative;top:0;left:1px;
-moz-opacity:.9;
filter:alpha(opacity=90);
}
/*other content*/
#content h1, #content h2, #content h3, #content h4,
#content h5
{
width:80%;
margin:.1em;
padding-left:.5em;
background-color:#CCCC66;
color:#663399;
border-left:30px ridge #333399;
border-bottom:5px groove #333399;
border-top:5px ridge #333399;
border-right:3px groove #333399;
line-height:120%;
-Moz-Border-Radius: 10px;
-moz-opacity:.7;
filter:alpha(opacity=70);
font-family: "Brush Script MT";
}
/*fix-ups for browser inconsistencies*/
#banner h1, #banner h2, #nav h1, #nav h2, #nav h3 {
margin-top:0;}/*Needed by Gecko*/
/*uncomment the following to check div borders*/
/*div {border:1px solid red! important;}*/
[/1]
But I would be curious to see how it works in webt tv.
Dian :)
If interested I can sticky you the page. (Nick is that OK under TOS or is that still considered promotional or a "whisper" - I'm still feeling this stuff out?)
DE
This version is cross-browser - works for Mozilla (Gecko), Opera 7, IE 5.x and IE6.
It's a very good template for a two-column layout where the left-hand column is fixed (good for navigation elements) and the right-hand column is fluid ( good for documents - it scrolls to accomodate content of different lengths).
Each column can have it's own background color without a background graphic - making for a smaller file size. In general appearance, this layout emulates a two-frame frameset.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="styles/standards.css" rel="stylesheet" type="text/css">
<!--[if IE 5]>
<link href="styles/iehack5.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 6]>
<link href="styles/iehack6.css" rel="stylesheet" type="text/css">
<![endif]-->
</head>
<body>
<div class="nav">
<p><a href="#">Home</a></p>
<p><a href="#">Next</a></p>
<p><a href="#">Next</a></p>
</div>
<div class="content">
<p>Content here...</p>
<div class="spacer"> </div>
</div>
</body>
</html>
-------------------------------------------------------
styles/standards.css
/* Style sheet for CSS compliant browsers. */
/* Tested in Opera 7 and Gecko (Mozilla) */
html
{
padding: 0px;
background-color: lightgrey;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
div.nav {
position: fixed;
width: 200px;
left: 0px;
top: 0px;
background: #AA9FAA;
padding-top: 30px;
padding-left: 0px;
/* This value controls the vertical bar */
height: 100%;
}
div.content {
margin-left: 220px;
padding: 0px;
}
/* -- End basic layout section -- */
div.content p {
font: 100% "Trebuchet MS", Arial, Geneva, san-serif;
color: #333333;
text-align: justify;
padding-top: 15px;
padding-right: 10px;
padding-left: 10px;
}
div.content a {
color: #6666CC;
}
div.content a:hover {
color: #CCCCCC;
background: #AA9FAA;
text-decoration: none;
}
.nav p {
font: 100%/1 Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
display: block;
padding-top: 0px;
margin: 0px;
padding-left: 10px;
}
div.nav a {
color: #FFFFFF;
background: #9faa9f;
width: 150px;
display: block;
margin: 0px;
padding-top: 6px;
padding-bottom: 1px;
padding-left: 20px;
text-decoration: none;
height: 18px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
div.nav a:hover {
color: #333333;
background: #999999;
width: 150px;
display: block;
margin: 0px;
padding-top: 6px;
padding-bottom: 1px;
padding-left: 20px;
text-decoration: none;
height: 18px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
---------------------------------------------------------
styles/iehack6.css
/* Amends and adds rules needed by IE6 to standards.css */
html {
overflow: hidden;
}
body {
background-color: lightgrey;
overflow: auto;
}
div.nav {
position: absolute;
background: #AA9FAA;
padding-top: 30px;
padding-left: 0px;
height: 100%;
}
------------------------------------------------------------
styles/iehack5.css
/* Amends and adds rules needed by IE5.x to standards.css */
body {
overflow: hidden;
background-color: lightgrey;
z-index: 1;
}
div.nav {
position: absolute;
z-index: 6;
overflow: hidden;
}
.spacer {
position: absolute;
margin-bottom: 0px;
width: 200px;
/* top: 0px; */
left: 0px;
bottom: 0px;
background: #AA9FAA;
height: 100%;
z-index: 5;
}
div.content {
margin-left: 0px;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
padding-left: 220px;
z-index: 4;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
[edited by: Nick_W at 6:34 pm (utc) on Feb. 17, 2003]
The layout is actually pretty straightforward CSS - getting it together for standards based browsers like Mozilla was pretty easy.
The problem with IE is that ver 5 messes up the box model and both ver 5 and 6 don't support fixed positioning.
Didn't test on IE/Mac but my guess is it will be alright.
(if not so, please, anyone - let me know.)
Earlier versions of Opera, frankly, I don't care about but my guess is it will be alright there, too.
Anybody able to test?
I have 2 stacked next to eachother, the inner one scrolls with the content, and the outer one scrolls the rest when you reach the bottom of the content.
Using IE6.0/winXP
No. One scrollbar. Check the stylesheets against the posting. Looks to me like you may have a missing rule due to a miscopy.
The scrollbars are controlled by the overflow property on the html element and the body element.
I'll try to check this out independently, as well.
Didn't test on IE/Mac but my guess is it will be alright.
(if not so, please, anyone - let me know.)
OK, on IE5/Mac the scroll feature works perfectly (menu stays fixed, no scrollbar. Right-hand side will scroll when content extends below the fold).
However, with the code provided, the links in the nav do not show the hover state nor the pointing hand. They do work (link), but they don't show the usual finger when the mouse is held over them.
Opera 5 (Mac) works the same as Opera 6 (Win 2000) - everything seems fine except that the scrollbar is permanent ... it is there regardless of how short the content is in the right-hand 'window'.
IE6/Win 2000 - works perfectly for me. Took me a while to work out how to recompile the CSS files from the code pasted in msg:#35 though. Maybe that was the problem, born2drv?
Edited for clarity
IE 5.5 under NT4
IE 6.0 under NT4
IE 6.0 under XP/Pro
and the scrolling feature works as intended - left-hand navigation links stay fixed while right-hand side scrolls when content extends below the fold. Also under all three environments, navigation links show both the hover state and hand cursor as expected.
Have to say this has been a great thread for a newbie like me as it really does make me aware of the flexibility available with CSS (and those IE conditional comments look very useful too).
I don't know what's up with the scrollbars in Opera.
I'm gonna check it out.
However, there's not a whole lot of point to this layout unless the content area moves beyond the fold so I see it as a minor annoyance that's piqued my intellectual curiosity.
(One of these days I've got to get a real job.)
thanks for the test on IE5/Mac.
#1: Introduction [webmasterworld.com]
#2: Fonts & basic selectors [webmasterworld.com]
#3: Color & BG properties [webmasterworld.com]
</OT>
Thanks for the welcome - I'm currently going through Nick's CSS Crash Course : that, coupled with regular visits to this forum, are slowly getting me into the benefits of CSS.
I've just tested it in Safari, and it worked as intended. The mouseovers change colour and the pointer changes to a hand.
Pretty neat bit of code.
Gerard
Make sure to check the CSS Library link at the top of the page, there's lot's more good stuff to read ;)
Nick
So, those of you involved: Is this similar to how you guys worked it out also?
I spoke to Mark about a year ago if I remember correctly, nice chap and whizz at CSS!
Nick
