CSS Höhe nicht mehr anpassbar mit 2 Spaltigem Layout
Eingetragen von Anonymous (0)am 21.11.2006 - 10:09 Uhr in
Hallo
Habe ein Problem, bin ein Template für Drupal 5 am entwickeln.
Standardmässig wird der Content im Body DIV geladen.
<div id="body">
<?php if ($sidebar_right) { ?><?php print $sidebar_right ?><?php } ?>
<?php if ($sidebar_left) { ?><?php print $sidebar_left ?><?php } ?>
<?php if ($tabs) { ?><div class="tabs"><?php print $tabs ?></div><?php } ?>
<?php if ($title) { ?><?php print $title ?><?php } ?>
<?php print $help ?>
<?php print $messages ?>
<?php print $content; ?>
</div>Das CSS dazu sieht folgendermassen aus.
#body {
/*background-color:olive;*/
margin:15px;
padding-bottom:15px;
margin-bottom:0px;
}Dann wird die Seite automatisch so hoch wie der Content.
Jetzt möchte ich aber innerhalb dieses DIV 2 Spalten haben, daher habe ich folgende Anpassungen gemacht:
<div id="body">
<div class="width25 floatLeft">
<?php if ($sidebar_right) { ?><?php print $sidebar_right ?><?php } ?>
<?php if ($sidebar_left) { ?><?php print $sidebar_left ?><?php } ?>
</div>
<div class="width75 floatRight">
<?php if ($tabs) { ?><div class="tabs"><?php print $tabs ?></div><?php } ?>
<?php if ($title) { ?><?php print $title ?><?php } ?>
<?php print $help ?>
<?php print $messages ?>
<?php print $content; ?>
</div>
</div>Diesen Klassen (width75 floatRight width25 floatLeft) habe ich folgende Eigenschaften gegeben:
.width25 {
width: 24.7%;
}
.width75 {
width: 74%;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}Es werden automatisch die zwei Spalten angezeigt, nur wird mein Background nicht mehr automatisch in der Höhe angepasst, was vorher geklappt hat.
Hier seht Ihr die Seite wies falsch aussieht:
Link
Hat mir jemand einen Tipp?
- Anmelden oder Registrieren um Kommentare zu schreiben
Wird nicht mehr im Forum angezeigt
am 21.11.2006 - 11:19 Uhr
Warum wird mein Beitrag im Forum nicht mehr aufgelistet?
Background an Höhe anpassen
am 21.11.2006 - 12:28 Uhr
Wie und wo hast du denn den Background definiert.
Grundsätzlich gilt: eine "Spalte" (Container) definiert in CSS wird immer nur so hoch wie sein Inhalt plus margins und paddings.
md - drupalcenter
--
http://mdwp.de
Floats und so...
am 21.11.2006 - 12:29 Uhr
Servus!
Nun, wenn du in einen Container DIV zwei floated DIVs steckst, und den Hintergrund im Container festmachst, sieht das solange genauso aus, bis du einen weiteren DIV "hinter" den Container stellst, der gerendert wird. Ein beliebtes Konstrukt ist z.B. der Footer, der die Seite "nach unten" abschließt.
Eine andere Variante ist der Verzicht auf floats. Dann definierst du die "Hauptspalte" (rechts) mit einem margin-left, das die linke Spalte mit ihrer definierten width noch reinpasst (und ein Steg bleibt).
Diese Themen sind in beliebigen CSS Foren zu Tode diskutiert worden, such mal nach "Holy Grail" mit Google und schau dir die verschiedenen Lösunngswege an -- CSS ist wie der Weg nach Rom, von dem es bekanntlich viele gibt :)
Viel Spaß,
Norbert
Background an Höhe anpassen
am 21.11.2006 - 12:59 Uhr
Vielen Dank für die ersten Tipps :-)
Ok, das mit dem Float hab ich jetzt nach 3 Anläufen begriffen.
Habs jetzt mit margin-left gemacht. Der Hintergrund kommt wieder korrekt.
Nur wie bringe ich die Boxen jetzt nebeneinander und nicht das die rechte erst unter der linken beginnt?
Link
UPDATE:
Juhu, habs geschafft:
.box_links {
float: left;
width: 190px;
border-right-style:dotted;
padding-right:10px;
}
.box_rechts {
margin-left: 200px;
padding-left:10px;
}
Einziges Problem wieder...die linke Spalte ist länger wie die rechte. Kann nicht die längere die Massgebliche sein?
Wer bestimmt die Höhe?
am 22.11.2006 - 00:08 Uhr
Servus!
Aaaalso: Um das mit der "gleichen Höhe" unter allen Umständen einigermaßen schmerzfrei zu lösen, verwende ich einen "wrapper". Das ist ein DIV, innerhalb dessen sich die linke und die rechte Spalte befinden. Im Wrapper wird dann der "allgemeine" Hintergrund festgemacht, was aber immer das Problem aufwirft, dass die kürzere Spalte unter Umständen wie "aufgesetzt" erscheint. Die Lösungen, wo beide Spalten (in unterschiedlichen Farben) über die volle Höhe gehen, gibt's unter "Holy Grail" zu finden -- im Kern geht's so, dass die Höhe der Spalten quasi auf unendlich (20000px) gesetzt wird, und dann ein margin-bottom mit -20001px eingeführt wird. Das funktioniert dann wieder bei manchen Browsern anders, also ist das eher die fortgeschrittene Übung für alle, die viel Zeit haben.
Wenn du's ganz simpel haben willst: nimm einfach eine Tabelle als "Grundraster" für das Layout -- das ist zwar nicht über-sexy, funktioniert aber erwiesenermaßen und praktisch allen Umständen besser als das ganze gefloate. Die Tabellen-Lösung macht dann wieder Probleme bei alternativen Ausgabegeräten, aber dafür stimmt's auf praktisch allen Schirmen ohne Klimmzug -- immerhin läuft die Drupal.Org mit diesem Konzept und praktisch alle Standard-Themes in 4.7.x sind so "grob-strukturiert".
Weiterhin viel Spaß,
Norbert
Keine Tabellen
am 22.11.2006 - 13:20 Uhr
Drupal.org benutzt keine Tabellen. Wir hier auch nicht.
Allerdings gibts bei beiden auch keine "Spalten" mit einem Hintergrund.
Das erspart tatsächlich einige an Arbeit. Je nach Layout kann man auch den Hintergrund des
<body>Tags mit einer Grafik (vertikal) kacheln.md - drupalcenter
--
http://mdwp.de
Tabellen als Lösung für's
am 22.11.2006 - 14:25 Uhr
Tabellen als Lösung für's Layout sind _definitiv_ nicht mehr notwendig. Es gibt genügend CSS/DIV-basiert Lösungen, die alle Layouts ermöglichen. Wer CSSZenGarden [1] kennt, kann dem nicht mehr wiedersprechen und auch Layout Gala [2] ist ein schönes Beispiel. Meine bevorzugte Technik findet Ihr allerdings unter [3], ein Projekt welches allerdings noch im Alpha-Stadium ist.
Der Holy Grail, wie auf A List Apart präsentiert [4], ist dabei _nicht_ das beste Beispiel für ein Tabellenloses Layout, da es derzeit nicht Browserübergreifend funktioniert, wer den Beitrag aufmerksam gelesen hat, kennt auch die Bugs [5] und weiss das. Übrigens ist auch die für Drupal implementierte Version [6] da keine Ausnahme.
Übrigens ist eines der beliebtesten Durpal-Themes Friends Electric [7] ebenfalls nicht tabellenbasiert.
vg
[1] http://www.csszengarden.com/
[2] http://blog.html.it/layoutgala/
[3] http://lean.erdfisch.de/
[4] http://alistapart.com/articles/holygrail
[5] http://www.positioniseverything.net/articles/onetruelayout/appendix/equa...
[6] http://drupal.org/project/holygrail
[7] http://drupal.org/project/friendselectric
--
sanduhrs - drupalcenter
--------------------------------
http://erdfisch.de
Notwendig ist sowieso nix
am 22.11.2006 - 22:58 Uhr
Servus!
Was ist schon notwendig? Dein lean theme gefällt mir gut, aber bei allem Beifall auch hier das Problem, dass die Grafik in der Mitte bei zu engem Fenster in die rechte Spalte "schiebt". Klar, kann mit overflow erledigt werden, aber wenn sich jemand (wie der Original-Poster) schon mit zwei floats schwer tut, sehe ich eine Tabelle als durchaus akzeptable Alternative. Zumal die Tabelle später recht einfach gegen stabile DIVs ersetzt werden kann...
Norbert
Quote:auch hier das Problem,
am 22.11.2006 - 23:09 Uhr
auch hier das Problem, dass die Grafik in der Mitte bei zu engem Fenster in die rechte Spalte "schiebt"
Danke für die Kritik, bereits erledigt.
Wie gesagt das ist noch am Anfang ;)
Die Tabellen-contra-DIVs-Geschichte ist einfach eine Frage der Philosophie, solange die Browser CSS nicht vollständig unterstützen, wird das wohl auch so bleiben.
vg
--
sanduhrs - drupalcenter
--------------------------------
http://erdfisch.de
Tabellen-freies Layout
am 23.11.2006 - 00:20 Uhr
Servus.
Zum Lean: Sieht ja gleich besser aus :)
Ansonsten halte ich das Thema eigentlich kaum für eine philosophische Grundsatzdiskussion, eher als "Räuberleiter" für Einsteiger. Ich bin seit nun drei Jahren tabellenlos unterwegs, aber es war ein harter Umstieg, nicht zuletzt wegen der diversen Browser. Irgendwie habe ich mich inzwischen zu einer pragmatischen Sicht durchgerungen: wenn die absehbaren Nachteile von Tabellen als Strukturelement nicht überwiegen, sehe ich deren Einsatz als Krücke eher gelassen. Vor allem eben für Anfänger, und wenn nun schon drupal.org selbst keine Tabellen verwendet, das Standard-Theme von 4.7.x ist auf Tabellen basierend und geht trotzdem...
Irgendwer hat in einem Blog ganz nett gepostet (sinngemäß): "...und das die Seiten von ... mit Tabellen strukturiert sind, hat den Betreiber auch nicht davon abgehalten, ein paar Millionen mit ihnen zu verdienen..." Der Zweck heiligt die Mittel, und als wir '96 die komplexesten Seiten mit Tabellen aufgebaut haben, ging das auch. CSS ist ganz klar vorzuziehen, aber nicht um den Preis, dass ein Amateur aus Gram über die Feinheiten von CSS und Browser die Freude am Seitenbasteln verliert.
Norbert