CSS Holy Grail
Eingetragen von md (3717)am 28.03.2006 - 18:28 Uhr in
Gerade gefunden: http://www.alistapart.com/articles/holygrail
Dort wird ein 3-spaltiges, flexibles CSS Layout beschrieben, welches mit minimalem Markup auskommt.
<div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>Durch entsprechende Style Sheets sind damit Layouts möglich, bei denen alle 3 Spalten unabhängig von der Länge 100% der Höhe des Browsers einnehmen.
Ja, es gibt auch andere. Diese arbeiten aber mit Extra-Wrappern oder anderen Tricks (Hintergrundbildern, Fault-Columns u.ä.).
Braucht man hierbei alles nicht. Optimal für Drupal-Themes.
meinolf
-----------------
www.go-with-us.de
- Anmelden oder Registrieren um Kommentare zu schreiben
http://www.alistapart.com/art
am 29.03.2006 - 10:58 Uhr
have a fluid center with fixed width sidebars
trotzdem eine super Sache, werd das mal mit em statt px Angaben ausprobieren
MfG Micha
- work in progress mit Langmi.de
Hm?
am 29.03.2006 - 17:51 Uhr
Was wolltest du mir damit sagen?
-----------------
www.go-with-us.de
wollte nur drauf hinweisen,
am 30.03.2006 - 08:41 Uhr
wollte nur drauf hinweisen, dass es nicht ganz der holy-grail ist, da man eben mit fixed sidebars arbeiten muss - der heilige CSS Layout Gral wäre für mich eines dass sich komplett dem Inhalt anpassen kann und trotzdem das anvisierte Design einhält
MfG Micha
- work in progress mit Langmi.de
Fixed sidebars
am 30.03.2006 - 10:22 Uhr
Ah, ok. Das hat aber nichts mit dem grundsätzlichen Aufbau dieses Layouts bzw. der beschriebenen Vorgehensweise zu tun.
Wie du schon sagtest, kann man das ja mit em für die Sidebars regeln.
Gilt für alle Layouts und Vorgehensweisen. Wenn du hier im Drupalcenter die Schriftart vergrösserst fliegt die linke Sidebar ja auch irgendwann auseinander.
meinolf
-----------------
www.go-with-us.de
Re: Fixed sidebars
am 30.03.2006 - 12:06 Uhr
Wenn du hier im Drupalcenter die Schriftart vergrösserst fliegt die linke Sidebar ja auch irgendwann auseinander.
Das sollte eigentlich ein overflow: hidden in Block-Elementen verhindern.
Minimal
am 30.03.2006 - 17:56 Uhr
Vielleicht ist durch meinen Beitrag nicht ganz klar geworden wo hier die Vorteile (verglichen mit anderen Vorlagen für Drupal Themes) liegen.
Hier das CSS:
body {
min-width: 630px; /* 2x (LC fullwidth +
CC padding) + RC fullwidth */
}
#header, #footer {
background-color:#ababab;
}
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px; /* CC padding */
width: 100%;
}
#left {
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
right: 240px; /* LC fullwidth + CC padding */
margin-left: -100%;
background-color:#efefef;
}
#right {
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -190px; /* RC fullwidth + CC padding */
background-color:#efefef;
}
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}
#footer {
position: relative;
background-color:#ababab;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}
/* Drupal Settings */
#header .block h2, .top .block h2 {
display:none;
}
#header li.leaf, .wide li.collapsed {
display:inline;
}
Fertig!
meinolf
-----------------
www.go-with-us.de
Das Gerüst habe ich mir mal
am 09.12.2009 - 22:09 Uhr
Das Gerüst habe ich mir mal als Basis genommen... Werde mal sehen was ich daraus machen kann ;)
Grüße
Basis-Theme und Theme/ CSS-Reset
am 14.12.2009 - 21:15 Uhr
Ich habe nun mit der hier gebotenen Basis ein Theme begonnen (Neuling mit Drupal, erste Gehversuche mit Templates/ Themes), was zu beginn auch überraschend gut klappte.
Basierend auf dem hier gelieferten html- und css-Code wurde die page.tpl.php nach den eigenen Wünschen aufgebaut. Dann wurde anhand eines Beispiels block.tpl.php und node.tpl.php erstellt. Alles wurde soweit richtig angezeigt... beinahe *g*
Was mir erst nicht klar war, dass sich node.tpl.php auf die Mitgliederliste, Forum, das Profil und den Adminbereich gar nicht auswirkt. Ok, ich denke hier könnte man ein spezielles Template erstellen...
Der "Schock" kam erst als ich mir mal einen Beispielkommentar anschauen wollte. Das Template comment.tpl.php war noch nicht angepasst, weshalb ich eine unformatierte Seite wie auch im Adminbereich oder den Profilen erwartet hätte. NICHT erwartet habe ich aber, dass beim Anzeigen dieser Seite das komplette Layout zerschossen ist.
Der rechte Block wird nun links unten angezeigt. Der linke Block ist komplett verschwunden (alternativ nur die unterste Zeile des Navigation-Blocks sichtbar). Der mittlere Bereich ist natürlich ungestylt, da das Template noch nicht angepasst ist.
Mir ist nicht ganz klar, was mir da die Optik zerschießt... Eigentlich müsste es sich ja um CSS-Code aus den Default-Styles handeln, welcher sich hier auswirkt.
Gibt es eine Möglichkeit, wie man diese Einflüsse ausschließen kann? Oder wie sollte man vorgehen, um entsprechende Einflüsse zu vermeiden (Nutzung bzw. Vermeidung von gewissen id oder class)?
Ok, wie man Einflüsse
am 14.12.2009 - 21:37 Uhr
Ok, wie man Einflüsse beseitigt habe ich nun gefunden. Dazu muss man einfach in der .info-Datei das Stylesheet system.css hinzufügen, welches dann die Drupal eigene Datei ersetzt.
Trotzdem besteht weiterhin das Problem. Lässt wohl darauf schließen, dass das Problem wohl eher die verwendeten Vorlagen für die Dateien node.tpl.php, block.tpl.php und comment.tpl.php oder ein eigener Fehler im CSS-Code die Ursache der Darstellungsprobleme sind.
Zu dem Problem kommt es bei
-> Ansicht eines Kommentars
-> Anzeigen einer Node (direkt per Klick auf den Titel-Link)
-> Verfassen eines neuen Kommentars.
Von da her würde ich auf die entsprechende Datei (comment.tpl.php) schließen. Hab da aber bisher das Problem noch nicht gefunden.
Für meine Zwecke wäre es wohl besser ein flexibles Grundlayout zu verwenden, in welchem ich nur noch die Spaltenbreite und die Farben und Hintergrundbilder anpassen muss *seufz*