[gelöst] Lytebox und Image Captions - Formatierungsfrage

tbillert · 29. Dezember 2010 23:37

Hallo,

ich moechte gern Bilder, die mittels Lytebox als Overlay oeffnen, mit Captions versehen. Geht an sich auch, nur ist der Stil der Captions bei einem Lytebox-Bild anders als bei einem ohne Lytebox. Siehe:

http://geojena.billert.de/index.php?page=testseite

Ich habe jetzt ne halbe Stunde den Code gewaelzt und an meinen CSS rumgeschraubt, ohne Erfolg. Koennt Ihr mich auf die richtige Spur bringen?

Danke Euch!

Gruss,

Thomas.

Beitrag geändert von tbillert (19. Januar 2011 01:00)

NaN · 29. Dezember 2010 00:12

Prüfe die Seite doch mal mit einem Validator.
Oder schau Dir einfach mal den HTML Quelltext in Deinem Browser an.
Oder nimm zum Untersuchen der beiden Captions einfach Firefox und das AddOn Firebug und vergleiche sie.
Oder nimm Chromium der hat das auch.
Safari hat ebenfalls solche Tools.
Jedenfalls wirst Du dann feststellen, dass der Fehler nich im Stylesheet sondern im HTML Code liegt.
Du hast z.B. Absätze in Absätzen...
Das zweite Beispiel ist obendrein noch in ein einem <code> ... </code> eingeschlossen.
(Daher kommt übrigens die andere Schriftart)
Also nicht einfach nur kopieren und einfügen, sondern auch mal im HTML Quelltext ganz genau gucken was man da eigentlich macht.

tbillert · 29. Dezember 2010 00:43

Hallo NaN,

danke Dir. Der verquere Code kam teils von tinyMCE. Das <code>-Element habe ich entfernt, die Caption sieht jetzt zwar schon anders aus, aber immer noch nicht wie die im oberen Beispiel - unten fett, oben normal. Ich kann weder an dem im CMS hinterlegten (siehe unten) noch dem im Browser angezeigten Code partout nicht erkennen, wo das herkommen sollte...

Hier klicken, um den Code zum Kopieren zu markieren

<p><strong>ohne Lytebox:</strong></p>
<p><img class="leftcaption" title="Ein sehr gut erhaltenes kleines Exemplar von <em>Beneckeia tenuis<em>" src="uploads/images/Fossilien/beneckeia2.jpg" alt="" width="480" height="268" /></p>
<br class="clear" /><br />
<p><strong>mit Lytebox:</strong></p>
<p>{Lytebox href='uploads/images/Fossilien/beneckeia2.jpg' title='Ein sehr gut erhaltenes kleines Exemplar von <em>Beneckeia tenuis</em>' text='' thumbsrc='uploads/images/Fossilien/beneckeia2.jpg' thumbextra='class="leftcaption"'}</p>
<br class="clear" />

Gruss,

Thomas.

NaN · 29. Dezember 2010 02:02

Okay, das liegt dann doch am Stylesheet.
Dort steht irgendwo:

a:link, a:visited {
color: #FF7F00;
font-weight: bold;
text-decoration: none;
}

Da das Bild inkl. Captions bei Lytebox ja ebenfalls in einem Link steckt, gilt das natürlich auch für die Lytebox Captions.

tbillert · 29. Dezember 2010 19:27

Hallo NaN,

danke - und genau, das steht da:

Hier klicken, um den Code zum Kopieren zu markieren

a:link, a:visited {
    text-decoration: none;
    font-weight: bold;
    color: #FF7F00;
}

Sprich, ich muesste noch differenzieren, dass dies fuer die Lytebox-Umgebung nicht gelten soll. Aber wie? Der Code um's Bild herum sieht so aus:

Hier klicken, um den Code zum Kopieren zu markieren

<p>
<script type="text/javascript" src="http://geojena.billert.de/index.php?mact=Lytebox,cntnt01,getjs,1&amp;cntnt01config=Z3JleSwxLDEsOCw4MCwxLDEsMSwxMiw0MDAwLDEsMSwxLDEsMSwwLDE%3D&amp;cntnt01showtemplate=false&amp;cntnt01returnid=99&amp;page=99"></script>
    <a href="uploads/images/Fossilien/beneckeia2.jpg" rel="lytebox" title="Ein sehr gut erhaltenes kleines Exemplar von &lt;em&gt;Beneckeia tenuis&lt;/em&gt;">
        <img src="uploads/images/Fossilien/beneckeia2.jpg" title="Ein sehr gut erhaltenes kleines Exemplar von &lt;em&gt;Beneckeia tenuis&lt;/em&gt;" alt="beneckeia2.jpg" class="leftcaption" />
    </a>
</p>

Da sehe ich (mit meinem Kenntnisstand) nichts, was dieses Text von einem anderen <a></a> unterscheidet...

Gruss,

Thomas.

Beitrag geändert von tbillert (29. Dezember 2010 19:28)

owr_web · 29. Dezember 2010 20:06

Grundsätzlich gibts nur zwei Möglichkeiten:

a) alle "Standard"-Links nicht fett geschrieben
b) für den a in der lytebox eine Klasse definieren (z. lyteboxlink)

a.lyteboxlink:link, a.lyteboxlink:visited { font-weight: normal;}

Eidentlich ist fast Variante a vorzuziehen - und dann wirklich nur die Links die fett sein müssen als fett deklarieren (mittels Klassen oder in den jeweiligen ID beim Menü z.B.)

EDIT: Außerdem (auch wenns nur Teststeie ist) hast du beim Bild ohne lytebox im Titel statt - Grunsätzlcih würde ich mir überlegen, html in den Titeln zu verwenden (in der "Titelleise" wenn man über das Bild fährt wird nämlich das als Text mit ausgegeben)

Beitrag geändert von owr_web (29. Dezember 2010 20:09)

tbillert · 29. Dezember 2010 21:37

Hallo owr_web,

danke. Dann passt das ja zu meiner Sicht der Dinge - es gibt sogar noch ne 3. Variante, alle Captions fett zu machen. Das ist aber auch nicht wirklich die schoenste Loesung.

Ich habe also a) gewaehlt, jetzt passt es. Menues und breadcrumbs sind wieder fett, die Links im Text muessen nicht fett sein - war ein angepasstes Standard-CSS, war mir bisher gar nicht aufgefallen, dass die doch eher normal sein sollten. Jetzt ist alles schoen.

Wegen dem im Caption-Titel: ja, stimmt. Leider gibt es in der Biologie/Paläontologie die Konvention, dass Artennamen immer kursiv zu schreiben sind. Und es kommt noch schlimmer: tinyMCE macht aus einem im Bild-Einfuegen-Dialog hinterlegten ganz uebel ein ... Kann man im HTML-Modus berichtigen, dann bleibt es auch so.

An sich dachte ich, dass bei mouseover auf einem Bild der ALT-Tag ausgegeben wird? Den habe ich ohne HTML-Code beim Bild unter "Beschreibung" abgelegt. Die Caption kommt aus dem Feld "Titel" - was man fuer das Modul Image Captions auch separat einstellen muss, per default benutzt es das Beschreibungsfeld (=ALT-Tag).

Liesse sich loesen, wenn man aus "Titel" den ALT-Tag machen koennte. Weiss nicht, ob das geht. Bis dahin muss und werde ich damit wohl leben.

Gruss,

Thomas.

Andynium · 29. Dezember 2010 22:12

tbillert schrieb:

Wegen dem im Caption-Titel: ja, stimmt. Leider gibt es in der Biologie/Paläontologie die Konvention, dass Artennamen immer kursiv zu schreiben sind. Und es kommt noch schlimmer: tinyMCE macht aus einem im Bild-Einfuegen-Dialog hinterlegten ganz uebel ein ... Kann man im HTML-Modus berichtigen, dann bleibt es auch so.

Hast du mal geschaut, ob sich dieses Verhalten mit der Einstellung "Kodierung der Entitäten" (Administration TinyMCE > Weitere Optionen) beeinflussen lässt?

tbillert · 30. Dezember 2010 23:04

nein, das war mir neu. Die Option dort steht auf RAW-Kodierung - wuerde ich so uebersetzen, dass das in den Code kommt, was man reinschreibt, und zwar genau so.

Haber aber eben mal die beiden anderen Moeglichkeiten ausprobiert, die aendern an diesem Verhalten leider gar nicht.

NB: die Mail, dass eine neue Antwort im Thread vorhanden ist, hat mich jetzt auf eine andere URL gefuehrt (forum.silkframework.de anstatt www.cmsmadesimple.de/forum). Muss mich das wundern?

Gruss,

Thomas.

Connie · 30. Dezember 2010 11:18

NB: die Mail, dass eine neue Antwort im Thread vorhanden ist, hat mich jetzt auf eine andere URL gefuehrt (forum.silkframework.de anstatt www.cmsmadesimple.de/forum). Muss mich das wundern?

nö... ist wahrscheinlich eine IP für mehrere Domains oder so, kann sicherlich durch eine kleine Option geändert werden ;=)

tbillert · 30. Dezember 2010 15:03

:-) okay... Da ich mich auch auf der anderen Domain einloggen konnte, hatte das wohl seine Richtigkeit :-)

Andynium · 31. Dezember 2010 11:45

tbillert schrieb:

NB: die Mail, dass eine neue Antwort im Thread vorhanden ist, hat mich jetzt auf eine andere URL gefuehrt (forum.silkframework.de anstatt www.cmsmadesimple.de/forum). Muss mich das wundern?

Ist noch ein "Überrest" aus der Zeit, in dem das Forum noch in der Projektphase war - nur hat mich die Geschwindigkeit der Entwicklung selbst etwas überrascht - für Wartungszwecke isses eben noch aktiv ...

tbillert · 31. Dezember 2010 15:26

danke, cyberman - kein Thema. Die Seite scheint mit beiden Domains gleich gut zu funktionieren.

Gruss + guten Rutsch,

Thomas.

tbillert · 19. Januar 2011 01:00

gelöst, siehe:

http://www.cmsmadesimple.de/forum/viewt … 2257#p2257

Forum für CMS/made simple

#1 29. Dezember 2010 23:37

[gelöst] Lytebox und Image Captions - Formatierungsfrage

#2 29. Dezember 2010 00:12

Re: [gelöst] Lytebox und Image Captions - Formatierungsfrage

#3 29. Dezember 2010 00:43

Re: [gelöst] Lytebox und Image Captions - Formatierungsfrage

#4 29. Dezember 2010 02:02

Re: [gelöst] Lytebox und Image Captions - Formatierungsfrage

#5 29. Dezember 2010 19:27

Re: [gelöst] Lytebox und Image Captions - Formatierungsfrage

#6 29. Dezember 2010 20:06

Re: [gelöst] Lytebox und Image Captions - Formatierungsfrage

#7 29. Dezember 2010 21:37

Re: [gelöst] Lytebox und Image Captions - Formatierungsfrage

#8 29. Dezember 2010 22:12

Re: [gelöst] Lytebox und Image Captions - Formatierungsfrage

#9 30. Dezember 2010 23:04

Re: [gelöst] Lytebox und Image Captions - Formatierungsfrage

#10 30. Dezember 2010 11:18

Re: [gelöst] Lytebox und Image Captions - Formatierungsfrage

#11 30. Dezember 2010 15:03

Re: [gelöst] Lytebox und Image Captions - Formatierungsfrage

#12 31. Dezember 2010 11:45

Re: [gelöst] Lytebox und Image Captions - Formatierungsfrage

#13 31. Dezember 2010 15:26

Re: [gelöst] Lytebox und Image Captions - Formatierungsfrage

#14 19. Januar 2011 01:00

Re: [gelöst] Lytebox und Image Captions - Formatierungsfrage

Fußzeile des Forums