asked on

How to get going with a nice div popup box

Hello,

I want to make a classy CSS popup box that looks as nice as a regular popup or better. I've got the following, I just don't know how to use it:

<style>

.NewDiv {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal; font-size: 8.5pt; text-align: left;
border-left: ##FFFFFF 1px solid; border-right: ##DDDDDD 1px solid;
border-bottom: ##DDDDDD 1px solid;
}
</style>

then in the body:

<div class="NewDiv">

Please assist me with this or another div popup.

bob

GrandSchtroumpf

What you have is definitely not enough to make a popup.
You can use this code, it's the only pure CSS tooltip i know and it has its limits:
It does not shift left when the link is close to the right side of the window, so part of the popup might be invisible.
Also, it overwites the "display" of the span, leading to "improper" nesting of a "block" element inside an "inline" element (but that should not be a major problem since browsers support that quite well).
So here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title></title>
<style type="text/css">
a.tooltip {
position: relative;
z-index: 1;
}
a.tooltip:hover {
z-index: 2;
padding: 0;
}
a.tooltip span.tooltip {
display: none;
}
a.tooltip:hover span.tooltip {
display: block;
position: absolute;
top: 2em;
left: 2em;
width: 15em;
border: 1px solid #666;
background-color: #EE7;
padding: 0.5em;
color: black;
text-decoration: none;
}
</style>
</head>
<body>

<div>
Lorem (<a class="tooltip" href="javascript:void(0);">Note<span class="tooltip"> Good practice but can sometimes limit possbilities.</span></a>) Ipsum
</div>

</body>
</html>

weikelbob

ASKER

Sorry for the confusion. I need a popup box in the top left-hand corner of the screen that stays no matter where I move my mouse. I need it classy. Also, it needs to be scrollable since it's going to have quite a bit of text in it.

I'm new to CSS, please walk me through this.

Bob

GrandSchtroumpf

> that stays no matter where I move my mouse
That cannot be acheived with CSS only. You need javascript for that.

ASKER CERTIFIED SOLUTION

GrandSchtroumpf

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

weikelbob

ASKER

I'm trying to keep it simple. What exactly does this do? :

<style>

.NewDiv {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal; font-size: 8.5pt; text-align: left;
border-left: ##FFFFFF 1px solid; border-right: ##DDDDDD 1px solid;
border-bottom: ##DDDDDD 1px solid;
}
</style>

then in the body:

<div class="NewDiv">

Thanks,

Bob

GrandSchtroumpf

> I'm trying to keep it simple.
The solution i gave you is as simple as it gets.

> What exactly does this do?
sets the font and border on a div. that's all. no popup at all.

GoofyDawg

Bob,

I guess it boils down to what you mean by "classy." GS provided excellent and simple examples of doing a pseudo-popup window using pure CSS and a combination of CSS and JavaScript. If you want to make it "classy," you can add a background image or add some color to the div. We can give you basic mechanics, but styling is pretty much up to your own imagination. What more would you like to see?

GoofyDawg

weikelbob

ASKER

I finally got it working. Now I'll work on it to make it look as nice as possible. Any help you can give would be great. For example, it needs a small margin on the left side of the popup

I'll up the point up to 500 for your great help.

Bob

GrandSchtroumpf

to add a padding add this to the stylesheet:

div.PopUp {
padding: .5em;
}

thanks for the offer to increase the points, but i think you cannot do that once you have accepted the solution.

<:°)

weikelbob

ASKER

Thank you GrandSchtroumpf,

A little padding and background color and I think it will work. Oh, how do I add a background picture?

Bob

GrandSchtroumpf

http://www.htmlhelp.com/reference/css/color-background/