css menus [Archive] - CodingForums.com

View Full Version : css menus

ASAAKI

03-29-2003, 08:12 PM

my css menu is one of those simple rows of links in which the whole cell changes style when you mouse over it. this (http://www10.brinkster.com/asaakitesting/menu.html) works fine on ie6:

but only for doctype html 4. now i want it in xhtml, but as soon as i do xhtml or html 4.1, the links' background is limited only to the word, and it gets all messed up.
so then i tried combinations of <a>s and <li>s and other stuff. the closest i got was this:

<style>
#menu{
width:100px;
height:auto;
display:block;
}
li{
text-align:center;
width:100px;
background-color:yellow;
color:blue;
border:1px solid red;
cursor:hand;
}
a{
text-decoration:none;
text-align:center;
width:100px;
color:blu;
font-weight:bold;
background-color:yellow;
padding:2px;
}
a:hover{
width:100px;
text-decoration:none;
background-color: orange;
color:#FFFFFF;
padding:2px;
text-align:center;
}
</style>
....
<ul id="menu">
<li><a href="#"> Home </a></li>
<li><a href="#"> About </a></li>
<li><a href="#"> Contact </a></li>
<li><a href="#"> FAQs </a></li>
<li><a href="#"> Feedback </a></li>
</ul>

that's quite elementary, but it's the closest. :(
how can i make the orange background be as wide as the whole menu width? width:100px or width:100% doesn't work. i tried some stuff, including putting the <li>s inside the <a>s, no avail.
i could easily light up the whole item by javascript, but i want to do it using css only. there are so many sites out there that seem to get this done without any js.

cg9com

03-29-2003, 09:27 PM

Hi,
try not to use widths an whatnot in an anchor tag, i find problems with it.
also text-align:center; i dont think this should be placed in an anchor either, but in its container element.

you can use the :hover psuedoclass in any element, to create a CSS rollover.
but it wont work in IE (figures):rolleyes:

so, make 2 seperate CSS trees, one for the original and one for the mouseover, and use javascript event handlers.

hope this helps.

ASAAKI

03-29-2003, 10:04 PM

you can use the :hover psuedoclass in any element, to create a CSS rollover.
but it wont work in IE (figures)

yes it does :rolleyes:
thanks cg, i'll probably be doing js then...

ASAAKI

03-29-2003, 10:15 PM

but wait, how does jeffrey do it at www.zeldman.com.
i checked the source...he doesn't seem to have eventhandlers on the links... and it works for me altho i'm on ie....

cg9com

03-29-2003, 10:16 PM

even when :hover is widely supported, i would still use event handlers if i was concerned about backwards compatability.

ASAAKI

03-29-2003, 10:17 PM

oh yea didn't of that!

pardicity3

03-30-2003, 01:30 AM

I am confused as to why your first example doesn't work with XHTML? I use css menus with XHTML and they always seem to validate; maybe I am missing something?

Anyway, nice colors, methinks they pretty!

ASAAKI

03-30-2003, 05:47 AM

thanks:)

no it's not a question of validation -- i haven't even done that yet because for some reason my host isn't treating xhtml as xml or something -- it's treating it as an application...?
the problem is that the style i was wanting doesn't work. try it, take out the source, and put an xhtml doctype and save it, then see the mess! :rolleyes:
on second thoughts....don't bother:o

i notice u're getting the effect pretty easily on your own log site - they're just plain <a> tags... not even any lists.. how'd u do it?:confused:

khaki

03-30-2003, 03:55 PM

Hi ASAAKI...

I decided to try to figure out how that css menu at www.zeldman.com is done, and I stripped it out (as much as I dared!) and got it to work as an html page (i'm not on board with xhtml yet... so you'll have to check that out yourself).

Anyway... I tested this (successfully) using the following:
IE 5.0
Netscape 7.0
Opera 6.02

It might be able to be stripped further, but I know that this works as-is.
Let me know if this is what you are looking for (i did it using your color, size, and formatting specs).

And if anybody would like to test this in other browsers/versions... I'd really like to know how it performs (please let me know).

Thanks (... especially to Jeffrey Zeldman).

modern day pirate...
k

<html>
<head>
<style type="text/css">

body{
background-color:#90A13F
}

#secondarynav ul {
list-style: none;
padding: 0;
margin: 15px 0;
border: 0;
}

#secondarynav li {
text-align: center;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
width: 84px;
margin: 0;
padding: 0;
font-family:verdana;
font-size:10;
color:#90A13F;
background-color:#9BBD34;
}

#secondarynav li a {
display: block;
font-weight:bold;
color:#ffffff;
font-family:verdana;
padding: 0;
border-left: 1px solid #000;
border-right: 1px solid #000;
background: #9BBD34;
text-decoration: none;
width: 84px;
voice-family: "\"}\"";
voice-family:inherit;
width: 82px;
}

#secondarynav li a {
}

#secondarynav li a:hover {
font-weight:bold;
background-color:#E0E88F;
color:#90A13F;
text-decoration: none;
}

</style>
</head>

<body>

<div id="secondarynav">
<ul>
<li><a href="#"> Home </a></li>
<li><a href="#"> My AUK </a></li>
<li><a href="#"> Forum </a></li>
<li><a href="#"> FAQs </a></li>
<li><a href="#"> About </a></li>
<li><a href="#"> Feedback </a></li>
<li><a href="#"> Contact </a></li>
</ul>

</body>
</html>

ASAAKI

03-30-2003, 06:16 PM

thanks a lot k:)
it does work right on mozilla 1.3 and opera 7 as well - (just downloaded opera!...hehe... yay!!)
but it looks like this (http://www10.brinkster.com/asaakitesting/cssmenutest.html) on IE6/win. those gaps just had to pop up :rolleyes:

don't bother about xhtml. as far as the markup is concerned it's practically the same as html 4.1 except that you can't leave out the ending tags of any element...and of course you need the doctype.

khaki

03-30-2003, 06:26 PM

Hi (again) ASAAKI...

Did you view www.zeldman.com. with IE6?
Does it have those gaps?
Let me know (maybe I stripped-out too much :eek: )
k

ASAAKI

03-30-2003, 06:29 PM

lol..no zeldman doesn't have the gaps.

khaki

03-30-2003, 07:38 PM

oh....

I don't know ASSAKI.
(i'm afraid that i'm all tapped-out)

a pirate who is better at stealing ships than building 'em...
k

Plus... this is how zeldman looks on my IE5.0 :

pardicity3

03-30-2003, 07:39 PM

Hail ASAAKI -

Here is how I acheived the good 'ole css menu on my site:

1. Make a big "containing div" that will contain all your little <a>'s. I specified a % width on my div, but you can go pixels too.

2. Style your <a> tags to look the way you want them too. This is what I did:

/* This is my big container, most of the
stuff here doesn't matter other than the width. */
div#navContainer {
width: 18%;
background-image: url('images/navBg.gif');
background-repeat: repeat-y;
background-color: #69c;
color: #000;
float: left;
margin-left: 1%;
margin-right: 1%;
border: none;
}

/* These are my <a> tags. Make sure
you use display block, otherwise they
won't stretch the width of your container div */
div#navContainer a {
display: block;
background-color: transparent;
border: 1px solid #000;
color: #000;
font-family: tahoma, verdana, arial, sans-serif;
font-size: 75%;
text-decoration: none;
text-align: right;
padding: 1px 4px 1px 0px;
}

/* This is the <a> tag when it is
moused over. Pretty self-explanatory here I think */
div#navContainer a:hover {
border: 1px dashed #fff;
color: #000;
background-color: transparent;
font-weight: bold;
}

3. From here it is just a matter of coding the html to make the layout that you wanted. Here is my html for just the nav:

<div id="navContainer">



<a href="#">Home</a>
<div></div>
<a href="#">Log</a>
<div></div>
<a href="#">Portfolio</a>
<div></div>
<a href="#">Scripts</a>
<div></div>
<a href="#">About</a>
<div></div>
<a href="#">Contact</a>
<div></div>



</div>

One last thing, you may notice the <div></div> in between each <a>. These are purely spacer div's. I am sure that spacing could be achieved using margins instead, but I had to use a more creative method to achieve what I wanted.

If you have anymore questions feel free to ask. I love it when I can actually help!!

khaki

03-30-2003, 08:36 PM

hey pardicity!
That's... s w e e t !
(and I even understand all of it too!)

zeldman who? (lol)

Just one thing:
In Netscape7 and Opera6.02 the hover effect works anywhere within the box.
In IE5.0 it only works directly over the text.

Is that an all-IE thing, or just probably my lame old v5?

thanks again for sharing that!
:) k

pardicity3

03-30-2003, 08:50 PM

Originally posted by khaki
Just one thing:
In Netscape7 and Opera6.02 the hover effect works anywhere within the box.
In IE5.0 it only works directly over the text.

Is that an all-IE thing, or just probably my lame old v5?

Hmm, I think it is just your crappy version 5 :D . It works fine in IE 6, but that is the only IE I have tested in. It probably has something to do with IE's poor box model support pre-version 6 (even though I still have heard that it's not exactly right yet).

ASAAKI

03-30-2003, 08:58 PM

as cg9 said above i guess it's just IE. and here's how zeldman's menu looks on ie6. hmm... interesting relationship between gaps/no-gaps/and ie...
and thanks a lot pardicity:):D appreciate that. i'll check it out now.

meow

03-30-2003, 10:35 PM

khaki, have you tried to make the links 'display: block'? Sorry if it's already suggested, I didn't bother to read the whole thread. :o

ASAAKI

03-31-2003, 09:43 AM

thanks all, display:block was just what i needed :)