Runde Ecken per CSS |
Willkommen, Gast ( Anmelden | Registrierung ) [ Hilfe | Mitglieder | Suche ]
Runde Ecken per CSS |
Wed. 30. December 2009, 12:28
Beitrag
#1
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 287 Mitglied seit: 14.05.2009 Mitglieds-Nr.: 1.885 |
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 -------------------- Es dankt und grüßt
webmaster FF -------------------- Sefrengo v.1.6.0 ES LEBE SEFRENGO - denn du hast tausende von Möglichkeiten !! |
|
|
Wed. 30. December 2009, 13:38
Beitrag
#2
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 442 Mitglied seit: 02.07.2006 Wohnort: Halle Mitglieds-Nr.: 71 |
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. -------------------- |
|
|
Wed. 30. December 2009, 18:00
Beitrag
#3
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 287 Mitglied seit: 14.05.2009 Mitglieds-Nr.: 1.885 |
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 -------------------- Es dankt und grüßt
webmaster FF -------------------- Sefrengo v.1.6.0 ES LEBE SEFRENGO - denn du hast tausende von Möglichkeiten !! |
|
|
Thu. 31. December 2009, 11:49
Beitrag
#4
|
|
Advanced Member Gruppe: Moderators Beiträge: 911 Mitglied seit: 26.06.2006 Wohnort: Essen; Ruhrgebiet Mitglieds-Nr.: 4 |
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! -------------------- |
|
|
Thu. 31. December 2009, 16:39
Beitrag
#5
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 287 Mitglied seit: 14.05.2009 Mitglieds-Nr.: 1.885 |
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 -------------------- Es dankt und grüßt
webmaster FF -------------------- Sefrengo v.1.6.0 ES LEBE SEFRENGO - denn du hast tausende von Möglichkeiten !! |
|
|
Thu. 31. December 2009, 19:51
Beitrag
#6
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 442 Mitglied seit: 02.07.2006 Wohnort: Halle Mitglieds-Nr.: 71 |
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. -------------------- |
|
|
Tue. 5. January 2010, 09:23
Beitrag
#7
|
|
Advanced Member Gruppe: Moderators Beiträge: 911 Mitglied seit: 26.06.2006 Wohnort: Essen; Ruhrgebiet Mitglieds-Nr.: 4 |
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 -------------------- |
|
|
Thu. 7. January 2010, 13:48
Beitrag
#8
|
|
Member Gruppe: Members Beiträge: 32 Mitglied seit: 29.09.2006 Mitglieds-Nr.: 266 |
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>•</b></em> <em id="cbl"><b>•</b></em> <em id="ctr"><b>•</b></em> <em id="cbr"><b>•</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> |
|
|
Thu. 7. January 2010, 15:39
Beitrag
#9
|
|
Advanced Member Gruppe: Moderators Beiträge: 911 Mitglied seit: 26.06.2006 Wohnort: Essen; Ruhrgebiet Mitglieds-Nr.: 4 |
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! :-) -------------------- |
|
|
Thu. 7. January 2010, 18:58
Beitrag
#10
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 442 Mitglied seit: 02.07.2006 Wohnort: Halle Mitglieds-Nr.: 71 |
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. -------------------- |
|
|
Tue. 26. January 2010, 15:18
Beitrag
#11
|
|
Member Gruppe: Members Beiträge: 32 Mitglied seit: 29.09.2006 Mitglieds-Nr.: 266 |
|
|
|
Vereinfachte Darstellung | Aktuelles Datum: 23.9.24 - 15:55 |