homepage Welcome to WebmasterWorld Guest from 54.226.213.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Current page with icon
current page, link, icon
dungol




msg:4307912
 5:13 pm on May 4, 2011 (gmt 0)

Hi Guys,
Could you help me with this issue?
I created a list with left "dot" icon img.
I created a current class.When the link is correspondent to the current page the left icon will be changed to "heart" icon img.
The current class is working properly, but the heart icon is overlapping the dot icon. I would like to remove the dot icon when the heart icon appears.How to do that?
Thanks
Dungol

This is my sample:
<style>
#menu {
width: 250px;
height: 390px;
}
#menu ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#menu ul li {
padding-bottom: 35px;
padding-left: 3px;
}
#menu ul li a {
color: #412b39;
text-decoration: none;
font-size: 18px;
background-image: url(images/dot-icon.png);
background-repeat: no-repeat;
background-position: left center;
display: block;
padding-left: 20px;
}
#menu ul li a:hover {
color: #F9C;
text-decoration: underline;
}
.current {
background-image: url(images/heart-icon.png);
background-repeat: no-repeat;
}
</style>


<body>
<div id="menu">
<ul>
<li class="current"><a href="index.html">sample</a></li>
<li><a href="sample.html">sample1l</a></li>
<li><a href="sample.html">sample2</a></li>
</ul>
</div>
</body>

 

dungol




msg:4307943
 6:14 pm on May 4, 2011 (gmt 0)

My online sample:
http://www.example.com/sample/index.html
As you can see the heart icon is behind of dot icon.
I would like to hide the dot icon in current state and just shows the heart icon.
Thanks

[edited by: alt131 at 1:25 pm (utc) on Dec 6, 2011]
[edit reason] Thread Tidy -404 [/edit]

Fotiman




msg:4307950
 6:30 pm on May 4, 2011 (gmt 0)

You are applying the dot-icon.png background to the a element, but the heart-icon.png background to the li element. You need to make those consistent. For example, instead of ".current", you could specify this as the selector:

#menu ul li.current a

dungol




msg:4307989
 7:24 pm on May 4, 2011 (gmt 0)

Thanks a lot for your help.
I didn't realize this detail.
Dungol

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved