Sidebars mit floaten will nicht funktionieren [gelöst]
Eingetragen von the-sandman (36)am 13.09.2009 - 04:07 Uhr in
Hallo,
es ist mir zwar fast schon ein wenig peinlich danach zu fragen, aber ich stoße immer wieder auf das Problem und sitze und auch schon wieder seit 2 Tagen daran.
Ich habe ein Theme für Drupal 6 erstellt und möchte in dieses nun noch die gewohnten Sidebars einfügen. Jedoch bekomm ich es irgendwie nicht so recht hin, dass die Sidebars un den Rand des Themes platziert werden und der restliche Content drum herum floatet.
Am besten lässt sich das Problem jedoch direkt zeigen:
http://www.roomstars.de/drupal/
zugehörige CSS: http://www.roomstars.de/drupal/themes/virtuneticsstudio2/css/layout.css
(und http://www.roomstars.de/drupal/themes/virtuneticsstudio2/css/content.css , jedoch nicht weiter relevant)
Die rot hinterlegte Right-Sidebar sollte normalerweise an dem rechten Rand plaziert sein und der grün hinterlegte Content mit float:left; auf die linke Seite daneben gedrängt werden. Ich kann jedoch nicht genau herausfinden, warum die Sidebar links ausgerichtet wird und vor allen dem Content überlagert...
Ich hatte kurzzeitig auch schon einmal eine Lösung, bei der beide Berecihe an dem richtigen Platz waren, aber komischerweise der Contentbereich an bestimmten Elementen wie Fieldsets oder Bilder umgebrochen (also gecleart) und unter der Sidebar angeordnet wurde.
Bevor ich noch weitere 2-3 Tage daran verzweifle und ich vor lauter Bäumen den Wald nicht sehe, hoffe ich, dass mir eventuell jemand hier weiterhelfen kann?!
Vielen Dank schon einmal für die Mühen!
LG the-sandman
- Anmelden oder Registrieren um Kommentare zu schreiben
Ist wohl eher ein CSS
am 13.09.2009 - 10:28 Uhr
Ist wohl eher ein CSS Problem. Da kann man immer wieder nur sagen ... Firefox mit Firebug nutzen und schon kann man Änderungen live mitverfolgen!
Ansonsten gibts bei CSS4YOU auch einige nette Tutorials fürs spaltenmäßige "floaten" ... folgender Link sollte dir vielleicht helfen können: http://www.css4you.de/wslayout1/index.html
---------------------------------------------------------------------------
NEU! Drupalseiten vorstellen, bewerten und kommentieren - Jetzt eintragen!
CSS ja, aber Drupal CSS?!
am 13.09.2009 - 12:23 Uhr
Bin mir gar nicht so sicher, ob es wirklich ein reines CSS-Problem ist. Ich habe soeben einmal den Zustand hergestellt, wo alle Bereiche an Ihrem Platz sind. Komischerweise bricht dann der Contentbereich an bestimmten stellen immer ab und wird erst unter der Sidebar fortgesetzt. Um dies anschaulich zu machen, ist dieser Link ganz nützlich:
http://www.roomstars.de/drupal/node/9
(einfach mal das obere Filedset "Exercises" zuklappen)
Da ist zu sehen, dass wenn das Fieldset zugeklappt ist, der reine Content erst auf der Höhe der unteren Kante der Sidebar fortgesetzt wird.
Es scheint mir fast so, als gibt es irgend eine Drupal-CSS-Klasse die ich bisher übersehen habe, die diesen Effekt auslöst, weil ich an meinem Theme sonst keine Fehler finden kann.
LG the-sandman
OK, ich schein, dank dem
am 13.09.2009 - 18:01 Uhr
OK, ich schein, dank dem Hinweis von Thoor auf Firefox mit Firebug (benutzte bisher meißt Opera mit der Fehlerkonsole) hab ich wahrscheinlich den Fehler gefunden. Drupal erstellt im Content-Bereich eigene float-Elemente und auch eigene clear-Elemente. Und an dem clear-Element wird dann der komplette Content gecleart und dann unter der Sidebar angezeigt.
Nun kenn ich eventuell die Ursache des Fehler, weiß aber leider noch nicht wie ich diesen beheben kann es es sich um Core-Eigenschaften handelt, deren Änderung ebenfalls schlechte Auswirkungen auf die Darstellung hätten.
Wie machen das denn andere Themes?
LG the-sandman
Hier im Handbuch und auch
am 13.09.2009 - 18:27 Uhr
Hier im Handbuch und auch auf Drupal.org kann man sich in die Grundlagen des "Theming" bei Drupal einlesen. Ich habe auch mal ein kleines Tutorial auf meiner Spielwiese geschrieben, dass vielleicht ein paar Fragen beantworten kann - http://www.thoor.de/drupal-6/eigenes-css-bei-drupal-6-richtig-einsetzen
---------------------------------------------------------------------------
NEU! Drupalseiten vorstellen, bewerten und kommentieren - Jetzt eintragen!
Ich habe bereits am Anfang
am 13.09.2009 - 18:42 Uhr
Ich habe bereits am Anfang meiner Arbeit sehr viele Handbücher auf Drupal.org durchgelesen, unter anderem auch den "Theming Guide" und "Developing for Drupal" und habe auch bereits einige Themes und Module für Drupal geschrieben, bin also prinzipiell kein Anfänger mehr. Leider hatte ich mich bisher immer um die Sidebars drum herumgemogelt indem ich meist absolute Themes erstellt habe und bei einige relativ positionierten Themes hatte ich auch noch nicht derartige Probleme.
Ich werde einfach mal noch schauen was sich machen lässt und sollte ich eine brauchbare Lösung finden, diese hier posten. Natürlich kann mir auch sonst jeder noch hilfreiche Tips geben, für die ich immer dankbar bin.
LG the-sandman
vorübergehende Lösung
am 14.09.2009 - 12:02 Uhr
Ich habe nun erst einmal das beschriebene Problem beheben können. Die Lösung ist zwar nicht elegant und wirklich zufrieden bin ich damit auch nicht, aber es scheint bisher keinerlei Nachteile zu geben.
Ich habe einfach folgende CSS-Zeilen hinzugefügt:
/* Themehacking */.node-form .standard
{
clear:none;
}
.profile
{
clear:none;
}
.picture, .comment .submitted
{
clear:none;
}
Wie gesagt, nicht schön aber funktioniert.
LG the-sandman
dauerhaft gelöst
am 17.09.2009 - 03:02 Uhr
Da mir die vorübergehende Lösung nicht gefallen hatte, hab ich mich nun ein paar weitere Tage mit der Problematik beschäftigt. Nachdem ich schon eine Lösung in JavaScript umgesetzt hatte, ist mir doch der Aufbau des Zen-Themes sehr aufgefallen.
Sollte jemand noch einmal das Problem haben, will ich einmal kurz und knapp die Lösung meines Problems aufschreiben:
-> Der Content-Bereich sollte floaten und eine Breite von 100% und ebenfalls ein Margin in Richtung der Sidebar von -100% besitzen. Darin ist ein inneres Element mit einem Padding in Richtung der Sidebar von der Breite der Sidebar enthalten.
div#content{
position:relative;
width:100%;
float:left;
margin-right:-100%;
padding:0px;
}
div#content_inner
{
padding:51px 300px 60px 67px;
}
-> Die Sidebar sollte ebenfalls floaten und eine feste Breite und auch ein Margin in Richtung des Contents von -[Breite] besitzen.
div#sidebar_right{
position:relative;
width:300px;
float:right;
margin-left:-300px;
padding:0px;
}
div#sidebar_right_inner
{
padding:51px 0px 279px 0px;
}
Als kleines Beispiel schaut einfach einmal in das Zen-Theme rein.
LG the-sandman