Nav Bar backgrounds???

[cabledemon]

Can some 1 please tell me how the nav bar has been achieved ie, in this forum... Is it an image stretching all the way across the page. or has it been done another way...

I know the buttons r images, how have u continued the bar.. where Log out appears... Is it a backgound image...

Any advice would be appreciated

Thanx
cabledemon

[smoseley]

In this page, it looks like there is a background image with other images placed above it. The logout link is text on top of the background. You can do something similar like this

<table widh="750" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td>
      <!-- This image would be the graphic along the top.
           Make it span the entire width of the table, but
           as tall as you want it to be. -->
      <img src="banner.jpg" width="750" height="80" border="0"><br>
    </td>
  </tr>
  <tr>
    <td>
      <!-- This table will comtain your navigation.
           It is a nested table (sits within a cell of
           another one) -->
      <table widh="750" cellpadding="0" cellspacing="0" border="0"
        background="navbg.jpg">
      <!-- this is the background image for the navigation. 
           (above)-->
        <tr>
          <td width="100">
            <a href="1.htm">
            <img src="nav1.gif" width="100" height="20" border="0"><br>
            </a>
          </td>
          <td width="100">
            <a href="2.htm">
            <img src="nav2.gif" width="100" height="20" border="0"><br>
            </a>
          </td>
          <td width="100">
            <a href="3.htm">
            <img src="nav3.gif" width="100" height="20" border="0"><br>
            </a>
          </td>
          <td width="100">
            <a href="4.htm">
            <img src="nav4.gif" width="100" height="20" border="0"><br>
            </a>
          </td>
          <td width="100">
            <a href="5.htm">
            <img src="nav5.gif" width="100" height="20" border="0"><br>
            </a>
          </td>
          <td width="250" align="right">
            <a href="logout.htm">Log out</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Haven't tested it, but it should work

[smoseley]

By the way...

The above example is based upon fixed column widths and table size. If you want to change the size of anything, just do the math and make sure everything adds up. This method was necessary for older browsers, because percentages (IE3 and NS4) were treated differently. From IE5 and NS6 on, you can use the method below:

<center>
<table widh="750" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td>
      <!-- This image would be the graphic along the top.
           Make it span the entire width of the table, but
           as tall as you want it to be. -->
      <img src="banner.jpg" width="750" height="80" border="0"><br>
    </td>
  </tr>
  <tr>
    <td>
      <!-- This table will comtain your navigation.
           It is a nested table (sits within a cell of
           another one) -->
      <table widh="100%" cellpadding="0" cellspacing="0" border="0"
        background="navbg.jpg">
      <!-- this is the background image for the navigation. 
           (above)-->
        <tr>
          <td width="100">
            <a href="1.htm">
            <img src="nav1.gif" width="100" height="20" border="0"><br>
            </a>
          </td>
          <td width="100">
            <a href="2.htm">
            <img src="nav2.gif" width="100" height="20" border="0"><br>
            </a>
          </td>
          <td width="100">
            <a href="3.htm">
            <img src="nav3.gif" width="100" height="20" border="0"><br>
            </a>
          </td>
          <td width="100">
            <a href="4.htm">
            <img src="nav4.gif" width="100" height="20" border="0"><br>
            </a>
          </td>
          <td width="100">
            <a href="5.htm">
            <img src="nav5.gif" width="100" height="20" border="0"><br>
            </a>
          </td>
          <td width="100%" align="right">
            <a href="logout.htm">Log out</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</center>

[filburt1]

Originally posted by transio
In this page, it looks like there is a background image with other images placed above it. The logout link is text on top of the background.

Just a side note: that's correct: a background image with stuff put on top of it.

[SupraPorsche]

Filburt are you using iframes or whatever there called?

[filburt1]

No. iframes are evil.

[zionlocke]

- he is using plain old tables supra...
- iframes are evil because they aren't fully backwards compatible.
- I haven't found them useful yet in saving load times.
- tables rule!

[cabledemon]

Thanx

Thanx for ur inputs...

Can I just ask, how small was the image originally made, and r u simply stretching it in Dreamweaver... coz I have tried this, and the image never looks right...:cry:

Plus... how have u achieved the shadow at the side...

[filburt1]

The image is probably around 20 pixels wide and just the background image for a table. Been a while since I've edited the table HTML (only edited the PSD recently).