Über dieses Blog...
Tipps und Tricks, aber auch Kritik - breit gefächert von Technik bis hin zum Design, manchmal (oder immer öfter) auch Politik.
Feeds
Interessant gefunden? Mitlesen? Vollständige Beiträge per Feed.
Zur Weiterverarbeitung oder zum Einbauen für Ihre Homepage: CSV, JavaScript
Tag-Cloud
Durchsuchen
Kategorien
Archiv
| Mo | Di | Mi | Do | Fr | Sa | So |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
CSS: Feste Spaltenbreite für Navigation
Von e7 am 07.02.2010, 19:52 in Zwischendurch...
Tags: float sauber trennung design layout css html
Aus der Kategorie „zu wenig Befehle in CSS und vor allem doofer IE“.
Stark vereinfachtes HTML:
<html>
<body>
<div id="content">
Lorem Ipsum und lauter so Zeugs…
</div>
<ul id="navigation">
<li><a href="1.htm">Link 1</a></li>
<li><a href="2.htm">Zweiter</a></li>
<li><a href="3.htm">Am Schluss</a></li>
</ul>
<div id="footer">Copyright oder so</div>
</body>
</html>
Problemstellung: Die Navigation soll links neben dem Inhalt stehen, der Footer drunter — egal, was länger ist: der Inhalt oder eben die Navigation. Weitere Bedingung ist, dass der Inhalt keine Breitenangabe bekommt, also weder 75% oder 300px oder sonst was. right und andere CSS-Angaben sind tabu, es soll ja zumindest ansatzweise im IE > 6 dargestellt werden. Und natürlich kein überflüssiger HTML-Code in Form von <div> um die Sache klatschen, die Navigation soll im HTML auf jeden Fall nach dem Inhalt bleiben etc.
Auf der Suche nach einer Lösung bin ich auch mal wieder über YAML gestolpert — ich nutz das Zeugs nicht, ich bastel normalerweise selbst. Dann weiß ich wenigstens, was ich wo hab und weiß auch, dass nicht viel überflüssiges dabei ist. Aber zum Anregungen holen… warum nicht?
Dummerweise hat Yaml zwar was in die Richtung, aber man muss — damit die Lösung funktioniert — immer eine Breite für den Inhalt angeben. Also entweder 75% — was die Navigation zu 25% verdonnert — oder ein Pixelwert, was für den Inhalt gerade überhaupt nicht geht. Aber Navigation mit festem Pixelwert, daneben den Inhalt von festen Pixelwert bis zum rechten Rand geht nicht. position:absolute klappt nicht, wenn die Navigation (oder der Inhalt, je nach Optimierung) kürzer ist — auch keine Lösung also.
Gut, dass ich im Hinterkopf noch die Wikipedia habe, die genau so ein Design umsetzt, das ich mir vorstelle. Aus den vielen CSS-Dateien und HTML-Code mal abstrahiert, was die denn da so machen:
<div style="width: 100%; float: right; margin-left: -150px;">
<div style="margin-left: 200px;">
Mitte
</div>
</div>
<div style="width: 150px;">
links</div>
<div id="footer“ style="clear: both;">unten</div>
Klappt eigentlich wie's sollte — allerdings ist da oben nun wieder ein unschönes, aus HTML-Sicht betrachtet überflüssiges <div>, was ich eigentlich vermeiden wollte.
Sieht fast so aus, als gäbe es da keine wirklich gute Lösung, oder?
UPDATE Der Fall anders herum ist auch gerade aufgetreten: Ich benötige rechts eine Sidebar, die eine feste Breite hat, links soll sich der Inhalt auf dem restlichen Platz verteilen. Dabei soll die Sidebar nach dem Inhalt im HTML-Code auftauchen; leider lässt sich auch hier ein Extra-Element nicht vermeiden:
<div style="margin-right: 230px;">
<div style="float: left; width: 100%;">
Links: Inhalt, beliebig groß
</div>
<div style="float: right; margin-right: -220px; width: 200px;">
Rechts: Sidebar, feste Breite
</div>
</div>
Auch das funktioniert erstaunlicherweise wieder mit dem IE7 ohne spezielle Anpassungen.
Interessant gefunden?
Dann steht dir auch ein Feed (mit vollständigen Beiträgen!) zur Verfügung: 
RSS 2.0
Bisher noch keine Trackbacks eingegangen
© 2001 - 2010 by e7o.de; powered by e7cms. XHTML Strict für gute Browser.