Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Junior Member cabledemon's Avatar
    Join Date
    Feb 2003
    Location
    Bolton, England...
    Posts
    7
    Member #
    770

    Current Rating

    Visual Appeal:
    0.0 out of 5

    Accessibility:
    0.0 out of 5

    Website Speed:
    0.0 out of 5

    Compatibility:
    0.0 out of 5

    Overall Rating:
    0.0 out of 5

    Rate This Site


    Advertisement (login to hide this!)


    You must be logged in to view this site

    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

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    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
    Code:
    <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

  4. #3
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    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:

    Code:
    <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>

  5. #4
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    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.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  6. #5
    Senior Member
    Join Date
    Feb 2003
    Posts
    284
    Member #
    683
    Filburt are you using iframes or whatever there called?
    I am a 13 year old graphics designer. I would love to make anyone who requests a logo for a price that we can discuss. I have taught myself how to make graphics. I made the winning entry for WebScalpel.com.

  7. #6
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    No. iframes are evil.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  8. #7
    Senior Member zionlocke's Avatar
    Join Date
    Jan 2003
    Location
    .: l33t Basement :.
    Posts
    736
    Member #
    483
    Liked
    3 times
    - 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!
    Cheers, zionlocke :chinese:
    Links: Zion Creation | Blog

  9. #8
    Junior Member cabledemon's Avatar
    Join Date
    Feb 2003
    Location
    Bolton, England...
    Posts
    7
    Member #
    770
    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...

  10. #9
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    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).
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:23 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com