Size of Topbar

[awieds]

I have a topbar which is basically one large graphic and then a bunch of buttons underneath. How do I account for different size screens? So that it's never too short or too long? Do I just repeat the end of it for longer screens? How do I do that? And how can I check the size of the users screen?

Thanks

[redhead]

Just make it a table, something like this:

<table border='0' cellspacing='0' cellpadding='0' width='100%' align='center'>
  <tr>
    <td background='graphics_to_display_befor_topbar.gif' align='top' valign='top'><img width='1' height='1' src='transparent.gif'></td>
    <td background='graphics_to_display_under_topbar.gif' align='center' valign='center'><img src='what_ever_buttons.gif'></td>
    <td background='graphics_to_display_after_topbar.gif' align='top' valign='top'><img width='1' height='1' src='transparent.gif'></td>
  </tr>
</table>

Make sure the <td> and </td> is placed in connection with the <img> tag, else IE will repeat the transparent image, which in combination with specific height on the navbar might make it look srewey.

[awieds]

I apologize I don't really understand. Where do I put the actual topbar in all this?

Thanks

[redhead]

The <img src='what ever buttons.gif'> is where your link buttons should be placed, just make a table row above, where that is your topbar.
Something like this:

<table border='0' cellspacing='0' cellpadding='0' width='100%' align='center'>
  <tr>
    <td background='graphics_to_display_befor_topbar.gif' align='top' valign='top'><img width='1' height='1' src='transparent.gif'></td>
    <td background='graphics_to_display_under_topbar.gif' align='center' valign='center'><img src='topbar.gif'></td>
    <td background='graphics_to_display_after_topbar.gif' align='top' valign='top'><img width='1' height='1' src='transparent.gif'></td>
  </tr>
<tr>
    <td background='graphics_to_display_befor_topbar.gif' align='top' valign='top'><img width='1' height='1' src='transparent.gif'></td>
    <td background='graphics_to_display_under_topbar.gif' align='center' valign='center'><img src='what_ever_buttons.gif'></td>
    <td background='graphics_to_display_after_topbar.gif' align='top' valign='top'><img width='1' height='1' src='transparent.gif'></td>
  </tr>
</table>

Play around with the settings of align/valign in the table data settings till you get a feeling of, when it's located where it should be.