Layering buttons on background grid?

[sbryan]

I haven't reached a topic that will help me in coding my first website from a mockup PSD, yet, viewable here.

I have a background I want to repeat underneath the content window. I know how to do that.

What I don't know how to do is construct the site so my buttons are placed within that light-blue grid. Dreamweaver, as you know, doesn't lend itself to the layering workflow that PS, Flash, and AE employ making a difficult interrelationship between the buttons and the grid.

I have to center that light-blue grid and the content within without using AP Divs.

Any help to speed me along the way is appreciated. Now, back to the Tutorials...

 

[SrWebDeveloper]

One of the numerous aspects of your request I found confusing is when you said you can't use "AP div's". If AP means Adobe Photoshop, you must mean the div's created via slicing. I do not follow you on this point, explain why you can't do that, exactly?

Looking at your mockup, there are two approaches to inserting buttons (images) within a layout:

• Absolute positioning of all elements including each button using CSS
• Slicing and applying CSS to the "button" slices for link and rollover effects (similar to CSS sprites)

Now before I go into depth explaining each, or considering alternatives, I will assume (based on the excellent quality of the mockup) that you're not a novice and know how to do each and maybe just need guidance to get you started. If neither method seems familiar, please ask and I will explain the benefits and disadvantages of each.

-jim

 

[dornoforpyros]

What I don't know how to do is construct the site so my buttons are placed within that light-blue grid. Dreamweaver, as you know, doesn't lend itself to the layering workflow that PS, Flash, and AE employ making a difficult interrelationship between the buttons and the grid.

Use an unordered list and some CSS my good man. This tutorial should get you started in the right direction.
But basically you use <li>'s for each of your images and set up your list so it will only display 3 items per row and then bump the next down.

 

[dornoforpyros]

I'm not sure if you still need help with this or not sbryan, but I wrote a tutorial on unordered list on my blog that may help ya out.

cheers
-jay