Umsetzung des Holy Grail von Matthew James Taylor als Drupal Theme
Eingetragen von Xeto (209)am 08.12.2010 - 09:33 Uhr in
Ich habe mal versucht den Holy Grail von Matthew James Taylor als Drupal Theme umzusetzen. Hierzu habe ich den HTML- und CSS-Code aus dem Holy Grail Beispiel hergenommen.
Ich habe mich erst mit dem CSS-Code beschäftigt (Wie Rahmen und Hintergründe stylen), was auch problemlos funktionierte. Anschließend habe ich nach einer Vorlage die für Drupal notwendigen Informationen hinzugefügt (info-File, Variablen in page.tpl.php). Das sah erstmal auch noch soweit gut aus, aber dann bin ich auf das Problem aufmerksam geworden...
Ich habe es mit dem Holy Grail und auch testweise zusätzlich mit blogstyle getestet. Jeweils hat die mittlere Spalte (Inhalte, col1) die rechts davon angezeigten Spalten überdeckt. Rahmen und Hintergrundfarben waren korrekt, jedoch läuft der Text über die rechte Spalte weiter und würde auch über diese hinaus gehen (wird dann scheinbar von einem overflow hidden verhindert...). Klassen und IDs im HTML wurden von den Vorlagen beibehalten und sollten somit nicht mit Drupal kollidieiren (col1, col2, col3, colleft, colmid, colmasl,...).
Die Frage ist, was an dem Drupal Standard-CSS kann dieses Problem auslösen?
Nachdem ich gestern nicht mehr hinter das Problem gekommen bin, habe ich extra nochmal die HTML/CSS-Basis des Theme-Entwurfs genommen und längere Texte in die Spalten eingefügt, was problemlos funktionierte. Auslöser müsste somit wirklich Drupal sein... ...
Hat schonmal jemand versucht diese Vorlage des Holy Grail umzusetzen oder hat jemand eine Idee an was es liegen könnte?
Grüße
- Anmelden oder Registrieren um Kommentare zu schreiben
Installiere Dir den Firefox
am 08.12.2010 - 10:42 Uhr
Installiere Dir den Firefox Browser mit dem Plugin Firebug. Damit kannst Du genau sehen, welche CSS-Anweisung das Verhalten bewirkt. In Deinem eigenen CSS-File überschreibst Du dann diese Einstellungen. Du must Dich aber an exakt dieselbe Syntax halten, sonst gibt es Probleme.
Beste Grüße
Werner
Hi Werner, ich kenne Firebug
am 09.12.2010 - 08:09 Uhr
Hi Werner,
ich kenne Firebug und habe es mit dem Developer-Tool unter Chrome auch schonmal angeschaut. Die mittlere Spalte bzw. das DIV scheint erst außerhalb des Bildschirms zu enden, aber ich hab noch nicht verstanden bzw. nachvollziehen können, was das auslöst...
Hast du auch einen Tipp, wie ich das eingrenzen oder feststellen kann?
Es ist auch komisch, dass eine CSS-Anweisung innerhalb des Inhalts (also nicht an den Layout relevanten Elementen selbst) so ein Problem ergibt. Jetzt muss ich halt auch nochmal schauen, wie die Elemente im originalen Beispiel aussehen.
*UPDATE*
*seufz* Fehler war ein iefix.css, welches geladen wurde... Danach ist die Ansicht in Opera, FF und Chrome wieder korrekt. Lediglich der IE (Version 8) macht Probleme wegen der ersten Zeile in page.tpl.php
<?phpprint '<?xml version="1.0" encoding="utf-8"
?>
Rein als HTML (also beginnend mit <?xml) gibt es eine PHP-Fehlermeldung. Nun wird aktuell die rechte Spalte noch zu weit rechts (fast komplett außerhalb des Bildschirmes) angezeigt. Aber der größte Fehler ist zumindest mal weg...
SO, das Problem ist
am 09.12.2010 - 08:13 Uhr
SO, das Problem ist gelöst...
Mal sehen, ob dieses Layout nun den Ansprüchen (Browser unabhängig, stabil usw.) entspricht...