Runde Ecken per CSS Einstellungen

[webmasterFF]

Hallo Leutz,

ich steh mal wieder vollends auf dem Schlauch glaub ich....

Ich versuche seit Stunden verzweifelt die "runden Ecken" mittels dieser Anleitung zu erstellen: Runde Ecken Anleitung

Nun, ich hab den Qualltext schön in meinen Quelltext im Wysiwig eingefügt und die CSS-Regel gesetzt und auch im Layout aktiviert. ABER irgendwie funzt das nicht recht. Hat jemand für den Sefrengo sowas schon realisiert mittels CSS o.ä. und wenn ja: Kann er mir eventl. ne Hilfestellung geben oder einen besseren Tipp?

Danke Euch

[pawel]

Geht jetzt überall (incl. dem kommenden Opera) außer dem IE, etwa so:

QUELLTEXT

-moz-border-radius: 1em; // Firefox
-webkit-border-radius: 1em; //Safari, Chrome, Iron u.s.w.
-khtml-border-radius: 1em; //Konqueror
border-radius: 1em; //CSS3 und Opera ab 10.50

Wenn Du die Ecken unterschiedlich ansprechen willst, weicht die Syntax des Fox von den anderen etwas ab.

Du kannst Dich ja in unserem Blog ein wenig inspirieren lassen, der ist ganz schön rund.

[webmasterFF]

Wow, tolle und hilfreiche Seite !
Ich selbst bin IE und Safari User ... Nun, wenn die "runden Ecken" im Ie nicht funktionieren ist es auch sagenhaft unnötige diese einzubauen.
DANKE Pawel für deine Antwort und den Link - glaub da werde ich mich mal öfter umschauen.

Dennoch meine Frage: Der IE8 kann die runden Ecken grundsätzlich nicht oder nur die bei euch vorgestellte Lösung nicht.
Was hälst du von meiner (s. Link) - funktioniert diese dann im IE8 auch nicht?

DANKE

[saschapi]

Du kannst mit jQuery arbeiten und einfach ein Plugin einsetzen. Dann hast du es in allen Browsern
http://www.methvin.com/jquery/jq-corner-demo.html

Bist du natürlich dann von JS abhängig. Allerdings finde ich das mittlerweile weniger schlimm. Dann wird halt ohne JS ein leicht anderes Design präsentiert. Solange noch weiterhin alles funktioniert ist IMHO alles gut!

[webmasterFF]

Wow, das klingt auch sehr gut ....
ABER eine Frage bleibt: Da ich absolut kein Berufsprogrammierer, zwar schon einige Websites mit dem Sefrengo realisiert habe ... muss ich die vermutlich blöde Frage stellen:

Arbeit JQuery nicht mit einem Java im Hintergrund?
Wozu dann das Plugin?
Plugin und JS arbeiten gemeinsam?

Erklär doch bitte genauer wie du das realisiert hast ... !

Vielen Dank !

Der Beitrag wurde von webmasterFF bearbeitet: Thu. 31. December 2009, 17:00

[pawel]

Lesen hilft schon.
Jquery ist eine Javascriptbibliothek, die die JS-Programmierung wesentlich erleichtert. Plugins heißen Erweiterungen, i.d.R. wird also außer dem jquery-Script noch eine weitere JS-Datei eingebunden. Ein weitere Aufruf ist dann für die Anwendung der Funktionalität nötig.

Wer ist schon Berufsprogrammierer. Das hört sich mächtig gewaltig an. Ich wurschtle ein bisschen im Frontend und habe was ganz anderes studiert.

[saschapi]

Schau dir doch mal die ein oder andere jQuery Einführung an! Das kann auch jenseits der runden Ecken nicht schaden!
Kurze Einführung in jQuery
Screencast für absolute jQuery Einsteiger
Technikwürze zum Thema jQuery

LG Sascha

[htmlfromhell]

geht auch mit css und bullets:

http://www.cssplay.co.uk/boxes/curves.html

QUELLTEXT

<style type="text/css">

.curvy {position:relative; width:250px; background:#9caf9c; color:#000; margin:5em auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#9caf9c; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#9caf9c; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy p {position:relative; z-index:100; padding:10px 15px; font-size:11px;}

</style>


<div class="curvy">
<em id="ctl"><b>&bull;</b></em>
<em id="cbl"><b>&bull;</b></em>
<em id="ctr"><b>&bull;</b></em>
<em id="cbr"><b>&bull;</b></em>
<p>I know it's been done before, but not this way!<br />A box with curved corners into which you can put text that goes right up to the corners.<br />
Again, no graphics were used in the making of this demonstration.<br />All it takes is four quadrants of a bullet point positioned absolutely in each corner (arial font this time as it's the safest one to use).</p>
</div>

[saschapi]

Interessanter Ansatz Aus Aspekten der Barrierefreiheit allerdings unschön. Zusätzliches Markup, zumal wenn von Screenreadern etc. interpretierbar ist nicht so gut. (Wird quasi vorgelesen als "Sonderzeichen Bullet, Sonderzeichen Bullet, Sonderzeichen Bullet, Sonderzeichen Bullet, I know it's been done before, but not this way...)
Aber wie gesagt. Auch mal ein kreativer Ansatz! :-)

[pawel]

Absolut überflüssig. Abgesehen davon, das border-radius ab IE9 unterstützt wird, sollte es keine überflüssiges Markup nur wegen einem Browser geben.
Wenn der IE unbedingt runde Ecken haben sollte, ist die jquery-Lösung geeignet oder eine per htc-Datei.

[htmlfromhell]

25 Rounded Corners Techniques with CSS

http://www.devwebpro.com/25-rounded-corner...iques-with-css/