So I'm a super newb to HTML layouts in general and I want to create an html menu on my site:

http://www.papuccino1.iflintinternet.co.uk/


Can anyone share a VERY simple example of how to position a normal looking top menu for a website?

I'm familiar with HTML and CSS (to a certain degree) but I can't make anything unless I see an example of what can be done.

Thanks.

Found this tutorial but it uses iFrames:
http://www.bookchamp.net/Creating-a-Menu.asp

Ewwwww.....


There has to be a better way that doesn't involve frames.

So you want to position a menu? Look into CSS positioning, with the float, position, right, top, and many other properties. It definitely can be done.

Menus are just unordered lists - here's a great tut:

http://www.alistapart.com/articles/taminglists/

Well to start off, always use divs to format your template, never tables.

A basic website with an along the top menu would be something like:

<div id="header">
<div id="menu">
<a href="home.php"><img src="home_button.jpg" /></a>
<a href="aboutus.php"><img src="aboutus_button.jpg" /></a>
<a href="contactus.php"><img src="contact_button.jpg" /></a>
<a href="faq.php"><img src="faq_button.jpg" /></a>
</div>
</div>

And then on the CSS page that you're linking to, it would look something like this:

#header
{
width: 800px;
height: 300px;
background-image: url(images/header_bg.jpg);
background-repeat: no-repeat;
text-align: center;
}

#menu
{
width: 800px;
height: 50px;
position: relative;
top: 250px;
text-align: center;
background-image: url(menu_bg.gif);
background-repeat: repeat-x;
}

This basically places a menu bar inside of the header. The header is 300px tall, and the menu is 50px tall. With position: relative, we tell the browser that we're about to move the menu away from the position where it's supposed to be (at the very top of the header div). So then, we go ahead and put top: 250px, which makes it so the TOP of the menu div is 250px below where it's supposed to be, making the bottom of the menu line up perfectly with the bottom of the header.

Then, with the text-align: center; we just center the menu buttons (home, contact us, about us, faq) etc.

Hope this helps.


If you want to see an in depth example, I made a website a while ago that used this basic format.

http://www.conejofamilydentist.com

and the style sheet is http://www.conejofamilydentist.com/style.css

This post has been edited by Ryanmiller: 21 Jun, 2009 - 12:50 AM

Ryan, could you please post what's inside the home.php and aboutus.php files? I don't understand how the site is actually loading the appropriate content. :S T_T

Those are just the files or web pages I' linking to on the header. They don't have to be home.php or aboutus.php, they could easily be yahoo.com or http://www.dreamincode.net/forums/index.ph...amp;qpid=691807




Sorry I didn't understand what you were asking. But if the index.php and aboutus.php files are in the same web folder as the page that is linking to them, then you don't need to put "http://www.yourwebsite.com/aboutus.php"

you only need to put aboutus.php and then the broswer automatically fixes it