Centering Popup

[DS928]

I am using this code from Dynamic Drive and I want the popup to be dead center on the screen. It seems now it's in relation to the thumbnail. The code.

<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}

</style>

I tried...
top: 50%;
left: 50%;

That didn't seem to work.

[Beverleyh]

What is this CSS from? Please post a link to the DD demo page and also a link to the page on your website.

[DS928]

What is this CSS from? Please post a link to the DD demo page and also a link to the page on your website.

This is where its from....
This is the page I am building... Select American / Baltimore Then results...Pass over the cameras to bring up the pix.

www.menuhead.net/Pages/BigHead.php

Thank You.

[DS928]

OOPS. Here is the link for the pop up code.
http://www.dynamicdrive.com/style/cs...ge-viewer/P20/

[Beverleyh]

If all the enlarged images are the same size (eg, 600 x 800) you can use a negative offset where the left and top margins are half the value of the overall image width and height, like this;

top:50%;
left:50%;
margin-top:-300px;
margin-left:-400px;

If your images are all different sizes, as yours are, you'll need to employ some JavaScript to calculate an offset based on viewport size, in which case you might as well use a pre-made popup viewer like this: http://www.dynamicdrive.com/dynamici...box2/index.htm or this: http://www.dynamicdrive.com/dynamici...ebox/index.htm

[DS928]

Thank you. I will play around with both options today and let you know how things turn out.

[DS928]

OK, I've played. This is my line...

<a class="thumbnail" href="#thumb" rel="facebox"><img src="http://www.menuhead.net/Images/Buttons/PShotClear.png" width="30px" height="20px" border="0" />

If I take out class="thumbnail" and/or href="#thumb" then I lose the rollover effect. The image just appears on the page. Any hints on how to maintain the rollover and still get this thing centered? Thank you.

PS Here is the CSS I am currently using. This is for the hover, etc...

a:hover {
	text-decoration:none;
}

a {
	text-decoration:none;
}

#interface1 {
	z-index:1;
}

#loader_container {
    text-align:center;
    position:absolute;
    top:40%;
    width:100%}

#loader {
	font-family:Tahoma, Helvetica, sans;
	font-size:10px;
	color:#000000;
	background-color:#FFFFFF;
	padding:10px 0 16px 0;
	margin:0 auto;
	display:block;
	width:135px;
	border:1px solid #6A6A6A;
	text-align:center;
	z-index:255;
}

#progress {
	height:5px;
	font-size:1px;
	width:1px;
	position:relative;
	top:1px;
	left:10px;
	background-color:#9D9D94
}

#loader_bg {
	background-color:#EBEBE4;
	position:relative;
	top:8px;left:8px;height:7px;
	width:113px;font-size:1px
}

.border_preview{
	z-index:100;
	position:absolute; 
	background: #fff;
	border: 1px solid #444;
}

.preview_temp_load {
	vertical-align:middle;
	text-align:center;
	padding: 10px;
}
.preview_temp_load img{	
	vertical-align:middle;
	text-align:center;
}



/*Image Title Styling*/

.title_h2 {
 padding:12px 0 0 18px;
}

h2 {
	font-size:14px;
	padding:0;
	margin:0;
	font-family: "century gothic";
	color:#FFF
	text-align:center;
}

.thumbnail{
position: relative;
z-index: 0;
	width:30px;}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image This is for the image*/
	position: absolute;
	background-color: #333;
	padding: 2px;
	left: -1000;
	border: 3px solid black;
	border-radius: 35px;
	-moz-border-radius: 35px; /* Old Firefox */
	visibility: hidden;
	color: white;
	text-decoration: none;
	text-align: center;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -380px;	/*position where enlarged image should offset vertically*/
left: 60px; /*position where enlarged image should offset horizontally*/
}

[Beverleyh]

Wait, what method are you using now?

You should choose either the CSS Popup Image Viewer with the negative margin offset - the caveat here is that it will only work if all your images are the same size, but you'll keep the rollover - OR choose Facebox, but then you'll need to set it up as advised on the demo page and include its javascripts and stylesheets - this is the method you should use if all of your images are different sizes, and it looks like its triggered onclick. I'm not sure if it supports a hover trigger (can't check - on iphone)

You'll need to decide which one to choose based on the limitations and compromises of each script. At the minute it looks like you're trying to combine the CSS for each script, without installing the Facebox JavaScript.

[DS928]

Hmmm. I did a test. I made an image 250px by 500pk. Set the css to...
top:50%;
left:50%;
margin-top:-125px;
margin-left:-250px;
Hoping this would center the test image. It centers it on the camera as opposed to the page. So that is a no go.
Back to the other code. The lightbox one is too slow and combersome for what I need. So now I am down to two methods. The one I have, which works except for the centering issue. Also, I know I forgot to mention that it's using tootip as well, if that makes a difference. So, back to the facebox method. I have the main page that contains the script, The table with the restaurants is on another page, I am thinking this makes a difference, I am also looking into the hovering with facebox. Thank you, once again.

[Beverleyh]

Hmmm. I did a test. I made an image 250px by 500pk. Set the css to...
top:50%;
left:50%;
margin-top:-125px;
margin-left:-250px;

Try it with position:absolute; as well.