Image on menu bar, how did they do that ?

Printable View

15 May 2007, 12:02 PM
MarciaB

Image on menu bar, how did they do that ?

Hi, on this website there's sitting a little womanfigure on the menubar. How did they do that? :confused:
15 May 2007, 12:30 PM
remi

Re: Image on menu bar, how did they do that ?

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":

PHP Code:

#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
15 May 2007, 12:33 PM
pauland

Re: Image on menu bar, how did they do that ?

Quote:

Originally Posted by MarciaB

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

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
15 May 2007, 12:34 PM
pauland

Re: Image on menu bar, how did they do that ?

Beat me to it Remi!
15 May 2007, 12:35 PM
remi

Re: Image on menu bar, how did they do that ?

Sorry :D
15 May 2007, 03:30 PM
MarciaB

Re: Image on menu bar, how did they do that ?

Thanks guys !
17 May 2007, 09:15 AM
Availor

Re: Image on menu bar, how did they do that ?

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.
17 May 2007, 10:07 AM
haakoo

Re: Image on menu bar, how did they do that ?

Or just for Marcia,doing it in dutch
http://www.handleidinghtml.nl/css/ei...nschappen.html

Gr,Hans
17 May 2007, 11:33 AM
MarciaB

Re: Image on menu bar, how did they do that ?

Both websites are a great help ! I recommend a visit to everybody who wants to learn CSS :)
Tanks Availor (btw how are you doing in the new job at the television station ?)
Bedankt Hans !
22 May 2007, 09:51 AM
Availor

Re: Image on menu bar, how did they do that ?

Quote:

Originally Posted by MarciaB

Both websites are a great help ! I recommend a visit to everybody who wants to learn CSS :)
Tanks Availor (btw how are you doing in the new job at the television station ?)
Bedankt Hans !

As you can see from my rare visit in the forum I have almost no time. I rejected the job since they demanded 12 hours daily. I cannot cope with so much work as I'm still doing my college degree. Nevertheless, in two days there are going to be elections for the highest position in the studential body - chairman of the student body. If I'm elected I'll have my own office and secretary (who is 13 years older than me :rolleyes: kinda embarassing to ask her for a coffee). Until now I was busy with the strike that's been going in here (student's strike). Can't figure out how I didn't get myself arrested. If I have time I will upload some videos from the fights with the cops ;) . So.... that's how it goes :)