Webdesign

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

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

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.

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?

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]

naja….. copy & paste tutorial:

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

aber nette erklärung….

peinlich peinlich herr workerholic …

@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

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.

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

liebe größe chris aka workerholic

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

Danke für die tolle Arbeit.

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

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.

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

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]

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.

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

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

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!

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

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

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

Echt super, nur habe ich kein internet mehr

vielen dank, hat super geklappt!

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

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….

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

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.

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!

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

Moin!

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

Danke und gruss
Wolfgang

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

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

Super!
Schönes Tutorial!

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?

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

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

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

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ß

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

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). ;-)

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

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

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

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

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

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 :-)

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)

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