How do I create a Navigation Menu??

@Go4the1Sep 06.2006

First off, im really new to HTML so bear with me here…

I was wondering how I would go about creating a Navigation Bar on the left of my web page, just like most other pages do. I’ve started off by making a table that has the different places and links to them:

[CODE]<TABLE BORDER=”3″ CELLSPACING=”1″ CELLPADDING=”1″> <CAPTION>Navigation Menu</CAPTION>

<TD ALIGN = “center”> <A HREF=”homepage.html”>Home</A> </TD> <TR></TR>

<TD ALIGN = “center”> <A HREF=”guestbook.html”>Guestbook</A> </TD> <TR></TR>

</TABLE>[/CODE]

This works pretty good. The problem is when I try to add anything else to the page, it starts it underneath the bar. All I want to know is how to make my text, pictures, ect start to the right of the bar and go down from there, just like on basically every other site.

Thanks for any help.

to post a comment

HTML

7 Comments(s) _↴

@Rossario123Sep 06.2006 — #

[code=html]
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
 
 <title>MySite.com</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <style type="text/css">
 /* begin definitions list nav menu */
 .nav{position:absolute;left:50%;top:200px;margin-left:-550px;z-index:1;}
 .nav dl{margin:0;padding:0;width:200px;}
 .nav dl dt{font-size:12px;font-family:verdana, sans-serif;display:block;height:17px;width:200px;border-bottom:3px dotted red;text-align:center;}
 .nav dl dd{display:block;width:200px;height:17px;position:relative;margin:0;}
 .nav dl dd a, .nav dl dd a:visited{display:block;width:200px;height:12px;text-indent:10px;font-family:verdana, sans-serif;font-size:12px;border-bottom:1px solid black;text-decoration:none;}
 .nav dl dd a:hover{text-indent:15px;text-decoration:none;}
 </style>
 
 </head>
 <body>
 
 <!-- begin menu section -->
 <div class="nav">
 <dl>
 <dt>Menu Header</dt>
 <dd><a href="#">List item 1</a></dd>
 <dd><a href="#">List item 2</a></dd>
 <dd><a href="#">List item 3</a></dd>
 <dd><a href="#">List item 4</a></dd>
 </dl>
 </div>
 </body> 

 [/code]

@VentageSep 06.2006 — #hmm.. i find photoshop to be alot easier then linkin everything in dreamweaver lol

@Rossario123Sep 06.2006 — #dreamweaver and photoshop?

im confused ?

lol

@ray326Sep 06.2006 — #A menu is a list of links. http://alistapart.com/articles/taminglists

@thereseSep 06.2006 — #Hi, hope I can be of some help.

First, don't use tables to layout your page. Thats old news. You want to use the newer way of doing things by using whats called css style sheets. You can find lots and lots of information about that online and on this website.

To start you out, here is a basic, 2 column layout you can use:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>2column_float</title>

<link rel="stylesheet" type="text/css" href="2col.css">

</head>

<body>

<div id="container">

<div id="top">

<h1>Header</h1>

</div>

<div id="leftnav">

<ul>

<li><a href="">link 1</a></li>

<li><a href="">link 2</a></li>

<li><a href="">link 3</a></li>

<li><a href="">link 4</a></li>

</ul>

</div>

<div id="content">

<h2>Subheading</h2>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation

ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor

in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at

vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis

dolore te feugait nulla facilisi.

</p>

<p>

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip

ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie

consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim

qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor

sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna

aliquam erat volutpat.

</p>

</div>

<div id="footer">

Footer

</div>

</div>

</body>

</html>
[/QUOTE]

Copy that code and save it as index.html

You can study the code, and see that there are sections called "div"s.

Now the second part, is the css style sheet. Below is coding for that.



#container

{

width: 90%;

/*margin: 10px auto;*/

background-color: #fff;

color: #333;

border: 1px solid gray;

line-height: 130%;

}

#top

{

padding: .5em;

background-color: #D1E8FF;

border-bottom: 1px solid gray;

}

#top h1

{

padding: 0;

margin: 0;

}

#leftnav

{

float: left;

width: 160px;

margin: 0;

padding: 1em;

}

#leftnav p { margin: 0 0 1em 0; }

ul{

list-style-type: none;

}

#content

{

margin-left: 200px;

border-left: 1px solid gray;

padding: 1em;

}

#content h2 { margin: 0 0 .5em 0; }

#footer

{

clear: both;

margin: 0;

padding: .5em;

color: #333;

background-color: #D1E8FF;

border-top: 1px solid gray;

}

[/QUOTE]

Copy that and name the file 2col.css. That is your style sheet.

You can then use these two files to study. Start out changing simple things like colors. You will notice that the links in your navigation bar are done as list items, thats because that is the most recommended way of doing navigation.

Hope this gets you started

@Rossario123Sep 06.2006 — #damn i guess my post was incorrect or something???

seemed right to me at the time lol ? oh well. ?

@Go4the1authorSep 06.2006 — #alright thanks everyone I got it now ?

Also in #HTML _↴

Problem nesting links in text Help Removing Empty Space Html website.

Success!

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

Tweet This

How do I create a Navigation Menu??

7 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

How do I create a Navigation Menu??

7 Comments(s) ↴

Also in #HTML ↴

Success!

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

Social

Version

7 Comments(s) _↴

Also in #HTML _↴