Abgerundetet Ecken darstellen

Hey

Ich habe mal ne Frage,
Ich möchte in einer Webapplikation über CSS abgerundete Ecken in meinem Layout darstellen.

Hab jetzt schon ein bisschen gegooglet und bin dort auf einen Weg über ne „riesen“ DIV verschachtelung gestoßen…

Diese Möglichkeit schmeckt mir aber nicht so richtig da ich sowieso schon recht viele (is ja immer ansichtssache…) Verschachtelungen von DIV’s habe die ich über CSS anordne…

Wie löst ihr das Problem? Einfach im Background Bilder einfügen die abgerundetet Ecken haben (halt für jedes DIV ne eigene Klasse mit eigenem BG?
Was gibt es halt noch für Lösungswege?

Freue mich auf eure Antworten

Liebe Grüße

DE

Ich möchte in einer Webapplikation über CSS abgerundete Ecken
in meinem Layout darstellen.

Hab jetzt schon ein bisschen gegooglet und bin dort auf einen
Weg über ne „riesen“ DIV verschachtelung gestoßen…
Diese Möglichkeit schmeckt mir aber nicht so richtig

Das ist aber der übliche Weg.

da ich
sowieso schon recht viele (is ja immer ansichtssache…)

Ansichtssache ist das nicht. Alles, was überflüssig ist, sollte man auch nciht im Code haben. Und ein div gruppiert ja nur. Mehrere überflüssige divs machen nur eine div-Suppe.

Verschachtelungen von DIV’s habe die ich über CSS anordne…

Ist meist gar nicht nötig.

Wie löst ihr das Problem?

Z.B. mit der proprietären Eigenschaft des Mozilla:
-moz-border-radius

Dann siehts in Mozillas schön aus, der IE hat halt eckige Ecken :wink:
Wen interessierts? :smiley:

Einfach im Background Bilder
einfügen die abgerundetet Ecken haben

Dann hast Du aber ein pixerlgenaues Layout, bzw. wenn der Nutzer die Größe ändert, ändert sich das Hintergrundbild nicht mit und der Rahmen ist dahin.

Gruß,
-Efchen

Hi

erstmal danke für deine schnelle Antwort,

Ich möchte in einer Webapplikation über CSS abgerundete Ecken
in meinem Layout darstellen.

Hab jetzt schon ein bisschen gegooglet und bin dort auf einen
Weg über ne „riesen“ DIV verschachtelung gestoßen…
Diese Möglichkeit schmeckt mir aber nicht so richtig

Das ist aber der übliche Weg.

Dat is aber zum Kotzen xD
Die jetzige Div verschachtelung fürs Layout habe ich aus einem Online Tutorial und bis jetzt noch keinen weg gefunden diese zu umgehen.
Ja ok Tabels bzw panelGrids… leider ist verlangt worden (typisch Ausbilder halt… is so un fertig) dass diese beiden nicht genutzt werden

da ich
sowieso schon recht viele (is ja immer ansichtssache…)

Ansichtssache ist das nicht. Alles, was überflüssig ist,
sollte man auch nciht im Code haben. Und ein div gruppiert ja
nur. Mehrere überflüssige divs machen nur eine div-Suppe.

Ich meinte mit Ansichtssache, dass ich nie wirklich extremviel mit HTML gemacht habe und mir schon eine 4x Verschachtelung als viel vorkommt. Wenn cih da dann nochma pro „seitenabschnitt“ sagen wir ma 6 Stück reinbau find ich das sehr unübersichtlich… Darum gehts mir…

Verschachtelungen von DIV’s habe die ich über CSS anordne…

Ist meist gar nicht nötig.

Wenn ich die CSS anordnung raus nehme, stehen die DIVs alle samt untereinander… -> die Anordnung stimmt ohne nicht

Wie löst ihr das Problem?

Z.B. mit der proprietären Eigenschaft des Mozilla:
-moz-border-radius

Dann siehts in Mozillas schön aus, der IE hat halt eckige
Ecken :wink:
Wen interessierts? :smiley:

Meinen Ausbilder und seine Kunden xD
Wenns sowas noch für Opera und IE geben würde wärs ne schöne Lösung…

Einfach im Background Bilder
einfügen die abgerundetet Ecken haben

Dann hast Du aber ein pixerlgenaues Layout, bzw. wenn der
Nutzer die Größe ändert, ändert sich das Hintergrundbild nicht
mit und der Rahmen ist dahin.

Ja das stimmt… aber kann man nicht eine hochskalierbare Grafik nehmen und den Hintergrund im CSS als gestreckt definieren?

Liebe Grüße

DE

Hallo,

Dann siehts in Mozillas schön aus, der IE hat halt eckige
Ecken :wink:
Wen interessierts? :smiley:

Meinen Ausbilder und seine Kunden xD
Wenns sowas noch für Opera und IE geben würde wärs ne schöne
Lösung…

Opera unterstützt CSS3 (und CSS im allgemeinen) zwar besser als alle anderen Browser und bis eben dachte ich, border-radius hätten die implementiert, weil -o-border-radius in der aktuellen Opera Version nicht mehr implementiert ist, aber ich wurde eines besseren belehrt. Diese Layout-Feinheiten sind anscheinend auch für Opera nicht so wichtig wie die neuen Selektoren und, seit Acid3 da ist, ein ordentlicher Dom-Support. Webkit basierende Browser (Konqueror, Safari) können das auch, wie die aktuelle Firefox 2 Release aber nur über eine proprietäre Eigenschaft, mit -webkit-border-radius.

div {
 border-radius: 1em; //CSS3
 -o-border-radius: 1em; //Opera, leider nicht mehr unterstützt
 -moz-border-radius: 1em; //Mozilla
 -webkit-border-radius: 1em; //Webkit
}

IE und neue Operas verstehen das nicht. Wie Efchen kümmert mich das auch nicht und ich verwende obiges Konstrukt für runde Ecken, bis die Browser CSS3 unterstützen ist es eben eckig.

Wenn Du Dir nicht das gesamte Markup verhunzen willst, das wirklich so wichtig ist und Du nicht warten kannst, bis IE (vielleicht mit Version 8?) und Opera das endlich unterstützen, würde ich nicht inversives Javascript einsetzen. Als begeisterter JQuery-Verwender schlage ich dessen Verwendung vor, Lösungen gibt es viele, z.B. die ersten ergoogelten (Suche nach jquery rounded borders):
http://www.methvin.com/jquery/jq-corner.html (für einfarbige Effekte)
http://15daysofjquery.com/wrap-it-up-pretty-corners/13/ (kein Plugin, nur JQuery, für Effekte mit Bildern)
Das funktioniert sogar im IE 6, aber eben mit Javascript. Nutzer mit abgeschaltetem Javascript (wobei wer den IE nutzt meist nicht mal weiß was Javascript ist und Opera trotz der Qualität klar in der Minderheit ist) sehen dann eben eckige Ecken, aber der Code ist gerettet.

Ciao
Rudy

Dat is aber zum Kotzen xD

Richtig, deswegen macht man entweder proprietäre runde Ecken oder gar keine.

Ja ok Tabels bzw panelGrids… leider ist verlangt worden
(typisch Ausbilder halt… is so un fertig) dass diese beiden
nicht genutzt werden

Naja, Tabellen sind ja auch nur dazu da, tabellarische Daten auszuzeichnen, das ist schon richtig, dass man die nicht fürs Layout verwendet. Aber divs sind auch nicht fürs Layout zuständig, so dass man die Seite in irgendwelche geometrischen Bereiche aufteilt und dann als erstes ein paar divs in die Seite bastelt ohne Inhalt.

Verschachtelungen von DIV’s habe die ich über CSS anordne…

Ist meist gar nicht nötig.

Wenn ich die CSS anordnung raus nehme, stehen die DIVs alle
samt untereinander… -> die Anordnung stimmt ohne nicht

Ich meinte eine starke Verschachtelung der divs.

Dass die Anordnung am Bildschirm ohne CSS nicht mehr stimmt, ist klar, denn für das Layout ist ja CSS zuständig und nicht HTML!

Dann siehts in Mozillas schön aus, der IE hat halt eckige
Ecken :wink:
Wen interessierts? :smiley:

Meinen Ausbilder und seine Kunden xD

Pech gehabt. Wenn die Browser es nicht können, kann man es nicht verlangen.
Auch als Auftraggeber muss man im WWW flexibel sein. Das ganze WWW ist flexibel. Das muss man erstmal verstehen.
Wenn CSS3 kommt, können es die modernen Browser. Aber wem nützt das? Alte Browser verstehen es nach wie vor nicht, und da heißt es dann ja auch auf einmal „ist egal, machs für die modernen. Wer einen alten Browser benutzt, hat Pech“. So viele Nutzer nutzen den IE, obwohl er weniger auf dem Kasten hat, als er müsste, und trotzdem muss der immer unterstützt werden.

Wenns sowas noch für Opera und IE geben würde wärs ne schöne
Lösung…

Genausowenig Sinn, wie Dinge zu verlangen, die technisch nicht oder nur mit unnötig großem Aufwand (kostet mehr!) zu lösen sind, ist es unsinnig, eine Seite nur auf wenige Browser auszurichten. Es gibt mehr auf der Welt als Opera, Mozilla und IE.
http://www.bestviewed.de/browser/

Ja das stimmt… aber kann man nicht eine hochskalierbare
Grafik nehmen und den Hintergrund im CSS als gestreckt
definieren?

Hintergründe können nicht skaliert werden. Dann müsste es schon ein Bild in einer anderen z-Ebene sein, aber das Skalieren von Bildern sieht im Browser immer bescheiden aus, und wie weit nun die SVG-Unterstützung ist, weiß ich nicht. Aber auch da gilt: Es gibt genug Browser, die das nicht können. Und die müssen auch damit leben, also kann es kein Akt sein, wenn der dumme IE (er kann es nunmal nicht!) eckige Ecken hat!

Gruß,
-Efchen

25 Techniken fuer runde Ecken
gibt’s hier:
http://www.cssjuice.com/25-rounded-corners-technique…

einige davon setzen nur auf CSS, andere auch auf Javascript … einfach mal durchschauen welche davon fuer dich passen koennte.

Gruesse
Stefan

Hi

gibt’s hier:
http://www.cssjuice.com/25-rounded-corners-technique…
einige davon setzen nur auf CSS, andere auch auf Javascript …
einfach mal durchschauen welche davon fuer dich passen
koennte.

Hui das sieht interessant aus *freu*
Werd ich mir sofort mal genauer angucken :smile:

Vielen Dank

Gruesse
Stefan

Grüße zurück

DE

Das funktioniert sogar im IE 6, aber eben mit Javascript.
Nutzer mit abgeschaltetem Javascript (wobei wer den IE nutzt
meist nicht mal weiß was Javascript ist und Opera trotz der
Qualität klar in der Minderheit ist) sehen dann eben eckige
Ecken, aber der Code ist gerettet.

hm… warum verwendet man nicht beides?
für opera und ie jscript und für FF und safari css?
das wäre ne möglichkeit um es allen recht zu machen :wink:
gruss
sam

Diese Möglichkeit schmeckt mir aber nicht so richtig da ich
sowieso schon recht viele (is ja immer ansichtssache…)
Verschachtelungen von DIV’s habe die ich über CSS anordne…

Schmeckt mir auch nicht. Man muss sich ohnehin die Frage stellen, ob so viele DIVs überhaupt notwendig sind, oder ob man mit den ohnehin schon vorhandenen HTML-Tags nicht was anfangen kann in der Beziehung. Ich meine, man kann ja auch einer Überschrift eine Hintergrundgrafik verpassen und das ganze dann ausrichten etc. Schon hat man die linke obere Ecke usw…

Wie löst ihr das Problem? Einfach im Background Bilder
einfügen die abgerundetet Ecken haben (halt für jedes DIV ne
eigene Klasse mit eigenem BG?
Was gibt es halt noch für Lösungswege?

Eine reine CSS-Lösung, bzw erste Ansätze gibt es zwar schon, was aber noch sehr wackelig ist. Es wird kaum unterstützt. Daher bleibt einem momentan eigentlich nur das arbeiten mit Grafiken.

Eine Möglichkeit wäre das hier http://marcus-ringer.de/flexboxen.shtml

Gruß Marcus

einfach bildchen für frame-rahmen?
meine, ich hab’ ‚mal irgendwo gesehen, daß man bildchen für den rahmen (von frames? von iframes? von allem, was ein‘ rahmen haben kann?)nehmen kann. dann muß man nur zwei bildchen selberpixeln - eins für die ränder, eins für die runden ecken - und die kippt man dann viermal und speichert sie ab.

oder?