PDA

View Full Version : Positioning CSS question Lightbox


djshongo
03-31-2009, 04:01 PM
Hi,

I recently put the 'lightbox' code on my website however im having a problem with the positioning..

The box appears ate the centre TOP of the screen, however id like it in centre MIDDLE, if possible?

Do i need to change the CSS positioning code or the JS code?!

I havnt changed the CSS code in any way, this is how it looks:

---------------
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
----------------


Thanks in advance for any help :)))

Johnny

domedia
03-31-2009, 04:13 PM
Without HTML, the CSS is just rules of styles without a website to go to.
Do yo have this on the web somewhere?

djshongo
03-31-2009, 04:35 PM
Hey,
No i dont have it on the web, its a personal website here at home.

This is the HTML of my index.htm page if that helps:

---------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>


<p>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


<p><a href="images/image-1.jpg" rel="lightbox"> <img src="images/thumb-1.jpg"/> </a> </p>



</body>
</html>
-------

As you can see there is nothing on it, im trying to get the lightbox working firstly :)

thanks!

djshongo
04-01-2009, 02:31 PM
ive been toggling with the 'padding' codes, but stil nothing.. any ideas guys?
The pic stil appears top centre of the screen, not absolute middle like i want..

thanks :)

mangofreak
04-01-2009, 03:49 PM
Try this:

<div style="margin-left:auto;margin-rightt:auto;">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<p><a href="images/image-1.jpg" rel="lightbox"> <img src="images/thumb-1.jpg"/> </a>
</div>

djshongo
04-01-2009, 04:02 PM
Stil nothing.. :(

Thanks anyway tho :)

Grrrrrrrr..

Corrosive
04-01-2009, 04:10 PM
Stil nothing.. :(

Thanks anyway tho :)

Grrrrrrrr..

Did you copy and paste that code? Try taking the extra 't' off the end of 'rightt'

djshongo
04-01-2009, 04:35 PM
Yea i spotted that spelling error, but stil no change to it :S

Bet its sumthing simple tho...

Corrosive
04-01-2009, 05:26 PM
Yea i spotted that spelling error, but stil no change to it :S

Bet its sumthing simple tho...

Woah. Hang on...

This...

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

and this...

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Should be between your <head></head> tags.

djshongo
04-02-2009, 01:10 PM
Yea i have those in my head tags too thanks.

The lightbox opens ok and works on my site, but the example of the Lightbox2 website shows the pic opening up in the middle of the screen. Mine opens up at the top of the screen...

any ideas?!

Hmmmmmmmm...

Corrosive
04-02-2009, 01:13 PM
Yea i have those in my head tags too thanks.

The lightbox opens ok and works on my site, but the example of the Lightbox2 website shows the pic opening up in the middle of the screen. Mine opens up at the top of the screen...

any ideas?!

Hmmmmmmmm...

Post the whole code from your html page. From the top to the bottom.

djshongo
04-02-2009, 01:58 PM
OK

Heres my whole HTML code, basic, but i just wana get it working before i add anything else :))

thanks.



-------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>


<p>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</p>
<p>&nbsp;</p>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<p><a href="images/image-1.jpg" rel="lightbox[road]"> <img src="images/thumb-1.jpg"/> </a>


</body>
</html>
----------------

:)

Corrosive
04-02-2009, 02:02 PM
OK

Heres my whole HTML code, basic, but i just wana get it working before i add anything else :))

thanks.



-------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>


<p>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</p>
<p>&nbsp;</p>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<p><a href="images/image-1.jpg" rel="lightbox[road]"> <img src="images/thumb-1.jpg"/> </a>


</body>
</html>
----------------

:)

Then I refer you back to my previous post. The links are NOT in your head tags. They are in your body tags. Rectify this and see if it works.

djshongo
04-02-2009, 02:22 PM
Yea i just changed that there, it now looks like this..

--------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

</head>

<body>

<p><a href="images/image-1.jpg" rel="lightbox"> <img src="images/thumb-1.jpg"/> </a>

</body>
</html>
-----------

works but stil no change :(

Corrosive
04-02-2009, 02:36 PM
Yea i just changed that there, it now looks like this..

--------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

</head>

<body>

<p><a href="images/image-1.jpg" rel="lightbox"> <img src="images/thumb-1.jpg"/> </a>

</body>
</html>
-----------

works but stil no change :(

NUTS!! I really thought that would be the problem. :(

OK, another thought is that it is the lack of content in your page. Lightbox centres the images on your page but your page is currently very short. Maybe add a big div round it with a fixed height just for testing purposes. Say 1000px?

djshongo
04-02-2009, 02:48 PM
thanks for the idea, i think i'll try that next.. however im not that sure how to do it!

i'm just kinda learning as i go along here, never used CSS or DIVs before really! Im using DW MX here at work.

i thought it would work with little or no content on the page?

Corrosive
04-02-2009, 03:03 PM
thanks for the idea, i think i'll try that next.. however im not that sure how to do it!

i'm just kinda learning as i go along here, never used CSS or DIVs before really! Im using DW MX here at work.

i thought it would work with little or no content on the page?

You ok to hang on for an hour or two? I'll mock something up for you when I have a chance.

djshongo
04-02-2009, 03:14 PM
Yea no probs, only if ya get time of course!

I'll keep at it here, and try not smash anything in the office lol

Thanks!

:)

domedia
04-02-2009, 03:35 PM
There's also a mix of HTML/XHTML

Corrosive
04-02-2009, 03:47 PM
Yea no probs, only if ya get time of course!

I'll keep at it here, and try not smash anything in the office lol

Thanks!

:)

Try this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<style type="text/css">
<!--
#wrapper {
height: 1000px;
width: 800px;
margin-right: auto;
margin-left: auto;
background-color: #999999;
}
-->
</style>
</head>

<body>
<div id="wrapper">
<p><a href="images/image-1.jpg" rel="lightbox"> <img src="images/thumb-1.jpg"/> </a>
</div>
</body>
</html>



I am clutching at straws now though and would suggest you get a good grounding in CSS and HTML before moving on to javascript!

djshongo
04-02-2009, 04:03 PM
Hi,
The lightbox opens as it was earlier.

Opens ok, but stil at top centre of screen, looks like im outta luck :s

Didnt think it would be so difficult to centre it,

Thanks for your help! :)

If you have any other ideas im all ears!

djshongo
04-02-2009, 04:23 PM
GOT IT!!!

Found out that if i go to my lightbox.js code and change line 233, which was:

this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();



Changed it to:

this.lightbox.setStyle({ top: 100 + 'px', left: lightboxLeft + 'px' }).show();

It works!!


I changed the lightboxTop value to 100, and the box sits 100px from the top of the screen :))

Will this solve my issue on all browsers guys?

Thanks!

Corrosive
04-02-2009, 05:37 PM
GOT IT!!!

Found out that if i go to my lightbox.js code and change line 233, which was:

this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();



Changed it to:

this.lightbox.setStyle({ top: 100 + 'px', left: lightboxLeft + 'px' }).show();

It works!!


I changed the lightboxTop value to 100, and the box sits 100px from the top of the screen :))

Will this solve my issue on all browsers guys?

Thanks!

Hey, nice one dude! I have no idea if this will work cross-browser. I have never had this problem and probably used lightbox on 7 or 8 websites. It has always worked like a charm and opened in the centre.

Ricky55
04-03-2009, 12:22 AM
yeah I've never had to change this line and I've used Lightbox loads of times. The default is for Lightbox to centre thats what it does.

What size are you images that you are loading in?

djshongo
04-03-2009, 11:16 AM
My images arent that big, i was using the onles supplied with the Lightbox2.04 version on the site, so i thought they would work fine..

Ah well, it works for now anyway :)

Thanks for all your help 'Corrosive', and everyone else :))