# Css & Html



## Wozzer (Sep 18, 2008)

Hello all,

Im a little stuck and I need some expert advice. I'm trying to create a website template, and i'm half way there. But unfortunatly, i'm stuck.

I've created and sliced the template in Adobe Photoshop but I can't work out how to position the images in Dreamweaver. Let me give you an example:

My web template had a side bar on each side. Left and right. However - I'm stuck. How do I position the images through the code without moving other images. I need to put two side bars in, a banner and a text box. I know where there meant to go, but i'm not sure how to place them there.

Could someone point me in the right direction ?


----------



## ZenZimZaliben (Sep 18, 2008)

Just like photoshop CSS can use layers. Called z-index. Although this is not 100% supported by all browsers, it is by Firefox and IE.

http://www.quackit.com/css/tutorial/css_layers.cfm


----------



## Wozzer (Sep 19, 2008)

Cheers - I'll take a look later tonight.


----------



## W1zzard (Sep 19, 2008)

use css style float: and/or css absolute/relative positioning. make sure you try your result on ie6,7, ff2,3 and opera. also check how it look on different screen widths


----------



## P4-630 (Sep 19, 2008)

If you dont know much about css you could create a simple table instead:

Example:


```
<html>

<table border="1" cellpadding="0" cellspacing="0" width="800px">
<tr>
<td colspan="3" height="50px">place top image here</td>
</tr>
<tr height="300px">
<td width="100px">column left</td>
<td width="600px">center column</td>
<td width="100px">column right</td>
</tr>
<tr>
<td colspan="3" height="50px">place bottom image here</td>
</tr>
</table>

</html>
```

You can adjust the column sizes to your images.
To remove the table border change the table border="1" to 
table border="*0*".


----------



## Wozzer (Sep 19, 2008)

Thanks for your help guys.

Belows is the template im hoping to code (Perhaps a little to tricky for my first template?):
http://flux-graphics.co.uk/Gamingtemplate/

As for wizzard - What do you mean by:
''use css style float: and/or css absolute/relative positioning''

As you can tell, i'm new to all of this. I can edit basic parts of CSS but starting it from scratch is a bigger challenge.


----------



## P4-630 (Sep 19, 2008)

"float:left" or "float:right" is used to align an element (CSS).

The page at http://flux-graphics.co.uk/Gamingtemplate/ is using a table to for the page lay-out.
Using tables is the most easy way to create a simple webpage lay-out.



Wasley said:


> As you can tell, i'm new to all of this. I can edit basic parts of CSS but starting it from scratch is a bigger challenge.



The challenge when using CSS is to make each page compatible for every(most popular) web browser(s).

About pages that use tables for the lay-out: All webbrowsers can display these pages correctly as it was designed.


----------



## Wozzer (Sep 19, 2008)

P4-630 said:


> "float:left" or "float:right" is used to align an element (CSS).
> 
> The page at http://flux-graphics.co.uk/Gamingtemplate/ is using a table to for the page lay-out.
> Using tables is the most easy way to create a simple webpage lay-out.



That was just imported from Adobe Photoshop. Am I alright using that page still, even if it is just tables ? Or am i best starting from scratch, creating a page for the interface and a page for the CSS and building it from there ?

I've been asked to design a website for a company and I don't want to do a scrappy job. I can make it look professional but I need to learn how to code the thing in CSS.


----------



## Moose (Sep 19, 2008)

I use tables for aligning stuff.


----------



## W1zzard (Sep 20, 2008)

use google to find answers to the keywords given to you. it's certainly the easiest and most productive way because you will learn a lot more in the process of searching


----------



## Wozzer (Sep 22, 2008)

Okay - I'll have another shot tonight and post my result


----------



## P4-630 (Sep 22, 2008)

Also checkout this website, you will find/learn some useful things here   http://www.w3schools.com/


----------



## Wozzer (Sep 22, 2008)

Yeah - I did read about that website. It seems to me that my biggest problem is going to be having the template compatible with all browsers. 

If it was my own personal site, I would'nt be to bothered, but seeing as Im designing for a business - I feel as if I should put extra effort into it.


----------

