zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Slimbox-CSS beißt sich

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.02.2010, 20:05
Hat keinen Plan von irgen
neuer user
Thread-Ersteller
 
Registriert seit: 09.02.2010
Beiträge: 8
Baemx3 befindet sich auf einem aufstrebenden Ast
Standard Slimbox-CSS beißt sich

Aloha.

Bin gerade dabei eine kleine Website aufzuziehen, so zum Thema Verschlüsselung (TrueCrypt, OpenPGP, OTR) für den engeren BekanntInnenkreis, um denen das mal näher zu bringen. Ihr kennt wahrscheinlich alle diese ganzen Bilder, die "aufpoppen", wenn mensch auf 'nen Link klickt. Realisiert wird sowas ja z.B. mit Lightbox oder - etwas kleiner - Slimbox.

Im Grunde genommen läuft Slimbox auch so, wie ich es möchte, WENN sich das dazugehörige CSS nicht mit meinem eigenen beißen würde... Ihr könnt ja mal gucken, was der Fehler ist: ein Mal wird mein CSS mitgeladen, beim anderen Mal habe ich es auskommentiert.
Ihr seht ja selbst, was passiert, wenn der Link angeklickt wird: wenn mein CSS dabei ist, öffnet sich das Bild irgendwie extrem weit links und nur bis zum DIV-Container, wo der richtige Inhalt der Seite ist. Wenn es nicht mitgeladen wird, "poppt" das Bild korrekt auf.

Finde irgendwie nicht, was sich hier beißt und was verhindert, dass alles so funktioniert, wie es funktionieren sollte. Ich als CSS-Laie bin am Ende meines Lateins, vielleicht kann eineR von euch mir helfen. Hier der Inhalt von den beiden Stylesheets:
HTML-Code:
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Standardformatierung */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body {
  margin: 20px;
  padding: 0;
  background-color: #ffffff;
}
p {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #000000;
  font-size: 0.84em;
  padding: 0px 15px;
  text-align: justify;
  margin-top: 0px;
}
h2 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #000000;
  padding: 10px 15px;
}
ul {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #000000;
  font-size: 0.84em;
  padding: 10px 13px;
}
a {
  color: #000000;
  font-size: 0.8em;
  text-decoration: none;  
}
pre {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #000000;
  font-size: 12px;
  padding: 10px 15px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Menübereich */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#menu {
  float: right;
  width: 130px;
  height: 550px;
  padding-left: 3px;
  padding-bottom: 0px;
  padding-top: 0px;
  padding-right: 0px;
  margin-left: 17px;
  background-color: #ffffff;
  border-width: 2px;
  border-color: #000000;
  border-style: dotted;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Contentbereich */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#inhalt {
  overflow: auto;
  float: right;
  width: 78%;
  height: 550px;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  border-width: 2px;
  border-color: #000000;
  border-style: dotted;
}
#inhalt a {
  margin: 0px;
  padding: 0px;
  color: #000000;
  font-size: 0.84em;
  text-decoration: none;
  border-bottom: 1px dotted;
}
#inhalt a:hover {
  color: #000000;
  text-decoration: underline;
  border-bottom: none;
}
#content {
  overflow: auto;
  width: 100%;
  height: 450px;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Header*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#header {
  width: 100%;
  height: 95px;
  margin: 0px;
  padding: 0px;
  background-color: #F2F2D9;
  border-bottom-width: 2px;
  border-bottom-color: #000000;
  border-bottom-style: dotted;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Fußnoten & Zitate */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
p a.fn {
  vertical-align: 0.3em;
  font-size: 0.8em;
  font-weight: bold;
  padding-right: 0.3em;
  padding-left: 0.3em;
}
#fn {
  border-top-width: 1px;
  border-top-color: #000000;
  border-top-style: dotted;
  margin-top: 3em;
  margin-left: 2em;
  margin-right: 2em;
}
blockquote {
  font-size: 0.82em;
}
HTML-Code:
/* SLIMBOX */

#lbOverlay {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

.lbLoading {
	background: #fff url(../images/loading.gif) no-repeat center;
}

#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url(../images/prevlabel.gif) no-repeat 0 15%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url(../images/nextlabel.gif) no-repeat 100% 15%;
}

#lbBottom {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 22px;
	background: transparent url(../images/closelabel.gif) no-repeat center;
	margin: 5px 0;
	outline: none;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}
Liebe Grüße!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.02.2010, 02:50
Benutzerbild von kadees
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.06.2004
Ort: in Baden (nicht Schwaben)
Beiträge: 792
kadees wird schon bald berühmt werden
Standard

Ja was nun?

Slimbox
Code:
<script type="text/javascript" src="/inc/slimbox.js"></script>
oder
Lightbox
Code:
<p><a href="/images/test.jpg" rel="lightbox" title="Nur ein kleiner Test.">Bla.</a></p>
__________________
Gruss Dieter

Vegetarier essen meinem Essen das Essen weg.
Und unsere Norweger sind reine Karnivoren.

selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.02.2010, 08:47
Benutzerbild von uspri
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.07.2005
Beiträge: 900
uspri sorgt für eine eindrucksvolle Atmosphäreuspri sorgt für eine eindrucksvolle Atmosphäre
Standard

Das ist uninteressant, da die Slimbox auf rel="lightbox" reagiert. Irgendwie wird bei der nicht funktionierenden Variante garnicht auf das Stylesheet der Slimbox zugegriffen, da Firebug nichts dergleichen anzeigt. Es wird zwar geladen, aber nicht verwendet.
Mit Zitat antworten
  #4 (permalink)  
Alt 10.02.2010, 10:37
Hat keinen Plan von irgen
neuer user
Thread-Ersteller
 
Registriert seit: 09.02.2010
Beiträge: 8
Baemx3 befindet sich auf einem aufstrebenden Ast
Standard

@kadees: Wie uspri schon geschrieben hat, ist es ganz richtig, dass dort "lightbox" steht. Lies dir mal den Einleitungstext auf der Slimbox-Website durch.

@uspri: Und woran könnte es liegen? Hast du da vielleicht 'ne Idee?

Edit: Ich habe mal das Einbinden der Stylesheets getauscht und dann war's genau anders herum: das von der Slimbox wurde verwendet, dafür mein eigenes nicht. Jetzt habe ich mal das Slimbox-Stylesheet mit in mein Stylesheet reinkopiert und siehe da: es funktioniert. Würde trotzdem gerne rausfinden, woran es liegt. Fehler einfach "umgehen" geht zwar, aber sie gehören lieber beseitigt. q:

Also woran könnte es liegen, dass bei mir immer nur ein Stylesheet benutzt wird?

Geändert von Baemx3 (10.02.2010 um 10:50 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 10.02.2010, 11:05
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.222
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Zitat:
Zitat von Baemx3 Beitrag anzeigen
Also woran könnte es liegen, dass bei mir immer nur ein Stylesheet benutzt wird?
Wie soll man dir das beantworten, wenn du in den beiden im Ausgangsposting verlinkten Seiten den Fehler bereits "umgangen" hast?

Noch was zu deinem Stylesheet: Vermeide Umlaute und auch das ß in Kommentaren. Sie bringen IE (war es der Siebener?) aus den Tritt.
Mit Zitat antworten
  #6 (permalink)  
Alt 10.02.2010, 11:13
Hat keinen Plan von irgen
neuer user
Thread-Ersteller
 
Registriert seit: 09.02.2010
Beiträge: 8
Baemx3 befindet sich auf einem aufstrebenden Ast
Standard

So, hab's dann wieder geändert. Beim ersten Link sind beide Stylesheets eingebunden, das Zweite wird aber merkwürdigerweise nicht genutzt (also das für Slimbox). Beim Link Nummero Zwo habe ich testweise mein eigenes Stylesheet auskommentiert, wo dann die Slimbox mit einem Mal richtig angezeigt wird.

Wenn ich den Inhalt von beiden Stylesheets in eines zusammen packe, läuft es wunderbar. So, also mit zwei Stylesheets, will es aber irgendwie nicht.

Umlaute und ß werden entfernt - danke für den Tipp.
Mit Zitat antworten
  #7 (permalink)  
Alt 10.02.2010, 11:33
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.222
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Zitat:
<link rel="stylesheet" media="screen,projection" title="Standardstylesheet" href="secufehler_files/default0.css" type ="text/css" />
<link rel="stylesheet" media="screen,projection" title="Slimbox" href="secufehler_files/slimbox0.css" type="text/css" />
Das zweite Stylesheet wird tatsächlich erst dann eingebunden, wenn aus der zweiten Einbindung <link rel="stylesheet" ....> das title-Attribute (title="Slimbox") ganz herausgenommen wird. Warum das so ist, kann ich im Moment nicht theoretisch begründen.

Und achte auch vorsichtshalber darauf, dass sich bei type ="text/css" zwischen dem e und = kein Leerzeichen befindet.
Mit Zitat antworten
  #8 (permalink)  
Alt 10.02.2010, 12:13
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.222
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Eigenzitat:
Zitat:
Zitat von EvT Beitrag anzeigen
Warum das so ist, kann ich im Moment nicht theoretisch begründen.
Und hier nun die theoretische Begründung:

The presence of the title attribute in a link element that references an external stylesheet can cause the stylesheet to become a preferred stylesheet. This will in most cases cause the external stylesheet to be ignored, which is typically not what an author intends to do.

[...]
According to the HTML 4.01 specification, only one of the preferred stylesheets can be used at a time. Therefore [...] only one of the two preferred stylesheets will be applied to the document. The specification does not supply a procedure to decide which one should be used, so user agents are free to make whatever choice they like.


Quelle: Developer.mozilla.org
Mit Zitat antworten
  #9 (permalink)  
Alt 10.02.2010, 12:22
Hat keinen Plan von irgen
neuer user
Thread-Ersteller
 
Registriert seit: 09.02.2010
Beiträge: 8
Baemx3 befindet sich auf einem aufstrebenden Ast
Standard

Okay, das erklärt alles. Vielen Dank. Jetzt werden beide Stylesheet verwendet, auch ohne das Zweitere nachträglich per Web Developer dazu zu schalten (hätte ich mir mal früher damit anschauen können... ). Das Leerzeichen habe ich entfernt, muss da irgendwie reingerutscht sein.

*verbeug* Das war aber bestimmt nicht die letzte Frage.
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
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 12:25
Einbindung von frei erhältlichen Scripten - CSS Problem DonL CSS 1 22.01.2011 16:09
MYspace mehr als nur CSS oder ? Vinceone CSS 0 12.07.2007 02:21
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 08:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 11:39


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