Welcome to WebmasterWorld Guest from 54.144.243.34

Forum Moderators: not2easy

Fixed Side Menus with CSS

Fixed CSS Navigation emulating frames

   
7:31 pm on Jan 22, 2003 (gmt 0)

10+ Year Member



Someone in September had asked a question about emulating frames with CSS fixed property and its compatibility with IE6. Here is how to do it

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]-->

7:18 pm on Feb 11, 2003 (gmt 0)

10+ Year Member



ricfink,
the problem is that I can't test the page for IE 5.5 if I don't have it!
I thought I could because IE6 in 'quirks' mode supposedly behaves the same as IE5.5, but in example posted it doesn't.
so if I take out the dtd (or include a non 'strict' dtd; IE5.5 does interpret dtds) it doesn't emulate a 5.5 browser in all instances,
My code was working in both browsers as it turns out, I just didn't realise this until I tested it in an actual 5.5 browser,
hope this makes sense, I'm confusing myself at this stage, anyway it's good to have some feedback on this as it is clearing some things up for me,
btw I already have 'body {margin:0px)' in the stylesheet but I've a feeling the problem may have had something to do with this, ie, another element on the page interfering with margins...
1:39 pm on Feb 14, 2003 (gmt 0)

10+ Year Member



I have worked out a liquid CSS template that may be of interest. It uses absolute positioning by percentages so that it accomodates a wide range of browser resolutions and window shapes. It also simulates frames in the main content section. The CSS and HTML have a fair bit of documentation so that it may be easier to follow.

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;">&copy; David Elliott :: 2002.12.16</div>
#footer</div>
</body>
</html>
[/1]

The CSS
[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]
5:35 pm on Feb 15, 2003 (gmt 0)

10+ Year Member




Thanks for posting that. What browsers have you tested it in? I ask because I am using netmechanics browser photo to look at my pages, and obviously I can't get photos of your sample because it's on my desktop. :)

But I would be curious to see how it works in webt tv.

Dian :)

6:42 pm on Feb 15, 2003 (gmt 0)

10+ Year Member



I've tested it in IE5+, IE6, NN6, NN7 & latest Moz. There are subtle differences, arising in part I suspect from the complex calculation of %padding and %margins. On a slower system you can really feel the browser chugging as it relatively resizes everything on the fly. Static dimensions are so much easier on a browser. However, the code is designed to degrade fairly gracefully for non CSS.

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

6:31 pm on Feb 17, 2003 (gmt 0)

10+ Year Member



This is a cross-browser final draft of previous posting [webmasterworld.com...]
which was an IE 5.5 compliant version of Ranjan's original posting.

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">&nbsp;</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]

7:55 pm on Feb 17, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



What about IE5/Mac and older Opera?
And how will NN4 behave?
5:46 am on Feb 18, 2003 (gmt 0)

10+ Year Member



DrDoc:

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?

2:05 pm on Feb 18, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Are you supposed to get 2 sets of scrolling bars on the right hand side?

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

3:32 pm on Feb 18, 2003 (gmt 0)

10+ Year Member



born2drv,

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.

5:46 pm on Feb 18, 2003 (gmt 0)

10+ Year Member



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

6:43 pm on Feb 18, 2003 (gmt 0)

10+ Year Member



As an absolute newbie in CSS, caught this thread late on - but have tested the code posted by ricfink, under the following environments :

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).

8:01 pm on Feb 18, 2003 (gmt 0)

10+ Year Member



quiet_man:

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.

11:30 pm on Feb 18, 2003 (gmt 0)

10+ Year Member



<OT>Just wanted to say Hi and "Welcome" to raymurphy. If you're a newbie to stylesheets, you will find all sorts of tips here. Be sure to check out Nick's CSS Crash Course:

#1: Introduction [webmasterworld.com]
#2: Fonts & basic selectors [webmasterworld.com]
#3: Color & BG properties [webmasterworld.com]
</OT>

9:21 am on Feb 19, 2003 (gmt 0)

10+ Year Member



quietman ...

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.

3:07 pm on Feb 19, 2003 (gmt 0)

10+ Year Member



Hi,

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.

10:17 am on Feb 27, 2003 (gmt 0)

10+ Year Member



Great code. Thanks a lot.

Gerard

10:32 am on Feb 27, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Welcome to WebmasterWorld [webmasterworld.com] OnTopic!

Make sure to check the CSS Library link at the top of the page, there's lot's more good stuff to read ;)

Nick

6:25 pm on Mar 29, 2003 (gmt 0)

10+ Year Member



how is this code different from "sticky"?
[mark.ac...]
6:34 pm on Mar 29, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hmmm.. That looks like interesting stuff. I've not tried any of the code in this thread as at the time I was busy with other stuff.

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

6:36 pm on Mar 29, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



The "sticky" code requires JavaScript to work. This code, however, will work even if JavaScript is turned off. It also addresses some major browser inconsistencies that "sticky" fails to address/solve. Also, "sticky" creates a layer that slides. This code makes the layer truly stay fixed.
This 50 message thread spans 2 pages: 50
 

Featured Threads

Hot Threads This Week

Hot Threads This Month