CSS Float problem
| Autor | Nachricht |
|---|---|
|
Verfasst am: 13. 01. 2010 [13:41]
|
|
|
andreass
Themenersteller
Dabei seit: 06.10.2007
Beiträge: 31
|
Hallo, Ich habe in Typo3 ein Template mit CSS erzeugt. Links ist ein Menücontainer rechts der Inhalt. Der Menücontainer wird gefloatet (float:left). Wenn ich nun im Inhalt ein Textpic Content Objekt einfüge und das Bild Unten links einfüge so zeigt es mir dieses Textpic erst ab dem Punkt vertikal an, wo der Menücontainer vorbei ist. Dieses Textpic objekt wird von Typo3 mit csc-texpic-left umgeben und dieses wird auch link gefloatet aber auch gleich wieder gecleart. Es scheint nun so dass dieses clear mein float für den Menücontainer beendet. Hier könnt ihr eine reduzierte Seite sehen www.sibbus.com/float_clear.htm und hier den Code HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Anfahrt</title> <meta name="generator" content="TYPO3 4.3 CMS" /> <style type="text/css"> #links{ width:11em; float:left; min-height:30em; position:relative; border: 2px solid #d0d1d0; background: #e4ece3; } .seitentitel { background-color:green; height: 40px; } #footer { clear:left; background-color:red; width: 100%; } .csc-textpic-text {background-color:yellow} .csc-textpic-left { display:inline; margin-right:10px; float:left; clear:left} </style> </head> <body> <div id="komplett"> <div id="links"> </div> <div id="inhalt"> <div id="c47" class="csc-default"> <div class="seitentitel"> <span>Anfahrt</span></div> <div class="csc-textpic-left"> <div class="csc-textpic-text"> <p class="text">IrgendeinText</p> </div> <div class="csc-textpic-imagewrap"> <img src="Anfahrt.png" width="400" height="439" alt="" /></div> </div> <div class="csc-textpic-clear"> </div> </div> </div> <div id="footer"> Footer </div> </div> </body> </html> Die gelbe Zeile mit "Irgendein Text" sollte eigentlich unter der grünen mit "Anfahrt" stehen. Habe ich einen Fehler gemacht, oder macht da Typo3 was falsch. Danke im voraus Andreas |
 |
|
|
Verfasst am: 13. 01. 2010 [17:43]
|
|
|
Natascha
Dabei seit: 03.09.2009
Beiträge: 12
|
Hallo Andreas! Um auszuschließen, ob Typo3 oder dein Code dafür verantwortlich sind, würde ich dein Template erstmal ohne Typo3 erzeugen. Wenn dann die Darstellung richtig ist, weißt du das in Typo3 etwas schief läuft. Kannst ja auch dann zusätzlich noch ein paar Dummy Texte einbauen. Viele Grüße Natascha  -----------*No Risk NO Fun*-----------
-------------*Carpe Diem*------------- |
|
|
|
Verfasst am: 13. 01. 2010 [20:43]
|
|
|
andreass
Themenersteller
Dabei seit: 06.10.2007
Beiträge: 31
|
Hallo Natascha, wenn ich das clear aus dem .csc-textpic-left entferne klappt alles wunderbar. Das float aus diesem .csc-texpic-left wird ja in csc-textpic-clear "gecleart". Kann ich typo3 dazu bekommen, dass es dieses clear:left nicht in das standard css stylesheet schreibt? Andreas |
|
|
|
Verfasst am: 13. 01. 2010 [20:58]
|
|
|
etux
Dabei seit: 14.02.2009
Beiträge: 223
|
Dein Problem ist die globale Wirkung von clear bei div.csc-textpic-left. Deswegen global, weil es auf Floats außerhalb von div#inhalt wirkt. Es gibt einige Lösungen. Die wohl einfachste wäre, div#inhalt auch zu floaten. Du willst aber, dass div#inhalt die restliche Breite einnimmt. Muss Du also ein zusätzliches Element um div#inhalt legen und ihm ein padding-left geben. In Deinem Fall etwas mehr als 11em, denn die 2x2px vom Border werden dazu addiert. Dann kannst Du div#inhalt floaten und ihm eine width: 100% geben. So etabliert div#inhalt ein BFC (Block Formatting Context) und begrenzt die Wirkung von clear. Natürlich könntest Du auch einfach clear bei div.csc-textpic-left raus nehmen. Dann musstest Du aber immer darauf achten, dass kein clear in der Inhalt-Spalte vorkommt. EDIT: Ups, etwas zu spät... EDIT 2: Es geht auch ohne zusätzliches Element. div#komplett bekommt den padding-left. Dann ziehst Du div#links mit float: left und negativen margin-left uber den padding von div#komplett. div#inhalt wie gehabt: float: left und Breite in Prozent (z.B. 100%). [Dieser Beitrag wurde 2mal bearbeitet, zuletzt am 13.01.2010 um 21:09.] Grüße: Emil
----------------------------------------------------------------------------- http://emil-webdesign.net/; CSS-Layouts: Gleich hohe Spalten, Inhalt zuerst. TYPO3-Templates. |
 |
|
|
Verfasst am: 15. 01. 2010 [17:04]
|
|
|
andreass
Themenersteller
Dabei seit: 06.10.2007
Beiträge: 31
|
Hallo Emil, Danke für deine Antwort. Deine Erste Variante funktioniert sehr gut. Man muß nur aus dem padding-left ein margin-left machen (Sonst haut es mit der Hintegrundfarbe nicht hin). Ich habe ohnehin noch ein DIV um den div#inhalt, deswegen fast kein Aufwand. Die zweite Variante werde ich demnächst ausprobieren. Gruß Andreas |
|
|