Negative Margin-Werte

oder

Lessons learnt from rebooting, Part 2:

Über den Einsatz von negativen Margin-Werten kann man streiten. Ich finde es jedenalls nicht verwerflich sondern sogar sehr praktisch, wenn man z.B. einzelne Elemente aus der umschließenden Layoutbox herausragen lassen möchte. Auf meiner neuen Seite habe ich an diversen Stellen negative Margin-Angaben benutzt, z.B. für die Bilder der Arbeitsproben. Die grauen Ränder sollten aus dem Satzspiegel herausragen, so dass die eigentliche Bildkante bündig am Text ausgerichtet ist. Kein Problem: Einfach den Bildern links einen negativen Margin-Wert von der Stärke des Rands zuweisen, fertig.

img {
    border: 6px solid #E5E6E9;
    margin-left: -6px;
}

Safari rendert richtig

In Safari sieht das auch ganz prima aus. Leider aber nicht in unserem Lieblingsbrowser, dem Internet Explorer. Dort wird alles, was nach links übersteht, einfach abgeschnitten:

Der IE rendert falsch

Erster Lösungsansatz bei einem solchen Problem: Man muss dem überstehenden Element “Layout” geben. In diesem speziellen Fall ist dies allerdings bereits der Fall, da es sich um ein img Element handelt. Will man zum Beispiel einem div oder einem h1 Element “Layout” geben, ist die einfachste Lösung, eine Breitenangabe (width) für das Element festzulegen. (Weitere Möglichkeiten findet ihr hier). Damit das ganze auch im IE6 funktioniert ist zusätzlich noch die Angabe position:relative nötig. In meinem Fall also:

img {
    border: 6px solid #E5E6E9;
    margin-left: -6px;
    position: relative;
}

Für ein Element, dass nicht von Hause aus “Layout” hat:

#herausragend {
    margin-left: -10px;
    width: 100px;
    position: relative;
}

Zum Weiterlesen:

Veröffentlicht am 09.05.2006 um 07:30 Uhr
2 Kommentare

Bilder als Aufzählungspunkte

oder auch

Lessons learnt from rebooting, Part 1:

Einen kleinen CSS-Trick möchte ich gerne an euch weitergeben. Bei meinem Relaunch habe ich Bilder als Bullet-Points benutzt, was man ja sehr schön per CSS machen kann:

ul {
    list-style-image: url(bullet-galore.gif);
}

Leider hatte ich bei dieser Lösung das Problem, dass a) das Bild in manchen Browsern vertikal zum Text stets etwas nach oben versetzt dargestellt wurde und b) die Höhe des Bildes die Höhe der Listenpunkte beeinflusst hat.

Verrutschte Aufzählungszeichen

Zu einer schicken Lösung bin ich dank Dan Cederholms Buch Web Standards Solutions gekommen, der für Bilder als Bullet-Points einfach das background-Attribut benutzt. So kann man das Bild genau ausrichten und hat keines der beiden oben beschriebenen Probleme:

ul {
    list-style: none;
}

li {
    background: url(bullet-galore.gif) 0 50% no-repeat;
    padding-left: 15px;
}

Richtig positionierte Aufzählungszeichen

Die 50% Angabe funktioniert allerdings nur bei einzeiligen Listenpunkten. Wenn der Text umbricht, sollte man auf eine Pixel- oder em-Angabe umstellen.

Veröffentlicht am 02.05.2006 um 21:36 Uhr
Keine Kommentare

minimalweb.de rebooted!

Es war etwas ruhig hier in letzter Zeit und das hat auch einen Grund: Ich habe in den letzten Wochen meine Portfolio-Seite komplett überarbeitet. Und weil es sich zeitlich anbot, hab ich auch gleich noch beim heute statt findenden CSS Reboot Spring 2006 mitgemacht. Diesmal sind gut 1400 Rebooter dabei, eine Riesensache also.

Und noch eine frohe Kunde: minimalweb is running on Rails! Ist für eine reine Portfolio-Seite vielleicht etwas übertrieben, aber es war eine gute Gelegenheit, um meine Ruby-on-Rails-Kenntnisse zu vertiefen. Und eine enorme Arbeitserleichterung war es obendrein. In Windeseile hatte ich eine komplette Administrationsumgebung, inklusive Datenbank und Textile-Support aufgebaut.

Bei der Umsetzung bin ich auch im HTML/CSS-Bereich auf ein paar interessante Webdesigner-Themen gestoßen, aber dazu demnächst mehr. Sowas sollte man nicht um 3:14 Uhr zusammenhacken.

Veröffentlicht am 01.05.2006 um 01:12 Uhr
8 Kommentare

Hurra, Hurra, Hurra

Meine Seiten www.infochord.de und www.minimalweb.de sind heute frisch mit dem plasticpilots award gekürt worden. Thank you very much!

Veröffentlicht am 07.03.2005 um 23:30 Uhr
Keine Kommentare

CSS Beauty

Mein persönliches Portfolio wurde soeben auf CSS Beauty gekürt. CSS Beauty zeigt ausschließlich CSS-basierte Seiten, die zudem noch schick aussehen und ist eine der bekanntesten Informations- und Inspirationsquellen für die “CSS Design Community”. Habe die Ehre!

Veröffentlicht am 05.11.2004 um 10:45 Uhr
Keine Kommentare