|
|||
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; } |
Sponsored Links |
|
||||
Ja was nun?
Slimbox Code:
<script type="text/javascript" src="/inc/slimbox.js"></script> 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 |
Sponsored Links |
|
|||
@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 11:50 Uhr) |
|
|||
Zitat:
Noch was zu deinem Stylesheet: Vermeide Umlaute und auch das ß in Kommentaren. Sie bringen IE (war es der Siebener?) aus den Tritt. |
|
|||
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. |
|
|||
Zitat:
Und achte auch vorsichtshalber darauf, dass sich bei type ="text/css" zwischen dem e und = kein Leerzeichen befindet. |
|
|||
Eigenzitat: 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 |
|
|||
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. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 13:25 |
Einbindung von frei erhältlichen Scripten - CSS Problem | DonL | CSS | 1 | 22.01.2011 17:09 |
MYspace mehr als nur CSS oder ? | Vinceone | CSS | 0 | 12.07.2007 03:21 |
Eric Meyer's CSS | Petty | Ressourcen | 0 | 21.11.2005 09:18 |
Mozilla ignoriert externes css | DarkWanderer | CSS | 9 | 22.09.2005 12:39 |