making this css layout work... — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

making this css layout work...

This page's ID: 11119

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	I've decided that its just gotta happen. I'm going to start designing in all css. I have moderate experience and knowledge of it, but now I'm starting to use it for layout and positioning. How do I make this layout work in both ie, and netscape (6)/mozilla? [code] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Basic 3-Column Sample Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- body { background-color: teal; margin: 20px; padding: 0; font-size: .7em; font-family: verdana, arial, helvetica, sans-serif; } h1,h3 { font-family: verdana, arial, helvetica, sans-serif; margin: 0 0 15px 0; padding: 0; color: #888; } h2 { font-family: verdana, arial, helvetica, sans-serif; margin: 0 0 5px 0; padding: 0; font-size: 1.1em; } p { font-family: verdana, arial, helvetica, sans-serif; line-height: 1.1em; margin: 0 0 16px 0; padding: 0; } .content>p { margin: 0; } .content>p+p { text-indent: 30px; } a { color: teal; font-family: verdana, arial, helvetica, sans-serif; font-weight: 600; text-decoration: none; } a:link { color: teal; } a:visited { color: teal; } a:hover { background-color: #bbb; } .container { align: center; width: 600px; background-color: red; border: 1px solid blue; margin: 10px auto 0px auto; } .header { position: relative; width: 600px; min-width: 100px; margin: 0px 0px 0px 0px; border: 1px solid black; background-color: white; padding: 10px; height: 150px; z-index: 4; } .footer { position: relative; width: 600px; min-width: 100px; margin: 0px 0px 0px 0px; border: 1px solid black; background-color: white; padding: 10px; height: 150px; z-index: 4; } /* All the content boxes belong to the content class. */ .content { position: relative; width: 300; min-width: 100px; margin: 0px 175px 0px 0px; border: 1px solid black; background-color: white; padding: 10px; z-index: 3; } #navright { position: absolute; width: 175px; top: 203px; MARGIN-TOP: 3px; MARGIN-LEFT: 425px; PADDING-RIGHT: 10px; padding-left:10px; border: 1px solid black; background-color: #eee; padding: 10px; } .box { background-color:white; border:1px solid black; width:600px; height:200px; margin: 0px 0px 0px 0px; } --> </style> </head> <body> <div class="container"> <div class="header">blah blah<P></div> <div class="content"> <h3>Getting the Lay of the Land</h3> <p>We can look at Cascading Style Sheets (CSS) from a number of contextual perspectives. I prefer to view them as a correction to a fundamental mistake that was made at the beginning of Web Time, back in the old days of the mid-1990's when Tim Berners-Lee and a subsequent phalanx of Web builders first envisioned the beginnings of the Web.</p> <p>What was that mistake?</p> </div> <div class="content"> <h3>CSS in Context</h3> <p>Almost as soon as the Web became popular, graphic designers began noticing what they saw as a fundamental flaw: the method by which a Web browser displayed information in HTML files was not within the designers' control. No, it was the users who were in primary charge of how the Web pages they visited would appear on their systems.</p> </div> <div class="content"> <h3>Keep Adding Content</h3> <p>You can see that as you keep adding content to this page, it adds nicely boxed and centered material down the center of the page.</p> </div> <div id="navright"> <h3>Why CSS is Better</h3> <p>Style sheets allow you to separate content from its presentation, which leads to pages that are more easily reproduced as templates for other pages and to vastly easier maintenance. Smaller file sizes, fewer place-holder graphics, and faster load times are some of the other benefits of CSS.</p> <p>If you have other ideas on this subject, <a href="mailto:dan@danshafer.com">drop me an email</a> and let's talk about it!</p> </div> <div class="footer"></div> </div> </body> </html> [/code] Please bear with me, I have a feeling I'll be posting alot here :) [img]http://www.zerooneproductions.net/sigs/graphitti_jive.gif[/img] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu