css popup

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

css popup

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets >> css popup

Page: [1]


ziyath Posts: 30 Joined: 10/30/2005 From: maldives Status: offline	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

Posts: 42
Joined: 3/3/2006
Status: offline

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.

< Message edited by c1sissy -- 6/1/2007 16:05:51 >

(in reply to ziyath)


Tailslide Posts: 5915 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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? Your knowledge will be a real asset to this site so please stick around if you can. _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to BonRouge)


BonRouge Posts: 42 Joined: 3/3/2006 Status: offline	RE: css popup - 3/3/2006 9:01:36 Thanks for the welcome and... quote: You been following backlinks? erm... yeah. (in reply to Tailslide)


spitfire Posts: 424 Joined: 8/6/2005 Status: offline	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. (in reply to Tailslide)


ziyath Posts: 30 Joined: 10/30/2005 From: maldives Status: offline	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 (in reply to spitfire)


BonRouge Posts: 42 Joined: 3/3/2006 Status: offline	RE: css popup - 3/3/2006 11:19:37 ziyath, Do you mean something like this? http://bonrouge.com/demos/mpop2.htm < Message edited by c1sissy -- 6/1/2007 16:06:23 > (in reply to ziyath)


ziyath Posts: 30 Joined: 10/30/2005 From: maldives Status: offline	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 (in reply to BonRouge)


BonRouge Posts: 42 Joined: 3/3/2006 Status: offline	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. (in reply to ziyath)


ziyath Posts: 30 Joined: 10/30/2005 From: maldives Status: offline	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..!! (in reply to BonRouge)


ziyath Posts: 30 Joined: 10/30/2005 From: maldives Status: offline	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 (in reply to ziyath)


Starhugger Posts: 494 Joined: 4/12/2005 Status: offline	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 (in reply to BonRouge)


BonRouge Posts: 42 Joined: 3/3/2006 Status: offline	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). (in reply to Starhugger)


Starhugger Posts: 494 Joined: 4/12/2005 Status: offline	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) Starhugger (in reply to BonRouge)


ziyath Posts: 30 Joined: 10/30/2005 From: maldives Status: offline	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) (in reply to Starhugger)