> This was originally a 3 col layout (using floats). The far left is > the navigation, followed by the main content and the secondary > content (to the far right). Since then I've decided to see how > dropping the secondary below the main would be and then adding in a > second secondary and having those two elements next to each other. > I've also decided to stick the navigation up in the header (inspired > by some site I came across). Right now the "content" wrapper for the > main and secondary's are sitting too far below the header. Also , in > IE6 the secondary and second secondary are to the right on their own. > Hello Mark,
I don't know if this is what you want. I had to rearrange the selectors somewhat. Hope that doesn't bother you. I have renamed secondsecondaryContent to secondSecondaryContent and all its properties to keep the name convention. Furthermore I have changed the paths of the images to /images, so please keep this is mind when the images are missing while testing. HTH Niklas <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> body { font-size: 62.5%; background-color: #000000; background-repeat: no-repeat; background-position: 9em 11.5em; } /* main page elements */ #wrapper { width: 72em; margin: 0 auto; text-align: left; } #header { height: 20em; background-repeat: no-repeat; background-position: right top; background-color: #FFFFFF; } #menu { float: left; } #content { width: 52em; background-color: #333333; background-repeat: no-repeat; background-position: left top; float: right; } #mainContent { width: 48em; margin-left: 1.8em; margin-top: 1em; background-image: url(images/content_bg.gif); border-right-width: thick; border-bottom-width: thick; border-right-style: solid; border-bottom-style: solid; border-right-color: #CCCCCC; border-bottom-color: #CCCCCC; border-top-width: thin; border-top-style: solid; border-top-color: #FFFFFF; border-left-width: thin; border-left-style: solid; border-left-color: #FFFFFF; } #secondaryContent { width: 24em; margin-left: 1.8em; margin-top: 1em; background-color: #000000; float: left; } /* double margin IE bug hack */ /* only IE (Win, Mac) from version 5 */ * html #secondaryContent { /* next definition is excluded by IE 5 (Mac) \*/ margin-left: 0.9em; /* */ } #secondSecondaryContent { width: 24em; margin-left: 0em; margin-top: 1em; background-color: #000000; float: left; } /* other and typographical elements */ #leftimage { width: 18em; background-image: url(images/PoserMan_alt.gif); height: 24em; background-repeat: no-repeat; margin-top: 150%; background-color: #FFFFFF; border: thin groove #CCCCCC; } #triContent { float: left; margin-top: 2em; clear: right; } #mainContent p { font-size: 1.2em; padding: 2%; } #mainContent h1 { font-size: 1.8em; color: #FFFFFF; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; padding-top: 1%; } #secondaryContent p { color: #FFFFFF; padding: 2%; } #secondaryContent h1 { color: #CCCC00; font-size: 1.8em; text-align: center; background-color: #666666; border-bottom-width: thin; border-bottom-style: dotted; border-bottom-color: #CC6633; border-top-width: thin; border-top-style: solid; border-top-color: #FFFFFF; margin-top: 0em; } #secondSecondaryContent p { color: #FFFFFF; padding: 2%; } #secondSecondaryContent h1 { color: #CCCC00; font-size: 1.8em; text-align: center; background-color: #666666; border-bottom-width: thin; border-bottom-style: dotted; border-bottom-color: #CC6633; border-top-width: thin; border-top-style: solid; border-top-color: #FFFFFF; margin-top: 0em; } /* Side Navigation */ #menu a, #menu a:visited { text-decoration:none; text-align:center; color:#000000; display:block; border:2px solid #fff; border-color:#def #678 #345 #cde; padding: 1em; font-size: 1.1em; font-family: Arial, Helvetica, sans-serif; background-image: url(images/links_bg.gif); background-repeat: no-repeat; background-position: center center; background-color: #000000; width: 12em; } #menu a:hover { top:2px; left:2px; color:#000000; border-color:#345 #cde #def #678; background-color: #2594E1; } </style> </head> <body> <!-- works on Windows with: Firefox V1.0.6 Firefox V1.5.0.3 IE 6 IE 7 beta 2 Opera V7.23 Opera V8.54 Mozilla V1.7.1 Netscape V7.1 --> <div id="wrapper"> <div id="header"> <div id="menu"> <a href="#nogo">Item 1</a> <a href="#nogo">Item 2</a> <a href="#nogo">Item 3</a> <a href="#nogo">Item 4</a> <a href="#nogo">Item 5</a> </div> </div> <div id="content"> <div id="mainContent"> <h1>Lorem ipsum dolor</h1> <p>sit amet, consectetuer adipiscing elit. Fusce bibendum. Proin auctor tincidunt neque. In hendrerit. Donec ut metus. Nullam magna dui, vehicula quis, vulputate non, tempor sit amet, elit. Proin pretium. Ut quis pede ut metus placerat bibendum. Aliquam molestie facilisis mauris. Nam tempus. Sed elit libero, adipiscing sit amet, pulvinar a, viverra ac, purus. Fusce vitae libero. Phasellus mollis. Vivamus malesuada, pede eget laoreet molestie, lacus ipsum imperdiet nisi, non mollis enim arcu id leo. Sed egestas. Donec sit amet metus. Etiam aliquam</p> </div> <div id="secondaryContent"> <h1>Lorem ipsum dolor sit</h1> <p>consectetuer adipiscing elit. Fusce bibendum. Proin auctor tincidunt neque. In hendrerit. Donec ut metus. Nullam magna dui, vehicula quis, vulputate non, tempor sit amet, elit. Proin pretium. Ut quis pede ut metus placerat bibendum. Aliquam molestie facilisis mauris. Nam tempus. Sed elit libero, adipiscing sit amet, pulvinar a, viverra ac, purus. Fusce vitae libero. Phasellus mollis. Vivamus malesuada, pede eget laoreet molestie, lacus ipsum imperdiet nisi, non mollis enim arcu id leo. Sed egestas. Donec sit amet metus. Etiam aliquam Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce bibendum. Proin auctor tincidunt neque. In hendrerit. Donec ut metus</p> </div> <div id="secondSecondaryContent"> <h1>Lorem ipsum dolor sit</h1> <p>consectetuer adipiscing elit. Fusce bibendum. Proin auctor tincidunt neque. In hendrerit. Donec ut metus. Nullam magna dui, vehicula quis, vulputate non, tempor sit amet, elit. Proin pretium. Ut quis pede ut metus placerat bibendum. Aliquam molestie facilisis mauris. Nam tempus. Sed elit libero, adipiscing sit amet, pulvinar a, viverra ac, purus. Fusce vitae libero. Phasellus mollis. Vivamus malesuada, pede eget laoreet molestie, lacus ipsum imperdiet nisi, non mollis enim arcu id leo. Sed egestas. Donec sit amet metus. Etiam aliquam Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce bibendum. Proin auctor tincidunt neque. In hendrerit. Donec ut metus</p> </div> </div> </div> </body> </html> ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
