Help Making Menu Links, Help Making Menu Links Across Banner Image Options

[richnlp]

Hi again, I'm looking for instructions on how to add menu links across the green banner located on this site here: Carpet and Rug Cleaning. Any help is greatly appreciated.
The links I want to add are for the pages:
HOME--PRICING--SERVICES--ABOUT US--24HR EMERGENCY

[Frederiek]

You can use a list (UL, LI) to create the menu links. See the tutorials at http://css.maxdesign.com.au/ .

PS, are you aware that your page has some files that return a 404 Not Found and some js errors?

[richnlp]

You can use a list (UL, LI) to create the menu links. See the tutorials at http://css.maxdesign.com.au/ .

PS, are you aware that your page has some files that return a 404 Not Found and some js errors?

Thanks, I'll try that. Yeah I'm still in the middle of creating the site. I'll be using less js by the time I'm finished. Thanks again for the help.

[richnlp]

I'm still not understanding how to do it after reading the tutorials.

Is it possible to give me the code to add menu links to the green banner (in link above)?
Links are: HOME, PRICES, SERVICES, ABOUT US, and 24HR EMERGENCY.

Lol, feel like I'm asking for crib notes for a test!

Green Banner


This post has been edited by richnlp: Aug 19 2012, 04:52 AM

[pandy]

That looks like something that should be used as a background image.

[Frederiek]

It is a background image set inside a TD.

Get rid of the SPAN, that serves no use, in that TD.
Then, take the entire <ul>...</ul> markup and the CSS from the example Simple horizontal list at http://css.maxdesign.com.au/listamatic/horizontal01.htm .
Change the link HREF and text to accommodate yours.

In a nutshell, it's as simple as that.

[richnlp]

It is a background image set inside a TD.

Get rid of the SPAN, that serves no use, in that TD.
Then, take the entire <ul>...</ul> markup and the CSS from the example Simple horizontal list at http://css.maxdesign.com.au/listamatic/horizontal01.htm .
Change the link HREF and text to accommodate yours.

In a nutshell, it's as simple as that.

Below is the code I have made from the example but I'm still not sure how to enter it into my code so it shows up on my green image?


Code:
<div id="navcontainer">
<ul id="navlist">
<li id="active">
<a href="index.html" id="current">Home</a></li>
<li>
<a href="services.html">Services</a></li>
<li>
<a href="about.html">About Us</a></li>
<li>
<a href="emergency.html">24HR Emergency</a></li>
<li>
<a href="contact.html">Contact Us</a></li>
</ul>
</div>

Image Code (after taking out spans):
<TD valign="top" background="layout/layout/layout_3.jpg">&nbsp;</TD>


Thanks for the example, big help.

[pandy]

Put it in the TD the image is a background for.

[richnlp]

It is a background image set inside a TD.

Get rid of the SPAN, that serves no use, in that TD.
Then, take the entire <ul>...</ul> markup and the CSS from the example Simple horizontal list at http://css.maxdesign.com.au/listamatic/horizontal01.htm .
Change the link HREF and text to accommodate yours.

In a nutshell, it's as simple as that.

Below is the code I have made from the example but I'm still not sure how to enter it into my code so it shows up on my green image?


Code:
<div id="navcontainer">
<ul id="navlist">
<li id="active">
<a href="index.html" id="current">Home</a></li>
<li>
<a href="about.html">About Us</a></li>
<li>
<a href="services.html">Services</a></li>
<li>
<a href="dos.html">Do's and Don'ts</a></li>
<li>
<a href="testimonials.html">Testimonials</a></li>
<li>
<a href="water-damage.html">Water Damage Restoration</a></li>
<li>
<a href="contact.html">Contact Us</a></li>
</ul>
</div>

Image Code (after taking out spans):
<TD valign="top" background="layout/layout/layout_3.jpg">&nbsp;</TD>


Thanks for the example, big help.

[pandy]

CODE

<TD valign="top" background="layout/layout/layout_3.jpg">&nbsp;</TD>
                                                         ^^^^^^
                                                          HERE!

But remove the &nbsp; first.

[richnlp]

CODE

<TD valign="top" background="layout/layout/layout_3.jpg">&nbsp;</TD>
                                                         ^^^^^^
                                                          HERE!

But remove the &nbsp; first.

Thanks, I must be doing something wrong. The links come in scrunched up as on this test page.

[Frederiek]

You didn't put the code you posted last, which is correct. Instead, in your test page, all links are contained inside *one* LI element, with &nbsp;'s,.

And where did you put the CSS for the list?

Also, your page doesn't have a DOCTYPE. The validator would have pointed that and related markup errors out which you should fix: http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes

[richnlp]

You didn't put the code you posted last, which is correct. Instead, in your test page, all links are contained inside *one* LI element, with &nbsp;'s,.

And where did you put the CSS for the list?

Also, your page doesn't have a DOCTYPE. The validator would have pointed that and related markup errors out which you should fix: http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes

Here is my new code. This web editor kept taking out my lis lol. The CSS is in the css folder.

NEW MENU CODE:
<p>
<li>
<a href="index.html" id="current">Home</a></li>
</p>
</body>
<body>
<p>
<li>
<a href="http://about.html">About Us</a></li>
</p>
</body>
<body>
<p>
<li>
<a href="http://services.html">Services</a></li>
</p>
</body>
<body>
<p>
<li>
<a href="http://dos.html">Do's and Don'ts</a></li>
</p>
</body>
<body>
<p>
<li>
<a href="http://testimonials.html">Testimonials</a></li>
</p>
</body>
<body>
<p>
<li>
<a href="http://water-damage.html">Water Damage Restoration</a></li>
</p>
</body>
<body>
<p>
<li>
<a href="http://contact.html">Contact Us</a></li>
</p>

[richnlp]

You didn't put the code you posted last, which is correct. Instead, in your test page, all links are contained inside *one* LI element, with &nbsp;'s,.

And where did you put the CSS for the list?

Also, your page doesn't have a DOCTYPE. The validator would have pointed that and related markup errors out which you should fix: http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes

Here is my new code. This web editor kept taking out my lis lol. The CSS is in the css folder.

NEW MENU CODE:
<p>
<li>
<a href="index.html" id="current">Home</a></li>
</p>
</body>
<body>
<p>
<li>
<a href="http://about.html">About Us</a></li>
</p>
</body>
<body>
<p>
<li>
<a href="http://services.html">Services</a></li>
</p>
</body>
<body>
<p>
<li>
<a href="http://dos.html">Do's and Don'ts</a></li>
</p>
</body>
<body>
<p>
<li>
<a href="http://testimonials.html">Testimonials</a></li>
</p>
</body>
<body>
<p>
<li>
<a href="http://water-damage.html">Water Damage Restoration</a></li>
</p>
</body>
<body>
<p>
<li>
<a href="http://contact.html">Contact Us</a></li>
</p>

I just decided to turn it into a banner on the other pages lol. I'm going to make a different menu and add it to the top of site. Thanks for all the help though, I really appreciate it.

[pandy]

Why did you change what was correct? The new version is broken in so many places that I can't count them. To take one thing, do you know how many BODY a document can have and where it should go?

[Frederiek]

Since you're going to create a menu anyway, at least start out with the correct HTML markup structure.