Thanks Elton.
I have tried this however, and it does not work. I can't see why it
does not, but after measuring the pixel height of the buttons the
above outputs, the height is only 15px.
Is there a way to force the 26px height?
Cheers,
Nathan Wheatley
On 12/14/05, Elton Okada <[EMAIL PROTECTED]> wrote:
> Change your css like this:
>
> #navcontainer ul
> {
> margin: 0;
> padding: 0;
> list-style-type: none;
> text-align: center;
> }
>
> #navcontainer ul li {
> display: inline;
> background:url('
> http://www.chiefcodemonkey.com/awbn/images/button_07.gif');
> width:115px;
> height:26px
> }
>
> #navcontainer ul li a
> {
> text-decoration: none;
> padding: .2em 1em;
> color: #fff;
> }
>
> #navcontainer ul li a:hover{color: #fff;
> }
>
>
> Regards,
> Elton Okada
> Rio de Janeiro - Brazil
>
>
> On 12/13/05, Nathan Wheatley <[EMAIL PROTECTED] > wrote:
> >
> > I did a little mor elooking around, and I found the following means of
> > achiving what I am after.
> >
> > Here does:
> > CSS CODE
> > #navcontainer ul
> > {
> > margin: 0;
> > padding: 0;
> > list-style-type: none;
> > text-align: center;
> > }
> >
> > #navcontainer ul li { display: inline; }
> >
> > #navcontainer ul li a
> > {
> > text-decoration: none;
> > padding: .2em 1em;
> > color: #fff;
> > background-color: #036;
> > }
> >
> > #navcontainer ul li a:hover
> > {
> > color: #fff;
> > background-color: #369;
> > }
> >
> >
> > HTML CODE
> > <div id="navcontainer">
> > <ul>
> > <li><a href="#">Milk</a></li>
> > <li><a href="#">Eggs</a></li>
> > <li><a href="#">Cheese</a></li>
> > <li><a href="#">Vegetables</a></li>
> > <li><a href="#">Fruit</a></li>
> > </ul>
> > </div>
> >
> > The above works perfectly, but I am still a little unsure on how to
> > set an image as the background of the list items.
> >
> > I need this image
> >
> (http://www.chiefcodemonkey.com/awbn/images/button_07.gif)
> as the
> > background to each of the list items, so that the list finally looks
> > likes this
> (http://www.chiefcodemonkey.com/awbn/images/sprite.gif)
> > [disregard the lighter green background colour. that is fr
> > demonstration only].
> >
> > Christian, anyone else? Are you able to she some advice or lend a hand?
> > ******************************************************
> > The discussion list for http://webstandardsgroup.org/
> >
> > See http://webstandardsgroup.org/mail/guidelines.cfm
> > for some hints on posting to the list & getting help
> > ******************************************************
> >
> >
>
>
--
--
Nathan Wheatley
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
