Thanks for help provided; so far, still looking for more :) First, the discussion about the font style is a bit early in this process. I have not decided on a font styling for my pages. The fonts I chose before were just something I had grabbed from a previous file I had worked on. Below I put some fantasy fonts to see what they look like. I am not focused on this part of my design (just yet).
Second, ideas of using <h1> and <h2> as the header/footer is an interesting idea, but I'd rather keep those tags for what they ere designed for. Next, I've updated my test (below). It works better, but still has issues. For example: * in Firefox (v.3.6.3) the right sidebar is not visible. What spacing/padding am I doing wrong? * The internal links work just fine in Safari (v.5.0), but not in Opera (v.10.53 & v.10.54). The <a..> link I have is above each associated header with a very thin space. Clicking in Opera the paragraph <p> below the header is brought to the top of the page. In Safari, the header is correctly at the top of the page. Is the way I put the internal link incorrect? * I am not sure the right sidebar is correct. I have to overrule the <hr> element to get it to appear. Without that overrule entry the element is barely visible on the right. What did I miss? * I agree in some areas, I am a bit verbose in some of the css elements, still trying to figure out the shortcuts. :) Thanks again for all your help and insight. Again, I apologize for having such a long message. Eric <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";> <html lang="en-US" dir="ltr"> <head> <title>Technical Travails - homepage</title> <meta name="author" content="Eric Peterson"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="Content-Language" content="en-US, en"> <meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noodp, noydir, noimageindex, notranslate"> <link rel="icon" href="images/favicon.ico" type="image/vnd.microsoft.icon"> <style> body { margin : 0; padding : 0; background-color : #FCF8DC; color : #000000; } div.header { background-color : #E9E8AE; color : #FF6600; display : block; font-size : 2em; height : 1.25em; margin : 0; position : fixed; right : 0; top : 0; width : 100%; z-index : 1; /* be on top of right column */ } /* over rule hr shorter length */ hr.nav_hr { width :100%; } div#rightcol { background : #D7D394; color : #000000; float : right; width : 10em; height : auto; padding-left : 0.5em; min-height : 100%; display : inline; padding-top : 1em; padding-bottom : 1em; position : fixed; margin-left : 85%; margin-bottom : 4em; margin-top : 2em; margin-right : 0; overflow : auto; width : 100%; } div#content { background : #FCF8DC; color : #000000; float : left; width : 80%; height : auto; margin-top : 1.25em; /* height of header */ padding-left : 1.5em; padding-bottom : 1.5em; /* height of footer */ } div#footer { clear : both; background : #CC9966; bottom : 0; color : #FFFFFF; font-size : 1em; height : 1.5em; vertical-align : middle; position : fixed; text-align : right; width : 100%; } hr { width : 75%; color : #CC9965; } /* links in TOC on right div */ a.nav, a.nav:visited { color : #FFFFFF; display : block; font-weight : bold; text-decoration : none; } a.nav:hover { color : #006600; } h1.title { color : #CC3366; font-size : 0.9em; font-family : fantasy; padding-left : 0.5em; padding-top : 0.2em; margin : 0; } h4.title { color : #CC3366; font-size : 1.5em; font-family : Herculanum, Papyrus, fantasy; margin : 0; } table.header { height : 1.25em; width : 100%; } table.header td { padding : 0; } table.header td#right{ color : #996633; font-family : sans-serif; font-size : 30%; padding-right : 2em; text-align : right; } table.footer { border : 0; outline-style : none; border-spacing : 0; height : 100%; width : 100%; margin : 0; padding-bottom : 0; padding-top : 0.1em; font-size : 0.75em; vertical-align : middle; } td#f_left { padding-left : 1em; font-style : italic; text-align : left; color : #008000; } td#f_right { padding-right : 1em; color : #008000; text-align : right; } td#f_middle { text-align : center; } td#f_middle a { color : #FFFFFF; font-weight : bold; text-decoration : none; } td#f_middle a:hover { color : #006600; } address#me { color : #BFBFBF; font-size : 0.74em; text-align : right; } </style> </head> <body> <div class="header"> <!-- ********** ********** ********** --> <!-- header information, title and link --> <!-- ********** ********** ********** --> <table class="header" summary="logo"> <tbody><tr> <td><h1 class="title">Title - Say something nice</h1></td> <td id="right">home</td> </tr></tbody> </table> <!-- ********** ********** ********** --> </div> <div id="rightcol"> <br> <!-- ********** ********** ********** --> <!-- internal and external links pertinent to this page --> <!-- ********** ********** ********** --> <h4 class="title">Links</h4> <a class="nav" href="thisfile.html" title="reload">reload</a> <a class="nav" href="#sec_top" title="Top">Top of Page</a> <a class="nav" href="#sec_1" title="Section 1">Section 1</a> <a class="nav" href="#sec_2" title="Section 2">Section 2</a> <a class="nav" href="#sec_3" title="Section 3">Section 3</a> <a class="nav" href="#sec_4" title="Section 4">Section 4</a> <a class="nav" href="#sec_5" title="Section 5">Section 5</a> <a class="nav" href="#sec_6" title="Section 6">Section 6</a> <a class="nav" href="#sec_bot" title="Bottom">Bottom of Page</a> <hr class="nav_hr"> <a class="nav" href="http://www.google.com/"; rel="external" target="_blank">Google</a> <!-- ********** ********** ********** --> </div> <div id="footer"> <!-- ********** ********** ********** --> <!-- footer information --> <!-- ********** ********** ********** --> <table class="footer" summary="footer"> <tbody><tr> <td id="f_left">Eric Peterson</td> <td id="f_middle"> <a href="home.html" title="Home Page" onmouseover="window.status='Go Home!'; return true" onmouseout="window.status='';return true">Home</a> <a href="sitemap.html" title="Index Page" onmouseover="window.status='Get some help!'; return true" onmouseout="window.status='';return true">Index/Sitemap</a> <a href="env.html" title="Environment" onmouseover="window.status='Environmental conditions!'; return true" onmouseout="window.status='';return true">Environment</a> </td> <td id="f_right"> <p>some date goes here</p> </td> </tr></tbody> </table> <!-- ********** ********** ********** --> </div> <div id="content"><a name="sec_top">​</a> <!-- ********** ********** ********** --> <!-- body information --> <!-- ********** ********** ********** --> <a name="sec_1">​</a><h1>Main Content</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis tincclassunt magna, sagittis semper nulla convallis sit amet. Integer tempus ligula vel magna tincclassunt accumsan. Suspendisse class nibh et tellus tincclassunt tempor. Aenean justo orci, laoreet sed posuere non, consectetur rhoncus quam. Aliquam vel eros vitae sem sodales blandit pellentesque vitae urna. Praesent tincclassunt augue eget est dapibus et posuere dolor consequat. Morbi sed tellus ipsum, vitae viverra erat. Sed sit amet metus vitae lorem gravclassa consectetur. Nulla congue suscipit ultrices. Donec condimentum, nisl in convallis iaculis, diam elit tincclassunt eros, eget tincclassunt 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> <a name="sec_2">​</a><h2>second header</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis tincclassunt magna, sagittis semper nulla convallis sit amet. Integer tempus ligula vel magna tincclassunt accumsan. Suspendisse class nibh et tellus tincclassunt tempor. Aenean justo orci, laoreet sed posuere non, consectetur rhoncus quam. Aliquam vel eros vitae sem sodales blandit pellentesque vitae urna. Praesent tincclassunt augue eget est dapibus et posuere dolor consequat. Morbi sed tellus ipsum, vitae viverra erat. Sed sit amet metus vitae lorem gravclassa consectetur. Nulla congue suscipit ultrices. Donec condimentum, nisl in convallis iaculis, diam elit tincclassunt eros, eget tincclassunt 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> <a name="sec_3">​</a><h3>third header</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis tincclassunt magna, sagittis semper nulla convallis sit amet. Integer tempus ligula vel magna tincclassunt accumsan. Suspendisse class nibh et tellus tincclassunt tempor. Aenean justo orci, laoreet sed posuere non, consectetur rhoncus quam. Aliquam vel eros vitae sem sodales blandit pellentesque vitae urna. Praesent tincclassunt augue eget est dapibus et posuere dolor consequat. Morbi sed tellus ipsum, vitae viverra erat. Sed sit amet metus vitae lorem gravclassa consectetur. Nulla congue suscipit ultrices. Donec condimentum, nisl in convallis iaculis, diam elit tincclassunt eros, eget tincclassunt 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> <a name="sec_4">​</a><h4>fourth header</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis tincclassunt magna, sagittis semper nulla convallis sit amet. Integer tempus ligula vel magna tincclassunt accumsan. Suspendisse class nibh et tellus tincclassunt tempor. Aenean justo orci, laoreet sed posuere non, consectetur rhoncus quam. Aliquam vel eros vitae sem sodales blandit pellentesque vitae urna. Praesent tincclassunt augue eget est dapibus et posuere dolor consequat. Morbi sed tellus ipsum, vitae viverra erat. Sed sit amet metus vitae lorem gravclassa consectetur. Nulla congue suscipit ultrices. Donec condimentum, nisl in convallis iaculis, diam elit tincclassunt eros, eget tincclassunt 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> <a name="sec_5">​</a><h5>fifth header</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis tincclassunt magna, sagittis semper nulla convallis sit amet. Integer tempus ligula vel magna tincclassunt accumsan. Suspendisse class nibh et tellus tincclassunt tempor. Aenean justo orci, laoreet sed posuere non, consectetur rhoncus quam. Aliquam vel eros vitae sem sodales blandit pellentesque vitae urna. Praesent tincclassunt augue eget est dapibus et posuere dolor consequat. Morbi sed tellus ipsum, vitae viverra erat. Sed sit amet metus vitae lorem gravclassa consectetur. Nulla congue suscipit ultrices. Donec condimentum, nisl in convallis iaculis, diam elit tincclassunt eros, eget tincclassunt 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> <a name="sec_6">​</a><h6>sixth header</h6> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis tincclassunt magna, sagittis semper nulla convallis sit amet. Integer tempus ligula vel magna tincclassunt accumsan. Suspendisse class nibh et tellus tincclassunt tempor. Aenean justo orci, laoreet sed posuere non, consectetur rhoncus quam. Aliquam vel eros vitae sem sodales blandit pellentesque vitae urna. Praesent tincclassunt augue eget est dapibus et posuere dolor consequat. Morbi sed tellus ipsum, vitae viverra erat. Sed sit amet metus vitae lorem gravclassa consectetur. Nulla congue suscipit ultrices. Donec condimentum, nisl in convallis iaculis, diam elit tincclassunt eros, eget tincclassunt 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> <!-- ********** ********** ********** --> <hr> <address id="me">Eric Peterson</address> <a name="sec_bot">​</a> </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/
