You might want to set the "height" on your anchor tags to zero and use
"padding-top" to show your image through.
#mainnav a who {
background:url(../images/test.jpg) no-repeat 0px 0px;
height:0;
width:70px;
padding-top;37px;
}
I've found that anchor tags are a pain to work due to cross browser
issues. The hit zone still works even though the height of the anchor
is zero.
The sprite method also works well which uses a single background
applied to all anchors, then each anchor tied to a background-
position..
#mainnav a{
background-image:url(../images/test.jpg);
width:70px;
height: 0;
padding-top: 37px;
overflow: hidden;}
#mainnav a who{
background-position: -100px 0;}
/*The actual background position would depend on your sprites */
K
On Apr 12, 9:01 am, ChristinaZ <[email protected]> wrote:
> I'm committed to using a type font that won't work in CSS -- one of
> those fancy special ones.
> So I need to create images of the text and use those as the nav
> buttons.
>
> I've already created the nav in Javascript and it works fine, but I'd
> like the nav to be pure CSS.
>
> Two problems: I can't get it to work. Note: when I change the
> background value from an image to a color, the color shows up fine.
> It's the images that aren't showing. I've tried changing it -- making
> a class of a.who etc -- saw a speck of the image and then nothing.
>
> and
> If and when I get it to work, I won't want the anchored text to show,
> just the image, but each li CSS is set to display:inline;
>
> Code:
>
> <!-- begin navigation -->
>
> <div class="clear span-24 last" id="mainnavigation">
> <ul class"span-8 last" id="mainnav">
> <li class="span-2"><a class="who"
> href="../who/who.html">WHO</a></
> li>
> <li class="span-2"><a class="what"
> href="../what/what.html">WHAT</
> a></li>
> <li class="span-2"><a class="where">WHERE</a></li>
> <li class="span-2"><a class="HOW">HOW</a></li>
> </ul>
> </div>
>
> <!-- end navigation -->
>
> CSS:
>
> ul {
> list-style-type:none;
> margin:0;
> padding:0;
> }
>
> #mainnavigation {
> background:#6fad36;
>
> margin:0px;
> height:40px;
> }
>
> #mainnav {
> margin:0px;
> padding:0px;
> height:41px;
> }
>
> #mainnav li {
>
> margin:0;
> height:41px;
> width:70px;
> display: inline;
> }
>
> #mainnav a who {
> background:url(../images/test.jpg) no-repeat;
> height:37px;
> width:70px;
> padding:2px 10px 2px 10px;
> width:70px;
> }
>
> #mainnav ul li a.what {
> background:url(images/what.gif)
> }
>
> #mainnav ul li a.how {
> background:url(../images/how.gif)
> }
>
> #mainnav ul li a.where {
> background:url(..images/where.gif);
> }
--
You received this message because you are subscribed to the Google Groups
"Blueprint CSS" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/blueprintcss?hl=en.
