6 Replies - 1130 Views - Last Post: 03 July 2009 - 02:01 PM

#1 papuccino1  Icon User is offline

  • His name was Robert Paulson.
  • member icon

Reputation: 63
  • View blog
  • Posts: 1,121
  • Joined: 02-March 08

So I need some help creating a menu on my website.

Posted 19 June 2009 - 12:09 PM

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

http://www.papuccino...internet.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. :)

Is This A Good Question/Topic? 0
  • +

Replies To: So I need some help creating a menu on my website.

#2 papuccino1  Icon User is offline

  • His name was Robert Paulson.
  • member icon

Reputation: 63
  • View blog
  • Posts: 1,121
  • Joined: 02-March 08

Re: So I need some help creating a menu on my website.

Posted 19 June 2009 - 12:19 PM

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

Ewwwww.....


There has to be a better way that doesn't involve frames.
Was This Post Helpful? 0
  • +
  • -

#3 crazyjugglerdrummer  Icon User is offline

  • GAME OVER. NERD WINS.
  • member icon

Reputation: 124
  • View blog
  • Posts: 690
  • Joined: 07-January 09

Re: So I need some help creating a menu on my website.

Posted 19 June 2009 - 01:13 PM

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. :D
Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: So I need some help creating a menu on my website.

Posted 19 June 2009 - 01:23 PM

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

http://www.alistapar...es/taminglists/
Was This Post Helpful? 0
  • +
  • -

#5 Ryanmiller  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 21-June 09

Re: So I need some help creating a menu on my website.

Posted 21 June 2009 - 01:48 AM

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.conejofam...t.com/style.css

This post has been edited by Ryanmiller: 21 June 2009 - 01:50 AM

Was This Post Helpful? 0
  • +
  • -

#6 papuccino1  Icon User is offline

  • His name was Robert Paulson.
  • member icon

Reputation: 63
  • View blog
  • Posts: 1,121
  • Joined: 02-March 08

Re: So I need some help creating a menu on my website.

Posted 02 July 2009 - 03:59 PM

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
Was This Post Helpful? 0
  • +
  • -

#7 Ryanmiller  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 21-June 09

Re: So I need some help creating a menu on my website.

Posted 03 July 2009 - 02:01 PM

View Postpapuccino1, on 2 Jul, 2009 - 02:59 PM, said:

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.dreaminco...amp;qpid=691807

View PostRyanmiller, on 3 Jul, 2009 - 12:56 PM, said:

View Postpapuccino1, on 2 Jul, 2009 - 02:59 PM, said:

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 menu. They don't have to be home.php or aboutus.php, they could easily be yahoo.com or http://www.dreaminco...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
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1