.NET C# Java Javascript Exception

 | 
Frage stellen Fragen Themen Mitglieder Abzeichen RSS-Feed
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.09
herold 61 2
FalkP 3,2k 2 7
3
hilft dir das schon? http://codekicker.de/fragen/Wie-kann-man-mit-CSS-runde-Raender-darstellen/112
lunatigs 11.09.09
5 Antworten
1
Nicht mit CSS, aber schau doch mal unter "Runde und andere Ecken". Vielleicht auch ein Ansatz.
11.09.09
stj 316 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.09
BiX 139 1 4
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!
da weißt du richtig :)
darkdust 11.09.09
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.09
1
Browser die auf Webkit aufbauen könne auch abgerundete Ecken darstellen.

Beispiel:
-webkit-border-radius: 1em;
Nanobyte 12.09.09
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.09
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.09
MiW 976 7
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.09
Eine vernüftige Lösung ist der Missbrauch von Tabellen sowieso nicht, dann lieber verschachtelte und unbedeutende <div>.
Blauesocke 11.09.09
1
DIV Blöcke sind generell besser als Tables, da diese auch wieder unterschiedlich von diversen Browsern gehandelt werden.
Dustin Klein 11.09.09
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.09
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.09
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.09
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.09
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.09
-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
Sei froh, dass ich heute schon mein Bewertungs-Limit erreicht habe - bekommst du eben Morgen eine Negativbewertung.
Blauesocke 29.10.09
Deine Antwort
Entweder einloggen... ...oder ohne Wartezeit registrieren
Name
Passwort
Passwort wiederholen
E-Mail
Geworben von


Login mit OpenID

Mit einem OpenID-Account kannst Du dich auf allen Webseiten anmelden, die OpenID unterstützen. Du hast bereits ein Benutzerkonto bei einem der folgenden Provider? Dann kannst Du dich direkt hier damit registrieren.


OpenID-Provider anklicken: