...

View Full Version : Using <divs> instead of Tables.



UrbanTwitch
05-15-2008, 08:46 PM
Ok so I got the template design ready (.psd) on Adobe PhotoShop CS3.

Click here to see design (http://img115.imageshack.us/img115/4600/sodadomehn6.png)

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?


<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:


#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.

jcdevelopment
05-15-2008, 08:52 PM
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



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


It might be easier.

UrbanTwitch
05-15-2008, 09:23 PM
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



#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 <_<



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum