Hi,<br />
<br />
I've been doing simple web pages for several years, but now I want to do a slick navigation bar. So I made a sample graphic then I "cut" it up into several smaller graphics (some were to be "button" or hot links)<br />
<br />
<!-- m --><a class="postlink" href="http://199.181.141.102/">http://199.181.141.102/</a><!-- m --><br />
<br />
....BUT when I view the page there are gaps between the individual graphics. AND if you make the we browser window narrow the graphics jump down a line like text would (I've seen other web pages where the graphics like this stay on one line).<br />
<br />
How do you anchor the graphic elements and get them to fit together without spaces?<br />
<br />
I was trying to use individual graphic elements so I need only update the "button" graphics instead of Download <!--more-->ing a whole new navigation bar for each page on the site (sort of the way Apple.com does it).<br />
<br />
I was using Netscape Communicator, but I now have the demo version of Dreamweaver. I've been on a crash course to learn that the past few days.<br />
<br />
Any input apprciated,<br />
Jeff-<!--content-->If you don't intend to swap parts of the image, you would be better off using an image map with the original whole image.<br />
<br />
I tried putting your images in a table to see if they would look better, and it seems that your widths do not add up. You specify the top and bottom image to be 600, but the buttons only add up to 564.<br />
<br />
Here is what I ended up with:<table border=0 cellspacing=0 cellpadding=0><br />
<tr><br />
<td colspan=5><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://199.181.141.102/Top20.900.GIF"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://199.181.141.102/Top20.900.GIF" nosave="" height="20" width="564" border="0"></a></td><br />
</tr><br />
<tr><br />
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://199.181.141.102/DVRpower%20button.GIF"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://199.181.141.102/DVRpower%20button.GIF" nosave="" alt="" height="26" width="162" border="0"></a></td><br />
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"http://199.181.141.102/DVR.GIF" alt="" width="80" height="26" border="0"></td><br />
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"http://199.181.141.102/Camera.GIF" alt="" width="80" height="26" border="0"></td><br />
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"http://199.181.141.102/Support.GIF" alt="" width="80" height="26" border="0"></td><br />
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"http://199.181.141.102/RblankButton2.GIF" alt="" width="162" height="26" border="0"></td><br />
</tr><br />
<td colspan=5><img src=http://www.webdeveloper.com/forum/archive/index.php/"http://199.181.141.102/Bottom.GIF" alt="" width="564" height="64" border="0"></td><br />
</table><!--content-->I'll just offer that CSS provides pin-point positioning and does <br />
not rely on tables for laying-out navigational links.<br />
<br />
poof... and then she was gone....<br />
k<!--content-->Hi Gil,<br />
<br />
>>If you don't intend to swap parts of the image, you would be better off using an image map with the original whole image. <<<br />
<br />
I did want to swap parts of the image, but it seems to be too much of a hassle
<br />
<br />
>>and it seems that your widths do not add up. <<<br />
<br />
Yea, I was experimenting to see if changing the width would fix some of the problems I had...<br />
<br />
Thanks,<br />
Jeff<!--content-->Khaki,<br />
<br />
>>I'll just offer that CSS provides pin-point positioning<<<br />
<br />
Thanks for the tip! I''ll look into that.<br />
<br />
Also, does anyone know why this vbulletin board is so wide in my web browsers? I have to keep scrolling left and right to read the messages and find the Reply button! Very strange. I use several other vbulletin boards and don't have this problem. hummm?<br />
<br />
Jeff<!--content-->My fault. I used the CODE keyword, which keeps all formatting, so it didn't break the long line. I'll edit and put a break in it.<!--content-->
<br />
I've been doing simple web pages for several years, but now I want to do a slick navigation bar. So I made a sample graphic then I "cut" it up into several smaller graphics (some were to be "button" or hot links)<br />
<br />
<!-- m --><a class="postlink" href="http://199.181.141.102/">http://199.181.141.102/</a><!-- m --><br />
<br />
....BUT when I view the page there are gaps between the individual graphics. AND if you make the we browser window narrow the graphics jump down a line like text would (I've seen other web pages where the graphics like this stay on one line).<br />
<br />
How do you anchor the graphic elements and get them to fit together without spaces?<br />
<br />
I was trying to use individual graphic elements so I need only update the "button" graphics instead of Download <!--more-->ing a whole new navigation bar for each page on the site (sort of the way Apple.com does it).<br />
<br />
I was using Netscape Communicator, but I now have the demo version of Dreamweaver. I've been on a crash course to learn that the past few days.<br />
<br />
Any input apprciated,<br />
Jeff-<!--content-->If you don't intend to swap parts of the image, you would be better off using an image map with the original whole image.<br />
<br />
I tried putting your images in a table to see if they would look better, and it seems that your widths do not add up. You specify the top and bottom image to be 600, but the buttons only add up to 564.<br />
<br />
Here is what I ended up with:<table border=0 cellspacing=0 cellpadding=0><br />
<tr><br />
<td colspan=5><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://199.181.141.102/Top20.900.GIF"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://199.181.141.102/Top20.900.GIF" nosave="" height="20" width="564" border="0"></a></td><br />
</tr><br />
<tr><br />
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://199.181.141.102/DVRpower%20button.GIF"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://199.181.141.102/DVRpower%20button.GIF" nosave="" alt="" height="26" width="162" border="0"></a></td><br />
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"http://199.181.141.102/DVR.GIF" alt="" width="80" height="26" border="0"></td><br />
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"http://199.181.141.102/Camera.GIF" alt="" width="80" height="26" border="0"></td><br />
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"http://199.181.141.102/Support.GIF" alt="" width="80" height="26" border="0"></td><br />
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"http://199.181.141.102/RblankButton2.GIF" alt="" width="162" height="26" border="0"></td><br />
</tr><br />
<td colspan=5><img src=http://www.webdeveloper.com/forum/archive/index.php/"http://199.181.141.102/Bottom.GIF" alt="" width="564" height="64" border="0"></td><br />
</table><!--content-->I'll just offer that CSS provides pin-point positioning and does <br />
not rely on tables for laying-out navigational links.<br />
<br />
poof... and then she was gone....<br />
k<!--content-->Hi Gil,<br /><br />
>>If you don't intend to swap parts of the image, you would be better off using an image map with the original whole image. <<<br />
<br />
I did want to swap parts of the image, but it seems to be too much of a hassle
<br /><br />
>>and it seems that your widths do not add up. <<<br />
<br />
Yea, I was experimenting to see if changing the width would fix some of the problems I had...<br />
<br />
Thanks,<br />
Jeff<!--content-->Khaki,<br />
<br />
>>I'll just offer that CSS provides pin-point positioning<<<br />
<br />
Thanks for the tip! I''ll look into that.<br />
<br />
Also, does anyone know why this vbulletin board is so wide in my web browsers? I have to keep scrolling left and right to read the messages and find the Reply button! Very strange. I use several other vbulletin boards and don't have this problem. hummm?<br />
<br />
Jeff<!--content-->My fault. I used the CODE keyword, which keeps all formatting, so it didn't break the long line. I'll edit and put a break in it.<!--content-->