KS Webdesign - Der Blog » Hintergrundgrafik

Listenzeichen

Klaus — Mon, 05 Oct 2009 14:56:02 +0000

Listenzeichen sind ein leidiges Thema.

Es ist ja optisch ganz nett, wenn die Listenpunkte einer ungeordneten Liste vom Browser automatisch mit einem Listenzeichen versehen werden. Dadurch wird die Liste optisch noch einmal hervorgehoben.

Dumm ist nur wenn die Listenzeichen in jedem Browser anders aussehen. Ganz übel wird es dann, wenn sie im Internet Explorer zu sehen sind im Firefox aber nicht, oder umgekehrt.

Was tun sprach Zeus?

Ihr könntet list-style-position auf inside setzen (beim Firefox ist es per Default-Einstellung outside), aber die Punkte sind im Internet Explorer trotzdem klein, dünn und kraftlos.

Es gibt einen besseren Weg:

Erst mal schalten wir die Listenzeichen mit list-style-type:none; alle aus.

Dann erstellen wir mit einem Grafikprogramm ein eigenes Listenzeichen und binden das als Hintergrundgrafik ein.

Bitte CSS ergänzen:

li {
list-style-type:none;
}

Der Stand im Browser:

Die erstellte Grafik:

Die Grafik hat die Maße 14x14px und ist ein gelber Punkt. Nicht spektakulär, aber für unsere Zwecke mehr als ausreichend.

Nun binden wir die Grafik als HG-Grafik ein. Dazu bilden wir eine Klasse die wir li zuweisen.

Aussehen des Quellcodes:

- Erster Listenpunkt
- Zweiter Listenpunkt
- Dritter Listenpunkt
- Vierter Listenpunkt oder watt?!

Bitte CSS ergänzen:

.listenzeichen {
background:url(listenzeichen.png) no-repeat left top;
}

Stand im Browser:

Naja, da ist zwar was gelbes, aber an der falschen Stelle.

Bitte CSS ergänzen:

.listenzeichen {
background:url(listenzeichen.png) no-repeat left 0.3em;
padding-left:1.5em;
}

Stand im Browser:

Man kann jetzt darüber streiten, ob die HG-Grafik im Internet Explorer 0.1em zu tief sitzt und das dann per Conditional Comment korrigieren, aber das müßt ihr selbst entscheiden.

Auf jeden Fall erhaltet ihr so Listenzeichen, die browserübergreifend gleich aussehen und auch leicht zu positionieren sind.

Außerdem ist der Text wenn der Listenpunkt mehr als einzeilig ist sauber eingerückt, was bei den autom. Listenzeichen oder list-style-image nicht der Fall ist.

Runde Ecken 3

Klaus — Tue, 15 Sep 2009 05:33:26 +0000

Zwei Artikel zu Boxen mit abgerundeten Ecken habe ich bereits verfasst:
Runde Ecken 1 und Runde Ecken 2.

Im dritten Artikel wird die Box mit runden Ecken am Ende voll flexibel sein, d.h. sie hält einer Schriftvergrößerung von sechs Stufen stand.

Hier findest du die rundeecken3_anfang.htm zum Quelltext rauskopieren.

Die benötigten Grafiken kannst du dir hier holen: rundeecken3_grafik.htm

Bitte denkt daran, den Hintergrund der Ecken nicht transparent zu machen, sondern in der Farbe des Hintergrundes vom Container, wo die Grafik drinhockt!

Zur Verdeutlichung habe ich die vier Grafiken mal in einem Tableau zusammengefasst:

In diesem Fall sind es vier Grafiken, d.h. wir benötigen leider zusätzliche Elemente.

Deshalb schauen wir uns erstmal den Quelltext an:

Box mit runden Ecken
Diese Box ist..........usw.

Zwei weitere Elemente sind hinzugekommen:

div.container_innen und div.container_ganzinnen.

Die Maßeinheiten habe ich konsequent in em abgeändert, damit die Box auch bei Textvergrößerung in alle Richtungen gleichmäßig mitwächst.

Bitte CSS ergänzen:

.container {
background:#b2f8a8 url(rund3_untenlinks.gif) no-repeat left bottom;
}

.container .container_innen {
background: url(rund3_untenrechts.gif) no-repeat right bottom;
}

.container .container_ganzinnen {
background: url(rund3_obenlinks.gif) no-repeat left top;
}

.container h2 {
background: url(rund3_obenrechts.gif) no-repeat right top;
padding-top:0.3em;
}

.container p {
padding: 0.5em;
}

Ergebnis im Browser:

Ist ja fast zu einfach. Was kann denn dabei schiefgehen?

Einiges!

In diesem Beispiel habe ich padding erst definiert nachdem ich die Grafiken eingebunden habe.
Mit margin würde ich es genauso machen.

Ganz schnell sind nämlich statt vier runden Ecken z.B. nur eine oder drei da. Dann geht das wilde Rumgefuchtel mit verschiedenen paddings/margins los, die man vielleicht ja schon definiert hatte, bevor man die Grafiken eingebunden hat.

Deshalb bin ich da erstmal vorsichtig, setze alle paddings und margins für die Box auf null und ergänze dann die Abstände mit ständiger Zwischenkontrolle im Browser vorsichtig.

Außerdem verwechselt man beim Einbinden der Grafiken z.B. schnell mal left bottom mit right bottom oder left top mit left bottom, usw..

Ein wenig muss man auch schauen welche Grafik man welchem Element zuteilt, damit es nicht zu unliebsamen Überraschungen kommt.

Wie immer sehr hilfreich bei der Fehlersuche ist das Firefox Addon Firebug, hier ein deutsches Tutorial dazu.

Runde Ecken 1

Klaus — Mon, 14 Sep 2009 06:55:04 +0000

Container problemlos mit runden Ecken auszustatten wird erst mit CSS 3 kommen. Im Firefox kann man heute schon mit die Anweisung -moz-border-radius einer Box abgerundete Ecken verpassen.

Browserübergreifend geht das heute nur mit Grafiken, etwas CSS und je nach Anforderung mit zusätzlichen Boxen.

Im einfachsten Fall brauchen wir zwei Grafiken und kein zusätzliches Element. Diese Box wächst dann nur vertikal, was in vielen Fällen sicher ausreicht.

Hier findest du die rundeecken1_anfang.htm zum Quelltext rauskopieren.

Die benötigten Grafiken kannst du dir hier holen: rundeecken1_grafik.htm

Du brauchst die Grafiken nicht mal selber zu erstellen, das kannst du auch online mit wenigen Klicks auf RoundedCornr.

Bitte denkt daran, den Hintergrund der Ecken nicht transparent zu machen, sondern in der Farbe des Hintergrundes vom Container, wo die Grafik drinhockt!

Die Grafiken schauen so aus::

Die obere Grafik wird der Box zugewiesen und die untere Grafik drücken wir dem Textabsatz aufs Auge.

Bitte CSS ergänzen:

#container {
background:#b2f8a8 url(rund_oben.png) no-repeat left top;
}

#container p {
background:transparent url(rund_unten.png) no-repeat left bottom;
padding:0 15px 15px 15px;
}

So schauts im Browser aus:

Das wars schon!

Wenn ihr mehr erwartet habt muss ich euch leider enttäuschen. Es funktioniert problemlos mit allen gängigen Browsern.

Ihr müßt nur aufpassen wenn die Box mehr als einen Textabsatz hat. Dann bekommt der letzte Textabsatz in der Box einfach eine Klasse mit der Hintergrundgrafik zugewiesen.

Runde Ecken 2

Klaus — Sun, 13 Sep 2009 06:07:15 +0000

In meinem letzten Artikel Runde Ecken 1 habe ich die einfachste Form einer relativ flexiblen Box mit abgerundeten Ecken erklärt.

Die nächste Stufe ist eine teilflexible Box mit Rahmen.

Hier findest du die rundeecken2_anfang.htm zum Quelltext rauskopieren.

Die benötigten Grafiken kannst du dir hier holen: rundeecken2_grafik.htm.

Du brauchst die Grafiken nicht mal selber zu erstellen, das kannst du auch online mit wenigen Klicks auf RoundedCornr.

Bitte denkt daran, den Hintergrund der Ecken nicht transparent zu machen, sondern in der Farbe des Hintergrundes vom Container, wo die Grafik drinhockt!

Die Grafiken schauen so aus::

Zwei Grafiken sind in diesem Fall leider nicht ausreichend, da sich beim Vergrößern der Rahmen nicht automatisch verlängert. Das geht nur wenn die mittlere Grafik mit repeat-y eingebunden wird.

Die gute Nachricht ist, das wir immer noch kein zusätzliches Element brauchen.

Die Box bekommt die mittlere Grafik, die h2-Überschrift die obere Grafik und der Textabsatz die untere Grafik.

Bitte CSS ergänzen:

#container {
background:#b2f8a8 url(rund2_mitte.gif) repeat-y left top;
}

#container h2 {
background:url(rund2_oben.gif) no-repeat left top;
}

#container p {
background:url(rund2_unten.gif) no-repeat left bottom;
padding:0 12px 12px 12px;
}

Im Browser schaut es so aus:

Das wars schon!

Vielleicht fragt ihr euch, warum die Ecken oben auch rund sind. Schließlich haben wir der Box die mittlere Grafik gegeben und die hat oben keine runden Ecken.

Ganz einfach, die h2-Überschrift steht im Quelltext nach dem Eröffnungs-Tag der Box, d.h. die Hintergrundgrafik der Überschrift überdeckt deshalb die Hintergrundgrafik der Box.

Wenn euch nicht so klar ist warum das so schaut euch mal diesen Artikel an.