Jump to content

No table layout


nagabhavana

Recommended Posts

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 by Skemcin
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...