Hallo,
dank Eurer Hilfe habe ich bereits ein dickes Problem lösen können. Eines bleibt aber nach wie vor bestehen:
Ich versuche schon seit längerem die typo3-internen Klassen direkt anzusteuern, um das Verhalten der von typo3 generierten Elemente anzusteuern.
Beispiel: Um die Bilder auf meiner Seite etwas edler darzustellen, habe ich Ihnen einen Rand gegeben mit
content img {
border: 1px solid;
padding: 3px;
}
Mir ist der Abstand der einzelnen Bilder aber zu eng wenn die Bilder im oder direkt am Text angelegt werden. Siehe URL: http://labor.familie-passmann.de/lebensart/ausfluege.html
Aus meiner HTML-Vorlage habe ich bereits ein margin rausgenommen, weil sich dann sogar Bild und Text überlappt haben. Da der Text allgemein als "bodytext" angelegt wird kann ich diesen nicht ansteuern ohne auch den normalen Text zu verändern.
Habe es schon mit allen im Quelltext zu findenden Klassen versucht (csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol...)
Vielen Dank
Gruß Jörg
Hallo Jörg, was genau möchtest du anders haben?
Soll auf der genannten Beispielseite mehr Abstand von den Bildern zum Text rein?
Prinzipiell ist es kein Problem die CSS-Klassen anzusteuern.
Ich verwende normalerweise die Firefox-Extension Firebug, rechte Maustaste "Element untersuchen", um herauszufinden, wie die Klasse heisst und wo sie herkommt. Dort kannst du auch direkt testweise Änderungen vornehmen um zu sehen welche Klasse du überschreiben musst.
In Deinem Fall bin ich spontan auch etwas ratlos, denn Deine Bilder sind mit einer <DL> eingebunden. Bei mir sind das immer <div>'s, das finde ich persönlich leichter.
Ich schreibe dann in mein Stylessheet Dinge wie z.B.
div.csc-textpic.csc-textpic-intext-right.csc-textpic-border img {
border: 1px solid #7786AC;
}
wichtig sind die Punkte zwischen den Klassen, statt den Leerzeichen wie im Quelltext.
Martin
Hallo Martin,
vielen Dank!
Ok das muss ich mal probieren. Ja, ich möchte das der Text etwas nach rechts rutscht. Normal geht das ja mit padding.
Ich nutze auch den Firebug um die Klasse zu finden, hatte mir aber hier nicht geholfen. Ich suche ja nach wie vor nach einer Art Übersetzungstabelle, weil ich nicht genau weiß was typo3 hier macht.
Vorher hatte ich die Bilder ohne Rahmen aber da war mir der Abstand auch schon zu gering. Vielleicht hat das schon einer gelöst oder hat den entscheidenden Tipp?
Viele Grüße
Jörg
Die CSS-Klassen sind hier nicht das Problem. Schon alleine mit
img {….}
werden die Bilder angesprochen.
Die Bilder liegen bei Dir im mehreren verschachtelten Elementen, die alle die Breite von 150px haben.
Das Bild alleine ist aber schon 150px breit. Dazu muss Du aber noch Border und Padding addieren. Und die 8 Pixel, die zu viel sind, laufen über den Rand der umgebenden Elementen über. Dehnen es also nicht aus und entsprechend wird auch der Text nicht nach rechts gedrückt.
Ganz im Gegenteil – der Abstand zwischen Bild und Text wird dadurch verringert.
Notiz: ältere IEs verhalten sich hier anders. Die umgebende Elementen werden so lange in die Breite gedehnt, bis das Bild samt Padding und Border rein passt.
JPassmann schrieb... ich möchte das der Text etwas nach rechts rutscht. Normal geht das ja mit padding ...
Wenn Du hier mit padding-left für das den Text enthaltende Element meinst – ja das würde gehen.
Aber:
Das Element, was die Bilder enthält floatet. Das Element mit dem Text nicht. D.h. Der Text weicht den Float aus, das Element selbst nicht. Es liegt unter dem floatenden Element – die linken oberen Ecken beider Elementen liegen also auf einander.
Wenn Du jetzt eine Lücke von beispielsweise 10px zwischen dem Bild und dem Text haben möchtest, müsstest Du ein padding-left von 168px definieren.
10px Abstand + Breite des Bildes + zwei mal Padding des Bildes + zwei mal Border des Bildes.
Genau so bei Margin.
Das ist so in Ordnung, wenn man nicht will, dass der Text um das Bild fließt, wenn er länger, als das Bild hoch ist, wird.
Sonst wird ein margin-right dem floatenden Element gegeben.
Oder dem Bild selbst. Dann müsste aber das umgebende Element ohne Breiten-Angabe floaten.
Hi,
das ist richtig was Du erklärst und normalerweise ist das ja auch kein Problem das entsprechend zu steuern aber:
Ich definiere im Template ja nur die Inhaltsspalte allgemein, d.h. wie sehen die Bilder, Text, Überschriften etc. aus.
Typo3 setzt ja die Klassen und das CSS selber, d.h. ich habe erstmal keinen Einfluss auf das Aussehen. Beispiel: Wenn ich die Bildunterschrift anders angezeigt haben möchte, schreibe ich für die Klasse .csc-textpic-caption entsprechend ins CSS rein was ich haben möchte.
Bei dem genannten Beispiel mit dem Bild im Text funktioniert das eben nicht. Als Redakteur sage ich ja nur das Bild soll 150px breit sein, wähle dann die Option Bild im Text links (oder Bild rechts etc.) und typo3 schreibt die Klassen entsprechend rein.
Der Text ist laut Quelltext in der Klasse "bodytext p" eingebunden. Das bedeutet wenn ich hier irgendeine Veränderung vornehme wirkt sich das auch auf normalen Text ohne Bilder aus.
Beispiel: Ich schreibe ein padding-left von 168px rein für bodytext, dann sieht das in der Anzeige für Bilder links im Text super aus. Andere Texte auf Seiten, die keine Bilder haben werden aber auch mit 168px verschoben angezeigt und die Option Bilder rechts im Text müsste dann ja umgekehrt padding-right erhalten.
Das muss doch irgendwie angesteuert werden können?
JPassmann schriebDas muss doch irgendwie angesteuert werden können?
Klar. Das sollte aber eher schon bei der Erstellung des Site-Templates berücksichtigt werden.
Ob Du als Redakteur Einfluss darauf hast, weiß ich nicht.
Du schreibst aber im ersten Beitrag, dass Du eine Regel für die Bilder in der CSS-Datei geschrieben hast. Regele dann alles über CSS (Bildbreite, Border ...) und gib den Bildern (im BE) einfach keine Breiten. So bekommen auch die umschließenden Elementen keine Breiten und schrumpfen auf die Breite deren Kind-Elementen, da sie ja floaten (shrink-to-fit).
Nur am Rande: Die CSS-Formatierung insgesamt ist nicht gerade optimal. 🙂
Hmm,
also mir ging es eigentlich nur darum den Bildern einfach einen Rand mit zu geben. Lasse ich diese Anweisung weg empfinde ich den typo3-hauseigenen Abstand aber immer noch zu klein.
Im Backend gibt es doch vom System her die Möglichkeit zu bestimmen wie die Bilder im Text angeordnet werden und das muss doch irgendwie auch zu steuern sein.
Kannst Du mir Tipps geben, was nicht optimal ist? Bin dankbar für jede Kritik, gerne auch per PM!
Viele Grüße
Jörg
JPassmann schrieb
Hmm,
also mir ging es eigentlich nur darum den Bildern einfach einen Rand mit zu geben.
Das kannst Du machen. Ein „margin-right“ gibst Du dem äußersten Element, was die Bilder umschließt. Ich glaube, Du hattest da schon ein Margin von 10px mit „Important“.
Wieso es bei dem Bild selbst weniger Sinn macht, habe ich im ersten Beitrag geschrieben.
JPassmann schriebIm Backend gibt es doch vom System her die Möglichkeit zu bestimmen wie die Bilder im Text angeordnet werden und das muss doch irgendwie auch zu steuern sein.
Das „steuerst“ Du ja schon. Du gibst dem Bild im Backend (und nicht per CSS) eine Breite von 150px. TYPO3 setzt die Breiten-Angabe aber nicht nur bei dem Bild selbst, sondern gibt auch den umschließenden Elementen die gleiche Breite.
Bis jetzt alles schön und gut.
Dann gibst Du (per CSS) dem Bild Padding und Border. Das sind zusätzliche 8px für die Breite des Bildes.
Das Bild passt nicht mehr in dem umschließenden Element hin ein. Kann es aber auch nicht passend ausdehnen, da das Element eine feste Breite hat.
Du kannst dem Bild jetzt so viel Margin, Border oder Padding geben wie Du willst, der Text wird nicht weiter geschoben.
Optisch würde das sogar so aussehen, als ob sich der Abstand zum Text sogar verringert. Denn das Bild wächst über das Elternelement hinaus und nähert sich dem Text. Der Text fließt aber um das floatende (äußere) Element und nicht um das Bild. Kann also auch vom Bild nicht beeinflusst werden.
Es sei denn, die umschließende Elemente haben keine Breiten-Angaben. Dann werden sie vom Margin (von Padding und Border genau so) des Bildes breiter gemacht. Und der Text wird verschoben.
JPassmann schriebKannst Du mir Tipps geben, was nicht optimal ist?
Könnte ich schon, aber es ist eine ganze Menge und wie Du siehst, bin ich nicht gerade gut im Erklären. Wenn ich schon beim einfachen Problem mit dem Bild alles zwei mal schreiben muss, will ich es gar nicht wissen, wie es beim Seiten-Layout wird.
Vielleicht erst mal nur zwei Sachen.
Höhen-Angaben müssen weg – zumindest bei Elementen, die Text enthalten.
Du muss richtig floaten und Floats einschließen (beenden, clearen).
Dass Du es jetzt falsch machst, wirst Du spätestens dann sehen, wenn Du die Höhen-Angaben entfernst.
EDIT:
Habe gerade festgestellt, dass ich Dir schon mal Paar Tipps gegeben habe:
#102637
Jetzt weiß ich auch warum mir Dein Layout so bekannt vor kam.
Ok,
ich sehe schon, ich glaube ich werde mich viel intensiver mit CSS beschäftigen müssen. Insbesondere beim Thema floating.
Übrigens liegt es nicht unbedingt beim Erklärenden. Ich denke ich habe bei diesem Thema einfach ein Brett vor dem Kopf...
Viele Grüße Jörg
JPassmann schriebÜbrigens liegt es nicht unbedingt beim Erklärenden.
Lieb von Dir, aber beispielsweise sind meine Tipps auch im anderen Thread nicht unbedingt sofort als solche zu erkennen …
JPassmann schrieb
ich sehe schon, ich glaube ich werde mich viel intensiver mit CSS beschäftigen müssen. Insbesondere beim Thema floating.
Zum Thema CSS empfehle ich oft das Online-Buch hier
http://little-boxes.de/little-boxes-teil1-online.html
auch wenn ich es nicht gelesen habe. Aber keine Sorge, Peter Müller kenne ich aus CSS-Foren. Auch dort werden seine Bücher hoch gelobt und empfohlen. Vor allem wegen der einfachen Art und Weise wie er den Stoff auch für Einsteiger erklärt.
Danke Dir. Das Buch habe ich bereits aber merke halt das ich ein paar Themen in der Praxis noch nicht gut anwenden kann, insbesondere wenn ich keinen direkten Einfluss auf die Ausgabe wie bei typo3 habe.
Mühsam ernährt sich das Eichhörnchen...