homepage Welcome to WebmasterWorld Guest from 54.146.175.204
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

This 50 message thread spans 2 pages: < < 50 ( 1 [2]     
Fixed Side Menus with CSS
Fixed CSS Navigation emulating frames
ranjan

10+ Year Member



 
Msg#: 560 posted 7:31 pm on Jan 22, 2003 (gmt 0)

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

 

theonliest

10+ Year Member



 
Msg#: 560 posted 7:18 pm on Feb 11, 2003 (gmt 0)

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

DCElliott

10+ Year Member



 
Msg#: 560 posted 1:39 pm on Feb 14, 2003 (gmt 0)

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]

DLadybug

10+ Year Member



 
Msg#: 560 posted 5:35 pm on Feb 15, 2003 (gmt 0)


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

DCElliott

10+ Year Member



 
Msg#: 560 posted 6:42 pm on Feb 15, 2003 (gmt 0)

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

ricfink

10+ Year Member



 
Msg#: 560 posted 6:31 pm on Feb 17, 2003 (gmt 0)

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]

DrDoc

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



 
Msg#: 560 posted 7:55 pm on Feb 17, 2003 (gmt 0)

What about IE5/Mac and older Opera?
And how will NN4 behave?

ricfink

10+ Year Member



 
Msg#: 560 posted 5:46 am on Feb 18, 2003 (gmt 0)

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?


born2drv

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 560 posted 2:05 pm on Feb 18, 2003 (gmt 0)

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

ricfink

10+ Year Member



 
Msg#: 560 posted 3:32 pm on Feb 18, 2003 (gmt 0)

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.

quiet_man

10+ Year Member



 
Msg#: 560 posted 5:46 pm on Feb 18, 2003 (gmt 0)

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

raymurphy

10+ Year Member



 
Msg#: 560 posted 6:43 pm on Feb 18, 2003 (gmt 0)

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

ricfink

10+ Year Member



 
Msg#: 560 posted 8:01 pm on Feb 18, 2003 (gmt 0)

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.

quiet_man

10+ Year Member



 
Msg#: 560 posted 11:30 pm on Feb 18, 2003 (gmt 0)

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

raymurphy

10+ Year Member



 
Msg#: 560 posted 9:21 am on Feb 19, 2003 (gmt 0)

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.

Andy_White

10+ Year Member



 
Msg#: 560 posted 3:07 pm on Feb 19, 2003 (gmt 0)

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.

OnTopic

5+ Year Member



 
Msg#: 560 posted 10:17 am on Feb 27, 2003 (gmt 0)

Great code. Thanks a lot.

Gerard

Nick_W

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



 
Msg#: 560 posted 10:32 am on Feb 27, 2003 (gmt 0)

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

craig1972

10+ Year Member



 
Msg#: 560 posted 6:25 pm on Mar 29, 2003 (gmt 0)

how is this code different from "sticky"?
[mark.ac...]

Nick_W

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



 
Msg#: 560 posted 6:34 pm on Mar 29, 2003 (gmt 0)

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

DrDoc

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



 
Msg#: 560 posted 6:36 pm on Mar 29, 2003 (gmt 0)

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 ( 1 [2]
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved