Dreamweaver cs4 - containers / div questions

Get Started
1

I’m an old photoshop / image ready / go live user, so now that I’ve read about DW’s templates and css styles, I’m trying to design my next site to work with in these containers. I’m a bit confused… Here’s what I’m trying to do:

I have a layout with a banner at the top, and a row of buttons underneath. There is a left column which will also have secondary buttons, and a main column which will contain both text and images. (I tried to post links, but since I’m new, it wouldn’t accept…)

  1. When I begin to place the graphics in the header, it won’t let me place all the smaller ‘button’ graphics in a line. They end up popping down below the main container. I sliced everything up nice and neatly. Do I need to create new div tags (containers) within the header container to get everything to fit?

  2. If I want to place graphics and text in the main column, do I need to create another container for each of the graphics?

It’s a bit frustrating… I feel like slicing everything in pshop and doing it the old fashioned way, but I know that will lead to messier code in the long run. Just need to get over a few hurdles with conteiners…

– has anyone experienced browser issues with css boxes?

thanks!
susan

2

Laying out in css will be quite different to what you are used to :slight_smile:

I would suggest you have a heading (for your large banner image) div, under that, a div for your navbar. If the images for your nav are moving down, it probably means that you haven’t done the math and the images are too wide for the current container.

I’d check out the CSS tutorials at the Adobe site to get you started. The tutorials by Adrian are very easy to follow and will help you get a grasp on how divs, margins, padding etc work. All this needs to be taken into consideration when adding images, text to containers, otherwise you will have the problems you are seeing.

As for images, no, you don’t need a container for every image, you just ‘float’ them left or right - again, you need to understand the principles behind ‘floats’.

Coming from a ‘tables layout’ background, I can understand your difficulty, it does take time but once you get the basics, you should be ok to move forward :slight_smile:

PS: Welcome to Sitepoint

Nadia

3

Hi Nadia,

thanks for your reply. I think I’m starting to understand now. I was playing around last night, and if I slice everything to fit into horizontal compartments all the way across, it seems to work. I put the banner in the top div, and made a new div for the nav bar and it worked! wow! The nav bar is a simple roll over with no drop down images or links. On some pages, there will be secondary buttons in the left column. Do these need to be set up as ‘navigation’ images too? or can they be ‘rollovers’?

Does the div for the nav bar go inside the banner div? or below it? I’ve read a little about nesting divs - is this a good thing? or is it considered sloppy?

On the one hand, DW CS4 seems really complicated, and on the other, it seems more intuitive than way back when…

Are tables really old fashioned now? Should I not even go there anymore? :slight_smile:

thanks again!
susan

4

Yep it comes down to doing the math :slight_smile: If the slices don’t add up to the width of the div, it will drop.

The nav bar is a simple roll over with no drop down images or links. On some pages, there will be secondary buttons in the left column. Do these need to be set up as ‘navigation’ images too? or can they be ‘rollovers’?

See my points about creating ‘list’ menus and links on how to create them below…

Does the div for the nav bar go inside the banner div? or below it? I’ve read a little about nesting divs - is this a good thing? or is it considered sloppy?
I would create a new div under the banner div, keeping them separate, easier to create styles for that particular div.

You may also want to check out this tutorial by Stephanie Sullivan
http://www.adobe.com/devnet/dreamweaver/articles/css_2c_tableless_04.html

Here she also explains how to style a navbar - so you don’t have to use images at all. Saves on code bloat as well.
A couple of other good links on how to style navbars via css :

http://css.maxdesign.com.au/listutorial/

On the one hand, DW CS4 seems really complicated, and on the other, it seems more intuitive than way back when…

It’s not really complicated if you know at least the basics of html and css. :slight_smile: It’s when people presume that DW will ‘do it all for them’, when all the problems arise.

Are tables really old fashioned now? Should I not even go there anymore? :slight_smile:
I’m pragmatic, if tables are what you are used to then firstly learn how to style various elements using a table layout, and once you get the grasp of how css and styling works, move onto creating div layouts. (that’s how I learned :slight_smile:

However, if you are learning css from scratch, then you may as well div in the deep end and learn css layouts right now.

There are some other DW tutorials at the Adobe site that will help you come to grips with this.

Also, don’t forget CS4 also has CSS layout templates that can get you started, though they are supposed to be for a beginner, I think that you need some knowledge of CSS to use them :slight_smile:

thanks again!
susan
You’re welcome and good luck !

Nadia

5

Hi Nadia,

Thanks for all the info and great links - I’ll start reading them all.

So here’s how I understand the process - while designing in pshop, I should be thinking of the boxes and how they’ll relate in DW via divs, and make note of the sizes of not only each box, but groups of boxes too. Then, go into DW, start creating a layout of divs that matches the sizes from the slices in pshop. The divs should avoid nesting so that they can styled more easily without getting too confusing. Once the divs and numbers match up and all the css has been created for the divs, I can start placing the pshop jpegs into the boxes.

In the meantime, one thing that’s kind of confusing me is when I design the layouts in photoshop, layers and all, and the slice it up, I saw that if the native .psd file is imported, DW creates a link to the original for easy updates. In order to do this, I’d need to save each ‘piece’ as a .psd file, which would be cumbersome with all the layers, etc. Is this feature really worth it? or should I just save all the images and update manually in DW?

(are they called boxes? or divs? - sorry for being such a newbie - I’m excited that technology is moving forward, and happy to learn how to do things the right way to avoid sloppy code and page building… does the term “div” mean a box that holds content? and css can apply to divs as well as the content within? ie. type, etc…)

I have links to post for the pages that I’ve started designing, but at the moment, I’m under 10 posts here on sitepoint, so once I’m able, I’ll post links so you can see the pshop designs.

tia once again!
susan

6

I am also interested in seeing your photoshop designs. I will give you good suggestions.

7

… it says I need to post 10 times before I can add links, so pardon these additional posts - thanks!

8

and thank you for all these great links and suggestions - soon I will post the links when I get to 10 posts.

9

let’s try now: here are the links to the layouts. They’re screenshots from photoshop, so I haven’t done any coding yet. I’ve been working on some of the DW css tutorials, and it’s been a great help. I’d love to hear how you would approach taking these layout designs from psd into dw.

http://susan-unger.home.comcast.net/oxbow/home1.html

http://susan-unger.home.comcast.net/oxbow/home2.html
– just a variation on imagery

http://susan-unger.home.comcast.net/oxbow/about1.html
– shows an interior page with 2 columns

http://susan-unger.home.comcast.net/oxbow/services.html
– shows an interior page with 2 columns and secondary buttons on the left column

thanks again!!
susan

10