Navigation Bar

[messhof]

im trying to make a navigation bar on the side of my site. its a list of pictures that link to different parts of the site (www.bigmound.com).

 

i tried putting everyhing in a table, so theres 2 rows in the first column for the navigation bar, and one row in the second, for the content. but it stretches the navigation bar if the content is longer. i'm using dreamweaver by the way.

 

is this easier with frames? i dont get how you use them. it saves 3 files, the frame set, the navigation frame, and the content frame.. so how would i make both frames appear on my index?

[TCH-Sales]

><table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td width="30%" valign="top">
MENU
</td>
<td width="70%" valign="top">
CONTENT
</td>
</tr>
</table>

 

That's how I would do it if you wanted to use tables, just change the percentages to however it looks best for you. Then list your menu where it says "MENU" and the content where it says "CONTENT". Thumbs Up

[messhof]

that just made a 1x2 table... i mean kind of like

 

http://www.talkgaming.com/~squackle/

[leezard]

heres the source code for that left nav bar, you can just change it to whatever links you need. Of course you would probably want to change the colors and everything also.

 

><table CELLPADDING="0" CELLSPACING="0" BORDER="0" VALIGN="TOP">
 <tr VALIGN="TOP">
   <td WIDTH="12" VALIGN="BOTTOM" ALIGN="LEFT" BGCOLOR="999999"><img BORDER="0"
  SRC="http://www.squackle.com/images/CornBL.jpg"></td>
   <td BGCOLOR="999999" VALIGN="TOP"><table CELLSPACING="0" CELLPADDING="0">
<tr BGCOLOR="999999">
  <td BGCOLOR="999999" ALIGN="CENTER"><font FACE="" SIZE="" COLOR="#FFFFFF">
    <br>
    </font>

    <p ALIGN="LEFT">
    <a HREF="http://www.squackle.com/shop.html"><img SRC="http://www.squackle.com/images/squackshop.jpg"></a>
    <p ALIGN=Left>
    <a HREF="http://www.squackle.com/submit/submit.shtml">Submit To Squackle</a>
    <p ALIGN=Left>
    <a HREF="http://www.squackle.com/aboutus.html">About Us</a><br>
    <a HREF="http://www.squackle.com/awards.html">Awards</a><br>

    <a HREF="http://www.squackle.com/cgi-bin/yabb/YaBB.cgi">Bulletin
    Board</a><br>
    <a HREF="http://www.squackle.com/chats/chats.html">Chat Room Stuff</a><br>
    <a HREF="http://www.squackle.com/dictionary/dictionary.html">Dictionary</a><br>
    <a HREF="http://www.squackle.com/download/download.html">Downloads</a><br>
    <a HREF="http://htmlgear.lycos.com/guest/control.guest?u=davepoobond&i=1&a=view">Guestbook</a><br>
    <a HREF="http://www.squackle.com/holidays/holidays.html">Holiday
    Stuff</a><br>

    <a HREF="http://www.squackle.com/jokes/jokes.html">Jokes</a><br>
    <a HREF="http://www.squackle.com/links.html">Links</a><br>
    <a HREF="http://www.squackle.com/junk/junk.html">Other Junk</a><br>
    <a HREF="http://www.squackle.com/pictures/pictures.html">Pictures</a><br>
    <a HREF="http://www.squackle.com/poems/poems.html">Poems</a><br>
    <a HREF="http://www.squackle.com/qc/qc.html">Questionable Content</a><br>

    <a HREF="http://www.squackle.com/SBC/SBC.html">SBC</a><br>
    <a HREF="http://www.squackle.com/screwedup/chronicles.html">Screwed Up
    Chronicles</a><br>
    <a HREF="http://www.squackle.com/history.html">Site History</a><br>
    <a HREF="http://www.squackle.com/songs/songs.html">Songs</a><br>
    <a HREF="http://www.squackle.com/arcade/arcade.html">Squackle Arcade</a><br>
    <a HREF="http://www.squackle.com/guides/guides.html">Squackle Guides</a><br>

    <a HREF="http://www.squackle.com/network.html">Squackle! Network</a><br>
    <a HREF="http://www.squackle.com/quiz.html">Squackle Quiz</a><br>
    <a HREF="http://www.squackle.com/squotes/squotes.html">Squackle
    Quotes</a><br>
    <a HREF="http://www.squackle.com/sportsarena/sportsarena.html">Squackle Sports
    Arena</a><br>
    <a HREF="http://www.squackle.com/stories/stories.html">Stories</a><br>
    <a HREF="http://www.squackle.com/IMs/IMs.html">Stupid IMs</a><br>

    <a HREF="http://www.squackle.com/videogames/videogames.html">Video
    Games</a><br>
    <a HREF="http://www.squackle.com/winaward.html">Win Our Award</a><br>
    <br>
    <br>
    <a HREF="http://www.squackle.com/submit/submit.shtml">Submit To Squackle</a></td>
</tr>
     </table>

   </td>

[TCH-Sales]

Pretty much leezard's way is the fully functioned version and mine was the stripped down version. Either should do what you want.

[matman]

You need to use ROWSPAN or COLSPAN in your tables.

 

For something like what you showed us:

><table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr colspan="2">
<td>
 HEADER SPACE
</td>
</tr>

<tr>
<td width="30%" valign="top">
MENU
</td>
<td width="70%" valign="top">
CONTENT
</td>
</tr>
</table>

 

Or for something like what you actually described:

><table cellpadding="0" cellspacing="0" border="0" width="100%">

<tr>
<td width="30%" valign="top">
 MENU 1
</td>
<td width="70%" valign="top" rowspan="2">
 CONTENT
</td>
</tr>

<tr>
<td>
 MENU 2
</td>
</tr>
</table>

 

As for frames, the frameset document should BE your index. Name it index.html and take a look at it.

[messhof]

ah i was being stupid.. each button on the menu doesnt need a cell... bleh. thanks.

[messhof]

ok nevermind.. it still stretches the menu when i leave them in a cell next to a bigger cell.. and i cant find where you type to the right of the navigation bar on the squackle code

[TCH-JimE]

Hi,

 

1) If your button is bigger then the cell its going into, then it will make the table grow bigger. If you want, post a link to the page its on and I will have a look at the code for you

 

2) You could go for the none table approach using DIV and SPAN tags and CSS positioning. Its what I do now and I love it.

 

3) To write on the right hand side, you need to fit the nav table into another table.

 

E.g.

 

><table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td width="150">

<!--Insert all your nav tables here, you may have to change "150" to be the correct amount -->

</td>
<td>

<!-- Here goes the rest of your page, it is dynamic so it will change size depending on users screen size -->

</td>
</tr>
</table>

 

If you got a problem, give us a shout!

 

Jim

[messhof]

that does the same thing. i need to set the height instead of the widthi think. it still stretches down with whay you did.

[TCH-Sales]

It's going to be very tricky to manage to get any height elements to work, and you'll probably need to use CSS and an even harder point would be making it work across all browsers.

[TCH-JimE]

Hi,

 

1) CSS is not hard to do, long as you dont mind is not working in NS4

 

2) Can you please provide a link to the page on your website so I can take a look and see what is going on?

 

Jim