Below is the test page I've been playing with. What I am trying to do is * have a header block at the top of the page/screen * have a footer block at the bottom of the page/screen * have a menu side bar on the right with links that does not scroll with the main content * have the content block scrollable only * keep it as simple as possible for repeated use
I am close, but I have a few problems that I need some pointers on. * The footer div overlays on top of the scroll bar on the content area. I couldn't get the pad3 or padding-right to work right. * On my work safari browser the footer information is partially hidden behind the right menu. On my personal mac (safari and opera) it appears fine. * Only some of the internal links work. The top does not work, I have to remove the #xxxx from the URL to get back to the starting point. * I had to add multiple <br> to the bottom of the page to see the last of the text hidden behind the footer. * I had tried to get sizes set to 'em', but couldn't get them to work right so have some 'px'. Any idea how to get to just one standard? * and anything ya'll might find that I missed Future Plans: * figure a print CSS from all this * ??? Thanks for any insight and help you can give. Sorry, I do not have a public web site to host this test case on, my apologies for including such a long example. Note, this is *NOT* for school work. I've not been in a classroom in many years. Just a personal attempt to make something I like, without all the extraneous junk most blog sites and other software include. Eric <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noodp, noimageindex, noarchive"> <link rel="icon" href="images/favicon.ico" type="image/vnd.microsoft.icon"> <title> Some sort of title goes here </title> <style type="text/css"> html { background : #FFFFFF -18px 0 no-repeat; border : 0; font-family : "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif; font-size : 80%; height : 100%; margin : 0; max-height : 100%; overflow : hidden; padding : 0; } body { border : 0; height : 100%; margin : 0; max-height : 100%; overflow : hidden; padding : 0; } div#content { background-color : #FFF9DA; display : block; height : 100%; margin-right : 12em; margin-top : 5em; max-height : 100%; overflow : auto; padding-bottom : 3em; padding-left : 1em; padding-right : 1em; position : relative; } div#head { background-color : #ECE097; color : #FF6600; display : block; font-size : 4em; height : 1.25em; margin : 0; position : fixed; right : 0; top : 0; width : 100%; z-index : 3; } div#foot { background : #CC9966; bottom : -1px; color : #FFFFFF; display : block; font-size : 1em; height : 3em; left : 0; margin : 0; padding-right : 3em; position : fixed; text-align : right; width : 100%; z-index : 1; } div#right { background-color : #CDDBFF; background-position : 0 100px; font-size : 1em; height : 100%; position : fixed; right : 0; width : 12em; z-index : 2; } /* Not sure what this does for me, */ /* not the position, but the asterisks */ * html #head, * html #foot, * html #right { position : absolute; } div#pad1, div#pad2, div#pad3 { display : block; } /* To give some padding to the left heading text since I can't do padding-left */ div#pad1 { float : left; height : 1.25em; /* same as header */ width : 18px; } /* Used to put space above right section */ div#pad2 { height : 6em; /* same as header? */ } /* Used to put space to the right of the footer */ div#pad3 { float : right; width : 13em; /* same as right */ } /* make bolding a wee bit larger */ p.bold { color : #0040A9; font-size : 1.2em; font-weight : bold; } /* block of text on left or right side, ex: */ /* <div id="blockleft">some text, up to about 307 characters. */ div#blockleft { background : #EEFFDD; border : 1px solid #000000; color : #006633; float : left; font-family : Arial, sans-serif; height : 200px; left : 150px; margin : 5px; padding : 5px; top : 100px; width : 150px; } div#blockright { background : #DDEEFF; border : 1px solid #000000; color : #990066; float : right; font-family : Arial, sans-serif; height : 200px; margin : 5px; padding : 5px; right : 150px; top : 100px; width : 150px; } /* links in TOC on right div */ a.nav, a.nav:visited { color : #fff; display : block; font-weight : bold; height : 1.25em; padding-left : 10px; text-decoration : none; width : 100px; } a.nav:hover { color : #006600; } /* ruler break */ hr { color : #CC9966; width : 75%; } </style> </head> <body> <!-- ********** ********** ********** --> <!-- Header bar --> <!-- ********** ********** ********** --> <div id="head"><a name="sec_top"></a><div id="pad1"></div> Some header information</div> <!-- ********** ********** ********** --> <!-- footer bar --> <!-- ********** ********** ********** --> <div id="foot"> <br> © 2010 — Eric Peterson <div id="pad3"></div> </div> <!-- ********** ********** ********** --> <!-- right menu bar --> <!-- ********** ********** ********** --> <div id="right"><div id="pad2"></div> <!-- a list of links internal to this page --> <a class="nav" href="#sec_top" title="Section 1">Top of Page</a> <a class="nav" href="#content" title="Section 1">Section 1</a> <a class="nav" href="#sec2" title="Section 2">Section 2</a> <a class="nav" href="#sec3" title="Section 3">Section 3</a> <a class="nav" href="#sec_bot" title="Bottom">Bottom of Page</a> <hr> <!-- a list of links external to this page --> <a class="nav" href="http://www.google.com"; rel="external" target="_blank">Google</a> </div> <!-- ********** ********** ********** --> <!-- Main body of content --> <!-- ********** ********** ********** --> <div id="content"> <h2>header two</h2><a name="sec1"></a> <p class="bold">special paragrpaph bold</p> <p>Vivamus nisl dui, vehicula non lacinia non, molestie a neque. Donec elementum enim in tortor imperdiet sit amet dignissim orci euismod. Vestibulum eget eros auctor arcu dictum cursus. Phasellus sed nunc sit amet tortor dictum hendrerit. Ut vel lectus dui. Suspendisse rhoncus erat ac erat posuere fermentum. Proin id massa libero, id mollis metus. Pellentesque ut lacinia lectus. Curabitur a metus eget arcu pharetra dapibus. Nullam dictum nisi quis dui mollis eget mattis purus auctor. Donec tincidunt leo vitae dui accumsan vel eleifend justo molestie. Pellentesque pretium adipiscing purus, et imperdiet est aliquam nec.</p> <h3>header three</h3> <p>another<br> paragraph with a break.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis tincidunt magna, sagittis semper nulla convallis sit amet. Integer tempus ligula vel magna tincidunt accumsan. Suspendisse id nibh et tellus tincidunt tempor. Aenean justo orci, laoreet sed posuere non, consectetur rhoncus quam. Aliquam vel eros vitae sem sodales blandit pellentesque vitae urna. Praesent tincidunt augue eget est dapibus et posuere dolor consequat. Morbi sed tellus ipsum, vitae viverra erat. Sed sit amet metus vitae lorem gravida consectetur. Nulla congue suscipit ultrices. Donec condimentum, nisl in convallis iaculis, diam elit tincidunt eros, eget tincidunt nisl velit sit amet velit. Vivamus ut lectus at erat scelerisque commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris orci sem, malesuada facilisis venenatis in, viverra et augue.</p> <div id="blockleft">Duis <b>volutpat</b> interdum arcu ac ultrices. Fusce fermentum aliquet scelerisque. Curabitur mattis risus eu nulla vulputate tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas tellus nibh, ornare ac luctus id, eleifend ut neque.</div> <p>Sed interdum malesuada tincidunt. Maecenas enim urna, laoreet vitae suscipit nec, bibendum at risus. In feugiat sagittis commodo. Curabitur vitae sem tristique neque vestibulum laoreet. Cras lacinia ante quis elit venenatis interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam elementum scelerisque ante, ac convallis metus feugiat iaculis. Cras ligula lacus, consectetur quis aliquam et, cursus ut lectus. Nam lacinia fermentum tincidunt. Morbi non quam ante, quis blandit enim. In id augue quis nibh luctus varius et ac tellus. Maecenas pulvinar posuere nisi eget ullamcorper. Cras ac nisl nulla, et rutrum ante. Aenean eget posuere ipsum. Curabitur id est at odio ultrices ullamcorper. Vestibulum pulvinar mauris vitae nibh mattis eu fermentum tellus porta. Vivamus facilisis feugiat consectetur. Curabitur venenatis tempor ultrices. Suspendisse mi urna, pulvinar nec pharetra faucibus, sagittis eget lacus. Fusce lobortis ante vel ante condimentum aliquet.</p> <div id="blockright">Maecenas <i>porta tincidunt felis</i>, vitae fermentum libero interdum sed. Suspendisse hendrerit nibh sed eros commodo at faucibus tellus consequat. Mauris convallis eros non ligula convallis auctor aliquam urna sodales. Nunc aliquet consectetur metus, non varius lacus mollis sit amet.</div> <p>Aliquam malesuada pharetra lorem id luctus. Fusce dictum velit eu nibh semper ac tempus ante elementum. Praesent laoreet aliquet odio, a lobortis ligula gravida eu. Cras eu ante eget mi venenatis vulputate in ac lorem. Suspendisse venenatis tempor risus, quis facilisis nibh molestie quis. Integer viverra dignissim odio at luctus. Nullam non mi sapien, nec facilisis augue. Nunc sodales semper tellus et sollicitudin. Pellentesque consectetur lacinia lacus, eget fermentum arcu volutpat at. Suspendisse a risus sed eros feugiat dignissim. Cras vitae venenatis dolor. Proin blandit, nibh ac imperdiet consequat, lorem nisi scelerisque risus, bibendum tincidunt erat sem cursus dui. In non nisi nulla. In feugiat justo sit amet est tempor a elementum quam volutpat. Aliquam erat volutpat. Suspendisse id lorem purus. Donec tincidunt sem ac erat placerat ac rhoncus diam bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed orci leo, ullamcorper eget ullamcorper vel, malesuada ut sapien. Fusce dignissim magna at lectus sodales sed posuere felis aliquet.</p> <h3>header three</h3><a name="sec2"></a> <p>Donec sem dui, euismod ut feugiat at, malesuada vitae leo. Morbi dolor lectus, euismod eget luctus condimentum, condimentum vel erat. Aenean nunc leo, consectetur sed mollis at, euismod feugiat velit. Duis gravida est a velit egestas placerat. Quisque massa nunc, imperdiet non rhoncus eget, interdum vitae libero. Mauris lectus nisi, facilisis eget ullamcorper eu, elementum in erat. Phasellus ullamcorper nulla a libero auctor placerat eu eu tellus. Phasellus ac tempus purus. Curabitur urna dui, adipiscing eget ullamcorper eu, auctor a eros. In vestibulum, purus ac interdum placerat, ipsum ante fermentum massa, et ultricies quam velit in ipsum.</p> <p>Donec a nisl non turpis suscipit semper. In eget sapien et nisi posuere sollicitudin ut interdum enim. Donec pretium euismod scelerisque. Aliquam in erat velit, a venenatis leo. Donec pharetra orci quis lacus blandit eget aliquam tellus tincidunt. In porta dignissim enim, vel tincidunt eros molestie quis. Mauris in suscipit purus. Proin sem sem, malesuada id venenatis in, interdum et mauris. In posuere porta libero sit amet dignissim. Aenean vel ligula mi, nec accumsan eros. Pellentesque a metus metus, sit amet ornare dui. Vestibulum sit amet libero dui, vitae scelerisque tellus. Sed iaculis imperdiet turpis ut molestie. Aenean congue felis in sapien varius malesuada vitae id lorem.</p> <h3>header three</h3><a name="sec3"></a> <p>Vestibulum ut est est, in auctor odio. Ut tristique hendrerit mollis. Cras in dui non sem pharetra faucibus nec sed lacus. Proin nec risus eget justo aliquam iaculis. Proin accumsan mi erat, nec vehicula mauris. Aenean at pharetra purus. Etiam vel lectus sed nunc gravida blandit. Vestibulum eget accumsan lorem. Quisque mauris dui, pulvinar dapibus commodo vel, laoreet sed nulla. Maecenas vel nibh odio. Mauris vel luctus odio. Proin ultrices sagittis sem. Nulla ultricies lacus sed nisi mollis ullamcorper. Suspendisse consequat faucibus mollis. Sed varius, erat sit amet tristique vehicula, eros ligula mollis lorem, vitae porta tortor eros id elit. Nulla varius lacinia tincidunt. Suspendisse dignissim lacus ut mi auctor suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce auctor dictum sem, id vestibulum tortor rhoncus ut.</p> <p>Eric Peterson</p><a name="sec_bot"></a> <br><br><br><br><br><br> <!-- about height of footer --> </div> </body></html> ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
