Über dieses Blog...

»Wenn ich einmal alt bin, werde ich nur nörgeln — das wird ein Spaß!«

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.

RSS-Feed RSS 2, Atom

Zur Weiterverarbeitung oder zum Einbauen für Ihre Homepage: CSV, JavaScript

Tag-Cloud

aktion bayern beckstein bka blog bug bundestag captcha cdu csu datenleck datenschutz design deutschland drm e7o.de eu geld gez google grundgesetz hessen internet iso killerspiele kipo kopierschutz lesbarkeit marketing moderne welt ooxml politik redesign schäuble software spam spiel standard stasi statistik tipp urheberrecht urteil vds wahl wahlcomputer wahlkampf werbung zensur überwachung

Durchsuchen

Tipp: AND & && OR | || XOR - ! NOT ( )

Kategorien

Archiv

Einträge im März 2010
MoDiMiDoFrSaSo
1234567
891011121314
15161718192021
22232425262728
293031
Beiträge im Archiv zeigen

CSS: Feste Spaltenbreite für Navigation

Von e7 am 07.02.2010, 19:52 in der Kategorie Zwischendurch... mit den Tags float sauber trennung design layout css html. Kompletten Eintrag zeigen

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&szlig;
    </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.

Design-Evolution

Von e7 am 18.08.2008, 19:19 in der Kategorie e7o.de mit den Tags layout flexibel redesign design e7o.de. Kompletten Eintrag zeigen

Ich hab jetzt mal ein flexibleres und übersichtlicheres Design reingesetzt; allerdings weiß ich im Moment nicht so wirklich, wohin mit der Navigation, wohin mit dem Logo an sich… den Wasser-Style und die Navigationskästchen wollte ich auf jeden Fall behalten. Mal schauen, ich werd mich noch weiter auf Ideensuche begeben (und wer Lust hat, darf ruhig kommentieren und Vorschläge machen).

Alle Nachrichten finden Sie im Archiv.

Jetzt registrieren und mitmachen!