Doch es geht auch anders! Seht selbst…

Variante 1 – die kreative

Hier hat Stu Nicholls einen sehr interessanten Ansatz geliefert. Nämlich runde Ecken durch runde Listensymbole zu erzeugen, welche dann an alle 4 Ecken eines Containers angefügt werden.

CSS-Teil:

.rundeecken {position:relative; width:300px; background:#39F; color:#000; margin:5em auto;}
#bull1, #bull2, #bull3, #bull4 {position:absolute; width:20px; height:20px; color:#39F; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
#bull1 {top:0; left:0;}
#bull2 {bottom:0; left:0;}
#bull3 {top:0; right:0;}
#bull4 {bottom:0; right:0;}
.rundeecken em b {position:absolute; font-size:150px; font-family:arial; color:#39F; line-height:40px; font-weight:normal;}
#bull1 b {left:-8px;}
#bull3 b {left:-25px;}
#bull2 b {left:-8px; top:-17px;}
#bull4 b {left:-25px; top:-17px;}
.rundeecken p {position:relative; z-index:100; padding:10px 15px; font-size:11px;}
h1 {margin-top:25px;}

HTML-Teil:

<div class="rundeecken">
<em id="bull1"><b>•</b></em>
<em id="bull2"><b>•</b></em>
<em id="bull3"><b>•</b></em>
<em id="bull4"><b>•</b></em>
  <h1>Runde ecken mit CSS ohne Images</h1>
  <p>wirklich geile sache!</p>
</div>

Hierdurch entstehen wirklich sauber gerundete Ecken und die Box lässt sich nach belieben anpassen.

Variante 2 – kürzer geht’s nicht

… zumindest nicht mit reinem CSS & HTML. Der Clou ist, über den Inhaltscontainer noch 4 weitere, einen (bis zwei) Pixel hohe Linien zu legen, die dann nach außen hin in ihrer Breite verkleinert werden:

CSS-Teil:

.l1, .l2, .l3, .l4{font-size:1px; overflow:hidden; display:block;}
.l1 {height:1px; background:#39F; margin:0 5px; width:90px;}
.l2 {height:1px; background:#39F; margin:0 3px; width:94px;}
.l3 {height:1px; background:#39F; margin:0 2px; width:96px;}
.l4 {height:2px; background:#39F; margin:0 1px; width:98px;}
.inhalt {background:#39F; width:100px;}
.inhalt div {margin-left: 5px; width:95px;}

HTML-Teil:

<b class="l1"></b><b class="l2"></b><b class="l3"></b><b class="l4"></b>
    <div class="inhalt">
        <div>Wieder runde ecken, box=100px</div>
    </div>
<b class="l4"></b><b class="l3"></b><b class="l2"></b><b class="l1"></b>

Live-Demo Variante 2

Bei mir persönlich kommt meist Methode Nr. 2 zum Einsatz, da diese auch bei den meisten Browser korrekt dargestellt wird. Mit Sicherheit kennt ihr da draußen auch noch den Ein oder Anderen Kniff um runde Ecken mit CSS geschickt umzusetzen, lasst es mich wissen

Klar, auch mit SEO ist es möglich enormen Traffic mit seinen Money-Keys abzustauben, doch ist der Weg dahin um einiges steiniger und schweißtreibender.
Während man über Pay Per Click das Volumen des Besucheraufkommens sehr gut kalkulieren kann, deckt man SEO auch die ganzen Long-Tail Kombinationen mit ab und das ganze kostenlos (wenn man mal die Optimierungsarbeiten außer Acht lässt).

Der springende Punkt ist, die Erwartung das Bedürfnis des Besuchers mit der erstellten Landingpage abzustimmen. Der User will unterstützt werden (Usability) beim Navigieren durch die Produktseiten, er will nicht im Stich gelassen werden oder sich durch einen Dschungel an Informationen kämpfen müssen.

Die Schwierigkeit für den Suchmaschinenoptimierer ist, die benötigte interne sowie externe Relevanz auf die Landingpage zu bekommen um zum einen die Suchmaschinen und zum anderen den Besucher / Kunden zu beeindrucken. Häufig leitet man nicht zuletzt durch SEO den falschen Traffic auf die falsche Landingpage und verliert dadurch ein enormes Potenzial an Conversions. Fehler, die auch bei bezahlter Klickwerbung gemacht werden können!

Persönliches Fazit

Eine klare Aussage zu fassen, was denn nun besser ist, kann man nicht. Zum aktuellen Zeitpunkt des Internetmarketings herrscht sowieso ein fließender Übergang von verschiedensten Methoden (SEM, SMM,… ) um die Besucher des Auftritts, beziehungsweise die Conversions best möglichst zu steigern. Alles ist auf seine weiße berechtigt und sinnvoll, jede Maßnahme sollte aber für sich überwacht und ständig optimiert werden um jeweils das Beste herauszuholen und nicht der Gefahr zu laufen unkontrolliert Geld in den „Sand“ zu setzen.

Eingefügt am 10.04.09 um 15:33 Uhr:
Diese finden sich in den sogenannten User-Stylesheets.
Hier ein paar Infos:
http://css-discuss.incutio.com/?page=UserStylesheets – [Englisch]
Dieser Link zeigt Dir, wo Du die User Stylesheets findest oder eigene platzieren kannst. Internet Explorer bietet hier die wenigsten Möglichkeiten, aber zumindest kannst Du ein eigenes Stylsheet definieren und einbinden.
Was Du so alles einstellen kannst, wird beispielhaft hier gelistet:
http://www.squarefree.com/userstyles/
Suche nach User-Stylesheet – Du findest sehr viele Informationen – auch bei den Browser Herstellern.

Die wichtigsten Einstellungen sind jene die Margins und Paddings sowie die Schriftgröße festlegen. Werden diese nicht für bestimmte Selectoren explizit angegeben, verwendet der Browser Deiner Wahl seine Voreinstellungen, das kann naturgemäß zu unerwünschten Auswirkungen führen – Deine Website wird unterschiedlich in den einzelnen Browsern aussehen. Du hast plötzlich Abstände oder Ränder. Viele Anfänger mach hier oft den Fehler ihre Elemente deshalb zu positionieren – und schaffen damit unweigerlich neue Probleme.

Um zu verhindern, dass Du Deine mühsam gestalteten Navigation oder Deinen schönen Inhalts-Spalten im Browser Abstände hat, die Du nicht lokalisieren kannst, solltest Du Dein CSS mit einen Prolog einleiten. Ein Prolog steht immer am Anfang eines Dokumentes, Prolog heißt ja nichts anderes als Einleitung.
Aufgabe dieser Einleitung ist es, zu gleichmäßiger Darstellung Deiner Website in allen Browsern zu führen.

Der CSS Prolog kann aus 2 Teilen bestehen, der wichtigste ist das

Reset:

/* generelle Nullstellung */
*{
margin: 0;
padding: 0;
}

Der Selektor * bedeutet “Alles”. Diese Methode will ich gerne als Hard-Reset bezeichnen, da sie generell alle Abstände zurücksetzt, also auch Abstände und Einrückungen von Listen. Ab hier mußt Du nun für jedes html Element im CSS die Eigenschaften padding und margin – wenn nötig – selbst definieren.

Da es nun lästig werden kann für jede Listenvariante oder die Absätze einzeln alles explizit anzugeben, kann man den Prolog um einen Restore erweitern (Danke Peter ):

Restore

/* Abstände restaurieren */
h1, h2, h3, h4, h5, h6, p, blockquote, address, pre, ul, ol, dl, table {
margin-bottom: 1em;
}
/* Überschriften*/
h1, h2, h3, h4, h5, h6 { padding-top: 1em; }
/* Zitate einrücken */
blockquote { margin: 1em 2em; }
/* Auswahl in Auswahllisten (select)durch padding:0 schlecht lesbar */
option { padding-left: 0.2em; padding-right: 0.3em; }
/* Alle Listen einrücken */
ul, ol, dl { margin-left: 1em; }
/* Listenelemente mehr einrücken */
li { margin-left: 1em; }
/* Definitionen in Definitionslisten mehr einrücken */
dd { margin-left: 2em; }
/* Verschachtelte Listen ohne Außenabstand oben/unten */
ul ul, ul ol, ul dl, ol ul, ol ol, ol dl, dl ul, dl ol, dl dl {
margin-top: 0;
margin-bottom: 0;
}

Hier nun werden die Abstände mit eigenen Werten wiederhergestellt, sodass alle Browser dieselben Abstände verwenden. Das Restore kann natürlich beliebig gestaltet und erweitert werden, ich habe nicht versucht, eine vollständige Liste zum kopieren zu schreiben, vielmehr ist es sinnvoll, sich vor einem Projekt über dessen Aufbau und Konzept klar zu werden. Wenn Du keine Definitionslisten brauchst, dann muß auch keine im Prolog stehen.

Ob Du em oder lieber px als Einheit verwendest, ist Deiner Vorliebe überlassen, birgt aber auch Dinge, die man beachten sollte – in meinem nächsten Artikel werde ich über Vor- und Nachteile beider Maßeinheiten schreiben und den CSS Prolog damit abschliessen.

Viel Spass!