logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 03-31-2009, 04:01 PM   #1
djshongo
 
Join Date: Jan 2006
Posts: 120
Default Positioning CSS question Lightbox

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
djshongo is offline   Reply With Quote
Old 03-31-2009, 04:13 PM   #2
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Without HTML, the CSS is just rules of styles without a website to go to.
Do yo have this on the web somewhere?
domedia is offline   Reply With Quote
Old 03-31-2009, 04:35 PM   #3
djshongo
 
Join Date: Jan 2006
Posts: 120
Default

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 is offline   Reply With Quote
Old 04-01-2009, 02:31 PM   #4
djshongo
 
Join Date: Jan 2006
Posts: 120
Default

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
djshongo is offline   Reply With Quote
Old 04-01-2009, 03:49 PM   #5
mangofreak
mangofreak's Avatar
 
Join Date: Jan 2006
Location: Toronto-Canada
Posts: 444
Default

Try this:
Code:
<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>
__________________
J.
DW | FW | HTML | CSS | ASP | some PHP | Windows | Ubuntu
mangofreak is offline   Reply With Quote
Old 04-01-2009, 04:02 PM   #6
djshongo
 
Join Date: Jan 2006
Posts: 120
Default

Stil nothing..

Thanks anyway tho

Grrrrrrrr..
djshongo is offline   Reply With Quote
Old 04-01-2009, 04:10 PM   #7
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Quote:
Originally Posted by djshongo View Post
Stil nothing..

Thanks anyway tho

Grrrrrrrr..
Did you copy and paste that code? Try taking the extra 't' off the end of 'rightt'
Corrosive is offline   Reply With Quote
Old 04-01-2009, 04:35 PM   #8
djshongo
 
Join Date: Jan 2006
Posts: 120
Default

Yea i spotted that spelling error, but stil no change to it :S

Bet its sumthing simple tho...
djshongo is offline   Reply With Quote
Old 04-01-2009, 05:26 PM   #9
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Quote:
Originally Posted by djshongo View Post
Yea i spotted that spelling error, but stil no change to it :S

Bet its sumthing simple tho...
Woah. Hang on...

This...

Code:
<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...

Code:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Should be between your <head></head> tags.
Corrosive is offline   Reply With Quote
Old 04-02-2009, 01:10 PM   #10
djshongo
 
Join Date: Jan 2006
Posts: 120
Default

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...
djshongo is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:44 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com