Upgrading from tables to CSS layout

**Snot** · 12-01-2007, 03:39 AM

How do you get started when creating a layout in css?

I have this right now http://www.drysnot.com/index.html

I am trying to make it look like this using css http://www.drysnot.com/index2.html

Could you show me a some code or a walk though that will show me how to set my images up like that?

Thanks so much for the help

**coothead** · 12-02-2007, 12:28 PM

Hi there Snot,

and a warm welcome to these forums.

Have a look at this example, it may suit your requirements...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>DrySnot</title>
<base href="http://www.drysnot.com/"><!--this is for coothead testing and can be removed-->
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="animated_favicon1.gif" type="image/gif">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
    background-color:#282828;
 }
#container {
    width:951px;
    height:518px;
    padding-top:210px;
    padding-left:183px;
    background-image:url(/images/taste.gif);
    background-repeat:no-repeat;
    margin:20px auto;
 }
#left {
    width:134px;
    display:inline;
    float:left;
 }
#right {
    width:134px;
    margin-left:500px;
    display:inline;
    float:left;
 }
#left img,#right img {
    width:134px;
    border:0 solid;
    display:block;
 }
#elated, #elated a {
    font-family:arial,helvetica,sans-serif;
    font-size:10px;
    color:#fff;
    text-align:center;
 }
</style>

<script type="text/javascript">
   browserName=navigator.appName;
   browserVer=parseInt ( navigator.appVersion );
   version="n2";
if(browserName=="Netscape"&&browserVer>=3) {
   version="n3";
 }
if(browserName=="Microsoft Internet Explorer"&&browserVer>=4) {
   version="e4";
 }
if(version=="n3"||version=="e4") {
   about_on=new Image(134,94);
   about_on.src="menuimages/about_on.gif";
   products_on=new Image(72,69);
   products_on.src="menuimages/products_on.gif";
   news_on=new Image(134,70);
   news_on.src="menuimages/news_on.gif";
   links_on=new Image(134,94);
   links_on.src="menuimages/links_on.gif";
   guestbook_on=new Image(134,94);
   guestbook_on.src="menuimages/guestbook_on.gif";
   email_on=new Image(134,70);
   email_on.src="menuimages/email_on.gif";
   about_off=new Image(134,94);
   about_off.src="menuimages/about_off.gif";
   products_off=new Image ( 134, 108 );
   products_off.src="menuimages/products_off.gif";
   news_off=new Image(134,70);
   news_off.src="menuimages/news_off.gif";
   links_off=new Image(134,94);
   links_off.src="menuimages/links_off.gif";
   guestbook_off=new Image(134,108);
   guestbook_off.src="menuimages/guestbook_off.gif";
   email_off=new Image(134,70);
   email_off.src="menuimages/email_off.gif";
 }
function button_on(imgName) {
if(version=="n3"||version=="e4") {
   butOn=eval(imgName+"_on.src");
   document[imgName].src=butOn;
  }
 }
function button_off(imgName) {
if(version=="n3"||version=="e4") {
   butOff=eval(imgName+"_off.src");
   document[imgName].src=butOff;
  }
 }
</script>

</head>
<body>

<div id="container">
<div id="left">
<a href="forums" onmouseout="button_off('about'); return true" onmouseover="button_on('about'); return true">
<img src="menuimages/about_off.gif" name="about" height="94" alt="">
</a>
<a href="products" onmouseout="button_off('products'); return true" onmouseover="button_on('products'); return true">
<img src="menuimages/products_off.gif" name="products" height="108" alt="">
</a>
<a href="index.html" onmouseout="button_off('news'); return true" onmouseover="button_on('news'); return true">
<img src="menuimages/news_off.gif" name="news" height="70" alt="">
</a>

</div>
<div id="right">
<a href="links.html" onmouseout="button_off('links'); return true" onmouseover="button_on('links'); return true">
<img src="menuimages/links_off.gif" name="links" height="94" alt="">
</a>
<a href="guesbook.html" onmouseout="button_off('guestbook'); return true" onmouseover="button_on('guestbook'); return true">
<img src="menuimages/guestbook_off.gif" name="guestbook" height="108" alt="">
</a>
<a href="contact.html" onmouseout="button_off('email'); return true" onmouseover="button_on('email'); return true">
<img src="menuimages/email_off.gif" name="email" height="70" alt="">
</a>

</div>
</div>
<div id="elated">ELATED PageKits &copy; 2002 <a href="http://www.elated.com/" target="_top">ELATED.com</a> / <a href="http://www.pagekits.com/" target="_top">PageKits.com</a></div>
</body>
</html>

coothead

**NovaArgon** · 12-02-2007, 09:55 PM

Sweet man that works great!!! Thank you so much!!!

M8 you Rock!

**coothead** · 12-02-2007, 10:06 PM

Hi there NovaArgon,

Why are you thanking me for this.

I thought that the code was for the OP... snot.

But, of course, if it brings you pleasure too......

coothead

**NovaArgon** · 12-02-2007, 10:38 PM

Lol same person I didn't know I had two accounts here... Must have registered twice by mistake

**coothead** · 12-02-2007, 11:04 PM

So it seems that Snot likes the solution too.

**Snot** · 12-02-2007, 11:15 PM

Yes haha if one one the mods would like to delete the NovaArgon account that would be fine with me.

No that I have something to go by i'm going to adjust the background Image so its not so big.

Thank you so much for your help.

Thread: Upgrading from tables to CSS layout

Thread Tools

Search Thread

Upgrading from tables to CSS layout

Bookmarks

Bookmarks

Posting Permissions