Ü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.

Momentaner Fokus: Android/Java, CalDAV

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 android bayern beckstein bka blog bug bundestag captcha cdu css csu datenschutz design deutschland drm e7o.de eu geld gericht gez google grundgesetz hessen internet java killerspiele kipo kopierschutz lesbarkeit moderne welt politik redesign schäuble software spam spd spiel standard stasi statistik tipp urheberrecht urteil vds wahl wahlkampf werbung zensur überwachung

Durchsuchen

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

Kategorien

Archiv

Einträge im September 2010
MoDiMiDoFrSaSo
12345
6789101112
13141516171819
20212223242526
27282930
Beiträge im Archiv zeigen

CSS: Marginalien

Von e7 am 13.05.2010, 21:53 in der Kategorie Code-Snippets mit den Tags beispiel marginalien css. Kompletten Eintrag zeigen

Kurz notiert: So macht man Marginalien mittels CSS, natürlich sauber als Klasse und so in eine externe Datei ausgelagert:

<p style="padding-right: 200px; border: 1px solid red;">
    Fliestext Fliestext Fliestext Fliestext Fliestext Fliestext
    Fliestext Fliestext Fliestext Fliestext Fliestext Fliestext
    Kurz vorher, jetzt kommt eine Marginalie
    <span style="float: right; clear: right; margin-right: -200px; width: 180px; border: 1px solid green;">(Anmerkung zum Text)</span>
    und weiter gehts im Fliestext
    Fliestext Fliestext Fliestext Fliestext Fliestext
    Kurz vorher, jetzt kommt eine Marginalie
    <span style="float: right; clear: right; margin-right: -200px; width: 180px; border: 1px solid green;">(Anmerkung zum Text)</span>
    und weiter gehts im Fliestext
    Fliestext Fliestext Fliestext Fliestext Fliestext
</p>

clear: both; ist notwendig, damit sich die Marginalien nicht überlappen, die Rahmen sind nur Optik zum Debuggen :) Semantisch ist diese Lösung natürlich nicht immer sinnvoll, deshalb immer nur Texte in (diese) Marginalien setzen, die auch sonst in Klammern stehen könnten oder so…

CSS: Feste Spaltenbreite für Navigation

Von e7 am 07.02.2010, 19:52 in der Kategorie Code-Snippets 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.

Webdesign: die Einheit em

Von e7 am 24.09.2009, 23:03 in der Kategorie Kopfschüttelnd... mit den Tags webdesign flexibel em css. Kompletten Eintrag zeigen

Gefunden beim Onlinebanking (id und class bitte ignorieren):

<div id="column_207246_0“ class="portal-layout-column portal-layout-column-OneColumn-0“ style="float:none; width:61.4375em;">

Vielleicht sollte denen mal jemand sagen, dass hier vielleicht doch eher Pixel angebracht wären. Dass 61.4375em auf jedem Rechner das tut, was es soll, kann ich mir dann doch nicht so recht vorstellen. Oder jemand anderer Meinung?

Gecko-Engine mit Textschatten...

Von e7 am 02.09.2008, 16:14 in der Kategorie Gut zu wissen... mit den Tags schatten gecko seamonkey html css. Kompletten Eintrag zeigen

Gerade bin ich ins Stutzen gekommen: Verschwommener Text, so ein Schatten hinter der Überschrift? In der Regel wird der betreffende Text einfach zweimal ins HTML gesetzt, und dann ist nix verschwommen… Scheinbar beherrscht die Gecko-Engine inzwischen die CSS-Eigenschaft text-shadow und keiner hats mitbekommen… Getestet mit SeaMonkey vom 13. August. FF 3.0.1 kanns noch nicht. Auf jeden Fall merken und beobachten :)

Alle Nachrichten finden Sie im Archiv.

Jetzt registrieren und mitmachen!