css popup

css popup (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

ziyath -> css popup (3/3/2006 7:23:27)
hello can anyone guide me as to how i can a have CSS popups (text that say somthing about a link) to a CSS rollover image... ive tried stuff in this link.. http://www.meyerweb.com/eric/css/edge/popups/demo.html but id dint appear...jus appeard in text not in the rollovers... help thanks ziyath

BonRouge -> RE: css popup (3/3/2006 8:37:58)

I played around with Meyer's page to make it simpler (and mark the links up as a list).

http://bonrouge.com/demos/mpop.htm

I found that when I removed the background here:

#links a:hover {
color: #cff; 
[color=#990000]background:black;[/color]
}

it stopped working in IE (so maybe make sure you have a background).

Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Pure CSS Popups</title>
<style type="text/css">
<!--
body {
background: black; 
margin: 0; 
padding: 0;
}
#links {
position:relative;
width: 5em;
}
#links a {
display: block;
width:100%;
color: #FFC;
text-decoration:none;
}
#links a:hover {
color: #cff; 
background:black;
}
#links a span {display: none;}
#links a:hover span {
display: block;
position: absolute; 
top: 0; 
left: 6em; 
width: 10em;
color:red;
}
-->
</style>
</head>
<body>
<ul id="links">
<li><a href="#n">Link 1<span> Message for Link 1</span></a></li>
<li><a href="#n">Link 2<span> Message for Link 2</span></a></li>
<li><a href="#n">Link 3<span> Message for Link 3</span></a></li>
</ul>
</body>
</html>

I hope this helps.

Tailslide -> RE: css popup (3/3/2006 8:48:04)
Hi Bon Rouge - May I take the opportunity to welcome you to OF! You been following backlinks? [:D] Your knowledge will be a real asset to this site so please stick around if you can.

BonRouge -> RE: css popup (3/3/2006 9:01:36)
Thanks for the welcome [:)] and... quote: You been following backlinks? [:D] erm... yeah. [;)]

spitfire -> RE: css popup (3/3/2006 9:20:15)
quote: ORIGINAL: Tailslide Your knowledge will be a real asset to this site so please stick around if you can. I'll second that and if you ask your friend Gary to drop by from time to time, this CSS Forum will really take off.[:D]

ziyath -> RE: css popup (3/3/2006 9:47:03)
thanks BonRouge could tell me how to make these for three images horizontally arranged... with the popup text apprering bottom of the image whn mouse hover... thanks

BonRouge -> RE: css popup (3/3/2006 11:19:37)
ziyath, Do you mean something like this? http://bonrouge.com/demos/mpop2.htm

ziyath -> RE: css popup (3/3/2006 11:47:25)
EXACTLY....thanks a bunch... chk it out www.mhrtrading.com the small icons at the top... (site under construction - dont press buttons hehe) thanks again BonRouge

BonRouge -> RE: css popup (3/3/2006 13:43:23)
Sorry. You need this: #links { position:relative; width: 100px; margin:20px; list-style:none; } and... I have a sneaky suspicion that you're using IE for testing (rather than a good browser). If you'd looked in say... Firefox, you would have seen this problem. Seriously - don't test in IE - it's a bit crap. Test in a proper browser, then hack for IE later.

ziyath -> RE: css popup (3/4/2006 1:44:51)
hey thanks BonRouge but i do my testing in opera and IE...there was no problems with those.. jus installed FF...now the list is ok with ur code addition... but now the coloured backgrounds dont show in FF...but in IE, opera they ok... help..!!

ziyath -> RE: css popup (3/4/2006 1:46:03)
and oh yea plus the text in the menu appears on the top in FF but in opera IE they in the middle....vertically i mean... thanks...they menu in css...thanks

Starhugger -> RE: css popup (3/4/2006 11:42:58)
BonRouge (or anyone else), I wonder if you could have a look at a similar problem I'm having, but with images rather than text popups? On Kitka's recommendation, I also started with Eric Meyer's site, here: http://www.meyerweb.com/eric/css/edge/popups/demo2.html I have tried to create a mouseover effect that will display a graphic far away from the link when you mouse over it. I had it working at one point, but then I messed it up and I don't know what I did. [:@] My thread with the coding sample is in the Advanced forum because originally I wasn't sure what kind of code I would need to create the effect (CSS, JavaScript, etc.). Here is the post with the code details in that thread: http://www.frontpagewebmaster.com/m-314887/tm.htm#315060 Any help with this is greatly appreciated! [:)] Starhugger

BonRouge -> RE: css popup (3/4/2006 12:11:25)
ziyath, You've got me very confused. As far as I can see, after adding 'list-style:none;', FF, Opera and IE render the same. I can't see any problems with background colours - if you're talking about those links, I can't see any background-colours anywhere. I don't see a problem with the text either... [&:] Starhugger, Add this: div#toplink a:hover { display:block; } IE needs it (because IE is a bit crap).

Starhugger -> RE: css popup (3/4/2006 12:16:40)
quote: ORIGINAL: BonRouge Starhugger, Add this: div#toplink a:hover { display:block; } IE needs it (because IE is a bit crap). That did it!!! Thank you!! (Sending kisses) [sm=yupi3ti.gif] Starhugger

ziyath -> RE: css popup (3/7/2006 0:41:54)
yea i fixed the background image color thing..coz FF was not showing cell color... style="background-color:#e9e9e9;" with that... but still cud u check the menu text...the are not vertically arranged...i want it to b centered vertically.. www.mhrtrading.com this is the css .style24 { height: 29px; width: 67px; line-height:28px; text-indent: 0px; font: 14px/1, Ariel; text-decoration:none margin: 0em 0; color:#fff; overflow: hidden; float: left; background: url(images/buttons.jpg) top left no-repeat; display: block; } .style24:hover{ background-position: bottom left; } help... (sorry for the confusion..im really new at this[:(])

Page: [1]

0.0625