CSS - Css Popup On Link

I'm using Eric Meyer's Pure CSS Popups template for a new site. I want to have a graphic pop up in the middle of the page for one particular link when clicked, rather than have the browser load a new page, but I don't know how to go about it. Can anybody shed some light on how to alter the stylesheet to have this one link act differently from the rest?

Thanks.

Hi everyone, I am wondering why IE sucks so bad...


Just kidding. Actually, my CSS popup appears in Mozilla Firefox (best browser on earth ) but not in IE. The guy that I learned it from (http://www.meyerweb.com/eric/css/edge/popups/demo.html) works in both IE and Mozilla, and I dont understand why mine doesn't any help would be appreciated

Mine:
Code:

div#links a span {display: none;}
div#links a:hover span {display: block;
   position: absolute; top: 160px; left: -10px; width: 125px;
   padding: 0px; margin: 0px; z-index: 100;
   color: #000; background: #fff;
   font: 10px Verdana, sans-serif; text-align: left; }
div#links {position: absolute; top: 96px; left: 27px; width: 58px; height: 20px; font: 10px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; font: 10px Verdana, sans-serif; 
   padding: 0px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #fff; }

His:
Code:

div#links {position: absolute; top: 81px; left: 0; width: 166px; height: 700px; font: 16px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif; 
   padding: 5px 10px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #FFC; background: #444;
   border-right: 5px solid #505050;}
div#links a:hover {color: #411; background: #AAA;
   border-right: 5px double white;}

div#links a span {display: none;}
div#links a:hover span {display: block;
   position: absolute; top: 180px; left: 0; width: 125px;
   padding: 5px; margin: 10px; z-index: 100;
   color: #AAA; background: black;
   font: 10px Verdana, sans-serif; text-align: center;}

Hello

is there a way to make it so hyperlinks are not decorated as the default blue? I have the following css which I've attempted to make it so the text '.com' is always white, but it defaults to the standard link color.

html:

<td class="nodecoration"><a class="nodecoration" href="http://www.somesite.com">.com</a></td>

css:

Code:

td.nodecoration {
	background-color: #003399; color: white; width: 120px; height: 30px; font-family: "Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center;
}

A:link.nodecoration {text-decoration: none}
A:visited.nodecoration{text-decoration:none}
A:active.nodecoration{text-decoration:none}
a:hover.nodecoration{text-decoration:underline}

Hi guys, i really don't know if this can be accomplished with CSS but here it goes:
I want a user that's filling a form on my web application to be able to click on a certain field(or a link near that field) and pop out another form, fill it, submit it and then continue to fill the original form.
Maybe there's a bit of Javascript there or a combination of technologies, i really don't know so forgive me if i'm in the wrong forum, but i've seen similar stuff done with CSS, so if any of you has any idea on how i can accomplish this i'd appreciate it very much.
I've attached a graphic to illustrate it better.
Thanks!

I'll admit right off - I don't know much about CSS.

I have a page that displays the event logs on my servers. If I display the whole message of each event it will take up way too much space. I'd like to have it so that if you move your mouse over the message like of the event, a "window" pops up (without navigating away from the page they are on) with the whole message.

I know my viewers are going to be using IE 6.1.

I've looked through here and on google for it, and I think I'm just looking in the wrong place.

Thanks.

http://siliconsatan.com/test.php

The above test example is for a DIV that will show / hide with a click on a button / link.

Problem: Scroll down a bit, click on one of the links. The whole page will scroll to the top. It has something to do with the <a> tag.

I could get rid of the <a> tag, but then I would have to use JS to both do the roll-over, and trap the "click" event?

I'm actually using JS to trap the "click" event anyway, but I was hoping for a fully CSS roll-over function.

(The content - <li> ... </li> - is dynamically populated, or in the final it will be)

What am I doing wrong?

I have the following page:

http://take2records.com/test/dbtest.php

Which you can test using

http://take2records.com/test/dbtest...4&id_num=404100

What I need is to be able to have a popup any time you hover over a particular row in the generated table.

I found this code to do the hover:

Code:

class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>

<br />
<br />

<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a><br />

But I don't see how to apply this when the user hovers over a particular row.

Hi
I'm building a selectbox insead of using the common select tag.
I use the windows.createpopup() method to display the list of choise.
Differently to the div object the popup object is like a new window so it doesn't inherit the css style sheet I've attached to the main window.
I tought to attach it by using the addImport(url) method of the styleSheet object but it doesn't seem to work. Here it's my code, the show function it's called when the selectbox expands:

var Select_box = window.createPopup();
Select_box.document.styleSheets[0].addImport("URL('common/css/default_style.css');")

function show(element) {
if (Select_box.isOpen==false) {
Select_box.document.body.innerHTML = Select_box_content.innerHTML;
Select_box.document.body.className='selectbox';
Select_box.show(0, 18, 150, 50, element);
}
else {
Select_box.hide();
}
}

I've noticed that using the addImport method on the main window, and not on the instance of the select_box, with 0 index of the styleSheet the error doesn't occur but it doesn't also change the proprety. Tring using any other index value it gives me the usual error.
So how can I attach a style sheet to a popup created with the window.createpopup()?

Thank you

Good day to you all,
I'm working on a css popup script.
It work, but I would like the popup to be always in the center of the window.

here is my code :

PHP Code:
echo "<a onmouseover=this.style.cursor=\"pointer\" ' onfocus='this.blur();' onclick=\"document.getElementById('".$value."').style.display = 'block' \" ><img src=\"".$directory."/".$value."\" width=\"50px\"></a>\n"; 
    echo "<div id='".$value."' style='display: none;  position: absolute;  text-align:left; margin: -50px -200px; margin-top:-150px; z-index:50; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; '>";
    echo "<img src=\"".$directory."/".$value."\" /><br />".$value."<br/>";
    echo "<div style='text-align: right;'><a onmouseover='this.style.cursor=\"pointer\" ' style='font-size: 12px;' onfocus='this.blur();' onclick=\"document.getElementById('".$value."').style.display = 'none' \" ><span style=\"color:#000000;\">Close</span></a></div></div>"; 





Thanks!

Hi,
I have made a simple table in html, with mouseover on the rows to change the background colour.
I also have onclick to take the user to the next page.
What I really need to do is there a way of making a popup text, like the ones on this site's topic view.
I have looked at the source code, and tried copying one <tr> row into a test html file, but no popup.

Basically, my question is this:
How can I make the table have a popup, for each <tr>, that shows non-dynamic text.


Thanks in advance,

Prism128

Hi all,

Thanks for the interest,

I want to set my menus like the categories in alibaba.com ( the menu of the left side), on mouse over the sub menus should come up in the same way as here.

How can I achieve this ?

Thank you guys

Thank you for stopping by!

I'd like some guidance about a problem that has to do with CSS (and a bit of JavaScript I guess) and trying to position an overlaying DIV.

The problem description is quite simple;
When I click an image on the "main" area, a div gets, with a little help from javascripting, its display property set to "block". This surely and safely makes the div's content appear as it should and all is fine.
I now have a headache from trying to figure out how I could position this div. I know what I'd like to do but I can't quite figure out how to get it right.

I'd like to have the popup-div center itself on the page, regardless of the size of contents inside it.
The content mostly consists of text of varied amounts and next to no images or other media content.

If you got any ideas about this or got a link to a website that's similar to what I'm trying to accomplish or any input at all, feel free to make a comment! It's much appreciated!

Here's what the popup CSS looks like atm:
Code:

div.PopUp {
	width: 550px;
	border: dashed silver 1px;
	display: none;
	position: absolute;
	left: 150px;
	top: 50px;
	background-color: black;
	text-align: justify;
	font-size: 10pt;
	color: black;
}

Regards
DrLaban

Hi,

At work I have to do popup menus (I hate them), so I am trying with all I have to not use Javascript. I have the following working using just CSS and HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Pure CSS Popups</title>

<style type="text/css">

body
{
    font-family: Arial;
}

div#menubar
{
    background-color: steelblue;
    font-weight: bold;
}

div#menubar a.menuhead
{
    position: relative;
    text-decoration: none;
    margin-right: 18pt;
    color: darkblue;
}

div#menubar a.menuhead:hover
{
    color: white;
    background-color: darkblue;
}

div#menubar a.menuhead div.menu
{
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 1em;
    width: 15em;
    background-color: steelblue;
    border: 2px solid darkblue;
}

div#menubar a.menuhead:hover div.menu
{
    visibility: visible;
}

div#menubar a.menuhead div.menu div.menuitem
{
    width: 100%;
    cursor: pointer;
    background-color: steelblue;
    border-bottom: 1px solid darkblue;
}

div#menubar a.menuhead div.menu div.menuitem:hover
{
    background-color: darkblue;
}

div.menuitem a
{
}

</style>
</head>

<body>

<div id="menubar">
    <a class="menuhead" href="">Menu 1
        <div class="menu">
            <div class="menuitem">Menuitem 1</div>
            <div class="menuitem">Menuitem 2</div>
            <div class="menuitem">Menuitem 3</div>
            <div class="menuitem">Menuitem 4</div>
            <div class="menuitem">Menuitem 5</div>
        </div>
    </a>
</div>

</body>
</html>

Now what I want to do is put real hyperlinks inside of the menuitem divs. However, when I do so it messes up for some strange reason in both Firefox and IE. If someone could tell me why I would GREATLY appreciate it.

Code:

<div id="menubar">
    <a class="menuhead" href="">Menu 1
        <div class="menu">
            <div class="menuitem">Menuitem 1</div>
            <div class="menuitem">Menuitem 2</div>
            <div class="menuitem"><a href="">Menuitem 3</a></div>
            <div class="menuitem">Menuitem 4</div>
            <div class="menuitem">Menuitem 5</div>
        </div>
    </a>
</div>

In Firefox, the menu items after the one with the hyperlink no longer format correctly, and the menu also becomes part of the menubar.

In IE it looks ok, but when the mouse is moved over the menuitem hyperlink the menu goes away.

In both, the menuitem divs get shrunk down to the width of the text.

Any ideas???