Horizontal menu help needed

[AdRock]

I created a CSS menu using the tutorial that is linked in the sticky thread at the top of this forum and I have got it working without Javascript

What I am wandering is, is there a way i can have the li class="submenu" evenly spaced. Some of my headings are longer than others so the spacing between look untidy

I would like the spacing between headings to be evenly distributed

HTML: Select all

<div id="navigation">
<ul class="level1">
    <li><a href="home.php">Home</a></li>
    <li class="submenu">Civil Engineering
 <ul class="level2" id="sub1">
     <li><a href="general.php">General</a></li>
     <li><a href="management.php">Management</a></li>
 </ul>
    </li>

[ukgeoff]

I take it there is more to your navigation code that this. If not what's here is missing some code.

Not sure what you are getting at with the spacing. You should know by now to put the page somewhere where we can see what you see. Then we might have an idea what you are trying to tells us.

[karloff]

If i understatnd what you meani think you could

.submenu{

margin-left : ??px;
margin-right : ??px;}

otherwise you could set a fixed width?

not sure excatlly what you wantin. let us know if that helps

[AdRock]

http://www.jackgodfrey.org.uk/test/index.php

Here is the URL for the test page. you'll be able to see what i mean with the nav bar. None of the headings are symetrical.

I have used the code that was given in the tutorial and it all looks perfect apart from the headings

[ukgeoff]

It's this piece of css that's primarily determing the spacing of your menu items.

Code: Select all

div#navigation ul.level1 a {
   width: 130px;
}

Your menu doesn't work right in Firefox either.

There are a number of other css problems and I think you will find that I didn't tell you to include the 'csshover.htc' file the way you have done.

Don't name styling blocks, style1, style2, etc. Give them meaningful labels.

You need to go back and read some more.

[AdRock]

I have a question about the tutorial

with regards to this bit

Now if you include this in your main stylesheet it will not validate. So in case this is
important to you, and it should be, save this code in a separate file. I call mine:
ieonly.css
And then call this file from within your xhtml pages using the following lines of code:
<!--[if lte IE 6]>
<link rel="StyleSheet" type="text/css" href="ieonly.css" />
<![endif]-->

What if i'm using php. Do i still use the
<!--[if lte IE 6]> bit on my page?

[ukgeoff]

Yes.

Just make sure you put it in the right place iin your code depeneding on whether your page is generated entirely from php or is basically an html page with some php code embedded.

[AdRock]

I have my menu working perfectly ow but have one query

This is my menu

HTML: Select all

<div id="navigation">
 <ul class="level1">
         <li><a href="/index">Home</a></li>
         <li class="submenu">Civil Engineering
  <ul class="level2" id="sub1">
          <li><a href="/general">General</a></li>
          <li><a href="/management">Management</a></li>
  </ul>
         </li>
         <li class="submenu">Construction
      <ul class="level2" id="sub1">
          <li><a href="/designandbuild">Design and Build</a></li>
          <li><a href="/drainage">Drainage</a></li>
          <li><a href="/groundwork">Groundwork</a></li>
      </ul>
         </li>
         <li class="submenu">Water
      <ul class="level2" id="sub1">
          <li><a href="/leakageandpipelines">Leakage and Pipelines</a></li>
          <li><a href="/trenchlessinstallations">Trenchless Installations</a></li>
      </ul>
         </li>
         <li class="submenu">Contact Us
      <ul class="level2" id="sub1">
          <li><a href="/contactus">Contact Details</a></li>
          <li><a href="/enquiryform">Enquiry Form</a></li>
      </ul>
         </li>
         <li class="submenu">Information
      <ul class="level2" id="sub1">
          <li><a href="/aboutus">About Us</a></li>
          <li><a href="/news">Current News</a></li>
          <li><a href="/missionstatement">Mission Statement</a></li>
      </ul>
         </li>
 </ul>
    </div>

What i want to know is how can i remove the hover effect from this line

HTML: Select all

<li><a href="/index">Home</a></li>

At the moment when hovered over it turns blue which is to do with this bit

Code: Select all

 
div#navigation li a:hover {
color: #FFF;
background-color: #00F;
}

How do i chnage it so just the first link isn't affected using that code? I don't want any hover at all just plain

[Ryan Fait]

Add these:

Code: Select all

<li class="home"><a href="/index">Home</a></li>

Code: Select all

div#navigation li.home a:hover {
    color: #000;
    background-color: transparent;
}

[Ryan Fait]

I forgot to mention... The menu looks horrid in Safari. The blue boxes that appear on the hover extend out past the boundaries of the <ul> the links are in. Also, the lines separating the links only go a little more than halfway across the box.

Consider using something other than specific widths for the top level list elements, too. They're all uneven and it looks rather tacky.