Template creation problem... editable area breaks navigation.

[aich69]

I have created a web page in Illustrator, created slices and saved for web. The page consists of eleven 'button' images down the left hand side, a text area in the middle and then a coloured panel to the right that will contain images. I have opened the page in DW and tried to create a template from it.

I have inserted an editable area in the center for text but when this is filled with text in a new page made from the template it spreads the buttons on the left vertically to fit the overall height of the text thus breaking the design.

I'm sure I am making a simple mistake somewhere along the line with the way i am trying to create the template.

Any help would be extremely appreciated.

Cpt. Red Bull

 

[Glowball]

Have you viewed the HTML source code of the page that is ultimately created? You should start there and work your way back.

1. View the final HTML and fix that HTML so the page looks as you want it.
2. Make the DW template create that HTML.

If that doesn't work, you'll have to post more information here. Can you post the code for your template so we can take a look? There is something in the HTML that is defining your left column in a way that you didn't intend.

 

[aich69]

Have looked through code, to be honest I'm better with HTML than I am DW. Before I bother you with my code let me put a slightly different spin on the question, or at least give you a better idea of what I am trying to achieve. I do appreciate you taking the time to read this as I know outside of my area (networking) my questions can be a bit vague.

I want to achieve a fixed nav bar on left of page, a fixed length coloured panel on the right with a editable region in the center that can extend below the left and right panels if neccessary without breaking them. I'm sure this mmust be possible with tables but I'm not sure how given their nature.
Can this be done?

Thanks

Cpt. Red Bull

 

[Glowball]

If you're just getting started, I would recommend one big table. Make the width 100% and use valign="top" on the columns. Then the page will grow in length as you need it to and all three columns will have content that stays at the top of the table no matter what each of the other columns contains.

<table width="100%">
<tr valign="top">
    <td>
    First column
    </td>
    <td>
    Second column
    </td>
    <td>
    Third column
    </td>
</tr>
</table>

When your site is finished and you are happy with it, you may want to look into CSS positioning instead of tables. It's a bit more complicated, but you have a lot of control over the results. Of course, if you're just trying to finish this site and have no interest in Web development, then leave the site with its big table and it's done.

If you have any issues, just post your basic code up here and we'll get it sorted out. Good luck!

 

[aich69]

hey glowball... just what I needed... not sure why I didn't get there myself but I'm relatively new to DW having built sites purely in HTML/JAVASCRIPT previously and find it a bit strange but somewhat useful now.

I took your three column table and nested tables within the columns to give me exactly the flexibility I was after...

wouldn't have got there without your input thoguh so...

Thank you

Cpt. Red Bull

 

[Glowball]

I'm glad that worked for you!