editing tables from FW slices

[toaglass]

I'm pretty new to web design and I'm having trouble with (among other things) figuring out how to fix my side navigation bar in DW after importing it from Fireworks. I have 9 circular buttons in the left bar that are each about 1/4" apart from one another. After arranging them using css (forgive me if I use the wrong terminology) I converted the layout to html tables, imported that bar back into the whole template page png layout in FW and then brought the whole thing into DW.

One of the problems I'm having now is due to the fact that in my side bar I have about 9 rows from top to bottom, each containing one of my buttons. So if I use this template on a page that has text in the body that continues down below the specified dimensions of the template (about 1100 px), this really annoying thing happens: as the page lengthens to allow for the additional text, my sidebar stretches and separates my buttons, which not only makes them look bad and less user-friendly, it makes it so that the css pop-up menus are popping up in the wrong place.

So here's the question: is there a way to tell the rows in my left bar DO NOT MOVE OR STRETCH when the rest of the page IS stretching? I've spent about 12 hours trying different things and failing with each. I tried specifying the height of each of these cells, but that didn't work. I tried putting a blank cell below these 9 button cells and slightly higher than the bottom of the center body section so that it would stretch instead of the button cells, but unfortunately that didn't work either.

Thanks in advance!

[LadynRed]

You would be much better off learning to use CSS-based layouts rather than moldy old tables. You have much more flexibility, and your maintenance will be dramatically reduced if/when you modify your site or want to redesign.

By going from CSS to tables for layout, you're taking a technological step backwards. Without seeing all the code, it's difficult to know just what is going on.

[toaglass]

thanks ladynred

I would like to do the layout using css, but does that mean the entire base template needs to be in css? What I'd like to do is lay out the navigation bar using css and then insert it into a cell on the left side of my html template so that the whole ap div section adjust itself with the movement of the cell rather than with the movement of the whole page. Is that at all possible?

[ldrain]

you might want to try a nested table as your navigation. specify the width that you do not want to exceed in the Table, and encapsulate the rest of your nav in the table. if the table has a fixed size, it shouldn't move around.

tables are a useful thing to know. i usually set up my web pages with a rough table then use CSS to control the appearance.

<table width='100' height='400'>
<-! Nav goes inside table tag -->
<tr>
<td>whatever your nav says</td>
<td>etc.</td>
</tr>
<tr>
<td>whatever your nav says</td>
<td>etc.</td>
</tr>
</table>

maybe something a little like this. hope this helps

[toaglass]

When you say that you create the rest of the page with css, do you mean the formatting is done with css, or are you able to position your items using css (ap divs) within that original table? I didn't know if the latter was possible.
I'd like to know how to do it so that I can center my table on the page and then use my css dropdown menus. Currently I have my design stuck to the upper left corner of the browser because it's going to have css dropdowns, or ap divs, or whatever (sorry, web design knowledge is a bit lacking.)

Thanks

[CurtisMcHale]

I position all of my elements and do my rollovers with CSS. It takes more work, the first number of times, but allows so much flexibility later in terms of changing the layout.

[toaglass]

Curtis--

Does that eliminate the need for Fireworks and the whole idea of setting up an html template using slices on a graphic file (such as Photoshop)?

1drain -

I tried your suggestion of creating a nested table to include my navigation elements in, but on the outer table I'm only allowed to specify the width, not the height, so I still couldn't prevent it from stretching when the neighboring space is stretched, thus separating my cells/buttons.

But then I tried inserting all of my button images into a single cell, and that seems to work, though if I have to change anything I imagine it'll be a lot more work than if I were setting it up with css.

thanks for your help!