| 

.NET C# Java Javascript Exception

3
Wie kann man mit CSS einem Element runde Ecken geben? Ich weiß, dass geplant ist, das zu standardisieren im CSS, aber ist das überhaupt in heutigen Browsern möglich?

Anmerkung: Dies wurde bereits unter
Wie kann man mit CSS runde Ränder darstellen?
gefragt.
11.09.2009
herold 61 1 2
FalkP 3,3k 3 8
3
hilft dir das schon? http://codekicker.de/fragen/Wie-kann-man-mit-CSS-runde-Raender-darstellen/112
lunatigs 11.09.2009
5 Antworten
1
Nicht mit CSS, aber schau doch mal unter "Runde und andere Ecken". Vielleicht auch ein Ansatz.
11.09.2009
stj 326 1 2
1
Wenn es wichtig ist, das es überall funktionieren muss dann natürlich Grafiken

Bei irgend welchen Hinweisboxen wo es wirklich nur den border betrifft, dann mit CSS, da haben die IE User eben Pech gehabt. Der IE9 wird es ja vielleicht richten ;)

Notfalls gibt es auch noch einige andere Varianten, Scripte oder Klassen die den Border dynamisch erzeugen mit JS bzw. durch Div's die dynamisch genereriert werden.

Ein paar Beispiele findest du hier:
http://www.curvycorners.net/
http://www.phpmyborder.com/ (gerade down daher => http://www.phpclasses.org/)
http://www.netzgesta.de/corner/
http://www.html.it/articoli/niftycube/index.html
usw.

Da gibt es wirklich einige Lösungen.

grüße
BiX
15.09.2009
BiX 149 1 5
0
Ich mache das normalerweise mit einem DIV:

<div style="background-color:#eeeeee; border-width:1px; border-style:solid; border-color:#0050A8; padding: 10px; left:10px; top:50px; -moz-border-radius:10px; -khtml-border-radius:10px; text-align:justify; ">
<table>
<tr>
<td>Test</td>
</tr>
</table>
</div>


Dieses Beispiel klappt aber soweit ich weiß aber nicht im Internet Explorer!
11.09.2009
Dustin Klein 2,9k 2 9
da weißt du richtig :)
darkdust 11.09.2009
Es gibt ja auch eine Reihe Browser, die auf dem IE basieren (Z.Bsp.: Avant), da gehts natürlich auch nicht.
Bei Opera und Safari würde ich auch eher Nö sagen.
Aber bei Browsern die auf der Firefox-Engine basieren ist das eine schnelle und einfache Lösung.
MiW 11.09.2009
1
Browser die auf Webkit aufbauen könne auch abgerundete Ecken darstellen.

Beispiel:
-webkit-border-radius: 1em;
Nanobyte 12.09.2009
1
Dieses Feature soll in CSS 3 einfließen:
http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius
clonejo 27.09.2009
0
Am besten grafisch.

in eine Grafik datei die horizontalen bestandteile: ecken und "das dazwischen", also die Ränder oben und unten.

in eine Andere Graphik die Vertikalen Bestandteile (also Rand links und rechts)

dann eine Tabelle mit 3 Spalten und 3 Reihen
|-1-|-----2------|-3-|
| 4 | 5 | 6 |
|-7-|-----8------|-9-|


die hintergrund-eigenschaft der td's dann so:

1: horizontale graphik offset ecke_links_oben
2: horizontale graphik offset rand_oben mit repeat-x
3: horizontale graphik offset ecke_rechts
4: vertikale graphik offset rand_links mit repeat-y
5: Dein Inhalt (also DIV oder was auch immer)
6: vertikale graphik offset rand_rechts mit repeat-y
7-9: so wie 1-3

ist zwar einmal ein bisschen aufwand, dafür hat man dann aber einen Vernünftigen "Kasten" mit runden ecken, den man in jedem Browser vernünftig einsetzen kann.
11.09.2009
MiW 1,0k 1 8
1
\[UPDATE\]
hab ganz vergessen Deine Frage zu beantworten:

nein nur mit css gibt es da keine Vernünftige Lösung, es sind immer eingene Graphiken notwendig.
MiW 11.09.2009
Eine vernüftige Lösung ist der Missbrauch von Tabellen sowieso nicht, dann lieber verschachtelte und unbedeutende <div>.
Blauesocke 11.09.2009
1
DIV Blöcke sind generell besser als Tables, da diese auch wieder unterschiedlich von diversen Browsern gehandelt werden.
Dustin Klein 11.09.2009
Aber trotzt einiger Browsereigenheiten sind tabellenbasierte Layouts immer noch einfacher zu handhaben und am Markkt weit verbreitet.
Mit DIV's isses nartürlich "sauberer", bedarf aber auch schon etwas mehr gehirnschmalz.
MiW 14.09.2009
Warum sollte man Tables und überschaubares CSS nehmen, statt auf komplexe, verschachtelte DIVs zurückzugreifen und IE-Hacks verwenden zu müssen.
Tabellen kann sogar IE 4 richtig rendern, DIVs funktionieren wieder nur bedingt in allen Browsern.

Natürlich ist der Coolness-Faktor bei DIV höher, aber die Wartbarkeit ist für den A*sch.
Letztlich kommt es noch so weit, dass normale Tabellen auch noch als 1000er-Schachteldiv gebastelt werden.

Letzlich soll es im Browser ordentlich aussehen, egal was drunter liegt.
tomahlak 25.10.2009
Letztlich ist es wichtig, dass eine Webseite standardkonform ausgeliefert wird, damit gängige Software diese auch standardkonform interpretieren kann. Zumal sind vier verschachtelte <div> um Welten wartbarer als 200 <td> in einem <table>.

Dass Tabellen verwendet werden, ist doch vollkommen in Ordnung, aber bitte nur, um Daten tabellarisch darzustellen.
Blauesocke 25.10.2009
Bin jetzt zu faul es ausprobieren ;), aber passen sich die Ecken bei Vergrößerung des <div>s, durch z.B. mehr Text darin auch an ?
phpdoener 26.10.2009
Solange es bei 4 DIV bleibt, hast Du zweifellos recht, Blausocke. Schaue Dir aber mal die Dinger an, wenn 3-spaltige Layouts gebastelt werden und dann alles gleich hoch sein soll und sowas.
Dann haste nicht mehr 4 DIV, und mit einer geschickten Tabelle kann man sich viel Mühe und Ärger sparen. Und 3 TDs sind übersichtlicher als zig DIV-Container.
tomahlak 29.10.2009
-2
Ich lüfte das Geheimnis mal. Dafür bitte einmal Hoch Pushen :)

Also mit CSS kannst du ohne Grafiken Runde Ecken erstellen. Allerdings kann der Internet Explorer diese Runde Ecken nicht wahrnehmen/berücksichtigen.
Deswegen erstellt man Images. Für das Erstellen von Images und Code kannst du Folgendes nutzen: hier

So und jetzt bitte Push :)
-----------
beat-blogger
29.10.2009
Sei froh, dass ich heute schon mein Bewertungs-Limit erreicht habe - bekommst du eben Morgen eine Negativbewertung.
Blauesocke 29.10.2009

Stelle deine Html-Frage jetzt!