KS Webdesign - Der Blog » XHTML/CSS

Navi includen – ohne Deppenlink

Klaus — Wed, 23 Dec 2009 14:33:11 +0000

Wer kennt das nicht: Die Navigation einer bestehenden Site ändert sich und nun muss die Änderung bei wirklich jeder Seite eingetragen werden. Nervig und zeitaufwändig!

Eine Menge Zeit spart man sich wenn man die navi per include einbindet. Diese Methode ist relativ simpel und effektiv. Man führt die Änderung an einer Datei durch und fertig.

Man hat zwar noch den Deppenlink (Link der auf sich selber zeigt), aber was soll’s.

In diesem, auch für PHP-Vollpfosten geeigneten Tutorial beschreibe ich euch, wie ihr die navi includet und trotzdem den Deppenlink vermeidet.

So sieht euer Menü normalerweise aus:

- Startseite
- Leistungen
- Team

Wie es sich gehört ist das Menü eine ungeordnete Liste. Bei der aktuellen Seite wurde a gegen strong ausgetauscht, um den Deppenlink zu vermeiden.

Um die navi zu includen, benenne ich die beteiligten Dateien von .htm in .php um. Aus der index.htm wird also index.php, usw.

Wo die ungeordnete Liste mit dem Menü stand trage ich folgendes ein:

Den Inhalt der navi.php, die anstelle von dem, was da vorher stand eingebunden wird werfe ich euch mal direkt vor die Füße:


$uri = $_SERVER['REQUEST_URI'];
$navi = array(
'/'        => 'Startseite',
'/leistungen'    => 'Leistungen',
'/team' => 'Team',
);
echo ''."\n";
foreach ($navi as $href => $text)
{
echo '
';
if ($uri == $href)
{
echo ''.$text.'';
}
else
{
echo ''.$text.'';
}
echo '
'."\n";
}
echo '
'."\n\n";
?>


Um zu verstehen was wo eingetragen wird, lohnt es sich einmal etwas genauer hinzuschauen.
Zuerst wird in einem array die Adresse root-relativ eingetragen, d.h. es wird vom Wurzelverzeichnis des Webservers ausgegangen, was ja i.d.R. immer / ist.
Rechts daneben steht in Hochkommata der Text des Menüpunktes.
Wenn die angewählte URL gleich der URL des Menüpunktes ist wird a gegen strong ausgetauscht, ansonsten über die else der Link hingeechot.
Das array kann beliebig erweitert werden, je nachdem wieviel Menüpunkte die Navigation hat.
Wenn ihr mehrere Menüs auf eurer Seite habt, braucht ihr z.B. eine topnavi.php, eine seitennavi.php und/oder eine fuss-navi.php. Der Inhalt ist bis auf die Punkte des arrays gleich, ihr müßt nur die richtige PHP-Datei an der richtigen Stelle includen.
Das ist die einfachste Art eines Menüs, welches includet wird. Da ich euch noch mehrere Varianten zur Verfügung stellen will, habe ich alles zum Download in den Ordner include.zip gepackt.
Die enthaltene navi-normal.php ist die hier vorgestellte Variante.
Bei der navi-title.php gibt es zusätzlich den title-Tag für a
Bei der navi-klasse.php hat a noch eine zusätzliche Klasse und die navi-id.php hält für jeden Listenpunkt eine id bereit.
Funktioniert problemlos mit statischen Seiten. Ob das mit einem CMS so ohne weiteres geht glaube ich eher nicht.
Wenn ihr das Gleiche für eine WordPressinstallation wollt, kann ich euch den schönen Artikel von Thomas dazu ans Herz legen.
Von Markus stammt die Ursprungsversion des Scriptes. Heiko hat es verfeinert und David hat mir beim Verstehen des Scriptes geholfen.
Vielen Dank dafür euch dreien!
Ihr habt mir abgesehen von diesem Script schön öfter geholfen. Auch dafür nochmal an dieser Stelle meinen besonderen Dank! Ich habe viel von euch gelernt.



Fixierte Positionierung
Klaus — Thu, 10 Dec 2009 14:52:59 +0000
Zu absoluter Positionierung  gibt es schon einen Artikel, zur relativen Positionierung ebenfalls.
Jetzt fehlt noch die fixierte Positionierung, die im Grunde eine Unterabteilung der absoluten Positionierung ist.
D.h. es gelten fast die gleichen Regeln wie für position:absolute;, außer das dort immer body als Bezugspunkt für Positionsangaben gilt. Außerdem kennt der IE 6 position:fixed; nicht und ignoriert es deshalb.
Hier findest du die position-fixed-anfang.htm zum Quelltext rauskopieren.
Bilder gibt es diesmal leider nicht, aber ich denke diesmal geht es auch ohne.
Bitte CSS ergänzen:


.fixed  {
position:fixed;
left:40px;
top:20px,
}


Wenn ihr jetzt im Browser nach unten scrollt, kommt das fixierte Element mit. Setzt ihr die Positionsangaben auf null drängelt sich das fixierte Element ganz nach oben links, kommt aber beim Scrollen immer noch mit.
Beim IE 6 passiert nix. Das fixierte Element kommt einfach nicht mit.
Zum einen kann man den IE6 dabei einfach ignorieren, es gäbe allerdings z.B. die Möglichkeit ihm per Javascript auf die Sprünge zu helfen.
Oder ihr verzichtet auf position:fixed;.



Relative Positionierung
Klaus — Thu, 10 Dec 2009 13:38:53 +0000
Angefangen habe ich mit diesem Artikel zur absoluten Positionierung. Fortsetzen will ich mit position:relative;.Mit fixierter Positionierung wird es enden.
Hier findest du die position-relative-anfang.htm zum Quelltext rauskopieren.
Im Browser schaut es so aus:

Drei farbige Boxen in einer hellgrauen Box untereinander. Alles ist im normalen Textfluß.
Bitte CSS ergänzen:


#green  {
position:relative;
}


Das ergibt folgendes Bild im Browser:

Nun ja, nicht sehr spektakulär.
Genaugenommen gibt es auch nach intensivem Studium keinen Vorher/Nachher-Effekt.
Durch position:relative; haben wir die Box zwar aus dem normalen Textfluß entfernt, sie hockt aber immer noch am gleichen Platz.
Bitte CSS ergänzen:


#green  {
left:200px;
top:50px;
}


Das ergibt folgendes Bild im Browser:

Ihr seht, das die grüne Box die 200px von links und 50px von oben ausgehend von ihrem alten Standpunkt aus gemessen hat, einen Zaun um den alten Platz gelegt hat, damit während ihrer Abwesenheit keine andere Box dahin kann und dann erst an ihren neuen Platz marschiert ist.
Mit position:relative; könnt ihr die Reihenfolge auf der z-Achse verändern. Infos dazu bietet dieser Artikel.
Absolut positionierte Boxen orientieren sich bei Positionsangaben an ihren relativ positionierten Vorfahren und nicht mehr an body.
Außerdem kann man öfter mal Darstellungsfehler im Internet Explorer beseitigen, wenn man die entsprechende Box relativ positioniert.
Manchmal wird allerdings durch relative Positionierung einer Box erst ein Darstellungsfehler im IE ausgelöst.
Das heißt in jedem Fall, das sorgfältiges Testen vonnöten ist, wenn man relativ positioniert.



Absolute Positionierung
Klaus — Wed, 02 Dec 2009 10:52:27 +0000
Erklärungen für position:absolute; findet man im Netz viele. Manche beschränken sich auf wenige, dürre Sätze, anderen wiederrum sind ein paar Bilder zur Verdeutlichung beigefügt.
Wenn es um Erklärungen geht, wo man anhand einer Beispieldatei sofort mit basteln kann wird die Luft schon ziemlich dünn.
Deshalb sorge ich mit dem folgenden Tutorial dafür, dass die Luft in dem Bereich a weng dicker wird.
Legen wir direkt los:
Hier findest du die position-absolute-anfang.htm zum Quelltext rauskopieren.
Im Browser schaut es so aus:

Drei farbige Boxen in einer hellgrauen Box untereinander. Alles ist im normalen Textfluß. Für alle gilt position:static;. Das ist die Standardeinstellung (default-Einstellung) der Browser, die immer dann zum Tragen kommt, wenn man nix gemacht hat.
Das position:static; wird vom Browser praktisch unsichtbar eingefügt, ohne das er uns bescheid sagt.
Jetzt wollen wir den Textfluß mal durcheinanderwirbeln indem wir ein Element positionieren und damit die Standardeinstellung der Browser überschreiben.
Bitte CSS ergänzen:


#green  {
position:absolute;
}


Im Browser schaut es so aus:
    
Umpff! Die rote Box ist weg.
Egal, wir haben die Möglichkeit für die Positionierung Werte zu vergeben.
Bitte CSS ergänzen:


#green  {
left:0;
top:0;
}


Das ergibt folgendes Bild im Browser:
   
Aha, die rote Box hat sich also nur hinter der grünen versteckt. Allerdings springt die grüne Box nach ganz oben links ins Browserfenster, wenn wir als Wert für die Positionierung jeweils null eintragen.
Das heißt erst mal, das sich die absolut positionierte Box an body orientiert wenn man Werte für top und left eingibt.
Die nächste Erkenntnis die sich uns aufdrängt ist die, dass die absolute Box von den anderen Boxen ignoriert wird. Die anderen Boxen tun so als wäre die absolute Box nicht vorhanden.
Also sind absolut positionierte Elemente komplett aus dem normalen Textfluß raus.
Wenn sich die absolute Box immer an body orientiert ist das doch ganz schön nervig, weil man immer erst die richtigen Werte ausbaldowern muss, um eine Darstellung an der gewünschten Stelle zu erreichen.
Das geht einfacher:
Bitte CSS ergänzen:


#wrapper  {
position:relative;
}
#green  {
left:50px;
top:50px;
}


Das ergibt folgendes Bild im Browser:
       
Wenn der umgebende Container (#wrapper) position:relative; bekommt orientiert sich die absolute Box daran und nicht mehr an body.
Zu beachten ist dabei, dass die relative Box HasLayout für den IE 6 u. 7 bekommen sollte, da es passieren kann, dass die Positionsangaben sonst evtl. nicht richtig ausgeführt werden.
Für Anfänger ist das durchaus verführerisch alle Elemente mit position:absolute; festzutackern, um so die gewünschte Darstellung zu erhalten.
Okay, dann nehmt mal position:relative; weg und setzt die Werte für top/left auf null. Danach verkleinert ihr mal das Browserfenster stark.
Ihr seht dann hoffentlich was ich meine.
position:absolute; sollte man mit Bedacht einsetzen, denn damit ändert ihr wie gesehen auch die Stapelreihenfolge auf der z-Achse, d.h. zu euch hin oder von euch weg.
Wenn ihr an weiteren Infos über Stapelung interessiert seid könnte dieser Artikel von mir noch in Frage kommen.
Was gibts noch zu sagen?
Es kann vorkommen das absolut positionierte Boxen Im IE 6 u. 7 nicht angezeigt werden, wenn sie im Quelltext unmittelbar neben einem Float liegen.
Abhilfe schafft entweder ein leeres divzwischen dem Float und der absoluten Box in den Quelltext zu schreiben, oder entweder den Float oder die absolute Box in ein div zu wickeln. Entscheidend dabei ist die unmittelbare Nachbarschaft von Float und absoluter Box aufzulösen.
Erhellendes dazu findet ihr in dieser Untersuchung von Bruno Fassini.
Zur relativen Positionierung gibt es mittlerweile schon einen Artikel.
Die fixierte Positionierung habe ich auch nicht vergessen.



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.



Faux Columns Liquid
Klaus — Thu, 24 Sep 2009 14:37:30 +0000
Die Faux Columns Technik für feste Layouts hatte ich schon in einem Artikel erklärt.
Aber wie erzeugen wir gleichlange Spalten für flüssige Layouts, d.h. wo die Spaltenbreiten

Prozentwerte sind (rechts 25%, mitte 50%, links 25% z.B.) ?
Das ist nicht viel schwieriger als die normale Faux Columns Technik.
Hier findest du die fauxcolumns_liquid_anfang.htm zum Quelltext rauskopieren.
Die benötigten Grafiken kannst du dir hier holen: fauxcolumns_liquid_grafik.htm
Achtung!! Die zweite Grafik seht ihr erst, wenn ihr nach rechts scrollt
Im Browser schaut es noch so aus:

Die XHTM-Struktur ist folgende:




Liquid Faux Columns



........


.............


..............


<-- Ende div#zentral -->
<-- Ende div#umhang -->


div#umhang umschließt alle Bereiche innerhalb von body.
Die drei Spalten #links,#textbereich und #links werden vom div#zentral umschlossen.
Unmittelbar vor dem Ende von div#zentral werden die später floatenden Spalten mit der

 gecleart.
Lange Rede, kurzer Sinn. Jetzt wird gestaltet!
Bitte CSS ergänzen:


#links  {
float:left;
width:25%;
}


#textbereich  {
float:left;
width:46%;
margin-left:2%;
}


#rechts  {
float:right;
width:25%;
}


Die drei Spalten sind schon mal nebeneinander, aber das Ganze ist noch ziemlich grau.
Habt ihr euch nicht gewundert, das die mittlere Spalte (div#textbereich) nur 46% Breite und ein margin-left von 2% hat?
Prozentwerte für Spaltenbreiten können so manchen Browser ins Trudeln bringen. Wenn alles auf Kante genäht ist kann es leicht zu Rundungsfehlern kommen und die Floats brechen dann eventuell um.
Deshalb lasse ich da immer etwas Luft. Die margin-left:2%; brauche ich damit der Inhalt dann auch wirklich mittig sitzt.
Laßt uns jetzt mal die Grafiken einbauen.
Bitte CSS ergänzen:


body  {
background:#dedede url(linke_seite.png) repeat-y 25% 0;
}


#umhang  {
background: url(rechte_seite.png) repeat-y 75% 0;
}


Da pro Element nur eine Hintergrundgrafik erlaubt ist und wir aber zwei Grafiken einbauen müssen hat body die linke Spaltengrafik und div#umhang die rechte Spaltengrafik bekommen.
Zwischenstand im Browser:

Interessant!
Die rechte Spaltengrafik, die ja div#umhang zugewiesen wurde, geht nicht bis nach unten.
div#umhang braucht min-height:100%;. Damit das auch klappt brauchen body und html eine Höhe von 100%. Warum habe ich in diesem Artikel ausführlich erklärt.
Es muss auch noch etwas padding vergeben werden, damit der Text nicht in die Schatten hineinragt.
Bitte CSS ergänzen:


html,
body  {
height:100%;
}


#umhang
height:100%;
}


#links p  {
padding:1em 1.5em 0 1em;
}


#textbereich p  {
padding:1em;
}


#rechts p  {
padding:1em 1em 0 2em;
}


Ergebnis im Browser:

Schaut doch schon recht ordentlich aus.
Der IE 6 kennt min-height leider nicht, deshalb braucht er per Conditional Comment height, das er fälschlicherweise wie min-height behandelt.
Der IE 7 hat einen Fehler beim Seitenzoom. Um das zu beheben bekommt html die linke Spaltengrafik noch einmal zugewiesen.
Bitte den Conditional Comment ergänzen:





Bei den Grafiken ist der Bereich, der nicht zum Einfärben der Spalte benötigt wird transparent.
Da hier das div#umhang über die gesamte Breite des sichtbaren Bereichs geht, wird die Transparenz benötigt, damit der Hintergrund von body (linke Spalte!!) nicht verdeckt wird.
Das wäre es normalerweise, aber fragt ihr euch nicht auch warum z.B. die HG-Grafik für die linke Seite ganz links anfängt und nicht nach 25% von links aus gesehen?
Wenn ihr Hintergrundbilder mit Prozentwerten positionieren wollt, wird der diesem Prozentwert entsprechende Punkt des Bildes am entsprechenden Punkt des Elementes befestigt.
Das Ganze funktioniert bei Prozentwerten für die Positionierung des HG-Bildes also anders wie wir es normalerweise gewohnt sind.
Eine kleine Beispielzeichnung zur Veranschaulichung:

body geht über die ganze Breite des Viewports und hat die untere Grafik der Beispielzeichnung zugewiesen bekommen.
Wir haben für die Positionierung des HG-Bildes background-position:25% 0; notiert, also 25% von links.
Nun wird aber nicht die linke obere Ecke des HG-Bildes an diesen Punkt genagelt, sondern wir gehen mit dem Finger im HG-Bild 25% (650px) nach rechts und nageln genau diesen Punkt im Viewport 25% vom linken Rand aus gesehen fest.
div#umhang geht auch über die ganze Breite des Viewports und hat die obere Grafik der Beispielzeichnung zugewiesen bekommen.
Wir haben für die Positionierung des HG-Bildes background-position:75% 0; notiert, also 75% von links.
Nun wird aber nicht die linke obere Ecke des HG-Bildes an diesen Punkt genagelt, sondern wir gehen mit dem Finger im HG-Bild 75% (1950px) nach rechts und nageln genau diesen Punkt im Viewport 75% vom linken Rand aus gesehen fest.
Inspiriert von:Fortgeschrittene CSS-Techniken



Navi – CSS-Tabelle
Klaus — Thu, 17 Sep 2009 05:21:31 +0000
Ein horizontales Menü dessen Links teilweise zwei,- und/oder dreizeilig sind, lassen sich mithilfe einer CSS-Tabelle recht gut gestalten.
Die Vorteile der Tabellendarstellung bestehen darin, dass die Tabellenzellen einer Zeile immer gleich hoch sind und sich immer auf die gesamte Breite der Tabelle verteilen. Es gibt keinen Umbruch der Tabellenzellen

und die Inhalte fließen nicht über.
Hier findest du die navi_tabelle_anfang.htm zum Quelltext rauskopieren.
Die benötigten Grafiken kannst du dir hier holen: navi_tabelle_grafik.htm
Im Browser schaut es so ungfähr aus:

Der Quellcode des Navi-Containers schaut so aus:




Windows Betriebssystem
Linux Betriebssystem
Mac Betriebssystem
Klemptnersglück Betriebssystem
Gibts das?




Und wo ist jetzt die Tabelle, werdet ihr euch vielleicht jetzt fragen?
Im Quelltext werden wir sie nicht anlegen. Sie wird ausschließlich über CSS-Eigenschaften und Werte

realisiert!
Fangen wir also mit CSS-Ergänzungen an:


div#navi  {
display:table;
width:100%;
background:#f8e580 url(navi_tabelle_verlauf.png) repeat-x left top;
border-bottom:1px solid #a8a79f;
}


div#navi ul  {
display:table-row;
}


div#navi ul li  {
display:table-cell;
vertical-align:top; /* Text wird oben in der Zelle angeordnet */
text-align:center;
}


div#navi wird zur Tabelle, die ul zur Tabellenzeile

und die Listenpunkte zur Tabellenzelle. div#navi hat eine horizontale Verlaufsgrafik zugewiesen bekommen.
Zwischenstand im Browser:

Noch nicht perfekt, aber auch nicht ganz schlecht.
Als nächstes bekommen alle Listenpunkte im Quelltext bis auf den ersten die Klasse .trennlinie zugewiesen.
Der erste Listenpunkt bekommt die Klasse nicht, weil sonst der Außenrahmen vom div#umhang in Höhe des Menüs auf der linken Seite 1px breiter wäre als überall sonst. Das mag optisch kaum ins Gewicht fallen, aber mich stört es schon weil ich es weiss.
Die Links und das span wo wir das jeweils erste Wort des Linktextes eingewickelt haben werden gleich mitgestaltet.
Bitte CSS ergänzen:


.trennlinie  {
background: url(navi_tabelle_linie.png) repeat-y left top;
}


div#navi li a  {
display:block;
color:#995d08;
font-size:0.8em;
text-decoration:none;
padding:0.5em 0;
}


div#navi ul li a:hover  {
color:#d90000;
}


div#navi ul li a span  {
display:block;
font-size:1.5em;
line-height:1.1;
}


Ergebnis im Browser:

Soweit, sogut. Was ist mit dem IE 6/7?
Wir erleben die übliche, böse Überraschung.
Alle Menüpunkte stehen untereinander, weil der IE 6/7 mit display:table/table-row/table- cell nix anfangen kann.
Die Conditional Comments werden nun ausgiebig mit Anweisungen gefüllt, damit diese Browser unser Menü vernünftig umsetzen.
Bitte den Conditional Comment ergänzen:





Mit display:inline; und zoom:1; wird ein Inlineblock-ähnliches Verhalten für den IE 6/7 erzeugt.
Eine feste Breite von etwas weniger als 25% wird zugewiesen. Etwas weniger deshalb, um Rundungsfehler abzufangen.
Die Listenpunkte stehen schon mal nebeneinander. Leider verlängert sich die vertikale Trenngrafik für die Listenpunkte nicht bis unten.
Ein Griff in die Trickkiste wird fällig!
Bitte den Conditional Comment ergänzen:





Die Listenpunkte bekommen ein unmäßiges unteres padding und zum Ausgleich ein fast genauso großes unteres margin.
Im IE 6 ist nun alles korrekt. Der IE7 macht es im Prinzip auch richtig, jedoch ragen die senkrechten HG-Grafiken für die Listenpunkte nach unten heraus.
Bitte den Conditional Comment ergänzen:





Mit dieser Anweisung stimmt es jetzt auch im IE 7.
Zu erwähnen wäre noch, dass wenn die Navigation den ganzen sichtbaren Bereich einnimmt, d.h. ohne Begrenzung durch ein umgebendes Element ist, der IE7 eine Mindestbreite braucht, um bei kleinem Viewport eine Überlappung der Linktexte zu verhindern (min-width:40em; z.B.).
Des Weiteren können die Listenpunkte in diesem Fall beim Verkleinern des Viewportes in die nächste Zeile umbrechen. Um das zu verhindern bekommt die ul white-space:nowrap; zugewiesen.
Damit die Linktexte über zwei oder mehr Zeilen laufen können benötigt a gleichzeitig noch white-space:normal;.
Natürlich alles per Conditional Comment.
Diese Art der Menügestaltung kommt sicher nicht allzuhäufig zur Anwendung, da der Teufel hier im Detail steckt. Aber gut zu wissen, das es so auch geht.



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.