9 replies [Last post]
kr_designs
Offline
newbie
PA, USA
Last seen: 15 years 51 weeks ago
PA, USA
Timezone: GMT-5
Joined: 2003-12-02
Posts: 8
Points: 0

Hi,

I love this navigation menu I found:

http://www.design-a-website.com/lvcc/index.html because of the little descriptions that show underneath the menu when you hover over the links.

HOWEVER, the <span attributes make it really difficult for someone using NN4.7 or for someone with sight impairment to see the links unless I put a <br at the end of each link. When I do that, it looks screwey in the newer versions.

I suppose I could just eliminate the <span attributes, as they're not really NECESSARY but I happen to LIKE them. Wink

Is there a way, aside from making a totally other page, to get this menu to work for NN4 or handicapped accessible browsers? :?

In case you need it, here is the style from the xternal sheet for the navigation, followed by what is in the HTML.

( http://www.design-a-website.com/lvcc/lvcc_ss_4.css )

div#links {position: absolute; top: 130px; left: 5; width: 155px; height: 700px; font: 14px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif;
padding: 5px 10px; margin: 0 0 1px; border-width: 0;
text-decoration: none; color: #800000; background: #ffe086;
border-right: 5px solid #fff3d1;}
div#links a:hover {color: #7b7da9; background: #fff3d1;
border-right: 5px double white;}

div#links a span {display: none;}
div#links a:hover span {display: block;
position: absolute; top: 230px; left: 0; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: #ffe086; background: 7b7da9;
font: 10px Verdana, sans-serif; text-align: center; font-weight: bold;}

In body:

<div class="section" id="links">
<a href="index.htm">Home<span>Main Page for LVCC</span></a>
<a href="mission.htm">Mission & Values<span> Discover why we exist and what's important to us.</span></a>

<a href="leadership.htm">Leadership<span> Meet the LVCC pastors.</span></a>
<a href="ministries.htm">Ministries<span> Learn about LVCC's current and future ministries.</span></a>
<a href="beliefs.htm">Core Beliefs<span> What we believe and strive to live by.</span></a>
<a href="affiliations.htm">Affiliation<span> Other churches with values and beliefs similar to those of LVCC.</span></a>
<a href="upcoming.htm">Upcoming Events<span> Find out what's going on at Lords Valley Community Church.</span></a>
<a href="contact.htm">Contact Us<span> Get in touch with LVCC.</span></a>
<a href="links.htm">Links<span> Helpful links to other sites.</span></a>
</div>

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 1 week ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

CSS Navigation Menu, with &lt;span&gt; attributes

hmmm I have never seen it done this way. Let me clarify - I have never looked at this deeply enough, although have seen it done on Eric Meyers site.

But to me there are some glaring problems in the structure as the span is used as a class, but no class is specified.

I would see it as this

div#links a .hint {display: none;}
div#links a:hover .hint {display: block;
   position: absolute; top: 260px; left: 0; width: 125px;
   padding: 5px; margin: 10px; z-index: 100;
   color: #ffe086; background: 7b7da9;
   font: 10px Verdana, sans-serif; text-align: center; font-weight: bold;}

and the body

<a href="leadership.htm">Leadership<span class="hint"> Meet the LVCC pastors.</span></a>

Now you notice that I also made Top 260 not 230 as it was dissapearing behind the buttons in IE6.

Anyway try that in NN4

Regards
Day

The only way to learn is to do it yourself

kr_designs
Offline
newbie
PA, USA
Last seen: 15 years 51 weeks ago
PA, USA
Timezone: GMT-5
Joined: 2003-12-02
Posts: 8
Points: 0

CSS Navigation Menu, with &lt;span&gt; attributes

Thanks -- I made those changes but the navigation still looks confusing in NN4. Crying

Your suggestion seems to make more sense to me than just "span".

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 1 week ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

CSS Navigation Menu, with &lt;span&gt; attributes

ooops forgot - div#links a span {display: none;}

did you change above to - div#links a .hint {display: none;}

I must admit I do not quite understand what is actually happening under NN4, can you post a screen shot? or provide a better exlanation.

Regards
Day

The only way to learn is to do it yourself

kr_designs
Offline
newbie
PA, USA
Last seen: 15 years 51 weeks ago
PA, USA
Timezone: GMT-5
Joined: 2003-12-02
Posts: 8
Points: 0

CSS Navigation Menu, with &lt;span&gt; attributes

Yes, I did change it. Though, even with out the "hints" displaying, the navigation is going to be difficult because it all runs together.

I don't care that the page layout is screwey, because, you can still read the information in a sensible order.... I don't care to make a second site just for the few users who may access it with NN4...but I do want to make sure that people with vision handicaps are able to navigate the site. I read somewhere that NN4 is still being used by 10% of web users.

Here's the screen shot.

Huggy
Offline
newbie
Edinburgh, Scotland
Last seen: 15 years 52 weeks ago
Edinburgh, Scotland
Joined: 2003-11-26
Posts: 4
Points: 0

CSS Navigation Menu, with &lt;span&gt; attributes

This may be barking up the wrong tree but I have found IE6 parses pages and adjusts the way it interprets CSS and also the way it displays them depending upon the <!HTML...> declaration.

I discovered placing and extra dummy declaration prior to the main one satisfies W3's HTML validator and stops IE mucking the page about.

<!>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4//EN" "http://www.w3.org/TR/html4/strict.dtd">

kr_designs
Offline
newbie
PA, USA
Last seen: 15 years 51 weeks ago
PA, USA
Timezone: GMT-5
Joined: 2003-12-02
Posts: 8
Points: 0

CSS Navigation Menu, with &lt;span&gt; attributes

Well....it displays fine in NN7 and Mozilla as well as IE. My problem is with NN4's rendering of the navigation.

Rather than wrestle with this any more, I think I am going to just try and get spaces between the link titles and hints in the html and put ( ) around the hints. that way it will still look sensible in the newer browsers and easier to discriminate between the links in NN4. Hopefully, anyone trying to access the site with vision problems will be able to see the links more clearly.

Maybe I should put a bullet of some sort next to the link titles, so that they will help separate the links too. This is so annoying!~

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 1 week ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

CSS Navigation Menu, with &lt;span&gt; attributes

I am assuming that the screen shot is nn4 using the normal css not the NN4 css. No wonder you would like to fix it.

As you say as long as the links work!

Regards
Day

The only way to learn is to do it yourself

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 1 week ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

CSS Navigation Menu, with &lt;span&gt; attributes

heres a thought

Add a div to the end of each link that contains a <br />. Make the div hidden, which of course NN4 will ignore and the line break will work.

Regards
Day

The only way to learn is to do it yourself

kr_designs
Offline
newbie
PA, USA
Last seen: 15 years 51 weeks ago
PA, USA
Timezone: GMT-5
Joined: 2003-12-02
Posts: 8
Points: 0

CSS Navigation Menu, with &lt;span&gt; attributes

Tried the <br /> trick and it still made the thing look stupid in newer browsers.

Then I thought of something that is so elementary that I felt like a dope....I did one other css menu on another site, but I couldn't remember what website generated the menu. I did know that the menu degraded gracefully in NN4, so I looked at the CSS for that site...and BAM...hit me in the face: BULLETED LIST!! DUH!!!

I made my navigationa bulleted list with "none" set for the type of bullet .... It looks just right in newer browsers, and shows up as a normal bulleted list in NN4. Hallelujah!