Results 1 to 7 of 7

Thread: Upgrading from tables to CSS layout

  1. #1
    Join Date
    Dec 2007
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Upgrading from tables to CSS layout

    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

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,620
    Thanks
    1
    Thanked 249 Times in 244 Posts

    Default

    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

  3. #3
    Join Date
    Jun 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    M8 you Rock!

  4. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,620
    Thanks
    1
    Thanked 249 Times in 244 Posts

    Default

    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

  5. #5
    Join Date
    Jun 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  6. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,620
    Thanks
    1
    Thanked 249 Times in 244 Posts

    Default

    So it seems that Snot likes the solution too.

  7. #7
    Join Date
    Dec 2007
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •