You can give each menu item a different id and then style these IDs
accordingly, such as in:
<ul class="menu">
<li id="home">Home</li>
<li id="about">About us</li>
<li id="services">Our Services</li>
</ul>
<style type="text/css">
ul.menu {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-left: 1em solid yellow;
border-bottom: 2px solid white;
background-color: white;
margin: 0;
padding: 0;
padding-left: 1px;
height: 1em;
}
.menu li#about {
border-left: 1em solid blue;
}
.menu a {
display: block;
background-color: #ccc;
}
.menu a:hover {
background-color: yellow;
}
</style>
My suggestion is based on Rakesh Pai's suggestion that you should use
a border to achieve the square bullet effect. Only, I haven't used a
background image. Also, note that I haven't actually tested my
example. It's not guaranteed to work just like that.
- Rowan
On 2/9/06, Jackie Carey <[EMAIL PROTECTED]> wrote:
> Thanks for this, Rakesh.
>
> My problem is, I can't work out how write the css to get a different
> colored box into the different list items when I rewrite the menu as a
> list, as per
>
> http://css.maxdesign.com.au/listamatic/vertical05.htm
>
> which uses just one image.
>
> That weird mouseover event is one of the main reasons why I want to redo
> the menu. Its very existence takes me a step further from level 2
> compliance. But your tip will make it more usable until I can get it
> changed - I'll do that ASAP.
>
> Cheers
>
> Jackie
>
> >This is fairly simple. You can use a border-left for the colored boxes
> >with a background-position: left with an appropriate image to show
> >that white gap between the colored box and the menu item. There might
> >be other solutions too, though. This is just something I came up with
> >off the top.
> >
> >Just a usability/accessibility tip while you are at it - The hover
> >state for the menu item which shows the yellow background is
> >deceptive. Not all the area of the menu item is clickable. Only the
> >link is. You should use a display: block; width: 100%; on the "a"
> >element, and specify the width of the menu item in the ul's properties
> >to get this functioning.
> >
> >
> >
> >On 2/9/06, Jackie Carey <[EMAIL PROTECTED]> wrote:
> >> http://www.itshere.org.uk
> >>
> >>
> >>
> >> I've inherited this table-based site, which is going to be replaced
> with
> >> a CMS-based site at some point in the next six months. I've worked
> >> styles into some of it, and the rest can remain until the switch.
> >> However, I am not happy with the menu and would like to replace it
> with
> >> a list-based menu.
> >>
> >>
> >>
> >> This could be done very easily if it weren't for the coloured boxes
> >> alongside the menu items. I'd like to keep them as they're part of
> the
> >> branding and look quite nice.
> >>
> >>
> >>
> >> Does anyone know of a way I could do this, without a whole heap of
> work
> >> (and ideally without Javascript).
> >>
> >>
> >>
> >> Thanks
> >>
> >>
> >>
> >> Jackie
> >>
> >>
> >>
> >> Scanned by MailDefender - managed email security from intY -
> >www.maildefender.net
> >>
> ______________________________________________________________________
> >> css-discuss [EMAIL PROTECTED]
> >> http://www.css-discuss.org/mailman/listinfo/css-d
> >> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> >> List wiki/FAQ -- http://css-discuss.incutio.com/
> >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> >>
> >
> >
> >--
> >Rakesh Pai
> >Mumbai, India.
> >[EMAIL PROTECTED]
> >http://piecesofrakesh.blogspot.com/
> >
> >Scanned by MailDefender - managed email security from intY -
> >www.maildefender.net
>
>
> Scanned by MailDefender - managed email security from intY -
> www.maildefender.net
> ______________________________________________________________________
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
--
Morality is usually taught by the immoral.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
