CSS Problem mit Bildern und dem Platzhalter

[Sir Dan]

Hi

Habe folgendes Problem und denke es hat nix mit Typo sondern mit meinen Css "Künsten" zu tun das ich es nicht lösen kann.

Ruft mal bitte (im Firefox) dies und dann das auf. Das Bild rechts unten ist bei einem über den Footer und beim Anderen passt es sich toll an.

Hab da stundenlang herumexperementiert aber keine Ahnung :/ Der ausgegebene Quelltext is ja echt gleich - oder bin ich schon blind vom vielen Suchen?

Ich hoffe jemand hat einen Denkanstoß für mich
Danke im Vorraus!

[chaderer]

Hi Sir Dan

folgende css-definition für den footer sollte dein Problem lösen:

#footer {clear:both;}

Damit erzwingst du für den Footer auf jeden Fall einen Zeilenumbruch, auch wenn die vorherigen Elemente als float (left oder right) definiert sind.

Gruss Clemens

[etux]

Das Problem hast Du bei allen Inhaltselementen mit Bild. Das zeigt sich nicht überall, nur weil meist der Text-Block höher als das Bild ist.
Ich selbst lösche die mit css-styled-content mitgelieferte CSS-Formatierung immer komplett weg, glaube aber mich daran zu erinnern, dass sie zumindest bei Text/Bild Elementen fehlerhaft war.

Dein Problem hat mit Einschließen (beenden, clearen) von Floats zu tun.
Das „clear: none;“ bei „div.csc-textpic-clear“ wirst Du wohl gesetzt haben. Das muss Du wieder rückgängig machen („clear: both;“). Das alleine reicht aber noch nicht - „div.csc-textpic“ muss auch floaten.

Jetzt hast Du allerdings ein „neues“ Problem. Weder die div-Elementen um die Inhaltselementen („div.csc-default“) noch die rechte Spalte („div#content“) etablieren ein „Block Formatting Context“. Was zu Folge hat, dass das Clear bei „div.csc-textpic-clear“ nicht eingeschränkt wird sondern global wirkt. So wirkt es auch auf die floatende linke Spalte, indem es deren Float beendet und sich direkt unter ihr einordnet.
Entgegen wirken kannst Du indem Du auch die Inhaltselemente („csc-default“) oder/und die Inhaltsspalte („div#content“) floaten lässt (Float ist einer der Eigenschaften, die „Block Formatting Context“ etablieren). Breite, Margins und Border müssen dann natürlich angepasst werden.

Ein Clear bei „div#footer“ beendet dann die Floats.

Es gibt auch andere Lösungswege. Auch welche, bei denen die „div.csc-textpic-clear“ überflüssig werden usw....

[Sir Dan]

Danke für die schnellen Antworten Leute! Das bin ich gar nicht gewöhnt vom Forum.

Hi Sir Dan

folgende css-definition für den footer sollte dein Problem lösen:

Code:
#footer {clear:both;}

Damit erzwingst du für den Footer auf jeden Fall einen Zeilenumbruch, auch wenn die vorherigen Elemente als float (left oder right) definiert sind.

Gruss Clemens

Hey Clemens!

Danke für den Tipp. Wie sich rausstellt stimmt's, dass dieser Eintrag fehlt (mit float und clear kenn ich mich sehr begrenzt aus). Allerdings löst der das Problem nur auf der einen Seite. Bei anderen Seiten gab's dann Probleme im Content Bereich. Aber trotzdem vielen Dank!

Das Problem hast Du bei allen Inhaltselementen mit Bild. Das zeigt sich nicht überall, nur weil meist der Text-Block höher als das Bild ist.
Ich selbst lösche die mit css-styled-content mitgelieferte CSS-Formatierung immer komplett weg, glaube aber mich daran zu erinnern, dass sie zumindest bei Text/Bild Elementen fehlerhaft war.

Aso verstehe.

Wie kann man das den ausschalten? Also ohne das File anzugreifen, sondern per Typo script oder so? Bedeutet dass dann einen Mehraufwand oder ist es einfach ganz normales CSSen wie bei Statischen Seiten ohne Typo?

Dein Problem hat mit Einschließen (beenden, clearen) von Floats zu tun.
Das „clear: none;“ bei „div.csc-textpic-clear“ wirst Du wohl gesetzt haben. Das muss Du wieder rückgängig machen („clear: both;“). Das alleine reicht aber noch nicht - „div.csc-textpic“ muss auch floaten.

Jap das habe ich gesetzt. Wenn ich es rückgängig mache dann passt auch alles, nur ist dann das problem, dass die Contents (wenn man jetzt mehr Contents untereinander hat rießige löcher ins Layout hauen.

Dieses "div.csc-textpic" umschließt laut Firebug den ganzen Text und das Bild. Müsste das nicht einen Float von Typo bekommenw enn ich z.B. dem Bild sage es soll rechts floaten? Bzw welchen Float soll ich ihm geben?

Jetzt hast Du allerdings ein „neues“ Problem. Weder die div-Elementen um die Inhaltselementen („div.csc-default“) noch die rechte Spalte („div#content“) etablieren ein „Block Formatting Context“. Was zu Folge hat, dass das Clear bei „div.csc-textpic-clear“ nicht eingeschränkt wird sondern global wirkt. So wirkt es auch auf die floatende linke Spalte, indem es deren Float beendet und sich direkt unter ihr einordnet.
Entgegen wirken kannst Du indem Du auch die Inhaltselemente („csc-default“) oder/und die Inhaltsspalte („div#content“) floaten lässt (Float ist einer der Eigenschaften, die „Block Formatting Context“ etablieren). Breite, Margins und Border müssen dann natürlich angepasst werden.

Bie Diesem Absatz bin ich nun auf den Fehler gekommen:

Als ich nämlich dem Content wieder Float:right gab (war nur auskommentiert) und clear right weg gegeben habe war der content plötzlich unterhalb der navi (aber nicht links, sondern immer noch rechts). Das War seltsam ich hab alles mehrmals durchgerechnet (die Breiten etc) und nichts gefundne. Jetzt hab ich einfach mal dem Container 1001 statt 1000px gegeben und siehe da :)

Dann hatte ich plötzlich wieder mein ganz altes Problem, dass der Footer extrem viel Abstand zum Content/navi hatte. DAs war wohl mein erstes Layout problem und als ich das fixte hab ich den ganzen Kack gebaut, der mich zu diesem Problem/Thread brachte xD

Gut zufällig bin ich draufgekommen, dass der Footer soweit unten ist weil die Navi nicht so groß is wie ich dachte. Sie war wesentlich höher als (ohne Firebug) sichtbar. Aber es gibt ja bie Firebug jetzt diese Quickinfo Box und Zeigte bei der OffSet Height (einen relativ großen Wert). Das hat mich neugierig gemacht und ich hab nachgeschaut wie groß sie eig. im CSS definiert war. Siehe da "height: 100%". Dann hab ich den Eintrag auskommentiert und jetzt is der Footer halbwegs wo er hingehört :D Sehr cool, tausend dank, du hast mir mehr geholfen als du wohl dachtest :)

Danke für die Hilfe Leute :)

[etux]

Super, das freut mich.

So genau brauchst Du Deine Schritte nicht beschreiben (Du hast ja vorbildlich einen Link zu Deiner Site gepostet). Im Grunde wiederholst Du meinen letzten Beitrag. Wenn das für Dich nicht ersichtlich ist, liegt es daran, dass Du andere „Begriffe“ benutztest. So ist beispielsweise bei Dir das Entstehen von „Abständen zwischen den Elementen“, bei mir - „die globale Wirkung von Clear“. Usw.

Ich habe gerade die Zeit nicht, Dir alle Fragen zu beantworten und alles erklären, wenn Du aber Zeit und Lust hast – hier ein guter Lesestoff:
Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

Sowohl das „div#content“ als auch die „div.csc-default“ kannst Du in jeder Richtung floaten. Such Dir eine aus.

„div.csc-default“ muss Du nicht unbedingt floaten, ein „clear“ ist an der Stelle aber sinnfrei.

Seit CSS 2.1 ist Floaten ohne Breite zwar erlaubt, wenn Du „div.csc-default“ floatest, würde ich denen eine Breite von 100% geben (mehr Stabilität, vor Allem bei den alten IEs).

Hier und auch beim „div#content“ muss Du bei den Breiten-Berechnungen (-Vergaben) das Box-Modell berücksichtigen (s. mein letzter Beitrag – Breite, Margins und Border anpassen) . Im Online-Buch dürfte darüber auch einiges stehen.

Die Default-CSS (css-styled-content) kannst Du mit

plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE >

in Deinem TypoScript-Setup „ausschalten“. Das mach aber Arbeit – dann muss Du alles selbst formatieren (ja, wie bei einer statischen Site).

Später habe ich vielleicht wieder Zeit. Wenn Du noch Fragen hast – melde Dich. Aber zuerst im Buch „nachschlagen“.

[Sir Dan]

Ja das liegt eben daran, wie du schon erkannt hast, dass ich die genauen definitionen was die Dinge tun sollten nicht kenne - bzw. wie sie sich gegenseitig beeinflussen ist das wo ich immer aussteige. Den Link werde ich auf jeden Fall mal speichern, das brauch ich immer wieder.

Als ich meinte ich hab "nachgerechnet" hab ich auch alle möglichen margins und paddingmöglichkeiten mit Firebug gesucht aber nicht's gefunden, was das ganze jetzt aufblasen würde, vlt seh ich aber auch vor lauter Bäumen den Wald nicht, oder so haha.

Danke für das Typo Script, das werd eich vlt mal probieren. Naja gewisse Klassen die Typo benutzt muss man dann eben definieren (oder eben auch nicht, je nach dem)bzw abschalten oder entsteht noch ein anderer Overhead?

Danke auf jeden Fall!