HTML Help Forum

Newbie: HTML code for Horizontal Navigation Bar

Discuss any HTML troubles including forms, tables, and frames.

Newbie: HTML code for Horizontal Navigation Bar

Postby CullensClearances » Sun Jul 24, 2011 12:42 pm

Hi

I use Vistaprint Site Builder and I want to add a horizontal navigation bar to the website.

This is my website Log in or Register to see link

This is the code I have so far:
--------------------------------------------------------------
<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
</head>

<body>
<ul>
<li><a href="www.cullensclearances.co.uk">Home</a></li>
<li><a href="www.cullensclearances.co.uk">Domestic</a></li>
<li><a href="www.cullensclearances.co.uk">Commercial</a></li>
<li><a href="http://www.cullensclearances.co.uk/Price-Guide.html">Prices</a></li>
<li><a href="http://www.cullensclearances.co.uk/Book-Online.html">Book Online</a></li>
<li><a href="http://cullensclearances.blogspot.com">The Green Blog Splodge</a></li>
</ul>

</body>
</html>
----------------------------------------------

As you can see it is pretty basic, but I want a nice looking bar.

The problem is Vistaprint site builder uses html boxes and some codes doesnt work.

I am properly lost and really need some help.
CullensClearances
 
Posts: 9
Joined: Sun Jul 24, 2011 12:36 pm
Location: London, UK

Re: Newbie: HTML code for Horizontal Navigation Bar

Postby PayneLess Designs » Sun Jul 24, 2011 3:59 pm

These may help you, plus you may find a better customizable horizontal menu to use:

ee following sites for navigation menus:

CSS Library Horizontal CSS Menus: Log in or Register to see link
CSS Library Vertical CSS Menus: Log in or Register to see link
Log in or Register to see link
Log in or Register to see link
How to Style an Unordered List with CSS: Log in or Register to see link

Sexy Drop Down Menu w/ jQuery & CSS: Log in or Register to see link

NavDock jQuery Plugin (Ver 1.5.1): Log in or Register to see link

Making CSS Rollover Buttons: Log in or Register to see link

How To:

Log in or Register to see link
Log in or Register to see link
Log in or Register to see link
Simple JQuery Accordion menu: Log in or Register to see link
Drop-Down Menus, Horizontal Style: Log in or Register to see link

The Right Way to Make a Dropdown Menu: Log in or Register to see link

There are also some free online menu amkers you can use.
PayneLess Designs
Site Admin
 
Posts: 5662
Joined: Wed Feb 28, 2007 9:19 pm
Location: MS

Re: Newbie: HTML code for Horizontal Navigation Bar

Postby CullensClearances » Mon Jul 25, 2011 5:47 pm

Hi, thanks I will have a look at these tomorrow. I am just wondering because vistaprint site builder is like trying to build a city in a 10x10 cardboard box...that the css is too complicated for it...and only standard html code can be used.

Im not sure what css is but I used a css generator yesterday and didnt work on the site.

Thanks anyways (:
CullensClearances
 
Posts: 9
Joined: Sun Jul 24, 2011 12:36 pm
Location: London, UK

Re: Newbie: HTML code for Horizontal Navigation Bar

Postby PayneLess Designs » Mon Jul 25, 2011 6:10 pm

To get your original nav menu horizontal is going to require use of CSS for sure. Just thought you could do with one already made.
PayneLess Designs
Site Admin
 
Posts: 5662
Joined: Wed Feb 28, 2007 9:19 pm
Location: MS

Re: Newbie: HTML code for Horizontal Navigation Bar

Postby CullensClearances » Mon Jul 25, 2011 7:52 pm

PayneLess Designs wrote:To get your original nav menu horizontal is going to require use of CSS for sure. Just thought you could do with one already made.


Hi thank you very much! I have just added a couple of new nav menus from the first link you gave me, and realised that all but the ones that use images work...wouldn't have done this without your help!

Again a huge thank you!!!! :D
CullensClearances
 
Posts: 9
Joined: Sun Jul 24, 2011 12:36 pm
Location: London, UK

Re: Newbie: HTML code for Horizontal Navigation Bar

Postby PayneLess Designs » Mon Jul 25, 2011 9:23 pm

You're very welcome.

Those that use images must have either the images the site provides downloaded and place in the correct folder or you make you own images to use. Either place them in the right folder or redo the path to the images.
PayneLess Designs
Site Admin
 
Posts: 5662
Joined: Wed Feb 28, 2007 9:19 pm
Location: MS

Re: Newbie: HTML code for Horizontal Navigation Bar

Postby CullensClearances » Fri Jul 29, 2011 12:48 pm

PayneLess Designs wrote:You're very welcome.

Those that use images must have either the images the site provides downloaded and place in the correct folder or you make you own images to use. Either place them in the right folder or redo the path to the images.


Hi...I was wondering if you know how to solve a problem I have.

I chose this NAV MENU (code below), but none of the links works apart from "home" and the "blog" tab (which is an external blogger site)...they just says 404 page not found. Even though I have those pages. I think it may be because of the limited ability of the Vistaprint site builder...what do you think? and I must add I add this to a html code box as the site is a visual rather than html builder. Thanks

Code: Select all
<style type="text/css">.mattblacktabs{width: 100%;overflow: hidden;border-bottom: 0px solid black; /*bottom horizontal line that runs beneath tabs*/}.mattblacktabs ul{margin: 0;padding: 0;padding-left: 0px; /*offset of tabs relative to browser left edge*/font: bold 11px Verdana;list-style-type: none;}.mattblacktabs li{display: inline;margin: 0;}.mattblacktabs li a{float: left;display: block;text-decoration: none;margin: 0;padding: 8px 6px; /*padding inside each tab*/border-right: 1px solid white; /*right divider between tabs*/color: white;background: #414141; /*background of tabs (default state)*/}.mattblacktabs li a:visited{color: white;}.mattblacktabs li a:hover, .mattblacktabs li.selected a{background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */}</style><div class="mattblacktabs"><ul><li><a href="http://cullensclearances.co.uk/home/">Home</a></li><li><a href="http://cullensclearances.co.uk/domestic/">Domestic</a></li><li><a href="http://cullensclearances.co.uk/commercial/">Commercial</a></li><li><a href="http://cullensclearances.co.uk/prices/">Prices</a></li><li><a href="http://cullensclearances.co.uk/book-online/">Book Online</a></li><li><a href="http://cullensclearances.co.uk/faqs/">FAQs</a></li><li><a href="http://cullensclearances.co.uk/areas/">Areas</a></li><li><a href="http://cullensclearances.co.uk/contact">Contact</a></li><li><a href="http://cullensadvice.blogspot.com/">Blog</a></li></ul></div>
CullensClearances
 
Posts: 9
Joined: Sun Jul 24, 2011 12:36 pm
Location: London, UK

Re: Newbie: HTML code for Horizontal Navigation Bar

Postby PayneLess Designs » Fri Jul 29, 2011 4:11 pm

Are those .html files? There are no extensions so that means you have to have a folder named "home" and then an index.html file in it that is your home page.

Yours:
Code: Select all
<li><a href="http://cullensclearances.co.uk/home/">Home</a></li>


Possibly problem where it should be:
Code: Select all
<li><a href="http://cullensclearances.co.uk/index.html">Home</a></li>


Similarly for the others:
Code: Select all
<li><a href="http://cullensclearances.co.uk/domestic/">Domestic</a></li>
<li><a href="http://cullensclearances.co.uk/commercial.html">Commercial</a></li>
<li><a href="http://cullensclearances.co.uk/prices.html">Prices</a></li>
<li><a href="http://cullensclearances.co.uk/book-online.html">Book Online</a></li>
<li><a href="http://cullensclearances.co.uk/faqs/">FAQs</a></li>
<li><a href="http://cullensclearances.co.uk/areas.html">Areas</a></li>
<li><a href="http://cullensclearances.co.uk/contact.html">Contact</a></li>
<li><a href="http://cullensadvice.blogspot.com/">Blog</a></li>


You do not need to use the full URLs when the files and folders are on your own server. Only the blog one needs the full URL. Use relative paths for the others. These checked with my link checker:
Code: Select all
<div class="mattblacktabs">
<ul>
<li><a href="http://cullensclearances.co.uk/home.html">Home</a></li>
<li><a href="http://cullensclearances.co.uk/domestic.html">Domestic</a></li>
<li><a href="http://cullensclearances.co.uk/commercial.html">Commercial</a></li>
<li><a href="http://cullensclearances.co.uk/prices.html">Prices</a></li>
<li><a href="http://cullensclearances.co.uk/book-online.html">Book Online</a></li>
<li><a href="http://cullensclearances.co.uk/faqs.html">FAQs</a></li>
<li><a href="http://cullensclearances.co.uk/areas.html">Areas</a></li>
<li><a href="http://cullensclearances.co.uk/contact.html">Contact</a></li>
<li><a href="http://cullensadvice.blogspot.com/">Blog</a></li>
</ul>
</div>
PayneLess Designs
Site Admin
 
Posts: 5662
Joined: Wed Feb 28, 2007 9:19 pm
Location: MS


Return to General HTML

Who is online

Users browsing this forum: Majestic-12 [Bot] and 7 guests