Left wird nicht gefloatet - Main liegt über left

[m-werk]

Hallo Leute,

ich find hier im CSS den Fehler nicht. Mein Layout ist so eingestellt, das ich einen Header, Main, Left und Footer-Bereich habe.
Es wird der Left-Bereich, obwohl mir Firebug #left: float; anzeigt, nicht gefloatet.

#wrapper{height:700px;margin-top:50px;margin-bottom:0;background-color:#500340;}
#container{width:900px;height:auto;}
#left{width:210px;position:absolute;margin:0 20px;background-color:#dccdd9;}
#left .inside{margin:20px;}
#main{width:630px;height:595px;background-color:#ffffff;}
#main .inside{margin:0 15px;}
#footer{clear:both;margin:0;padding-top:10px;}
#footer .inside{text-align:center;font-size:10px;color:#ffffff;}

Der main-Bereich liegt über dem Left. Wo ist denn hier der Fehler? Ich find den nicht.

[planepix]

Hallo m-werk,

die Angabe der Breite für #main wird "zuviel" sein.
Wenn die Werte für die Spalten im Seitenlayout angegeben sind, macht das CSS-Framework von Contao das mit der Hauptspalte "selbst".

[m-werk]

Hallo,

ich habe im Seitenlayout nur die höhe der Kopf- und Fußzeile und die Gesamtbreite von 900px angegeben. Mehr nicht.

Wenn ich dem Main eine geringere (viel geringere) breite angebe, ändert sich zwar die breite, aber es steht weiterhin über dem left. Das hatte ich mir am Anfang auch gedacht. Aber das ist es nicht. Da muss noch etwas sein.

Anbei mal der Link http://www.activepoint.at/web/

[teo]

Wie sieht es aus, wenn du dem #main noch einen margin-left in der breite des #left gibst oder ein paar pixel mehr? Das #main floatet aber nicht zufällig auch, oder?

[m-werk]

Ok, das mit dem margin-left hat funktioniert. Ich dachte, ich brauch es nicht, da ja das system float left gesetzt hat.

[Andreas]

Für meinen Geschmack hast du da viel zu viel dran rum formatiert. Stell das Spalten-Layout im Seitenlayout ein und übernimm die Werte von Contao. Danach keine Breite mehr für #container, #main usw. Breiten nur für #wrapper und #left vergeben. Auch keine Margins mehr für die Layoutbereiche. Nur margin:0 auto; für #wrapper, und margin-left für #main genauso groß wie die Breite von #left. Mach dein Design dann über die .insides.

Grüße

[m-werk]

Das versteh ich nicht ganz.

Im Seitenlayout kann ich nur die breite von left einstellen. Main kann ich dort gar nicht einstellen.

Ich hab dort nur die Möglichkeit, Footer, Header, Left und die Gesamte Breite einzustellen.

Bis auf Left hab ich alles eingestellt.

[Andreas]

Ja, die Breite von dort wird dem #wrapper vergeben. Du hattest aber eine Breite für #main und #container in deinem CSS.

[m-werk]

Ha, jetzt nicht mehr. Ich hab mir deinen Rat zu Herzen genommen und mal das Layout umgestellt.

Zwar muss ich noch kleinigkeiten ändern, aber es funktioniert.

DANKE für die INFO

[Andreas]

Jo, so siehts besser aus. Du hast dem #main .inside ein margin-top gegeben und schiebst damit #left .inside gleichzeitig nach unten, das ist ungewöhnlich und könnte Probleme mit anderen Browsern geben. Reguliere den Abstand zum #header besser direkt mit dem #header. Oder nem Padding im #container.

[He........]

Das #main floatet aber nicht zufällig auch, oder?

das wäre sicher besser. Wenn #left und #main in Verbindung mit einer Breite floaten ist das Layout i.d.R. stabiler.
Warum #left neben Float noch position:absolute hat, erschließt sich mir nicht so recht.

Falls du gleichlange Spalten willst ist dein Weg dem div.inside von #left eine Höhe zu geben keine gute Idee. So bekommst du schwerlich gleichlange Spalten.
Eine bewährte Technik für gleichlange Spalten ist Faux Columns.

edit: okay, das position:absolute ist scheinbar weg, aber die jetzige Lösung kann auch nicht so recht überzeugen. Zumindest im IE7 schaut es nicht so schön aus.
Um Faux Columns wirst du wohl nicht herumkommen.

[m-werk]

Reguliere den Abstand zum #header besser direkt mit dem #header. Oder nem Padding im #container.

Da würde ich ja auch, aber ich möchte ja folgendes Layout realisieren:



Es geht hier um das Logo über dem Menü.

[He........]

Da würde ich ja auch, aber ich möchte ja folgendes Layout realisieren:
Es geht hier um das Logo über dem Menü.

das sollte man auch hinbekommen können.

Das ist ein normales Zweispaltenlayout mit header, zwei Spalten und footer.

1.) Das Logo könnte per img in #left oder div.inside von #left vor das Menü geschrieben werden.
Es wird absolut positioniert. #left hat eh schon pos. relative., sodass sich das Logo bei Positionsangaben daran orientiert. Mit negativem top wird es nach oben geschoben.

2.) Wahrscheinlich ginge es auch ohne pos. absolute für das Logo. Wenn es an erster Stelle in der sidebar steht könnte man es per negativem margin-top nach oben schieben. Probiers einfach mal aus.

3.) Wenn du es im header brauchst, kannst du es dort per pos. absolut und positi. relative für header bei den Positionsangaben nach unten in die sidebar reinschieben.
Dann sollte die sidebar evtl. besser kein posi. relative haben, damit das Logo nicht hinter der sidebar verschwindet.

Oder mit z-index für das Logo + pos. absol. probieren, falls die sidebar unbedingt pos. relative braucht.
Obwohl wofür die sidebar pos. relative brauchen könnte erschließt sich mir nicht so recht.

[Andreas]

Ja, wie ich vermutet hatte, das mit dem margin-top im #main gibt Ärger.

Obwohl ich ein Gegner von absoluten Positionierungen bin, denke ich, dass sich für das Logo wieder position:absolute; anbietet. Dann brauchst du diesen ganzen Margin-Kram da oben gar nicht.

@helmschrot: Das ist das erste was ich höre, dass left und main gefloatet werden und main eine feste Breite bekommt. Erzähl das mal YAML. Ich denke, dass das CSS-Framework browserübergreifend stabil ist.

[He........]

Tach Andreas,

@helmschrot: Das ist das erste was ich höre, dass left und main gefloatet werden und main eine feste Breite bekommt. Erzähl das mal YAML. Ich denke, dass das CSS-Framework browserübergreifend stabil ist.

Die bilden dann einen gemeinsamen Block Formatting Context.
Hab leider nur einen englischspr. Link dazu.
In diesem Buch wird die Thematik noch viel besser erklärt.

Von YAML halte ich persönlich leider überhaupt nichts. Schon das mir jede Menge überflüssiger CSS-Anweisungen für den IE aufs Auge gedrückt werden gefällt mir persönlich überhaupt nicht.
Aber das ist meine persönliche Meinung. Die wird von vielen geteilt und von ebenso vielen nicht geteilt.

edit: beim Logo ginge imho wahrscheinlich auch Punkt 2 meines Vorpostes. Hab ich aber nicht getestet.

[m-werk]

Ich habs nun so gelöst.
Ich hab ein neues Modul "html-Code" erstellt und darin hab ich das Logo eingebunden. Davor hab ich im html-Code noch einen Div-Container "logo" erstellt und im css hab ich bei top -25 und left 10 px gegeben. Position des Logos relative.

So passt es mir. Ich hoffe, ich hab es richtig gemacht. Ich muss nur noch im Logo einen Link einbauen, und auf die Startseite verlinken. Dies mach ich aber später.

[Andreas]

Ja, ist doch super. Wenn du dem Logo jetzt noch das Attribut ALT verpasst, hast du's auch valide. Du kannst das übrigens auch ohne eigenen HTML-Code machen. Stöbere mal in den letzten blogs von contao.org, da steht, wie man so was macht. Ist ganz einfach.

[m-werk]

So, danke für die hilfe und Infos.

Hast du diesen Artikel gemeint: Einen individuellen Layoutbereich anlegen


Das hab ich mir angesehen, aber dafür müsste ich auch die fe_page.tpl ändern. Ich möchte aber dort nicht eingreifen.

Mir passt es eh so. Ich hab auch einen Link und und einen Alt-Text eingebaut.

Danke nochmals

[Andreas]

Ne, ich meinte den hier Daten im Layout einbinden (mit RTE pflegbar). Da ist auch ein kurzer Kommentar von mir drunter. Und den Beitrag auf den dieser aufbaut, oben wird direkt auf den Vorgänger verwiesen.

Gruß

[m-werk]

Hallo Andreas,

danke für die Info. Ich werde mir das nächste Woche mal genauer ansehen.