Site with CSS layout

[DCElliott]

>>ByteWizard - this is as promised<<

This page is from our intranet and is entirely based on CSS. You will have to save it to your own computer to view it if you are interested. A screenshot has been posted here on an earlier date.

You will have to create an \images\ subdirectory and move the gifs in there for the graphics to appear. The files (pw.html, pw_new.css, pw_print.css) stay in the root directory.

A couple of things to look at. Resize the page and notice how the elements are elastic. Hover over the buttons and menu links (none of which will be active, I'm afraid) The effects are all CSS. Those of you viewing with IE will notice a drop-shadow effect on "Policy Watch Home Page" - not a graphic - CSS (well, not stictly - it is a Microsoft extension) Do a print preview. Notice how the nav elements are excluded - you don't "navigate" a printout so why have it there - leave all the room for content. And if you have a Gecko-based browser, the printout will contain both the link names PLUS the URLs, neat, eh?

If anyone has problems viewing this, please post me pronto.

encl: pw.zip

[Zero Angel]

Thats all well and good, until the window is sized < ~640W. Then you start to see some elements overlapping.

On the other hand, I love how the print.css file omits the table of links and prints only the relevant content. This is the strongest argument IMHO for using CSS layouts.

I will definitely be stealing......err....using parts of your code for inspiration in my own designs. ;)

[DCElliott]

The overlapping is by intent. In order to have the flexibility of relative %age horizontal widths while still keeping minimum width for the content (middle div) you have to make a compromise that causes overlapping. That is the signal to the user that they have gone too far. However, they can still see and use the page. I have included an alternate version below that starts overlapping at a lower width (<600). Note that the content has a higher z-index so it overlays the side divs. One neat thing about the page: interchange id="left" and id="right" in the divs and see what happens.

One of the tricks employed here is the use of invisible HRs to force the divs to have a minimum width, especially the side divs which would start to look really bad at <20% of 600px. So they are fixed at that width but flexible above. Note also that the page springs a horizontal scroll just a bit below 600px where the minimum page width comes into play.

I like the use of a separate media=print css - it is something I've just started experimenting with. The effect in Gecko is incredibly useful.

Alternate pw_new.css/* Style Sheet for the Policy Watch Web Pages */

/* BEGIN LIQUID CSS */
body { position: relative; min-width: 600px; width: 100%; margin: 0 auto; padding: 0; }

#top { position: absolute; top: 0; left: 0;
min-width: 600px; width: 100%; height: 100px; }
#left { position: absolute; top:135px; left: 0;
width: 19%; margin-right: 1%; z-index:10;
/*Browser Hack proposed by Tantek Celik to correct IE5 box model misinterpretation*/
voice-family: "\"}\"";
voice-family: inherit;
width: 18%;}
#right { position: absolute; top:135px; right:0;
width: 20%; margin-left:1%;z-index:10;
voice-family: "\"}\"";
voice-family: inherit;
width: 19%;}
#middle { position: absolute; top:135px; left:20%;
min-width: 280px; width: 58%; margin: 0 1%; z-index:20;
voice-family: "\"}\"";
voice-family: inherit;
width: 54%;
left: 21%;}

/*IE 5.5 doesn't understand the following but it can be
used to set width or middle for netscape*/
html>body #middle {min-width:280px; width:54%}

/* hr styles need for IE/Win. */
hr.holder { width:600px; visibility: hidden; } /* equal to 'top' */
hr.left, hr.right { width: 120px; visibility: hidden; }
hr.middle { width: 280px; visibility: hidden; }

/* these hr styles replace the above, and are needed for Netscape 4.x.
left and right margins are half the relevant div width */
hr.holder { width:0; margin: 0 280px; } /* equal to 'top' */
hr.left, hr.right { width: 0; margin: 0 55px; }
hr.middle { width: 0; margin: 0 140px; }

/* divs must have a border value set in netscape 4.x */
div { border: none; overflow: visible; }

/* END LIQUID CSS */

/*Begin Policy Watch Specific styles*/

body {
background: #ffffff;
background: url(./images/ns_background.gif) no-repeat fixed 50% 50%;
color: #483d8b;
scrollbar-face-color: #000000;
font: .9em verdana, lucida, geneva, helvetica, sans-serif;
}

#index {
display:block;
position: absolute;
top: 90px;
left: 0px;
width:90%;
height: auto;
font: normal bold 10pt/10pt courier;
line-height: 100%;
margin: 0 5%;
text-align:center;
color: inherit;
background:cadetblue;
padding:10px 0;
}
a.button
{ display:inline;
width:auto;
height:auto;
text-align: center;
text-decoration: none;
color: #3163ce;
background: #fc3;
font: bold 10pt 'courier new', courier, monospace;
vertical-align: middle;
padding: 2px 2px;
margin: 3px .2%;
border-top: 2px solid #ff9;
border-left: 2px solid #ff9;
border-right: 2px solid #c93;
border-bottom: 2px solid #c93;
}
a.button:hover, a.button:active
{ background: #eb2;
border-top: 2px solid #c93;
border-left: 2px solid #c93;
border-right: 2px solid #ff9;
border-bottom: 2px solid #ff9;
position:relative;
top:2;left:2;
}
.alpha-head
{ display:block;
width:80%;
font:bold 22pt 'cg omega', verdana, georgia,
helvetica, sans-serif;
line-height: 100%;
margin:0;
border-left: 20px solid cadetblue;
border-bottom: 2px solid cadetblue;
padding-left: .5em;
}
.heading {font: bold 1.4em sans-serif;}
.up {display:block;
width:10%; height:auto; float:right;
padding:3px;
font:normal bold normal 10pt/10pt courier;
text-align:right;
}
a.link {text-decoration: none;
color: #483d8b;
font-face: verdana, geneva, arial, helvetica,
sans-serif; font-weight:900;
}
a.link:hover, a.link:active {background-color: #ffcc33; color: inherit;
}
p.link {margin: 0 0 .5em 0;}
ul, ol {margin:.5em 10px .5em 30px;}
li{list-style-type: square;}
#logo{display:block; position:absolute ; top: 0px ; left:10%; z-index:1; }
#title {position: absolute; top: 44px; left: 5%;
width:95%; min-width: 400px;
height:2.5em; overflow: hidden;
font: 24pt bold times, serif; color: inherit;
padding: 0 10px 5px 5px; border:0 none; line-height:0.9em;
filter:shadow(color=#228cd5, direction=135);
z-index:2; overflow:hide; }
.pizzaz {background: lightgoldenrodyellow; color:inherit; }
.morepizzaz {background: yellow; color:inherit; border: 1px solid seagreen; }
code {color: #8b0000; }
#left, #right { text-align: center; font-size: 8pt; padding: 0.5%;}
#left hr, #right hr {border: thin dotted #0080c0; width:100%; height: 2px;}
#middle {text-align: justify; /*border:1px dashed black;*/ padding:0 .5%;}
#middle p {margin-bottom: .5em;}
#right {letter-spacing: -.04em; }
#right a.link {display:block; width:80%; margin:0 auto;}
#right a.button {display:block; margin:5px auto;
width:60%; min-width:100px; height:auto; text-align center;}
.note { font-size: smaller; }
div { background: transparent; border: none; color:inherit; }
#holder { background: transparent; color:inherit;}

[Master Austin]

I have a question about css. I want to make my links in the sidebar come away from one another. You know how there all smootched together most of the time. How can I get them to come apart some?

[Zero Angel]

use the CSS attribute:

line-height: 125%;

add it in the <div> that contains the table of links.

[ByteWizard]

It's hard to tell from your description exactly what you mean. But perhaps you need to just create an unordered list for seperation.

<h4>Site Map</h4>
<ul>
<li><a href="FirstLink">First Link</li>
<li><a href="SecLink">Second Link</li>
<li><a href="ThirdLink">third Link</li>
</ul>

There are many variations of this including borders and what appears to be a mouse roll-over button. Study the menu posted in DC's code in this thread. He uses an unordered list for good visual effects.

[DCElliott]

7BitWizard* meant :<h4>Site Map</h4>
<ul>
<li><a href="FirstLink">First Link</a></li>
<li><a href="SecLink">Second Link</a></li>
<li><a href="ThirdLink">Third Link</a></li>
</ul>
*We're gonna start calling him that cuz he was missing a bit http://206.47.27.187/phpBB2/images/smiles/neenaw.gif

[ByteWizard]

I wuz just a 6 bit Byte this afternoon...

Whats an A among friends?

[DarkSloth]

Where did you learn CSS? I would love to learn it...

[Zero Angel]

Yeah, CSS is pretty nifty. Go here for the tutorial:

http://hotwired.lycos.com/webmonkey/authoring/stylesheets/

This is where I learned CSS. The rest came with experimenting.

[DCElliott]

For those of you who d/led the page and stylesheets previously, here is another thing you can try; It is so easy, yet so powerful.

Put:
/*The following code makes the middle div into an iframe-like scrolling window*/
#middle {height: 4.4in; overflow:auto;}
body {scrollbar-track-color:white;overflow:auto;}at the end of the pw_new.css file and open the page pw.html. You may have to increase the text size to see the effect.

One little addition to the stylesheet and it changes the whole functionality. Since this homepage is actually the entrance to our Intranet "link farm" it seemed to me to make sense to have the content scroll without moving the nav elements. At one time, the only way to get this effect would have been to have a frameset with 4 frames, or use an <iframe>

I wish there was some easy way to size the div height according to the browser window size - beyond me at this point. If anyone knows a method without using a mile of javascript, let me know

You need to add the following to the bottom of the pw_print.css file to get rid of the fixed height div and scrollbars for printing:#middle {height:auto; overflow:visible;}