Zwei Inhalte in einem Syntaxelement

[supercat]

Um zum Beispiel einen Begriff kurz zu erklären oder eine kurze Zusatzinformation zu geben, finde ich jene Boxen sehr elegant, die beim Überfahren des entsprechenden Wortes sozusagen als Flag aufscheinen. Ich baue das auf meiner Seite halt mit HTML-Code ein (Farbbox im unteren Teil der Startseite). Damit es eventuell auch andere unkompliziert nutzen können, wollte ich das Ganze in ein eigenes Syntaxelement packen. Da aber zwei (getrennte) Inhalte vorhanden sind (VALUE), ist das offenbar auf diesem Wege nicht machbar oder ich habe halt einen Denkknoten.

Im CSS-File habe ich die Box so definiert:

Code Auswählen Erweitern

a.box {
color:#008000;
font-style:italic;
font-weight:normal;
font-size:12px;
font-family: verdana, sans-serif;
text-decoration:underline;}

a.box:hover {
background:#7f7f7f;}

a.box span {
display:none;}

a.box:hover span {
position:absolute;
display:block;
width:210px;
color:black;
background:#efefef;
font:normal 12px verdana, arial, sans-serif;
border:1px solid #000000;
padding:5px;
text-decoration:none; }
Auf der Seite nutze ich dann einen HTML-Tag, Beispiel:

Ich habe meine bisher statischen Seiten auf ein [html|<a class="box" href="#">CMS<span><b>CMS</b><br />CMS ist die Abkürzung für Content-Management-System (Inhaltsverwaltungssystem). Es ist ein Programm, das die gemeinschaftliche Erstellung und Bearbeitung des Inhalts von Text- und Multimedia-Dokumenten ermöglicht und organisiert. Ein Autor kann ein CMS auch ohne Programmier- oder HTML-Kenntnisse bedienen.</span></a>] umgestellt.

Zu sehen ist dann nur der Begriff CMS. Fährt man darüber, erscheint auf einer Fläche der Text, der zwischen den Span-Tags steht.

Tja, wie bekomme ich das in ein Syntaxelement. Irgendwie habe ich mich jetzt verrannt...

[caga]

Hallo,

schöne Idee mit der Box!
Folgendes sollte eigentlich als Syntaxelement funktionieren

Code Auswählen Erweitern

box=[html|<a class="box" href="#">{DESCRIPTION}<span><b>{DESCRIPTION}</b><br />{VALUE}</span></a>]
Um das ganze dann zu verwenden nutzt du

Code Auswählen Erweitern

[box=kurzes Wort|lange Beschreibung-lange Beschreibung-lange Beschreibung]

Das ist jetzt zwar ungetestet, sollte so aber funktionieren.

[supercat]

Wow, Carsten, Du bist ja schneller als unsere Feuerwehr  

Ich habe es natürlich gleich ausprobiert - und es funzt tadellos. Herzlichen Dank, aber auf DESCRIPTION wäre ich von alleine nicht gekommen. Jetzt bastele ich mir noch über die Syntax einen Platzhalter für kleine Bildchen und freue mich wie ein Schneekönig  

Ach ja, vielleicht gefällt es ja auch anderen Usern. Dann mal fix copy & paste  

Sonnige Grüße aus Thüringen

Mario

[azett]

auf DESCRIPTION wäre ich von alleine nicht gekommen.

Klick  

[supercat]

Peinlich   Ich werd's mir mal ausdrucken. Wenn ich so etwas nicht vor der Nase habe, kommt's mir halt einfach nicht in den Sinn. Na ja, ansonsten gilt die alte Recherche-Regel: Bevor Du wild herumblätterst, frage doch mal in die Runde, ob jemand etwas weiß. Hat ja geklappt  

[wasp]

...hat sich aber auch für alle gelohnt!  
Gutes Ding Das!

[azett]

Jup, eindeutig ein Kandidat für ein Howto bei den Tips und Tricks

[supercat]

Passt jetzt zwar nicht so richtig hierher, aber: Arvid, check' mal nächste Woche bei Ing Diba, hätte doch um ein Haar vergessen, euch zum Dreijährigen zu gratulieren   Bleibt am Ball bzw. im Tritt, was dem Radler ja eher gerecht wird  

[supercat]

Jetzt habe ich doch noch etwas zum Thema: Das mit dem Text funzt super. Nun habe ich bei einigen Texten kleine Bildchen bzw. Logos eingebaut - rechts stehend. Das wollte ich auch z.B. über ein Synthax-Element vereinfachen. Doch das scheitert an der Mozilo-eigenen Behandlung von Bildern. Derzeit hänge ich ein Logo über einen HTML-Verweis ein. Das ist deshalb nervig, weil der komplette Pfad angegeben werden muss. Wenn ich es richtig sehe, müsste da voll in den PHP-Code eingegriffen werden.

Über die normale Mozilo-Bild-Synthax ein Logo einzubauen geht zwar, aber der Text floatet nicht. Das Dumme ist halt, dass ich per CSS dem Logo sagen kann, wie das Drumherum behandelt werden soll, aber nicht dem Text, der folgt. Oder habe ich da einen Denkknoten?

Seht ihr, bei solchen Kniffelfragen müsst ihr schon noch 30 Jahre durchhalten  

[supercat]

Nachtrag zum vorhergehenden Posting: Ich habe mir per CSS eine Krücke gebaut, will sagen eine Box für das Logo oder Bildchen angelegt. Leider ignoriert der Mozilo-eigene Bildbaustein die angegebene maximale Weite. Das Bild oder Logo muss also in passender Größe hochgeladen werden. Im Admin-Bereich sieht das dann z.B. so aus:

Die Seiten sind für den [Infobox=Internet Explorer|[Infobox-Bild|[bild|iexplorer.gif]] Windows Internet Explorer (früher Microsoft Internet Explorer, Abkürzung: IE oder auch MSIE) blablabla...] 7 und abwärts sowie für den ...

Es geht, ist aber auf Grund der Syntax-Verschachtelung nicht sonderlich elegant. Jetzt bin ich auf andere Ideen gespannt  

[azett]

Öhm...mal ohne viele Worte...hilft dir das?

Code Auswählen Erweitern

box=[html|<a class="box" href="#">{DESCRIPTION}<span><b>{DESCRIPTION}</b><br /><img src="./kategorien/{CATEGORY}/dateien/{DESCRIPTION}.jpg" style="float:right;">{VALUE}<br style="clear:right;" /></span></a>]

Code Auswählen Erweitern

<img src="./kategorien/{CATEGORY}/dateien/{DESCRIPTION}.jpg" style="float:right;"> fügt das rechts floatende JPG aus der aktuellen Kategorie ein, was dafür so heißen muß wie dein DESCRIPTION-Parameter.

Code Auswählen Erweitern

<br style="clear:right;" />Cleart das Floating und sorgt somit dafür, daß das Bild bei zu wenig Text nicht nach unten über den Rand der Box hinausragt.


Alles ungetestet

[supercat]

Sieht zumindest gut aus    Werde es am Wochenende austesten und dann Bescheid geben. Bis dahin wie immer vielen Dank.

[supercat]

So, jetzt habe ich mal getestet. Dein Vorschlag funktioniert, wer hätte anderes erwartet    Er ist insofern eleganter als meine bisherige Vorgehensweise, da nur ein Syntaxelement benutzt werden muss. Der Nachteil ist, dass nur ein Bildformat benutzt werden kann. Auch der Bildname ist problematisch, da er dem Titel der Box entsprechen muss. Bei Namen aus drei Worten wird das schon heikel, zumal ich ungern Dateinamen mit Leerzeichen verwende.

Ein Effekt, den ich bei meiner Variante auch habe, tritt hier ebenfalls auf. Die Definition des Bildbereiches mit max-width wird ignoriert. Es wird die Größe des Bildes genommen, wie sie ist und das Bild bei Überbreite rechts einfach abgeschnitten. Bei meiner Variante ist es so, dass das Bild vom Text zwar umflossen wird, es dafür jedoch rechts aus der Box herausragt.

In beiden Fällen muss man sein Hirn gehörig einschalten, um nicht Salat zu machen. Für den unbedarften Gebrauch einer solchen Box scheinen mir beide Lösungen nicht das Ideal. Wenn ich es richtig durchdrungen habe, werden die Mozilo-Standardbilder via CSS und PHP behandelt. Soll also ein Bild in einer Infobox definiert erscheinen, müsste dafür am besten ein entsprechender PHP-Code hinterlegt sein. Im Grunde nutze ich das ja mit dem Mozilo-Standardbild bei meiner bisherigen Lösung und muss dabei lediglich daran denken, dass Bild in einer bestimmten Größe hochzuladen. Ergo: Wäre es nicht nur allein mit Sicht auf die Infobox interessant, die Mozilo-Bilder mit einem Klick mit zusätzlichen Variablen oder Eigenschaften versehen zu können? D.h. zum Beispiel, die Breite eines Bildes kann über den Editor gesteuert werden, der User muss nicht in der CSS-Datei herumfummeln. Denn die Einfachheit eines CMS definiert sich auch über die Einfachheit seiner Anwendung durch den User  

[azett]

Hm, da fehlt der dritte Parameter für den Bildnamen - wirst du wohl doch schachteln müssen:

Code Auswählen Erweitern

box=<a class="box" href="#">{DESCRIPTION}<span><b>{DESCRIPTION}</b><br />{VALUE}<br style="clear:right;" /></span></a>

boxbildrechts=<img src="./kategorien/{CATEGORY}/dateien/{VALUE}" style="float:right;max-width:50px;">Und dann in der Inhaltsseite:

Code Auswählen Erweitern

[box|[boxbildrechts|ie.gif]Das ist der Text, der das Bild umfließt.] (Konsequent wäre es dann natürlich noch, die CSS-Eigenschaften von boxbildrechts in einer eigenen CSS-Klasse zu definieren und nicht direkt ins Syntaxelement zu packen.)

Die Definition des Bildbereiches mit max-width wird ignoriert. Es wird die Größe des Bildes genommen, wie sie ist und das Bild bei Überbreite rechts einfach abgeschnitten. Bei meiner Variante ist es so, dass das Bild vom Text zwar umflossen wird, es dafür jedoch rechts aus der Box herausragt.

IE oder Firefox?

Für den unbedarften Gebrauch einer solchen Box scheinen mir beide Lösungen nicht das Ideal.

Wenn du es so schachtelst wie oben beschrieben, verhält sichs ja genauso wie normaler Text mit nem [bildrechts|] - nur, daß das Ganze nun noch in der Box steckt. Halt ich für erklärbar

Wäre es nicht nur allein mit Sicht auf die Infobox interessant, die Mozilo-Bilder mit einem Klick mit zusätzlichen Variablen oder Eigenschaften versehen zu können?

Der Ansatz von moziloCMS ist ja, genau das nicht zu tun. Das Design (z.B. die Breite von Bildern) wird allein vom verwendeten Layout festgelegt - was der User im moziloAdmin macht, ist nur noch Inhalt. Das schränkt den User zweifellos ein, macht das System aber so herrlich einfach. Könnte man sämtliche Attribute selbst setzen, wärs fast schon das selbe wie mit reinem HTML. Der Fokus liegt halt auf dem Einsteiger

[supercat]

IE oder Firefox?

IE - Firefox hatte ich nicht probiert. Wobei nach meinen bisherigen Erfahrungen IE 8 und Firefox 3 sich bei der Interpretation von Code nichts mehr nehmen.

Das Design (z.B. die Breite von Bildern) wird allein vom verwendeten Layout festgelegt...

Irrtum: Bilder sind wie der Text Informationen. Wie die Schriftgröße des Textes erfüllen auch Breite und Höhe der Bilder eine - sagen wir mal - lenkende Aufgabe.

Aber lassen wir das. Ihr solltet trotzdem mal über Größendefinitionen von Bildern nachdenken - ähnlich wie bei Überschriften (H1, H2, H3). Für den Anwender verkompliziert sich da nichts. Für den Entwickler...