Zen Layout CSS Problem mit 1, 2 und 3 Spalten
Eingetragen von pepe-perez@drup... (40)am 25.09.2009 - 08:36 Uhr in
Hallo Drupal Freunde
Ich bin gerade Dabei eine Seite neu aufzusetzen und stolpere gerade über ein CSS Problem mit dem Starterkit von Zen.
Und zwar wollte ich die Option haben die Seite mit einer, zwei oder 3 Spalten.
Alles in allem ist das kein Problem, mit den Spalten. Würde ich hierfür nicht einen sich wiederholenden Hintergrund (bei den Spalten) verwenden.
Somit bin ich auf das Problem gestossen, das die Seitenleiste links kürzer ist als der Content, oder umgekehrt.
Ich kann das Problem nicht mit Einfärbungen der Box umgehen (wie es sonst der Fall währe).
Also habe ich mich entschieden, 4 Grafiken der Ganzen Seitenbreite zu machen. (1 Spalte, Navi links, Navi rechts, 3 Spalten).
Nun habe ich die Grafiken eingesetzt. (siehe Code)
/** content **/
#content,
.no-sidebars #content
{
background-image:url(background_none.png);
background-repeat:repeat-y;
float: left;
width: 960px;
margin-left: 0;
margin-right: -960px; /* Negative value of #content's width + left margin. */
padding: 0; /* DO NOT CHANGE. Add padding or margin to #content-inner. */
}
.sidebar-left #content
{
background-image:url(background_left.png);
background-repeat:repeat-y;
width: 760px;
margin-left: 200px; /* The width of #sidebar-left. */
margin-right: -960px; /* Negative value of #content's width + left margin. */
}
.sidebar-right #content
{
background-image:url(background_right.png);
background-repeat:repeat-y;
width: 760px;
margin-left: 0;
margin-right: -760px; /* Negative value of #content's width + left margin. */
}
.two-sidebars #content
{
background-image:url(background_both.png);
background-repeat:repeat-y;
width: 560px;
margin-left: 200px; /* The width of #sidebar-left */
margin-right: -760px; /* Negative value of #content's width + left margin. */
}
#content-inner
{
margin: 0;
padding: 0;
}Soweit schien alles Ok. Das Problem die Grafik befand sich im Content, nicht auf der Sidebar.
Gut, dachte ich dann muss ich die Box sidebar und die Box Content mit zwei separaten Grafiken befüllen (natürlich auch sidebar left)
Ich habe also die Gafiken aufgeteilt und in die oben gezeigten Felder, die eingefügt die dem Content gehören.
Die Sidebars habe ich hier eingetragen.
/** sidebar-left **/
#sidebar-left
{
background-image:url(background_sidebar_left.png);
background-repeat:repeat-y;
float: left;
width: 200px;
margin-left: 0;
margin-right: -200px; /* Negative value of #sidebar-left's width + left margin. */
padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-left-inner. */
}
#sidebar-left-inner
{
margin: 0 20px 0 0;
padding: 0;
}
/** sidebar-right **/
#sidebar-right
{
background-image:url(background_sidebar_right.png);
background-repeat:repeat-y;
float: left;
width: 200px;
margin-left: 760px; /* Width of content + sidebar-left. */
margin-right: -960px; /* Negative value of #sidebar-right's width + left margin. */
padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-right-inner. */
}
#sidebar-right-inner
{
margin: 0 0 0 20px;
padding: 0;
}Dann war zwar alle drin, aber ich habe das Problem erhalten, das entweder die Sidebars oder der Content nicht lang genug sind und nicht bis zum footer gehen.
Hat mir da jemand eine Lösung???
- Anmelden oder Registrieren um Kommentare zu schreiben
Faux Columns
am 25.09.2009 - 10:32 Uhr
Hört sich nach einem üblichen CSS-Problem an, um Spalten auf dieselbe Höhe zu bekommen. Schau dir zum Beispiel mal http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#gleich-lange-spa... an. In der Regel brauchst du eine durchgängige Grafik im body oder im wrapper.
--
textformer mediendesign | Webkrauts
Durchgängige Grafik
am 25.09.2009 - 10:58 Uhr
Ja, das mit der Durchgängigen Grafik habe ich versucht und es geht.
Aber was ist wenn sich das Spalten Layout verändert?
Dann bleibt die Grafik die selbe. Die sollte aber die Spalten anzeigen oder eben nicht.
Anbei... was ist ein wrapper??? (anderes Thema)
"In Search of the Holy Grail" by Matthew Levine
am 25.09.2009 - 11:11 Uhr
Der Vollständigkeit halber hier nochmal der Klassiker zum genannten Problem:
http://www.alistapart.com/articles/holygrail/
Gruß
Frank
Bitte Erledigtes im Betreff des ersten Postings als [gelöst] markieren.
Oh, ja....
am 25.09.2009 - 11:45 Uhr
Das scheint es zu sein!
Aber ist das im nicht schon vorgesehen im Zen Theme?
Der Code sieht dem ähnlich.
Beim Zen-Basic auf D5 konnte ich die Bilder einbinden und voila... es funktionierte.
Zen & Holy Grail
am 25.09.2009 - 15:05 Uhr
Hm, ich hätte eigentlich auch gedacht, dass Zen so funktioniert. Doch das Thema scheint immer noch akut zu sein:
"Possible to implement Holy Grail or other equal-height column layout?"
http://drupal.org/node/289911
Guck doch mal, ob du da was Hilfreiches findest.
Gruß
Frank
Bitte Erledigtes im Betreff des ersten Postings als [gelöst] markieren.
960 grid
am 25.09.2009 - 17:47 Uhr
wenn du gerade erst angefangen hast mit deinem theme und noch nicht sehr weit fortgeschritten bist, würde ich dir empfehlen mal einen blick auf das 960 grid theme zu werfen.
bsp
theme 960 grid
960 ?
am 06.10.2009 - 18:56 Uhr
Sorry das ich mich so spät Melde...
Hatte viel zu tun.
Also der link klingt Interessant.
Ich weiss zwar noch nicht so richtig wie, was wo.. aber ich Arbeite daran.
Das 960 habe ich mir bei einem kleinen Podcast von Mustardseed zu Gemüte geführt.
Aber das baut komplett anders auf. Wie soll ich da mit den colums arbeiten?
Zen Task Force
am 07.10.2009 - 06:58 Uhr
Da könntest du dich auch mal nach aktuellen Entwicklungen oder Tipps umschauen: http://groups.drupal.org/zen-task-force
Gruß
Frank
Bitte Erledigtes im Betreff des ersten Postings als [gelöst] markieren.
echt geil :)
am 07.10.2009 - 21:10 Uhr
Danke bär für den tipp Zen nineSixty (960 Grid system) danach zu suchen ist mir noch nicht eingefallen, wenn es gleich wie das 960 theme und das zen theme arbeitet wäre das echt der oberhammer :) thanks
werde es demnächst mal ausprobieren
bin wohl noch etwas Grün...
am 13.10.2009 - 19:18 Uhr
Sorry wegen der Blöden Frage....
Aber wenn ich die Holy Grail geschichte einbauen will, muss ich die page.tpl.php editiern und die divs eintragen, Richtig?
Danke
am 27.10.2009 - 15:36 Uhr
Danke für die klare Antwort!