| Autor |
Nachricht |
egorka
Threadersteller
Dabei seit: 12.06.2007
Ort: -
Alter: 40
Geschlecht: 
|
Verfasst Fr 23.01.2009 15:53
Titel Lightbox - Abstand des Inhaltes von oben |
  |
|
Hallo
wie kann ich den abstand des inhaltes von oben ändern?
in FF baut sich der inhalt irgendwo in der mitte auf. im IE von ganz oben.
links FF, rechts IE
ich will, dass es sich auch in FF von ganz oben aufbaut.
hier der CSS code
| Code: | #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; }
|
danke
|
|
| |
   |
 |
Beach-Bomb
Dabei seit: 06.02.2008
Ort: Saarbrücken
Alter: 37
Geschlecht:
|
Verfasst Fr 23.01.2009 16:23
Titel
|
|
|
ich glaube es ist entweder das:
#loading{ position: absolute; top: 40%;
würde ich mal auf 0 setzen...
oder das:
#outerImageContainer{ position: relative;
würde ich absolute und top:0px setzen.
ist mir nur sporntan ins auge gesprungen... kann auch sein ,dass es was anderes ist.
|
|
| |
|
|
|
Anzeige
|
|
|
egorka
Threadersteller
Dabei seit: 12.06.2007
Ort: -
Alter: 40
Geschlecht:
|
Verfasst Fr 23.01.2009 19:31
Titel
|
|
|
hm ne, beides nicht.
das erste ist die preloader-gif-animation, beim zweiten verschiebt ers alles nach links. die vertikale bleibt wie gehabt...
Zuletzt bearbeitet von egorka am Fr 23.01.2009 19:34, insgesamt 1-mal bearbeitet
|
|
| |
|
|
egorka
Threadersteller
Dabei seit: 12.06.2007
Ort: -
Alter: 40
Geschlecht:
|
Verfasst Mi 04.02.2009 09:45
Titel
|
|
|
hab die lösung gefunden. lag doch am JS:
Ändere folgende Zeile in der lightbox.js:
| Code: |
var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
|
je höher der Divisor [hier 10] desto höher erscheint das Bild, gib da mal 1000 ein,
dann hast Du das Bild exakt an der Oberkante.
Zuletzt bearbeitet von egorka am Mi 04.02.2009 09:45, insgesamt 1-mal bearbeitet
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Mi 04.02.2009 10:34
Titel
|
|
|
in (fast) jeder js-lib von lightbox findest du auskommentiert das html-snippet, was generiert wird. zieh dir das einfach
mal in deinen editor und schau, was du zu verändern hast... (zukünftig) 
|
|
| |
|
|
egorka
Threadersteller
Dabei seit: 12.06.2007
Ort: -
Alter: 40
Geschlecht:
|
Verfasst Mo 09.02.2009 10:19
Titel
|
|
|
bin nich grad der freak bei solchen sachen... hab die lösung auch nur irgendwo im netz gefunden.
was, einfach die JS datei in editor ziehen? oder was meinst du mit html-snippet?
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Mo 09.02.2009 11:13
Titel
|
|
|
| egorka hat geschrieben: | | oder was meinst du mit html-snippet? |
in der lightbox.js steht in den meisten fällen auskommentiert, was die lightbox an html generiert... bei einer version, die
ich hier gerade liegen habe:
| Code: |
// Code inserts html at the bottom of the page that looks similar to this:
//
// <div id="overlay"></div>
// <div id="lightbox">
// <div id="outerImageContainer">
// <div id="imageContainer">
// <img id="lightboxImage">
// <div style="" id="hoverNav">
// <a href="#" id="prevLink"></a>
// <a href="#" id="nextLink"></a>
// </div>
// <div id="loading">
// <a href="#" id="loadingLink">
// <img src="images/loading.gif">
// </a>
// </div>
// </div>
// </div>
// <div id="imageDataContainer">
// <div id="imageData">
// <div id="imageDetails">
// <span id="caption"></span>
// <span id="numberDisplay"></span>
// </div>
// <div id="bottomNav">
// <a href="#" id="bottomNavClose">
// <img src="images/close.gif">
// </a>
// </div>
// </div>
// </div>
// </div>
|
damit sollte es nicht das riesenproblem sein, irgendwas css seitig zu ändern...
mehr meinte ich damit nicht...
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Hintergrundbild des Inhaltes anpassen
[Suche] Tool zum ausgeben des FTP-Server Inhaltes
preloader mit zufalls anzeige des bereits geladenen inhaltes
Lightbox 2
Lightbox
Referenzen Lightbox
|
|
Willkommen auf dem Portal für Mediengestalter
