Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post

    Using <divs> instead of Tables.

    Ok so I got the template design ready (.psd) on Adobe PhotoShop CS3.

    Click here to see design

    and I've been told using the Slice tool for Web in PS Cs3 can be bad because it uses tables and I wanna use <divs> and make it browser compatible with all the big brand browsers (FireFox, Internet Explorer, Opera, Safari, etc.).

    So would this be in example?

    Code:
    <body>
    <div id="header"> Logo & SLOGAN</div>
    
    <div id="green-header-links">LINK 1 | LINK 2| LINK 3</div>	
    
    
    <div  id="main">
    
    <p>
    THIS WOULD BE BODY
    </p>
    
    </div>
    
    <div id="left-MENU"> LEFT MENU STUFF</div>
    <div id="footer"><p> (C) 2008 blah blah </p></div>
    
    </body>
    Something like that? And you would say. How would you incorporate the images?? Well maybe something like this:

    Code:
    #header {
    font-text: tahoma;
    font-size: 12px;
    background: url(images/header.png)
    width: ##px;
    height: ##px;
    }
    SO yeah, I'm not sure if I am going in the right direction but I really want to do this. Anyways, thanks for any help you may give.

    - MysticScript.
    Formerly MysticScript

    6+ years club

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    thats about right, the only thing i would do is slice images really small height wise if its going to be the same all of the way down and repeat it. That way you dont have large images loading

    ex

    Code:
    #header {
    font-text: tahoma;
    font-size: 12px;
    background: url(images/header.png);
    background-repeat:repeat;
    width: ##px;
    height: ##px;
    }
    It might be easier.

  • #3
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    Quote Originally Posted by jcdevelopment View Post
    thats about right, the only thing i would do is slice images really small height wise if its going to be the same all of the way down and repeat it. That way you dont have large images loading

    ex

    Code:
    #header {
    font-text: tahoma;
    font-size: 12px;
    background: url(images/header.png);
    background-repeat:repeat;
    width: ##px;
    height: ##px;
    }
    It might be easier.
    You're a wise man. If this works, I am going to message back. If it doesn't I still will! xD

    Annnyways. Thanks.

    Also how do people make templates browser compatible? Look this is the old test: http://sodadome.com/temp2/

    if you go to Internet Explorer you see the left menu bottom border - it should be sticking out.
    While in FireFox it stays inside. And in Safari the text is WAY BOLDED.

    And sometimes the footer image doesn't load in FireFox Beta 3.5 <_<
    Last edited by UrbanTwitch; 05-15-2008 at 09:25 PM.
    Formerly MysticScript

    6+ years club


  •  

    Posting Permissions

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