nagabhavana Posted December 2, 2005 Share Posted December 2, 2005 Hi all,I was wondering if anyone has tried a html page using CSS with no table layouts. Please let me know.- NB Link to comment Share on other sites More sharing options...
aspnetguy Posted December 2, 2005 Share Posted December 2, 2005 (edited) Yes I have.I find there is much less HTML code which allows for better readability and looks cleaner.Look at http://www.spatterdesign.ca/sites/92js. This is done with no tables, please don't mind the large white void in the center of the page...this is a work in progress...actually I am waiting for hte client to decide on a picture.HTML code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><head> <title>Spatter Design - It's just easier</title> <link rel="stylesheet" href="css/92js.css" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head><body> <div class="Wrapper"> <div class="BandBio">The music of U2 has always been about heart and mind, body and soul. Down the years the band have succesfully thrown a spotlight on the work of key campaigning groups who are trying to make the world a better place.<br /><br />From Amnesty International and Greenpeace through to DATA and the Chernobyl Childrens Project, U2 have used benefit concerts, songwriting, public campaigning, special visits and fund-raising projects to promote a range of charities and activist communities worldwide.<br /><br />In our news column on the left, you'll be kept up to date with stories that reflect the band's involvement in some of these areas. </div> <div class="TunesBox"> <a href="#" onclick="window.open(this.href);return false;"> Click here to listen to songs from the 92J's. </a> </div> <div class="CdLink"> <a href=""> </a> </div> <div class="ContactInfo"> <img src="images/Contact.gif" alt="" /> <br /> <a href="mailto:band@92js.com">band@92js.com</a> 902.555.0000 </div> </div> <div class="Copyright"> © 2005 92J's. All rights reserved.<br /> Design by Spatter Design. </div></body></html> CSS file html, body { margin: 0px; background-image: url(../images/92js_BodyBg.jpg); font-family: Verdana, sans-serif; font-size: 8pt; } a { color: #0000ff; } .BandBio { float: left; position: relative; top: 240px; left: 40px; overflow: auto; border: 0px solid white; width: 200px; height: 240px; padding: 5px; } .CdLink a { display:block; width: 230px; height: 100px; border: 0px solid black; position: relative; top: 390px; left: -45px; text-decoration: none; } .CdLink a:hover { border: 0px solid black; background-color: #ffffff; filter:alpha(Opacity=20); } .ContactInfo { width: 150px; height: 100px; border: 0px solid #000000; position: relative; top: 340px; left: 200px; text-align: center; } .ContactInfo a { text-decoration: none; color: #747474; } .ContactInfo a:hover { text-decoration: line-through; } .Copyright { width: 100%; text-align: center; color: #747474; padding: 5px; } .TunesBox { float: left; position: relative; top: 50px; left: 330px; overflow: auto; border: 0px solid white; width: 115px; height: 110px; padding: 5px; font-size: 7pt; } .TunesBox a { color: #ffffff; } .TunesBox a:hover { color: #000000; } .Wrapper { width: 698px; height: 543px; margin: auto; background-image: url(../images/92js_MainBg.jpg); } I find the easiest way to acheive tableless layouts is to put the layout into a background image, wrap everything in a mother <div> and then use relative positioning for everything else.(changed display to code box to save room - skemcin) Edited December 2, 2005 by Skemcin Link to comment Share on other sites More sharing options...
nagabhavana Posted December 2, 2005 Author Share Posted December 2, 2005 Wow...This is cool. Thanks a lot Link to comment Share on other sites More sharing options...
aspnetguy Posted December 2, 2005 Share Posted December 2, 2005 no problem Link to comment Share on other sites More sharing options...
F-Man Posted December 2, 2005 Share Posted December 2, 2005 Of course I have.http://htmldog.com/guides/cssadvanced/layout/ is a good thing to read to get started on it. Link to comment Share on other sites More sharing options...
|)3nn15 Posted December 2, 2005 Share Posted December 2, 2005 I've tried no-table design. It takes a bit of getting used to, but once you've stepped over into the realm of no-table-based designs, you won't want to go back!Here's a prototype of a site I'll be launching, which has absolutely no tables: linkCheers,Dennis Link to comment Share on other sites More sharing options...
Jonas Posted December 3, 2005 Share Posted December 3, 2005 Hi all,I was wondering if anyone has tried a html page using CSS with no table layouts. Please let me know.- NB<{POST_SNAPBACK}> Tried and conquered... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now