PDA

View Full Version : Div Alignment


Awesome
10-13-2005, 04:46 AM
Hi'

Can someone please tell me how to do the following;

My header(banner) is separated into three segments, Companylogo - Banner - Right Image and I need all three to appear at the top of my site. Using ONLY CSS - I have created a #wrapper div which will contain the entire site.

The site is then split into a left column to house the navigation buttons with links, a main content area in the middle and a right column for news and other interesting stuff and finally a footer at the bottom of the page.

Is there a simple way of doing this? I need to be able to turn it into a template once I achieved all of the above. Have attached a zipped copy of the site to assist in seeing what I'm trying to do.

regards
Alan

Creative Insanity
10-13-2005, 07:39 AM
Since you have that image (I am guessing it is bigger than that and you have PS), just slice it up and save as a html file with ImageReady.

domedia
10-13-2005, 03:23 PM
Sounds like a classic 3x3 table. 3 columns and 3 rows.

Awesome
10-16-2005, 11:00 PM
To CreativeInsanity, Yes I have photoshop and the .psd file has already been sliced and saved as an html file through Imageready but all that does is create a table-based layout. I would like to do away with the need for tables and work purely with CSS. It is that issue that I'm having difficulty with.

To Domedia; Again I am trying to avoid the need to use a table-based layout. Due to lack of experience I'm struggling to understand how to get the div's aligned properly.

Thanks for your ideas though.

Cheers
Alan

Creative Insanity
10-16-2005, 11:43 PM
Sorry Awesome, I am not one for CSS and DIV sites as I am a good old fashioned table man. :)

Maybe someone else can pitch in here with some ideas.

bkendall
10-17-2005, 03:04 PM
A good starting point would be to export the psd to html with divs. I am using FW more these days than PS (sigh) but I know there is a setting in Photoshop that allows you to export the html using divs instead of tables. Fireworks has added this in thier latest version as well. From there you can edit the divs and I always move the styles to an external style sheet. :)

domedia
10-17-2005, 04:06 PM
To Domedia; Again I am trying to avoid the need to use a table-based layout. Due to lack of experience I'm struggling to understand how to get the div's aligned properly.

Ah I see.
CSS does not rule out tables automatically. They're standards compliant and are an important part of organizing data on the web.

For a table-less layout, I would look to google for help, you need some exposure to absolute positioning vs. floated layouts. It's a personal choice really. (I prefer floated ones, but you have to keep on top of a multitude of weird bugs in various browser, most people use absolute positioning). Also check out the templates we have in this forum
http://www.dreamweaverclub.com/forum/index.php?showtopic=249 ('http://www.dreamweaverclub.com/forum/index.php?showtopic=249') some of them are laid out using no tables.

gmcrone
10-17-2005, 08:57 PM
Take a look at :
3 col layout ('http://bluerobot.com/web/layouts/layout3.html')

Look at the source and amend it to your needs...


Mike...