• Locked
No replies
Thu, 2011-02-17 20:09
kinetic
kinetic's picture
Offline
Last seen: 2 years 13 weeks ago
newbie
Timezone: GMT-8
Joined: 2011-02-17
Posts: 1
Points: 2

This is giving me a real headache. I am using a list for my navigation project and everything displays as I want it to (a, hover, active). I would like to use another sprite for my navigation text but I am having trouble with this. I cant simply use one background image due to the styling (apple-ish).

I have managed to get it to display but it shows above the navigation bar, and when I add another it replaces the previous so I am sure I have done something wrong. It has been a while since I did any web design.

Here are a few examples.

CSS

#globalnavigation{position:relative;z-index:100;}
#globalnavigation li{
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	top:23px;
	z-index:99;
}
#globalnavigation li, #globalnavigation a{height:24px;display:block;}
 
#left{left:0px;width:110px;}
#left a{background:url(GlobalNav.png) 0px 0px;}
#left a:hover{background:url(GlobalNav.png) 0px -24px;}
#left a:active{background:url(GlobalNav.png) 0px -48px;}
 
#std{left:110px;width:110px;}
#std a{background:url(GlobalNav.png) -110px 0px;}
#std a:hover{background:url(GlobalNav.png) -110px -24px;}
#std a:active{background:url(GlobalNav.png) -110px -48px;}
 
#globalnavigation, #globalnavigation li a span{display:block;width:100%;height:24px;background:url(GlobalNavText.png) no-repeat 50% 0;}
#globalnavigation, #globalnavigation li#home a span{background-position:0px 0px;}

HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link id="globalnavigation" href="globalnavigation.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<ul id="globalnavigation">
	<li id="left"><a href="#"><span>home</span></a></li>
    <li id="std"><a href="#"><span>div</span></a></li>
    <li id="std2"><a href="#"></a></li>
    <li id="std3"><a href="#"></a></li>
    <li id="std4"><a href="#"></a></li>
    <li id="right"><a href="#"></a></li>
</ul>
 
</body>

I also included a small screen shot. Let me know if you need any more information on what I am trying to do. At this point even some information on just how to lay plain text over the buttons would be a step in the right direction.

Thanks!

AttachmentSize
cssissue20110217.JPG9.78 KB
Top
Tags: