GWB: Brauche Hilfe bei DIVs, CSS & Co
Mal am Rande: Ich habe ein kleines Problem mit dem Design dieses Blogs dass ich auf Gedeih und Verderb einfach nicht selbst lösen kann, daher setze ich auf eure Hilfe:
Ich möchte dass das Haupt-Div, also dass mit dem eigentlich Inhalt dieses Blogs, vor den beiden Sidebars geladen wird. Bisher werden erst die Sidebars und dann der eigentliche Inhalt geladen – was zu ärgerlichen Verzögerungen, wegen einigen Widgets, führen kann. Folgende Grafiken sollen das ganze ein wenig verdeutlichen:
Aufbau bisher: (Ladereihenfolge)
Aufbau gewünscht: (Ladereihenfolge)
Ich habe es mit vielen verschiedenen Möglichkeiten versucht, aber bin immer wieder an Details gescheitert. Entweder werden die Sidebars plötzlich unterhalb des Contents angezeigt oder die Breiten können nicht so angepasst werden wie ich das gerne möchte.
Es müssen „nur“ folgende Eigenschaften erfüllt sein:
– Der Main-Content muss vor den Sidebars geladen werden, die Reihenfolge der Sidebars ist egal
– Die beiden Sidebars sollen je 190 Pixel breit sein
– das Main-DIV soll einen Abstand von 200 Pixeln vom linken und rechten Rand haben
– das Main-DIV soll sich dementsprechend dynamisch an die Breite des Browsers anpassen
– natürlich soll das mit jedem aktuellen Browser funktionieren, wenn möglich ohne Browser-Weiche
– _wenn möglich_, ohne position:absolute
Auch die Designs von YAML, 2-1-3 & 3-1-2 haben mir leider nicht weiter geholfen, da diese nicht Pixelgenau anpassbar sind.
Bin ich zu dumm, oder sind meine Vorstellungen einfach nicht möglich?
GoogleWatchBlog bei Google News abonnieren | GoogleWatchBlog-Newsletter
Teile diesen Artikel:
Hmm, ich hoffe, ich kriege das jetzt hin so ganz ohne Skizze und ausladende Armbewegungen. 🙂
3 aufeinanderfolgende div-Container in der Reihenfolge 1 (Mitte), 2 (links) und 3 (rechts).
1 und 2 werden dann zusammen nochmal von einem weiteren div-Container umgeben. Also so:
div id=“content“
div id=“wrapper“
div id=“mitte“
Blafasel
/div
div id=“links“ class=“randspalte“
Blafasel
/div
/div
div id=“rechts“ class=“randspalte“
Blafasel
/div
div class=“clear“
/div
/div
(Die spitzen Klammern habe ich mal weggelassen, ich denke, sowas wäre in einem Kommentar nicht möglich.)
Nun kommt der interessante Teil:
#content {
padding: 0 200px 0 200px;
padding-bottom: 0.1px; /* bügelt Mozilla-Bug aus */
}
.wrapper {
float: left;
width: 100%;
position: relative;
z-index: 0;
}
#mitte {
float: right;
width: 100%;
}
#links {
float: left;
margin-left: -200px; /* schafft Platz, um die linke Spalte links von der mittleren zu positionieren. */
z-index: 10; /* Bügelt IE Mac- und Opera 6-Bug aus */
padding-right: 10px; /* Abstand zum Border */
}
#rechts {
float: right;
margin-right: -200px; /* schafft Platz, um die rechte Spalte rechts von der mittleren zu positionieren. */
z-index: 11; /* Bügelt IE Mac- und Opera 6-Bug aus */
padding-left: 10px;
}
.randspalte {
position: relative;
width: 190px; /* Breite der äußeren Spalten */
overflow: hidden;
}
.clear {
clear: both;
}
So, das sollte funktionieren, bei meinem Test hat es jedenfalls geklappt. 🙂
Hier mal alles zusammen:
http://oui-ja.de/temp/gwb.html
Wäre nicht ein Überdenken des ganzen Designs sinnvoller? Sonderlich schön sind die elend langen Listen links und rechts eh nicht.
Folgender Link hat mir bei diesem Problem geholfen. Der müsste die Anforderungen sogar noch übertreffen:
http://www.alistapart.com/articles/holygrail
Und mach doch für die mittlere Spalte eine CSS „min-width:“-Angabe (Minimale Breite, z.B. 200px)
So könnte man z.B. auf einem Palm die News besser lesen, weil dann nicht mehr nur ein Wort pro Zeile erscheint… Danke! 😉
Ich finde das Design ehrlichgesagt auch nicht gerade schön.
Immernoch sehr unaufgeräumt…
Müssen die langen Listen links und rechts wirklich so unübersichtlich und vollgestopft sein?
An alle denen das Design nicht gefällt:
Na dann setzt euch doch mal hin und bastelt doch ein besseres 😀
Ich bin dazu weder zeitlich noch von meinen Designkünsten her in der Lage…
Zu den Codes und Links:
Danke erstmal, ich werde es morgen alles ausprobieren.
Genau….die News sind das wichtige hier. Ehrlich gesagt habe ich hier noch nie wirklich aufs Design geachtet. Gucke immer nach interessanten News, und das reicht mir. Könnte sich ja ansonsten wirklich einer von den Profis hinsetzen und dem Jens ein Design machen. Gruß Robert
So, also ich habs jetzt ausprobiert.
In der Theorie funktioniert das alles wunderbar, aber in der Praxis überhaupt nicht. Sobald diese DIV-Struktur in den Blog eingebaut wird verschieben sich die Sidebars komplett nach unten unter den eigentlichen Content.
Mit viel Tricks und Kniffen habe ich die Sidebars dann wieder dahin bekommen wo sie hingehören, aber der Footer der Seite fängt dafür schon mitten unter der jeweils kürzesten Sidebar an…
Fazit:
Ich gebe erst einmal auf und mache mir Gedanken über ein komplettes neues Layout.
Füge dem Footer-div folgende CSS-Eigenschaft hinzu „clear:both“.
Dann sollte es eigentlich klappen, dass der Footer auch wirklich zuunterst erscheint. (Der Footer sollte in der Dokumentstruktur aber auch wirklich zuletzt stehen)
jeripeier:
Eben nicht, „clear:both“ habe ich natürlich gesetzt.
Probiere doch mal folgendes aus:
Nehme obiges Beispiel, verlängere die linke Sidebar so dass sie länger ist als die rechte und baue dann einen Footer mit „clear:both“ ein. Der Footer wird direkt unter dem Ende der rechten Sidebar anfangen – warum weiß ich aber auch nicht…
Habe es nun selbst probiert und glaube, eine Lösung gefunden zu haben.
Hier befindet sich eine Test-Datei mit fast dem gesamten Blog-Layout zur Demonstration: http://www.peier-mm.ch/gwb/test.php
Hier noch das Gerüst ohne Inhalt:
http://www.peier-mm.ch/gwb/code.php
Grössenteils ähnelt die Version dem obigen Code, habe noch kleinere Änderungen vorgenommen. (Ob es wirklich daran liegt, kann ich aber nicht sagen…)
Das ganze könnte man wahrscheinlich noch etwas eleganter lösen (vielleicht mit weniger divs? oder sinnvolleren css-klassen…), aber es funktioniert soweit.
Ich habe noch sämtliche relativen Positionierungs-Hinweise herausgenommen, diese müssten vielleicht wegen Opera 6 und IE Mac wieder herein. (Kenne die Macken nicht…)
(Mit den aktuellen Versionen von Firefox, Opera und IE klappt soweit alles!)
Ich hoffe, es bringt dich einwenig weiter…
Also ich hätte jetzt gesagt mach ein dreispaltiges Tabellenlayout (link&rechts jew. width=“190px“ sowie cellpadding=“10″) das kreiert ein wenig mehr Dateigröße aber hat den Vorteil dass normalerweise die dynamische Anpassung bei allen Browsern reibungslos verläuft und als eigene Zeile kann unten /oben ein Logo / Footer eigebaut werden.
Hinsichtlich Ladereihenfolge folgender Tip:
Eine Idee wäre ein Script zu schreiben welche die Frames der Sidebars erst lädt wenn die Main-Frame ganz geladen ist – das lässt sich z.B. über ein Script was man über body onload=“[script]„ startet realisieren. Das Script an sich müsste bloss die [Frame-ID].location.href Eigenschaft der Sidebar-Frames ändern.
Zu „überladenen“ Sidebars folgende Idee:
Wie wärs einfach die Boxes der einzelnen Themen standardmäßig einzuklappen/auf die ersten 2 Einträge zu reduzieren? Dann kann jeder für sich auswählen was er sehen will. Muss man über ein onClick Script machen was die css-Eigenschaft visibility setzt.
Hoffe das könnte helden,
Hauke
Danke für die Tipps Hauke, aber ein Tabellenlayout kommt garnicht in Frage.
Was die Sidebars angeht, da habe ich mir schon was überlegt, weiß aber noch nicht so ganz genau wie ich das umsetzen werde…