zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Lightbox mit zweiter CSS Datei funktioniert nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.12.2007, 00:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.12.2007
Beiträge: 11
T4ke befindet sich auf einem aufstrebenden Ast
Standard Lightbox mit zweiter CSS Datei funktioniert nicht

Hallo meine Lieben!

Da ich ein Problem mit meiner Lightbox habe und da mein Problem mit CSS zutun hat, habe ich mich hier mal direkt angemeldet

Und zwar geht es um folgendes:

Ich habe auf meiner Seite eine Lightbox für meine Fotos eingebunden.
Zum korrekten Funktionieren der Lightbox benötigt sie ein Stylesheet.
Ich habe zudem aber noch ein eigenes Stylesheet auf meiner Seite eingebunden, das für das Layout etc zuständig ist.

Wenn ich nun meine CSS Datei und die Lightbox CSS Datei beide seperat einbinde und anschließend auf ein Bild klicke, dann öffnet sich die Lightbox und das Bild wird angezeigt. Jedoch hält dieser Status nicht einmal eine Sekunde an, kurz: Das Bild verschwindet sofort wieder.

Das selbe Resultat erhalte ich wenn ich den Inhalt der Lightbox CSS Datei in meine eigene CSS Datei kopiere und nur meine CSS Datei einbinde.
Die einzige Variante, die funktioniert, ist, wenn ich nur die Lightbox CSS Datei einbinde, also meine nicht.
Dann wird alles korrekt dargestellt, das Bild verschwindet nicht.

Also müssen sich scheinbar ein paar Einträge in den beiden CSS Dateien überschneiden, oder?

Ich muss noch hinzufügen, dass dieser Fehler nur unter Opera und Firefox entsteht. Mit dem IE7 läuft alles super.

Nun habe ich in einem anderen Forum gelesen, dass man den Eintrag

Code:
#hoverNav{
	position: absolute; <<<--- Löschen
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1000;
	}
in der Lightbox CSS Datei löschen soll, um eine korrekte Darstellung im Firefox zu erzielen.
Dies habe ich gemacht, das Bild bleibt nun auch, aber die "Next" und "Prev" Buttons rutschen nun ein ganzes Stück nach unten und der abgedunkelte Hintergrund reicht nicht mehr über die gesamte Seite; siehe auch hier:



Sobald ich dann auf das verrutschte "Next" klicke, gelange ich zum nächsten Bild, jedoch zerhaut's dort die ganze Lightbox; Der "Close" Button ist nicht mehr im Bild, der abgedunkelte Hintergrund und die Buttons sind wir beim ersten Bild verrutscht. Das Verrutschen des "Close" Buttons entsteht aber komischerweise nur beim zweiten Bild (und allen darauf folgenden), nicht beim ersten; siehe auch hier:



Zu guter letzt poste ich hier nochmal meine CSS Dateien, damit ihr sie einschauen könnt, denn ich bin mittlerweile mit meinem Latein, oder viel besser mit meinem CSS, am Ende:

Lightbox CSS Datei:

Code:
#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#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: transparent url(../images/blank.gif) no-repeat; /* 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;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}
Und hier meine CSS Datei (die standardmäßig ja sowieso auf meiner Seite eingebunden wird bzw das Layout für das Template ist):

Code:
/* $Id: clansphere.css 232 2006-08-19 16:07:22Z hajo $ */

html{min-height:100.01%}

body {
	color:#F2F2F3;
	font-family:Verdana,Helvetica,sans-serif;
	font-size:8pt;
	margin:20px;
	text-align:center;
}
a:link, a:visited {
	background-color:inherit;
	color:#FFFFFF;
	text-decoration:none;
}
a:active, a:hover {
	background-color:inherit;
	color:#004400;
	text-decoration:underline;
}
div,span {
	background-color:inherit;
	color:#FFFFFF;
	font-family:Verdana,Helvetica,sans-serif;
}
img {
	border:0px;
}
form {
	display:inline;
}
td {
	background-color:inherit;
	color:#F2F2F2;
	font-size:8pt;
	vertical-align:top;
}
textarea {
	width:90%;
}
ul {
	margin:0px;
}

#nav-left,#content,#bottom {
	float:left;
	margin:auto;
}

#nav-left {
	width:14%;
}
#nav-right {
	float:right;
	width:20%;
}
#content {
	background-color:inherit;
	color:#FFFFFF;
	text-align:center;
	width:66%;
}
#bottom {
	background-color:#709060;
	color:inherit;
	margin-top:20px;
	padding:4px 0px 4px 0px;
	width:100%;
}
#head {
	background-color:#709060;
	color:#F2F2F2;
	font-size:25pt;
	height:100px;
	margin-bottom:20px;
	text-align:center;
	width:100%;
}
#debug {
	height:150px;
	margin-bottom:20px;
	overflow:auto;
	padding-left:4px;
	width:100%;
	text-align:left;
}
#errors {
	color:#CC0000;
}
#sql {
	color:#777777;
}
.h1 {
	color: #333333;
	font-size: 14pt;
	font-weight: bold;
	text-decoration: none;
}
.h2 {
	color: #333333;
	font-size: 16pt;
	font-weight: normal;
	text-decoration: none;
}
.h3 {
	color: #333333;
	font-size: 20pt;
	font-weight: normal;
	text-decoration: none;
}
.form {
	background-color:#b8b7b7;
	border:2px ridge #002200;
	color:#002200;
	font-family:Verdana,Helvetica,sans-serif;
	font-size:8pt;
	margin:2px;
	padding-left:3px;
	}
.forum {
	background-color:#CCEEBB;
	color:inherit;
	margin:auto;
}
.headb {
	background-color:#f74600;
	color:#F2F2F2;
	font-weight:bold;
	padding:4px;
	text-align:left;
}
.bottom {
	background-color:#000000;
	color:inherit;
	padding:4px 6px 4px 8px;
	text-align:left;
}
.newshead {
	background-color:#f74600;
	color:#F2F2F2;
	font-size:11pt;
	font-weight:bold;
	padding:4px 6px 4px 8px;
	text-align:left;
}
.left,.center,.right {
	padding:1px;
}
.leftb,.centerb,.rightb {
	background-color:#000000;
	color:#FFFFFF;
	padding:4px 6px 4px 8px;
}
.leftc,.centerc,.rightc {
	background-color:#000000;
	color:#FFFFFF;
	padding:4px 6px 4px 8px;
}
.left,.leftb,.leftc {
	text-align:left;
}
.center,.centerb,.centerc {
	text-align:center;
}
.right,.rightb,.rightc {
	text-align:right;
}
.quote {
	background-color:#88BB55;
	border:1px solid #CCEEBB;
	color:inherit;
	padding:6px;
	text-align:left;
}
.navhead,.navhead2 {
	background-color:#336600;
	border:solid #CCEEBB;
	border-width:1px 1px 0px 1px;
	color:#F2F2F2;
	font-weight:bold;
	padding:4px;
	text-align:center;
}

.navbodyb,.navbody2b {
	background-color:#709060;
	border:solid #CCEEBB;
	border-width:1px 1px 0px 1px;
	color:inherit;
	list-style:none;
	padding:4px 6px 4px 8px;
	text-align:left;
}
.calhead {
	background-color:#000000;
	color:inherit;
	padding:4px 2px 4px 2px;
	text-align:center;
}
.calday,.calevent,.caltoday, .calweek {
	padding:4px 2px 4px 2px;
	text-align:right;
}
.calday {
	background-color:#000000;
	color:inherit;
}
.calevent {
	background-color:#ff0000;
	color:inherit;
}
.caltoday {
	background-color:#f74600;
	color:inherit;
}
.calweek {
	background-color:#000000;
	color:inherit;
	border:2px #002200;
}

So, nun frage ich euch, liebe CSS-Asse..
was genau mache ich falsch?
Was muss ich tun, damit das Bild nicht mehr verschiwndet?
Wo liegt der Fehler in meiner CSS Programmierung?

Ich hab soviel gute über euer Forum gehört, ich hoffe ihr könnt mir helfen!

Grüße und besten Danken im Vorraus,

Robin
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.12.2007, 00:14
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
 
Registriert seit: 16.07.2007
Ort: Kapfenberg - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.788
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard

Servus!

Um Dir da zu helfen, wäre es besser ein online beispiel zu sehen, da es auch mit dem dargestelltem Code zu tun haben könnte.
Verwendest Du außer den lightbox-javascripts auch noch andere?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.12.2007, 00:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.12.2007
Beiträge: 11
T4ke befindet sich auf einem aufstrebenden Ast
Standard

Wow das ging ja schnell!

Nein benutze ich leider nicht.

Ich habs bisher erstmal alles offline gemacht, aber ich habs hier einmal hochgeladen:

Welcome to DJ Fuhlys Homebase


Die Tags in den geschweiften klammern sollten nicht stören, das sind nur die Parameter für das CMS.

Hoffe, das Beispiel kann dir mein Problem veranschaulichen.

Die Navigation usw funktioniert in den Beispiel natürlich nicht, weil es ja nicht in dem Ornder liegt, in dem es letzendlich sein soll, aber das, was die Lightbox benötigt, ist alles drin und sollte eigentlich korrekt dargestellt werden...
Mit Zitat antworten
  #4 (permalink)  
Alt 10.12.2007, 00:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Code:
div,span {
    background-color:inherit;
    color:#FFFFFF;
    font-family:Verdana,Helvetica,sans-serif;
}
#hoverNav erbt die weiße Hintergrundfarbe von #outerImageContainer und verdeckt das Bild.
Was täten wir nur ohne Firebug...
Mit Zitat antworten
  #5 (permalink)  
Alt 10.12.2007, 08:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.12.2007
Beiträge: 11
T4ke befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank, jetzt geht zumindestens schon mal die Lightbox!!!

Mein einziges Problem ist jetzt nur noch, dass der eigentlich schwarz abgedunkelte Hintergrund nicht über die ganze Seite reicht, egal wie ich es drehe und wende
Wo liegt da der Fehler?

Edit: Ich habe jetzt mal die aktuelle CSS Datei in mein Beispiel integriert.

Geändert von T4ke (10.12.2007 um 08:22 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 10.12.2007, 12:50
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Kannst Du eigentlich selber lösen.
Du hast div overlay feste Werte für Breite und Höhe zugewiesen.
Bei größeren Auflösungen sieht man eben einen Rand.
Mit 100% Höhe und Breite sollte es gehen.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #7 (permalink)  
Alt 10.12.2007, 13:35
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Außerdem solltest du das CSS deiner Website zuerst einbinden, danach erst das CSS der Lightbox. Die Reihenfolge ist nicht egal bei CSS.

Und wenn du schon dabei bist, nutze am besten nicht die originale Lightbox2, sondern Slimbox - kann exakt das gleiche, funktioniert auch genau so, läuft wesentlich besser und flotter, ist von der Größe auch noch kleiner und basiert auf den Mootools.

Slimbox, the ultimate lightweight Lightbox clone · digitalia.be
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #8 (permalink)  
Alt 10.12.2007, 18:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.12.2007
Beiträge: 11
T4ke befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von andir Beitrag anzeigen
Du hast div overlay feste Werte für Breite und Höhe zugewiesen.
Mit 100% Höhe und Breite sollte es gehen.
Meinst du das hier?

Code:
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000000;
	}
Wenn ich width und height auf 100% stelle verändert sich leider nichts..

Zitat:
Zitat von Boris Beitrag anzeigen
Außerdem solltest du das CSS deiner Website zuerst einbinden, danach erst das CSS der Lightbox. Die Reihenfolge ist nicht egal bei CSS.

Und wenn du schon dabei bist, nutze am besten nicht die originale Lightbox2, sondern Slimbox - kann exakt das gleiche, funktioniert auch genau so, läuft wesentlich besser und flotter, ist von der Größe auch noch kleiner und basiert auf den Mootools.
Werde ich mir anschauen, vielen Dank für den Tip!
Werde deinen Rat mit der Reihenfolge der CSS Dateien befolgen.
Mit Zitat antworten
  #9 (permalink)  
Alt 10.12.2007, 18:09
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Zitat:
Meinst du das hier?
Ja, das meint er.
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 10.12.2007, 18:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

IMHO schreibt das Script die Dimensionen des #overlay ins style-Attribut.
Bei mir fehlen rechts 40px. Nimm mal den body-margin raus.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Datei ändern per Hyperlink einfachder CSS 3 14.02.2009 11:12
dtd und css in php funktioniert im IE nicht!!! da-lick CSS 17 09.06.2007 16:44
css menu funktioniert nicht Omid CSS 2 05.06.2007 07:55
Externe CSS Datei für Handy+PDA heinz CSS 0 27.05.2004 04:00
in einer rss datei auf ein css verlinken? new user CSS 3 25.02.2004 19:35


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:11 Uhr.