Breaking free of tables: take two (abs vs rel positioning) — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

Breaking free of tables: take two (abs vs rel positioning)

This page's ID: 23718

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	you need to specify a doctype first of all, secondly, I've made some [url=http://disk919.com/bb2/www/samara.html]changes for you to look at here[/url] as we go over the points of change (all based on the xhtml transitional doctype and not gone over for browser compatability and applicable hacks applied, there are also commented notes in the markup/css itself): 1. you had an errant closing style tag: [code]<link href="samara.css" rel="stylesheet" type="text/css" media="all"> </style>[/code] 2. there was no closing tag for <div class="content"> 3. all your tags need to be closed: [code]<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">... <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <img src="images/spiral_small.jpg" width="150" height="150" alt="">... <img src="images/spiral_small.jpg" width="150" height="150" alt="" />[/code] 4. did a find and replace to just remove every occurance of position relative in the stylesheet (as a result there may be an errant ";" here and there ;)) and removed all (I think) the occurances of top: left: right: ect as those need to be preceeded by position:absolute to have effect 5. added a utilitarian class "floatl" and used it to float the samara_logo and then added the text-align:right and margin-right to the p in the header div (top-stretch), you could monkey with margins on that P to position it further to your liking 6. navigation: - put navcontainer inside the content div (semantics say no probably but we're trying to display positioning help here mostly right?) and floated it right - removed 100% width of the nav ul in order to allow it to float properly to the right 7. lessee, can we remove that s-tail div? yes, by putting it in the background of #content (changed "content" from a class to an ID as it will only be used once per page and is a structural element) changed your content margin to padding, this will allow the background-image to align with the image in the header.top-stretch 8. moved the overview image inside the content div and voila, it's been position acccording to the padding applied to that div and lines up with everything else. I also removed the P tags around it, the P is a block level element and the one above the image will force the image to a new line anyhoo. 9. removed the div class="spiral" and added the graphical element to the background of the BODY I noted things here as best I could as I went through it but I'm not necessarily known for my documentation prowess ;) Let this be a starting point to jump off from and ask questions, there's been plenty left open for discussion! [url=http://disk919.com/] [img]http://disk919.com/sig/jason.gif[/img] [/url] weird editing's afoot here... [small](Edited by [internallink=403]JKMabry[/internallink] on 10-20-2004 20:47)[/small] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu