Image on menu bar, how did they do that ?

[MarciaB]

Hi, on this website there's sitting a little womanfigure on the menubar. How did they do that?

[remi]

Hi Marcia,

the image is surrounded from an <a>-tag (CSS class "diane") and in the stylesheet you'll find the following CSS for an <a>-tag with class "diane":

#o_header a.diane {hp.css (line 19)
  left:820px;
  position:absolute;
  top:26px;
  z-index:2;
} 

That means, the image is positioned at x=820, y=26 within the surrounding <div id="o_header">-tag. Additionally, the z-index positionize the image above the following parts.

The image is a transparent GIF.

Regards,
Remi

[pauland]

Hi, on this website there's sitting a little womanfigure on the menubar. How did they do that?

I think this is what does the (CSS) trick:

#o_header a.diane {position:absolute;left:820px;top:26px;z-index:2;}

The z-index is higher than the menu bar and the link/image is positioned absolutely.

You can find this CSS definition in the included CSS file (http://i5.woopic.com/Css/hp.css?11000) loaded in the html.

Paul

[pauland]

Beat me to it Remi!

[remi]

Sorry

[MarciaB]

Thanks guys !

[Availor]

I will be short - www.cssplay.co.uk the best place to learn from css. Starts from simplest css rollovers and up to the most complex css tricks. the code is within the page so just click view source and copy it.