Eine Box in CSS mit runden Ecken
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bild
boxen
browser
code
eigenschaft
folgendem ergebnis
http
index
konstrukt
leere elemente
lesezeichen
radius
realisieren
runde ecken
runden ecken
sauberem code
tip
url
version
wirken
-
Hallo zusammen!
Ich weiß, das klingt etwas paradox, aber ich möchte gerne eine Box in meine HP einbauen, die runde Ecken hat.
Sowas sieht immer so schön "Web2.0"-mäßig aus.
Hat einer 'ne Ahnung, wie ich das mit möglichst wenig und vor allem möglichst "sauberem" CSS Code realisieren kann?
MfG, MaKiller -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Google ist dein Freund
1. Suchergebniss von Eine Box in CSS mit runden Ecken: http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/ -
da empfehle ich dir diesen link.
Für mich ist das die einzige und perfekte Methode runde Ecken zu machen.
War mir ein Lesezeichen wert
-Valide
-keine Bilder
-funktioniert in jedem Browser mit css -
VIELEN DANK!
Für beide Antworten.
Die Selfhtml Seite hatte ich natürlich schon gefunden, (habe mit dieser Seite html, css und javascript gelernt) aber ich wollte ja ausdrücklich etwas mit möglichst wenig und vor allem "sauberem" Code. Solche Konstrukte mit fünf ineinander verschachtelten <div>s finde ich ziemlich unübersichtlich.
Die Lösung auf webbe.de ist genau das was ich gesucht habe!
Nochmal dankeschön. -
Was webbe da macht ist eigentlich genau das Gegenteil von sauber. Den Code mit leeren Elementen vollstopfen die nur einen Designzweck erfüllen gilt allgemein als grottenschlechte Programmierung.
Also, mein Tipp: Nutze die CSS Eigenschaft border-radius (und Präfix-Versionen -moz-border-radius, -webkit-border-radius). Damit hast du schonmal in allen modernen Browsern ausgenommen dem IE runde Ecken. Und ernsthaft: Ist es so schlimm, wenn im IE dann die runden Ecken fehlen? Die sollen das Design ja nur etwas verschönern. Wenn sie dann nicht da sind, auch nicht schlimm ;) -
Oh, jetzt schäme ich mich ein wenig. DAS versteht man unter unsauberem Code?!
Ich bin irgendwie doch noch ein ziemlicher Anfänger, merke ich.
Naja, danke für den Hinweis mit border-radius. Ich habe irgendwo gelesen, dass runde Ecken
in CSS3 mit eingebaut werden, aber wer weis wie lange das noch dauert.
Ich werde dann wohl doch eher die Selfhtml Version nehmen... -
Google mal nach NiftyCorners. Das Script nutzt den selben Effekt, fügt die Elemente allerdings per JavaScript ein, was deinen Code wieder konform macht.
-
So, habe mir das NiftyCorners mal zu Gemüte geführt.
Grundsätzlich scheint mir das ganz gut zu sein...
Es ist definitiv wesentlich übersichtlicher als das von SelfHtml.
Aber is halt JavaScript.
Reines CSS und HTML wäre mir einfach lieber gewesen.
Ich denke halt, das JavaScript bei manchen Leuten Mistrauen hervorrufen könnte.
Andererseits bekommt man das so ja meistens gar nicht mit, wenn mal JavaScript benutzt wird.
Naja, ich werd mal sehn, was ich letzt endlich mache. -
Dann scheint ja die beste Lösung zu sein es mit border-radius zu machen PLUS die javascript-variante. (falls border-radius nicht bekannt)
Bleibt nur noch eine kleine Gruppe an Usern übrig die IE mit deaktiviertem javascript haben.
Es sei denn auch das ist zu unsauber nikic *duck*
-
@elsenroth: Viele verschachtelte divs sind genauso schlimm wie viele leere Elemente. Also das löst das Problem nicht ;)
@simuliertes: Ja genau, border-radius ist eine Lösung die in fast allen Fällen wirken wird, denke ich. Die JS Lösung würde man ja nur für den IE < 9 schalten und mal ernsthaft: Gibt es IE User, die JS aus haben? -
Falls du Gimp benutzt gibt es noch diese Möglichkeit:
http://computer.t-online.de/freeware-gimp-fotos-und-bilder-mit-runden-ecken-erzeugen/id_15398774/index
Die Ecken dürfen aber nicht zu gross sein dann werden sie unsauber.
Ist zwar jetzt etwas am Thema vorbei aber ich komme damit am besten zurecht denn jeder Browser stellt es gleich dar was bei den anderen Möglichkeiten öfters nicht der Fall ist.
Grüsse Malia
Beitrag zuletzt geändert: 21.8.2010 20:27:46 von malia -
Hier hätte ich n tollen Block (Box):
http://de.tinypic.com/r/2qk2lah/4
Wenn du es möchtest kann ich dir die Bilder und den CSS / HTML Code geben!
Mit Freundlichen Grüßen
blackdrrragon -
So, nach reiflicher Überlegung komme ich nun zu folgendem Ergebnis: Ich werde die runden Ecken mit "border-radius" realisieren. "nikic"s Argumente sind einfach unschlagbar. :-)
Also, nochmals vielen Dank!
P.S.: Zu dem Thema folgender Link: http://www.webmasterpro.de/coding/article/css-referenz-border-radius.html
Beitrag zuletzt geändert: 23.8.2010 10:21:58 von elsenroth -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
