Menubar

@Denzil_01224Nov 22.2002

I am unsure how to put a menubar on the right hand side of my website? Does anyone have to code 4 it.

to post a comment

28 Comments(s) _↴

@RoddersNov 22.2002 — #Have a look at http://javascript.internet.com

There's a section for 'Navigation' where you can borrow someone else's code.

@CharlesNov 22.2002 — #[FONT=georgia]Aack! If you use JavaScript for navigation then people who aren't using JavaScript will not be able to navigate your site.

There is some disagreement on this issue, but if you are putting the nav bar on the right edge of the screen then it might not be such a bad thing to go ahead and use the TABLE element. ( http://www.w3.org/TR/html401/struct/tables.html ) In general, the problem with tables is that most non-graphical browsers simply ignore the tags. This means that if you put the bar on the left then the user of an audio browser will have to listen to all of you nav links before getting to the meat of the page. And imagine listening to all of that on each page of your site. Putting the nav on the right avoids this problem. On the down side tables do have meaning when applied to tabular data so certain non-graphical browsers use other means to help the user figure where in the table they are. Using tables in this manner will only confuse those browsers.

Stefan is much better at this sort of thing than I, but you can get an idea of the proper methods to use at http://www.godlyplay.org/home.shtml . The style sheets are at http://www.godlyplay.org/style.css and http://www.godlyplay.org/menu.css .[/font]

@RoddersNov 22.2002 — #Actually, being as this thread is in the HTML forum and there was nothing in the original post asking for a dynamic or dropdown style menu, maybe all that is required is a simple FRAMESET.

So, Denzil, if you learn how to use FRAMESET and the FRAMES and links within you can quite easily make a simple menu.

You can have a look at my site, which uses this very method of navigation. Go to View Source and nick as much as you like.

[URL=http://roundthebend.greater-peterborough.com]My Site[/URL]

@Zach_ElfersNov 22.2002 — #There are so many different styles of navigation bars. To make the simpliest one, make a table:

<table align="left" width="n" cellspacing="n" cellpadding="n" border="n"> * n is a number who want those attributes to be in pixels or percent*

<tr>

<td>

<a href="http://www.site-you-want-to-link-to.com">Item 1</a>

<br>(or <p> for double space)

another link

And just repeat the link for each item you want. You end the table by putting:

</td>

</tr>

</table>

You can make much better one's with CSS and advanced HTML. Hope that helps!?

@Denzil_01224authorNov 22.2002 — #how big should a normal menu bar be?

@Denzil_01224authorNov 22.2002 — #can i get the code for the better menubars if anyone has it?

@Denzil_01224authorNov 22.2002 — #can some-one go to [URL=http://uk.geocities.com/redhotchilipeppers_mad/page1.html]http://uk.geocities.com/redhotchilipeppers_mad/page1.html[/URL] and tell me how to improve my menubar and also suggestions and code for a better looking one

@Zach_ElfersNov 22.2002 — #Your menu should never really be much more than 300 pixels. You can get the code by looking on other site or go to www.geocities.com/html_webpages. That is my site but it's still under contruction. HEAVILY. There is a menu though.?

@Zach_ElfersNov 22.2002 — #You can change the color of the menu I gave by putting bgcolor="whatever" inside the table tag.?

@Beach_BumNov 22.2002 — #I second the vote for frames. Easy, every modern browser can deal with it.

@PeOfEoNov 23.2002 — #you just want the side of your site to have a menu right?

here is what I usually do to set up my sites table wise (in my opinion tables are the most important thing to learn in html)

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

<tr>

<td>left nav

</td>

<td>content

</td>

<td>ur right nav

</td>

</tr>

well that is mega watered down but a lot of people like rowspan for their nav bars and you should definatly look into it but this is the approach I usually take. I didnt read everyone elses posts so someone alredy probably told you this. You can view the source of www.barbaricsoftware.2ya.com if you want to see exactly what I did. I am not exactly the most experience person here though so you shouldnt listen to me as intently as you would rich bull or that guy over in java script whose name I just forgot. You know the one with the taz gif for his avatar thing

@StefanNov 23.2002 — #AAAARGH!

Don't abuse <table> for something like a menubar. <table> is for making tables, not creating general page layout.

Instead of this crap :

<table align="left" width="20" cellspacing="10" cellpadding="20" border="n">

<tr>

<td>

<a href="index.html">Home</a>

<br>

<br>

<a href="http://www.site-you-want-to-link-to.com">Item</a>

<br>

<br>

<a href="http://www.site-you-want-to-link-to.com">Item</a>

<br>

<br>

<a href="http://www.site-you-want-to-link-to.com">Item</a>

<br>

<br>

</td>

</tr>

</table>

Do something like this

<div class="menu">

<a href="index.html">Home</a>

<span> | </span>

<a href="http://www.site-you-want-to-link-to.com">Item</a>

<span> | </span>

<a href="http://www.site-you-want-to-link-to.com">Item</a>

<span> | </span>

<a href="http://www.site-you-want-to-link-to.com">Item</a>

</div>

CSS:

.menu {position:absolute; top:100px; left:50px; width:200px;}

.menu span {display:none;}

.menu a {display:block; padding:20px 0; text-align:center;}

This will make it look good both in graphical as well as non graphical and/or old browsers. You can add borders etc to your liking as well.

@PeOfEoNov 23.2002 — #What browsers don't read css? Do you think an old netscape whould? Ill have to get to webmonkey and look at their browser charts because I am using them more and more often. A css menu is a really great idea it make things a lot more organised too like your code wond be as jumbled and you wont have to leave those dumb indenatations so you wont get lost like when youn use tables

@PeOfEoNov 23.2002 — #Also that menu would be a horizontal bar how would you make a vetical bar

<div class="menu">

<a href="index.html">Home</a>

<br>

<a href="http://www.site-you-want-to-link-to.com">Item</a>

<br>

<a href="http://www.site-you-want-to-link-to.com">Item</a>

<br>

<a href="http://www.site-you-want-to-link-to.com">Item</a>

</div>

like that?

@CharlesNov 23.2002 — #[font=georgia]In his example you'll notice that Stefan has set the 'display' property of the A elements to 'block'. This makes the menu bar vertical in appearance. If you are a sighted person then take a look at that page that I suggested above, http://www.godlyplay.org/home.shtml. Look at in Microsoft, Netscape or Opera 6 to see it in all it's glory. Then look at it in Netscape 4. It looks different but it still works just fine. Then look at it in Lynx to get an idea of how it will seem on a Braille browser. (http://www.delorie.com/web/lynxview.cgi?url=http%3a%2f%2fwww.godlyplay.org%2fhome.shtml). Again, it's different but just fine. Keep in mind that Netscape 4 users can upgrade, but Braille users cannot. [/font]

@Denzil_01224authorNov 24.2002 — #How could i make that menubar appear on the left hand side of my page and link up to my home page and another page called page1.html?

@PeOfEoNov 24.2002 — #You dont need a secondary nav with css. So lynx cant read tables though. What about I think it was ns3 or something that couldnt read a table that is inside of another table. How lame is that. That is the one nice thing about browser detection.

@PeOfEoNov 24.2002 — #Well if you have been reading our post you have learned 2 page layout stratagys which are css menus and tables for layout. I haven't used css yet but might take a crack at it offline sometime but if you pick tables just go to http://www.htmlgoodies.com/tutors/tbl.html and go to advanced table commands and read up on rowspan and go to table inside a table and read up on that. If you choose css just read our posts and check out any sites the others have recommended

@Beach_BumNov 25.2002 — #3 strategies have been suggested - you either forgot (or left out) frames - that is why frames were created - more sophisticated page layout.

Until the fixed attribute is more univerally supported - frames are the best way to go. Unless you like to work through unnatural acts (you can force anyting - like tables or styles - to work). i can also knock down a house with a hammer, but why would i?

my opinion.

@tdtaylorNov 25.2002 — #I disagree with the idea of using <table> for just tables and not page layout. Using tables for page layout is common practice and is taught it almost every web design course and tutorial book I have ever encounterd. While there are a few good methods for creating menus and placing them where you want them, tables should not be completely ruled out. Anyone have any suggestions on why tables are not a good tool for page layout?

@CharlesNov 25.2002 — #[font=georgia]Denzil,

I took a look at your site, and I'm afraid that you seem to misunderstand some ideas that are basic to HTML. And CSS will not work right without well formed HTML. The HTML 3.2 specification is good introduction to HTML ( http://www.w3.org/TR/REC-html32 ). It has a lot of problems though, so don't follow it. Just read it through once but spend a lot of time with the 4.01 Specification ( http://www.w3.org/TR/html4/ ). If you want your page to work on all browsers then put the following at the very top of your mark up:[/font]

[font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">[/font]

[font=georgia]and if you want the easy way out then use the following instead:[/font]

[font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">[/font]

[font=georgia]Then once your page passes the validator at http://validator.w3.org/ we can help you with the CSS.[/font]

@Denzil_01224authorNov 25.2002 — #How much do i have to change to make it pass the validation?

I feel like an idiot as there are so many errors!? ?

@CharlesNov 25.2002 — #[font=georgia]It's not as bad as it might seem. It's just that HTML is not a stream of commands, it's more like the tree structure of your hard drive. Read those documents that I suggested.[/font]

@StefanNov 26.2002 — #[i]Originally posted by tdtaylor [/i]

Using tables for page layout is common practice and is taught it almost every web design course and tutorial book I have ever encounterd. [/QUOTE]

Yes, it's the legacy from before we had HTML 4 and CSS, when the only real option for creating advanced layout was by abusing <table>.

Today however next to all browsers are perfectly capable of using proper HTML and CSS to create layout, so continued use of <table> should be avoided unless you _specifically_ target eg v3.x browsers or earlier.

While there are a few good methods for creating menus and placing them where you want them, tables should not be completely ruled out.
[/QUOTE]

No, only in 99% of the cases. ?

Anyone have any suggestions on why tables are not a good tool for page layout?
[/QUOTE]

For starters it makes accessebility to the page in a non graphical browser SUCK!

Here is also an article that sums up most of the advantages of using a CSS based page vs table

http://devedge.netscape.com/viewsource/2002/wired-interview/

Is that enough or you want me to list more stuff ?

@tdtaylorNov 26.2002 — #No, Stefan.... you made your point! ?

I have not looked deep enough into using CSS for page layout to know the pro's and cons, to be honest. I rely so much on placement of graphics to help pull the pages together that I am skeptical to try something that I am not used to. Call me old fashioned, I guess, but I want my graphics where I want them. Even with tables, there are sometimes conflicts.

I will definitely look into your suggestions, as none of these courses that taught layout with tables ever mentioned problems with graphical browsers. Oops! I guess someone overlooked an important setback! I do appreciate your comments, and I will certainly follow up on them.

@StefanNov 26.2002 — #[i]Originally posted by tdtaylor [/i]

I rely so much on placement of graphics to help pull the pages together that I am skeptical to try something that I am not used to. Call me old fashioned, I guess, but I want my graphics where I want them.
[/QUOTE]

Yes, it's usually a VERY bumpy ride at the beginning when you start switching from <table> to CSS layout.

The real hard part is to unlearn what you know and start to think in a compleatly new manner. You also have to learn how to get buggy CSS browsers to do what you tell it.

It takes a couple of months to get back on top, but once there you will have a very powerful tool to create layout with and get accessibility almost for free.

@Denzil_01224authorDec 02.2002 — #i used a program called "HTML Tidy" is that a useful thing to use?

@DUMD-DODec 04.2002 — #u can use nested tables

ie

<table width=150 cellpadding=0 cellspacing=0 >

<tr><td>

<a class=menu href=http://www.home.org> Home</a>

</td></tr>

You can add more links with row and cells as above

</table>

Between the h<head> section yu can add

<style type=text/css>

a.menu:active,a.menu:visited,a.menu:link

{ text-decoration:none;color:black;}

a.menu:hover

{color:red}

</style>

that should high-lite the text link to a red color.

Should visitor be using an older browser than the style will be ignored and display a normal tabled menu. With the newer browsers the style should work.

Using both is best and using styles doesnt hurt, abusing both the tables and CSS :eek: ,sorry is possible.

Nesting tables will help, but that is my option for menus. There are millions of menu to use seacrch the net and always view the source to see how that done.

Also in #HTML _↴

[RESOLVED] Accepting Payments of my Site Cell Issues server-side include (side-by-side)

Success!

Help @Denzil_01224 spread the word by sharing this article on Twitter...

Tweet This

Menubar

28 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Menubar

28 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

28 Comments(s) _↴

Also in #HTML _↴