Webdesign

Runde und andere Ecken

In diesem Tutorial werden Sie lernen, wie man mit Hilfe einiger verschachtelter div-Tags und CSS eine nahezu frei skalierbare grafische Box gestalten kann.

Wie sieht es aus?

Bevor wir anfangen, können Sie gleich mal einen Blick auf das spätere Endergebnis werfen. Diese Box besteht aus fünf ineinandergeschachtelten divs, von denen die vier äußeren jeweils eine Ecke und einen Teil der Fläche der Box mit einer Hintergrundgrafik versehen.

Ohne CSS sieht das Ganze so aus.

Wie funktioniert es?

Damit die Box skalierbar ist, wird die Grafik sehr groß gemacht (ca. 1200×1000 pixel). Es ist aber immer nur ein Teil der Grafik zu sehen. Da Hintergrundbilder in CSS nur auf der Fläche des zugehörigen Elements sichtbar sind, dient ein Großteil der Grafik als Reserve für das Skalieren und wird auch nur dann sichtbar.

Will man die Box für sehr große Bildschirmgrößen anwenden, muss die Hintergrundgrafik entsprechend vergrößert werden. Wenn also beispielsweise eine formatfüllende Box für eine Bildschirmauflösung von 1600 × 1200 angestrebt wird, muss die Grafik mindestens 1600px breit sein.

Die einzelnen Grafiken sehen wie folgt aus:

Die Grafiken wurden als eine komplette Box erstellt und dann mithilfe der Slice-Funktion des Grafikprogramms zerschnitten. Diese Funtion hat praktisch jedes vernünftige Grafikprogramm.

Wir werden die Grafiken so anordnen, dass auf jeder Seite und in jeder Ecke der „richtige“ Teil der Grafik sichtbar ist. Die vier Grafiken werden so übereinander gelegt, dass sie sich gegenseitig teilweise verdecken, beim Skalieren aber „herausgleiten“.

Beispielgrafik Sliding Doors

Douglas Bowmann hat diese Technik bei A List Apart vorgestellt und sie “Sliding Doors”, also „Schiebetüren“ genannt. Das trifft das Prinzip recht gut.

Ob eine Hintergrundgrafik weiter unten oder weiter oben im „Stapel“ liegt, hängt davon ab, welchem div sie zugeordnet ist. Tiefer verschachtelte divs (und ihre Hintergrundbilder) liegen über ihren Elternelementen. Aber nun greife ich vor, denn zuerst brauchen wir natürlich das (X)HTML-Gerüst.

Das XHTML-Gerüst

So sieht das Grundgerüst aus (das muss nicht XHTML sein, ist aber empfehlenswert; wenn Sie sich über XHTML informieren möchten, finden sie im Linkbereich dieser Seite weitere Quellen):

  1. <div>
  2. <div>
  3. <div>
  4. <div>
  5. <div>
  6. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis o</p>
  7. </div>
  8. </div>
  9. </div>
  10. </div>
  11. </div>
  12. Code-Download: /code/tut-runde-ecken-01.txt

Um nun den einzelnen divs verschiedene Hintergrundgrafiken zuordnen zu können, geben wir jedem div einen individuellen Namen.

Das kann man mit dem id-Attribut oder mit dem class-Attribut machen. Eine id darf in jedem HTML-Dokument nur einmal vorkommen, die selbe class kann aber auf mehrere Elemente angewendet werden. Da unsere Seite möglicherweise mehrere gleiche Boxen enthalten soll, nehmen wir für die Namen das class-Attribut.

Nacheinander erhalten divs die Namen ro (für rechts oben), lo, ru und lu. Das innerste div heißt inhalt.

Das XHTML-Gerüst sieht nun also so aus:

  1. <div class="ro">
  2. <div class="lo">
  3. <div class="ru">
  4. <div class="lu">
  5. <div class="inhalt">
  6. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis no</p>
  7. </div>
  8. </div>
  9. </div>
  10. </div>
  11. </div>
  12. Code-Download: /code/tut-runde-ecken-02.txt

Die Reihenfolge der Namen ist wichtig, weil nur so die Stapelreihenfolge eingehalten wird (siehe oben).

Die CSS Regeln

Nun können wir den einzelnen divs ihr jeweiliges Hintergrundbild zuordnen. Die entsprechende CSS-Regel für das äußerste div lautet:

  1. .ro {
  2. background:url(roundedbox_ro.gif) top right no-repeat;
  3. margin:0;
  4. padding:0;
  5. }
  6. Code-Download: /code/tut-runde-ecken-03.txt

Die Regel weist dem div ein Hintergrundbild zu (url("...")), positioniert es in der rechten oberen Ecke (top right) und gibt an, dass das Bild nicht gekachelt wird (no-repeat). Die verwendete Schreibweise für background ist eine Kurzform. Ausgeschrieben würde es heißen:

  1. background-image:url(roundedbox_ro.gif);
  2. background-position:top right;
  3. background-repeat:no-repeat;
  4. Code-Download: /code/tut-runde-ecken-04.txt

Außerdem stellen wir mit margin:0; und padding:0; sicher, dass nicht irgendein Browser in seinen Standardeinstellungen andere Rand- und Polsterungswerte für divs verwendet.

Sehen Sie sich die Datei in diesem Stadium an: nur die rechte obere Ecke ist rund, alle anderen haben sichtbare „Schnittkanten“.

Nun gehen wir für die übrigen drei divs genauso vor. Jedes bekommt sein eigenes Hintergrundbild, das in der jeweils richtigen Ecke positioniert wird. Der CSS-Code sieht dann für die vier äußeren divs folgendermaßen aus:

  1. .ro {
  2. background:url(roundedbox_ro.gif) top right no-repeat;
  3. margin:0;
  4. padding:0;
  5. }
  6.  
  7. .lo {
  8. background:url(roundedbox_lo.gif) top left no-repeat;
  9. margin:0;
  10. padding:0;
  11. }
  12.  
  13. .ru {
  14. background:url(roundedbox_ru.gif) bottom right no-repeat;
  15. margin:0;
  16. padding:0;
  17. }
  18.  
  19. .lu {
  20. background:url(roundedbox_lu.gif) bottom left no-repeat;
  21. margin:0;
  22. padding:0;
  23. }
  24. Code-Download: /code/tut-runde-ecken-05.txt

Nun haben wir schon eine komplette Box, allerdings sitzt der Text noch sehr dicht an den Rändern. Um das zu beheben, müssen wir lediglich dem innersten div (inhalt) ein wenig code>padding geben. Und um mögliche Browservoreinstellungen zu umgehen, bekommt auch das <p>-Tag noch eine Regel.

  1. .inhalt {
  2. margin:0;
  3. padding:2.5em 2.5em 3.5em 2.5em;
  4. }
  5.  
  6. .inhalt p {
  7. margin:0;
  8. padding:0;
  9. }
  10. Code-Download: /code/tut-runde-ecken-06.txt

Noch einige Hinweise

Fertig

Damit sind wir fertig und können das Ergebnis begutachten. Der komplette CSS-Code findet sich in der Datei runde_ecken.css.

Zuletzt geändert am 01.11.2007

1Koka schrieb am 4. April 2005, 17:42 h    # 

Wirklich tolles Tutorial
Danke :)

2Willi Jensen schrieb am 7. April 2005, 08:50 h    # 

Diese Schritt für Schritt Anleitung mit der Möglichkeit, sich auch die Zwischenergebnisse anzusehen, ist didaktisch hervorragend aufgebaut. Auch Anfänger können so das Thema leicht verstehen.
Danke für die viele Arbeit.
Es sollte mehr Tutorials von dieser Qualität im Web geben.

3Wolfgang schrieb am 4. Mai 2005, 21:06 h    # 

Endlich eine Seite die verständlich geschrieben ist :-) Hochachtung!

Gruss
Wolfgang Burger

4milius schrieb am 25. Mai 2005, 15:14 h    # 

genau was ich suchte!

5Jörg Zimmermann schrieb am 22. Juni 2005, 08:28 h    # 

Hallo,

ich arbeite mich gerade in “barrierefreies” Web-Design ein und bin bei der Suche in google auf diese Site gestoßen…

Danke den Google-Leuten ;-) und natürlich auch den Meta-Tags dieser Site, dass ich das hier fiden durfte.

Absolut tolle Tuts – leicht verständlich, professionell und “einfach gut”...

Schöne Grüße aus Köln

Jörg

6Thorsten Panknin schrieb am 8. Juli 2005, 09:45 h    # 

Hallo Andreas,

die klarheit und gute verständlichkeit deines tutorials haben mir sehr geholfen, danke schön.

7Andreas Keiner schrieb am 21. Juli 2005, 22:36 h    # 

... entspannte Sache – das Ganze einfach mal in Deutsch. Funktionieren tuts auch noch! :)

“Sie haben eine einfache Schiebetür sehr glücklich gemacht!”

8boppy schrieb am 9. August 2005, 10:14 h    # 

;) bei meiner 1600*1200er auflösung musste ich im ersten moment stutzen… – dennoch: gute Arbeit!

9Alex Keller schrieb am 21. August 2005, 12:09 h    # 

... Kompliment, sehr gute Einführung
Einen kleinen Schönheitsfehler muss ich jedoch loswerden:
Das ganze funktioniert nur mit gifs ohne transparenten Hintergrund, was es leider schwer macht den HTML-Background dynamisch zu ändern.
Trotzdem, super Sache

gruss
A.Keller

10Peter Arwanitis schrieb am 25. August 2005, 16:26 h    # 

Ich begreife es nicht… alles sah sooo gut aus.

Dann die einfache Aufgabe, zwei Boxen uebereinander, ob jetzt mit oder ohne eingefuegten Paragraph (mit #160er Leerzeichen)
(-wird nicht dargestellt-)

der aktuelle IE 6.0.2900.2180 auf meinem XP Rechner, schafft es das Layout zwischen den Boxen zu zerreissen.

Hatte das Problem hier niemand??? Will niemand mehr als EINE Box haben?

Wenn hier jemand weiter weiss: HILFE!

danke fuer’s Zuhoeren
Peter
(=PA=)

11Paul Styrnol schrieb am 22. September 2005, 22:07 h    # 

Hi,

erst einmal danke für die Anleitung und ein Lob für die gesamte Seite, der Webdesignbereich gefällt mir sehr gut.

@Peter Arwanitis
Ich habe soeben das gleiche Problem festgestellt, aber ich habe einen Workaround gefunden (vielleicht kann man den ja in den Artikel einbauen).

Die Ursache für den Fehler ist das untere Padding für .inhalt, gibt man den Wert allerdings für .lu (also das DIV links unten) an funktioniert es auch im IE.
Getestet:
Opera 8.50
Firefox 1.04
IE 6.0
alles auf XP SP2

Hier der Teil des CSS-Codes der geändert werden muss:

.lu {
background:url(roundedbox_lu.gif) bottom left no-repeat;
margin:0;
padding:0 0 2.5em 0;
}

.inhalt {
margin:0;
padding:2.5em 3.5em 0 3.5em;
}


Hoffe das hilft.

Viele Grüße
Paul

12Paul Styrnol schrieb am 22. September 2005, 22:54 h    # 

Nachtrag

Hm, ich war voll zu voreilig. Das funktioniert zwar, wenn die DIV-Gruppen ohne gesetzte margin-Werte direkt aufeinander folgen. Sind allerdings andere Elemente wie z.B. H1 dazwischen oder ist ein margin-Wert vorhanden taucht das Problem wieder auf.

Hat noch jemand eine Idee?

13Hat schrieb am 30. September 2005, 20:18 h    # 

Die hier beschriebene Lösung funktioniert leider nicht ohne Rahmenbegrenzung. Das gezeigte Beispiel funktioniert nur, weil der bodymargin dementsprechen gestzt ist und die verwendeten Grafiken ausreichend gross sind. Für kleinere Rahmen ist meine Empfehlung eine Einfassung mit einem weiteren Container mit gewünschter Breite und Höhe.

14Emile schrieb am 9. Oktober 2005, 17:34 h    # 

Hübsch und toll..
Prima vielen Dank..

* * *

Folgende Beobachtung:

Bei größeren Auflösungen sind größere Images notwendig (und dies auf Kosten der Performanz..)

15Daniel Bauer schrieb am 14. November 2005, 02:08 h    # 

Ich habe auch zwei Probleme. Eines der Probleme (verzerrte oder unterbrochene Anzeige) konnte ich wie folgt lösen:

Ich habe einfach mehr Schnitte erstellt… so habe ich dann:

rechts oben, links oben, OBEN, LINKS, RECHTS, MITTE, rechts unten, links unten und UNTEN

Die Hintergrundgrafik für OBEN und UNTEN erhalten den Syntax “repeat-x”, die LINKE und RECHTE “repeat-y” und die MITTE “repeat” bzw. ohne diese Syntax.

Im body dann die Reihenfolge beachten (damit die Überlagerungen stimmen).

Soweit funktioniert es bei mir super.

Aber ich habe noch das Problem, dass die Grafiken in Opera 8.5 und Firefox 1.0.7 leider keinerlei Grafiken zu sehen sind. Woran könnte das liegen? Sicher wieder ein Schusselfehler von mir… werde wohl noch etwas suchen müssen.

Schreibt doch mal, ob mein Verfahrensweg auch bei Euch funktioniert hat.

so long…

Daniel

16ak schrieb am 14. November 2005, 07:18 h    # 

Aber ich habe noch das Problem, dass die Grafiken in Opera 8.5 und Firefox 1.0.7 leider keinerlei Grafiken zu sehen sind. Woran könnte das liegen?

Das klingt nach einem Fehler in der CSS Syntax, weil Opera und Firefox da sehr viel strenger sind als IE. Validier mal das CSS, um sicher zu stellen, dass du nirgends ein Semikolon vergessen hast etc.

Ein weiterer Ansatz wäre, die Pfade der Hintergrundbilder ohne Anführungszeichen zu schreiben, falls du das nicht schon getan hast.

17Daniel Bauer schrieb am 14. November 2005, 13:38 h    # 

Die Validierung ist gut gelaufen… die Hintergrundbilder habe ich auch ohne Anführungszeichen geschrieben… leider ohne Erfolg.

18Daniel Bauer schrieb am 14. November 2005, 13:47 h    # 

Jetzt hab ich es… ich würde es mal als typischen “Anfängerfehler” bezeichnen… ich hab bei der Pfadangabe ”\” statt ”/” geschrieben. Jetzt lesen auch FF & Opera richtig.

19Markus schrieb am 21. November 2005, 03:27 h    # 

Hi,

tolle Anleitung!

Lieder habe ich irgendwo eine (anfänger-) Fehler:

.ru wird nicht ausgegeben, d.h. die rechte untere Ecke ist nicht rund sondern wird von der .ro rechts oben überlagert. Ich habs in ein bestehendes box-template eingebaut.

Was kann das sein?

20Andreas Lammel schrieb am 29. November 2005, 16:32 h    # 

Will man mit diesem Beispiel mehrere Boxen untereinander machen bekommt man im IE ein Darstellungsproblem. Der untere Rand jeder Box bis auf die letzte wird falsch dargestellt. In Opera 8 und Firefox 1.07 sieht die Darstellung korrekt aus.

Nach langem suchen habe ich einen Workaround gefunden, der aber evtl. noch verbessungswürdig ist.

man definiert ein weiteres Element:

. box {padding:0.1%;}

Nun umschließt man alle Boxen bis auf die letzte Box nochmals mit [div class=”box”] [/div] und der IE stellt es wieder richtig dar. Beispiel (spietze Klammern durch Eckige ersetzt):

.ro { background:url(roundedbox_ro.gif) top right no-repeat; }

.lo { background:url(roundedbox_lo.gif) top left no-repeat; }

.ru { background:url(roundedbox_ru.gif) bottom right no-repeat; }

.lu { background:url(roundedbox_lu.gif) bottom left no-repeat; }

.inhalt {margin:0 padding:2.5em 2.5em 3.5em 2.5em;}

.inhalt p {margin:0 padding:0;}

.box {padding:0.1%;}

[div class=”dummy”]
[div class=”ro”]
[div class=”lo”]
[div class=”ru”]
[div class=”lu”]
[div class=”inhalt”]
[p]text in der ersten Box[/p]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]

[div class=”ro”]
[div class=”lo”]
[div class=”ru”]
[div class=”lu”]
[div class=”inhalt”]
[p]text in der letzten Box[/p]
[/div]
[/div]
[/div]
[/div]
[/div]

21workerholic schrieb am 26. Dezember 2005, 14:48 h    # 

naja….. copy & paste tutorial:

http://aktuell.de.selfhtml.org/tippstricks/css/runde_ecken/

aber nette erklärung….

22ak schrieb am 27. Dezember 2005, 08:05 h    # 

naja….. copy & paste tutorial

Vielleicht dort mal auf den Autor achten!

23unknow schrieb am 27. Dezember 2005, 20:15 h    # 

peinlich peinlich herr workerholic …

24Daniel Linssen schrieb am 7. Januar 2006, 21:18 h    # 

@Andreas Lammel:

echt super der Tipp für den IE-Workaround. Schadet aber auch nichts, den Dummy für alle – auch den letzten – DIV zu verwenden. Ist z.B. dann wichtig, wenn man die Boxen per Funktion aufbaut oder so.

Daniel

25Thomas Steglich schrieb am 10. März 2006, 20:39 h    # 

Den Tip mit dem IE Workaround kann ich ebenfalls bestätigen. Für die nicht so eingefleischten CSS Programmierer eine Anmerkung: bei den 0.1% ist der Punkt ”.” auch wirklich ein Punkt.
Bessere Ergebnisse hatte ich mit 0.2%.
Aber warum das alles so ist, wissen wahrscheinlich nicht einmal die Programmierer des IE.

26workerholic schrieb am 12. April 2006, 15:09 h    # 

hehe, habe ich wohl doch nicht ganz gelesen ;-) tut mir echt mega leid!!!

liebe größe chris aka workerholic

27Eugen Boonen schrieb am 26. April 2006, 15:33 h    # 

Wow, mittlerweile ist wirklich alles mit CSS möglich. Hervoragendes Tutorial und hat mir sehr geholfen.

Danke für die tolle Arbeit.

28Lionmaster schrieb am 19. Mai 2006, 08:08 h    # 

jo, gut geschrieben …. gut zu verstehen ….

aber die grafiken sind bei mir das prob. ist vielleicht – für kleinere Sachen – einfacher, EINE anständige Grafik zu fabrizieren, die dem div als bg zu geben.

Bei einem durchdachten Design sicherlich ein Gedanke wert.

Aber ansonsten finde ich diese Seite informativ und sehr gut. Endlich mal eine Quelle, aus der man auch verständliche Infos bekommt. Go on man!!!

Grüße

Lionmaster

29Hannes Wagner schrieb am 1. Juni 2006, 01:50 h    # 

Vielen herzlichen Dank.
Ich habe mich den ganzen Tag mit dem Thema “Runde Ecken” herumgeschlagen. Das Tutorial ist dermaßen gut und leicht verständlich geschrieben, dass es eine Freude ist es zu lesen.
Nun kanns ja endlich weitergehen mit meinem neuen Layout.

30Simon Harhues schrieb am 27. Juni 2006, 14:21 h    # 

Schöne Sache das. Respekt!
Versuche gerade die seite pipho-jugend.de so umzusetzten, dass die komplette Seite in der box ist. Wenn der inhalt größer als das Browserfenster ist, soll der div-Kontainer mit dem Inhalt Scrollbalken erhalten. Die runde Box soll also nie größer als das Browserfenster werden.
Habe das mit overflow:scroll geregelt. Mit der Breite scheint das auch wunderbar zu funktionieren, nur mit der Höhe klappt das (zuminest im FF) nicht, die runde Box wird nach unten hin ausgedehnt. Ich kann natürlich z.B. max-hight:700px ins css reinschreiben, doch dann geht ja die ganze scarrlierbarkeit für unterschiedliche Auflösungen/Browserfenster verloren. max-hight:100% funktioniert leider auch nicht, der bodytag hat die Höhen- und Breitenangaben 100% erhalten.
Kann mir jemand so aufdie Schnelle einen Tipp geben?

Danke, Simon

31Frank Reinecke schrieb am 1. Juli 2006, 13:19 h    # 

Darstellungsproblem im IE:

Bei mir ohne Probleme – wie in dem tollen Tutorial beschrieben. Ergänzend habe ich das erste div (also die Ecke rechts-oben gefloatet: [float: left;]
Zwischen den Boxen je ein div mit [clear:left] und [margin-top:1em; margin-bottom: 1em;]. Das div darf nicht leer sein (außer bei IE), sonst ist es für z.B. FF nicht vorhanden [&nbsp einfügen]

32ben schrieb am 19. Juli 2006, 12:14 h    # 

Super Anleitung! Danke! :)

Ich versuche gerade, die Box nachzubauen, wobei sie grundsätzlich unabhängig vom Inhalt 100% Höhe haben soll.
Also immer das Browserfenster ganz ausfüllen soll.

Das klappt auch, wenn ich den Rahmen-DIVs die 100%ige Höhe zuteile, nur fließt dann der Inhalt über die Box hinaus, wenn der mal etwas länger ist.

“overflow:scroll” bringt browserübergreifend auch keine richtige Lösung.

33Benjamin schrieb am 23. August 2006, 23:36 h    # 

Hi,
das ist wirklich ein tolles Tutorial, vorallem die Links auf die einzelnen Bilder machen es schnell verständlich!

Ich hatte bei XHTML 1.0 Strict das Problem, dass das äußerste Div sich über den gesamten verfügbaren Raum in der Breite ausdehnte.
Lösung: für .ro : width: 1px

Grüß Benjamin

34Doro schrieb am 4. September 2006, 11:26 h    # 

Hallo,
vielleicht hier noch eine andere … nicht ganz div-technische lösung von runden ecken: mit gimp (klasse open source programm) oder photoshop (wer’s hat) ein png als hintergrundbild erstellen, dass runde ecken hat, dabei den alpha layer nicht vergessen und für die nicht vorhandene alpha-transparenz bei IE das script von folgender seite verwenden:
link text

funktioniert einwandfrei und ist eine einfache schnelle lösung. anleitung auch mit auf der seite.
ach, und um dann das box-element zu bekommen, einfach mit den box-elementen von css experimentieren :)

Aber Danke, Danke für das gut verständliche Tutorials. Macht Spaß sowas zu lesen!!! UND AUSZUPROBIEREN!!!!!

LG,
Doro

35Gregor Ganz schrieb am 9. Januar 2007, 12:48 h    # 

Sehr schönes Tutorial und sehr gute Seite insgesamt. Ich habe als Anfänger in CSS gerne darauf zurückgegriffen. Auch die Bücherlinks (Eric Meyers) haben mir sehr geholfen. Vielen Dank!

36jens schrieb am 19. Januar 2007, 12:20 h    # 

super tutorial und sehr gute seite insgesamt. ich hab schon lange nach sowas gesuch.
kann ich gut für meine arbeit gebrauchen da ich grad ne umschulung zum mediengestalter mache
weiter so
gibt es noch mehr solch gute tutorials
mache grad einen t-shirt shop und könnte noch bischen hilfe brauchen
schönen gruß
jens

37theo schrieb am 23. Januar 2007, 10:17 h    # 

Sehr einleuchtend erklärt ohne Umschweife,
einfach einsame Klasse!
theo

38Jan schrieb am 13. Februar 2007, 15:21 h    # 

Sehr gutes Tutorial. Aber wie schon in Kommentar Nr. 13 geschrieben wurde, Funktioniert es bei kleineren Größen nur mit einer weiteren Einfassung in einem Div-Container mit Breiten- und Höhenangaben.
Jan

39Bernd das Brot schrieb am 27. Februar 2007, 09:16 h    # 

Echt super, nur habe ich kein internet mehr

40dryhead schrieb am 14. März 2007, 06:57 h    # 

vielen dank, hat super geklappt!

41boneass schrieb am 11. April 2007, 21:19 h    # 

super beschreibung echt respekt….nur öffnet sich bei einer auflösung von 1680mal1050 die kiste auch wie eine Schiebetür…also denke ich einfach das ding statt 1200 halt so breit machen wie man denkt

42Backlinks kostenlos schrieb am 17. April 2007, 12:22 h    # 

Wenn man mit Ajax arbeiten will dann schaut mal hier: http://openrico.org/rico/demos.page?demo=rico_corner

Funktioniert einwandfrei auf den meisten Browsern….

43Charly schrieb am 21. Mai 2007, 23:24 h    # 

Hi,
ein sehr gutes weil ausführliches Tutorial! Großes Lob!
Ich hatte allerdings auch Probleme mit der Anzeige mehrerer Boxen untereinander im IE. Alle oben beschriebenen Workarounds haben bei mir aus unerklärlichen Gründen nicht gefruchtet, habs aber schlussendlich doch lösen können: ich hab um jede Box einfach eine Tabelle ohne Rahmen gelegt und schon hats gefunzt!

mfg charly

44Jermaine schrieb am 21. Juni 2007, 01:06 h    # 

Zu Nummer #42,

Dein Link muss lauten: http://openrico.org/demos?demo=effect_round

Guter Tipp, wobei CSS für viele interessanter sein dürfte.

45Gerd-E. schrieb am 30. Juni 2007, 00:41 h    # 

Echt super, prima Beschreibung, es hat beim Nachmachen auch geklaptt;-) Sicher muss ich noch einige Male reinschauen, bis es wirklich Handwerkszeug wird.
Dafür ist es ganz hervorragend beschrieben. Danke!

46Kuno schrieb am 6. Juli 2007, 17:12 h    # 

Ein Großer Nachteil ist, dass man für dieses Prinzip die Hintergrundfarbe kennen muss. Transparenz ist aufgrund der Schichtebenen nicht möglich.

47Wolfgang schrieb am 10. Juli 2007, 21:30 h    # 

Moin!

Endlich mal ein Tutorial, welches man versteht…
Nein im ernst. Weltklasse.

Danke und gruss
Wolfgang

48zdek schrieb am 21. Juli 2007, 00:48 h    # 

Moin Moin

es gibt auch eine Lösung für designs die 100% höhe haben sollen!
Normalerweise wird die angabe height:100% von den meisten Browser ignoriert.
Lösung:
Man gibt dem HTML & Body eine Höhe an.
ZB:
html, body {height:100%;…..}

wenn man jetzt zB ein copyright vermerk unten auf der Seite einbinden möchte, der immer unten angezeigt werden soll, egal mit welcher auflösung , dann kann man jetzt mit einem div-container diesen auch unten plazieren.
.copy {height: 30px; width: 300px; bottom:0px; left:100px; padding: 10px;}

ich hoffe es ist verständlich geworden

gruß zdek

49Christian Schmidt schrieb am 31. Juli 2007, 20:23 h    # 

Vielen Dank, hatte es sonst immer umständlich mit Tabellen gemacht.

50henna schrieb am 1. August 2007, 19:23 h    # 

Super!
Schönes Tutorial!

51Martin schrieb am 10. August 2007, 08:24 h    # 

Super Tutorial!

Ich verstehe nur nicht ganz: Wie geht das mit der veränderbaren Schriftgröße?

Ich habe das Problem, dass der Text z.B auf einem Widescreen Monitor doch ziemlich verloren aussieht. Wie kann man den Text mit der Box gleichzeitig vergrößern?

52Andreas Kalt schrieb am 10. August 2007, 08:46 h    # 

Martin, der Text wird nicht automatisch mit der Box vergrößert. Aber die Box vergrößert sich, wenn Du im Browser die Schrift größer machst (im Firefox z.B. mit Strg + „+“ oder um Menü über „Ansicht“.

53Christian Schmidt schrieb am 12. August 2007, 15:06 h    # 

Oder noch einfacher. STRG festhalten und das Scrollrad nach oben oder unten ;)

54markus schrieb am 14. August 2007, 21:14 h    # 

guten abend,

mal ehrlich: optisch sind die boxenränder rund aber die tatsächlichen schattierten grafikecken kantig! wer sehen kann (also ich ;-) ) hätte sich die grafiken am Anfang anschauen sollen. weißer contenthintergrund ohne rand und schattierung auf hintergrundbild mit farbverlauf bastelt sich wohl einen wolf? oder hat ihn schon eine/r gerfangen?

lieben gruß
markus

55Roger schrieb am 20. September 2007, 11:17 h    # 

hey andreas,

ich bin ein absoluter „runde ecken“ fan und deine lösung scheint die einzig funktionierende zu sein in allen IE > 5.5 und FF.

gibt es eine möglichkeiten das ganze mit einem background bild hin zu kriegen? die ecken sind ja noch nicht „transparent“ wegen dem darunterliegenden div.

grüsse
roger

56Elektronik Forum schrieb am 24. September 2007, 16:25 h    # 

Hallo Roger,

du kannst per CSS die Ecken definieren und dann zb. eine PNG grafik mit transparentem Hintergrund einsetzen.

Also ich kann das nur empfehlen.

Gruß

57Robert Palm schrieb am 30. Oktober 2007, 09:16 h    # 

Hallo,
erst mal Danke für das super Tut, hab es jetzt mal auf unserer Seite ausprobiert, funktioniert auch alles wunderbar… fast ;-)
Das Problem ist, wenn ich ein Bild ins Content einfüge und dies größer ist als der Inhalt, geht dieses über den unteren Rand hinaus.
Ich muss dazusagen, das ich ModX als CMS einsetze.
Hat jemand eine Idee wie dies zu vermeiden ist?

LG
Robby

58Mike schrieb am 31. Oktober 2007, 00:44 h    # 

Hi,

@Elektronik Forum: Bei der Verwendung von PNGs mit transparentem Hintergrund – hast Du Dir die Seite auch schon mal mit dem IE 6 angesehen? Der kann normalerweise keine transparenten PNG-Grafiken verarbeiten. (Musste ich gerade selber wieder „schmerzhaft“ feststellen.)
Über einen Umweg über den MS „AlphaImageLoader Filter“ scheint es mit einigen Tricks zu funktionieren . (Leider surfen immer noch viele Besucher mit dem IE 6 …)

Ciao,
Mike

@Andreas: Danke für Deine Tutorials (und das Öffnen der Kommentare). ;-)

59Ich schrieb am 4. November 2007, 08:30 h    # 

Ich habe es wie beschrieben gemacht aber habe die grafiken nur für die ränder erstellt und der class inhalt den selben farbigen hintergrund gegeben so hat wer mit großen monitor wenigstens noch einen einfarbigen hintergrund und einen etwas unschönen rand

60kakdu schrieb am 14. November 2007, 17:26 h    # 

hallo zusammen,

ich (html, css anfäner) hab folgendes problem:
hab meine eigene box gebaut (funktioniert auch) und möchte daraus ein menü-modul machen.

hab also alles nochmal mit einer zusätzlichen div („menu“) umschlossen.
wenn ich jetzt in in der zugehörigen css datei die größe des divs .menu festlegen möchte, reagiert die box nur auf einstellungen der breite.
die höhe kann ich nicht festlegen bzw. zeigt eine einstellungen keinen effekt.

woran liegt das?

viele grüße
kakdu

61Steuererklärung Software schrieb am 12. Dezember 2007, 01:19 h    # 

bist du sicher das du alles richtig in der css angegeben hast? bzw. nicht verschrieben hast?

62Sven schrieb am 12. Januar 2008, 18:15 h    # 

Hallo,

wirklich tolles Tutorial. Habe eigentlich nach einer Lösung gesucht, wie ich mit dem TYPO3-Gifbuilder runde Ecken erzeugen kann – aber so (nur per CSS) geht es ja auch, echt super.

Viele Grüße aus Hannover
Sven

63magpie schrieb am 21. Januar 2008, 12:42 h    # 

Hi
Mit Opera schauts ein bissl komisch aus. Weiß jemand an was das liegt?

64Iwenzo schrieb am 31. Januar 2008, 15:09 h    # 

Hallo,

ich habe dank eurer Hilfe nun endlich das Protal mit „runden Ecken“ ans Laufen bekommen:
http://iwenzo.de ist ein Portal für Elektroniker. Würde mich freuen über euer „runde Ecken“ Feedback :-)

65tarlo schrieb am 16. März 2008, 15:39 h    # 

Glücklich, wer den Grund der Dinge kennt!

Welch‘ gutes Motto zu einem guten Tutorial.

Gruss Tarlo

p.s. Im YAML – Framework hat man die ganzen workarounds für die Darstellungsfehler einzelner Browser geregelt. Wäre toll eine Anwendung: die runden Boxen auf YAML übertragen!
(googeln -> yaml)

66Michael schrieb am 4. November 2008, 15:10 h    # 

Hallo Andreas,

habe die „runden Ecken“ gemäß Deinem Tutorial angewendet, was auch alles soweit funktioniert hat. Nur der IE wollte nicht. (Trotz des zusätzlichen Wraps).
Daraufhin habe ich mittels „height=1%“ hasLayout erzwungen (Inhaltsbox und äußerste Box), nun klappt’s. Keine Ahnung ob das bei mir ein Sonderfall ist, oder auch anderen Hilfreich sein könnte.

Hier der gesamt Code:

#inhalt {
	background: none;
	border: none;
	margin-bottom: 0;
	padding: 10px 5px;
	position: relative;
	height: 1%; /*IE6*/
}

.ie_dummy {
	padding: 1px;
	margin-bottom: 1em;
	height: 1%; /*IE6*/
}

.ie_dummy bezieht sich dabei auf die alles umschliessende zusätzliche Box, die ein Teilnehmer Deines Forums für den IE empfohlen hat.

Viele Grüße und Danke für Deine Veröffentlichungen.

Michael