Einsatz von clear:both; / Probleme
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bringen
code
design
element
folgen
gleichen effekt
grafik
http
inhalt
layout
linie
nachteil
objekt
problem
punkt
pures design
semantik
stichwort
tabelle
url
-
Moin,
ich habe ein Layout, das ungefähr so aussieht:
<div id="main"> <div id="content"> <?php require('includes/message.php'); include('layout/content.php'); ?> </div> <div id="sidebar"> <?php include('layout/sidebar.php'); ?> </div> <div class="breaker"> </div> </div>
Wie man sehen kann sind sidebar und content in dem Element main eingebettet.
Jetzt will ich, das beide geleich lang sind, also das die Sidebar nicht nach der hälft vom content auf hört.
Deswegen gibt es das Element breaker.
Seine Eigenschaft ist
breaker {clear:both;}
Doch funktionieren tut es nicht. Woran könnte das liegen?
Danke
Beitrag zuletzt geändert: 25.6.2009 8:21:34 von newwarrior -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Divs können nicht automatisch in ihrer Höhe angeglichen werden. Die haben immer nur die Größe die man ihnen auf den Weg gibt oder aber die Höhe die sie zur Darstellung des jeweiligen Inhaltes benötigen.
Du musst da schon herumtricksen. Zb. mit Hilfstabellen oder weiteren DIVs.
Wie sieht denn das grafische Layout aus? -
Damit ziehst du nur #main auf die gleiche Höhe wie das größere innen liegende Div. Beide inneren Divs gleich hoch zu machen geht nicht, außer mit einer festen Höhe. Achja, außerdem #breaker und nicht breaker.
-
trueweb schrieb:
Damit ziehst du nur #main auf die gleiche Höhe wie das größere innen liegende Div. Beide inneren Divs gleich hoch zu machen geht nicht, außer mit einer festen Höhe. Achja, außerdem #breaker und nicht breaker.
Ok.
Dann weiß ich erstmal bescheid, muss ich es irgendwie anderes löschen.
Geht es, wenn ich beide inneren auf :
height:100%;
setze? -
1.) Das #breaker-div ist doof, da es keine Inhalt hat und somit eigentlich keine Semantik aufweist, also ein pures Design-Objekt ist. Besser wäre:
#main {overflow:hidden;}
Das funktioniert prima und hat den gleichen Effekt.
2.) Dieses Problem mit der gleichen Höhe wurde hier vor kurzem schon mal angesprochen. Aus dem Beitrag folgen zwei mögliche Einsätze, die beide ihre Vor- und Nachteile haben!
a) Stichwort: Faux Column. ryanblack hat das erklärt. Es ist die Lösung, die mit Grafikeinsatz zurecht kommt. Grafiken sind aber nicht immer angebracht!
b) Stichwort: CSS und Tabelle. Mit CSS sollte es möglich sein, dass ein div sich wie eine Tabelle verhält. IE hat natürlich damit Probleme. Dies ist allerdings semantisch richtig, da der Tabelleneinsatz zwar das gleiche bewirkt, allerdings sind Tabellen dafür nicht gemacht. -
werktags schrieb:
1.) Das #breaker-div ist doof, da es keine Inhalt hat und somit eigentlich keine Semantik aufweist, also ein pures Design-Objekt ist. Besser wäre:
#main {overflow:hidden;}
Das funktioniert prima und hat den gleichen Effekt.
2.) Dieses Problem mit der gleichen Höhe wurde hier vor kurzem schon mal angesprochen. Aus dem Beitrag folgen zwei mögliche Einsätze, die beide ihre Vor- und Nachteile haben!
a) Stichwort: Faux Column. ryanblack hat das erklärt. Es ist die Lösung, die mit Grafikeinsatz zurecht kommt. Grafiken sind aber nicht immer angebracht!
b) Stichwort: CSS und Tabelle. Mit CSS sollte es möglich sein, dass ein div sich wie eine Tabelle verhält. IE hat natürlich damit Probleme. Dies ist allerdings semantisch richtig, da der Tabelleneinsatz zwar das gleiche bewirkt, allerdings sind Tabellen dafür nicht gemacht.
Ok, dann nehme ich das Breaker Element raus und passe main so an wie du das meintest.
Zu deinen anderen Sachen.
Problem ist, ich will dass das Design in allen Browsern richtig angezeigt wird.
Also auch der IE, da er von min. 50 % der Besucher ja auch noch genutzt wird! -
Wie du hier siehst, wird das "table-" von IE bis 7 nicht unterstützt. Was mit IE8 ist, wird leider nicht angezeigt.
Dementsprechend solltest du die Faux-Column-Variante benutzen. Allerdings weiß ich auch nicht, wie das Design aussieht, aber das dürfte nicht allzu schwer werden! -
Hallo,
ich hab' mal ein bisschen gegoogled... Hier wird die Faux-Column-Variante beschrieben.
http://fwpf-webdesign.de/files/upload/03_2_gleichlange_spalten_fix.htm
Ansonsten könntest Du das Layout auch mit absoluten Werten machen. So in der Art...
http://kleinereisbaer666.lima-city.de/testpage/index.html
http://kleinereisbaer666.lima-city.de/testpage/main.css
Beitrag zuletzt geändert: 25.6.2009 14:41:12 von staymyfriend -
Also, wie man es am einfachsten macht:
Du möchtest ja sicherlich nur eine Abgrenzung zwischen Sidebar und Content haben, die durchgängig ist, beispielweise eine Linie. Ob die Sidebar dann auch real so groß ist, ist nicht von belang.
Du gibst #main also ein Hintergrundbild mit dieser Linie an der richtigen Position (Eigentlich ist die Linie in dem Fall nur ein Punkt auf einem transparentem Streifen mit Breite des #mains, den Rest erledigt ein repeat-y). Da #main so groß ist wie #content, wenn content größer ist und so groß ist wie #sidebar, wenn sidebar größer ist, ist die Linie immer vollständig durchgezogen. -
Du musst einen Punkt vor breaker setzen, damit eine Klasse gemeint ist und nicht ein Element.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
