Sprites and the use of :before

HTML & CSS
1

Hello hello

I would like to out the face (pipesmoking man) on this page underneath every .selected-class. I´m using sprites for my main menu and expects this to be the cause that I cant get the :before element to work. Otherwise I´m guessing a positioning issue

Hope one of you guys have the time to help me out here

2

Hi, it’s really not clear what you are asking here. “Pipesmoking man”? I don’t see anything like that.

3

You´re right… have worked on it and therefore it´s gone now…

Guess my question is as simple as:

How is it possible to position an image underneath the speechbubble (which becomes visible when class .selected is active). Used sprites and therefore it´s all a matter of positioning, and was thinking that a :before pseudo would be a piece of cake connecting it to the LI-element in the menu-div. It just isn´t. Could it be something with my selectors?

4

The trick is to give position: relative to the parent element you are positioning it in relation to, and then position: absolute to the element (or pseudo element) being positioned.

So whether you are placing the image in relation to the LI, or the <a>, give that element position: relative. This sets the positioning context for the absolutely positioned element. then you can use left and top settings to move the image where you want.

5

Feeling I have done that a million times by now, but maybe I should simplify my selectors to get in control

6

I don’t see it in your CSS. Try putting it in there, and we can suggest what’s wrong if it doesn’t work. :slight_smile:

7

HI,

Something like this will work:


#menu li.forside{overflow:visible;position:relative}
#menu li.forside:before{
content:" ";
background:red;
position:absolute;
bottom:-20px;
left:40px;
width:20px;
height:20px;
}

You had the list set to overflow:hidden so nothing will show outside of that element unless you make the overflow:visible.

8

this didn´t work i´m affraid

a.selected {position:relative}
a.selected:before {position:absolute; content:" "; background:url(images/face.png) no-repeat 75% 75% transparent}

9

Oh yeah… Forgot all about overflow… Man, are my ears red

10

You didn’t give the pseudo element any dimensions.

See Paul’s example above. He explains it all much better. :slight_smile:

11

loads of gratitude once again, Paul and Ralph :slight_smile:

12