Abgerundete Ecken

[TomH]

Hallo,

wie realisiert Ihr momentan abgerundete Ecken?

Ich habe es bisher mit verschachtelten divs gemacht und diesen dann die entsprechenden Ränder oder Bilder zugewiesen, aber ich finde das irgendwie unschön. Die Variante mit -moz-border-radius und -khtml-border-radius spricht mir zu wenig Browser an.

Wenn Ihr es doch mit divs macht, wie verschachtelt Ihr diese?

[Nils Riel]

<div class="bg_main">
<div class="oben_links">
<div class="oben_rechts">
<div class="unten_links">
<div class="unten_rechts">
<div>
<div>
<div>
<div>
<div>

So mache ich das, wenn der Content in der Breite variabel ist, ansonsten reichen 3 divs (oben unten und mitte).

Es gibt aber auch Javascripts dafür, die machen aber im Prinzip das Gleiche, nur sieht es auf den ersten Blick nach weniger HTML-Code aus.

[FloB]

Ich nutze border-radius sowie die proprietären Methoden und für den IE kommt bald ein JS zum Einsatz, das Bild-Elemente in einem vorhandenen erstellt und die Ecken überlagert – das geht natürlich nur bei einfarbigem Hintergrund und ohne Transparenzen.

Ansonsten kam es auch schon vor, dass ich komplett den Hintergrund als Bild gespeichert habe und drei separate Container angelegt habe – einen, der das Bild mit den oberen beiden Ecken anzeigt, einer, der den üblichen Hintergrund enthählt, und einer für das Bild mit dem Abschluss der Box.

[BugBuster]

HTML mit CSS:
Nifty Corners: rounded corners without images

Das wurde dann weiterentwickelt zu Nifty Corners Cube (HTML,CSS und Javascript)
http://www.html.it/articoli/niftycube/index.html

[matze]

Für sowas kann man auch die sog. Sliding-Door Technik nutzen. Dann kommt man mit 2 per CSS stylbaren Elementen aus.

[FloB]

Ich habe grade noch das gefunden: http://www.htmlremix.com/css/curved-...-cross-browser

[TomH]

Vielen Dank, sehr interessante Ansätze - werde ich mir bei Gelegenheit mal genau anschauen.

Ansonsten können wir hier ja einfach weiter sammeln...

[andre.5tz]

Hallo,

ich hatte vor einiger Zeit mal CurvyCorners gefunden. Mir gefällt der Ansatz - CSS3 und/oder JavaScript.
Ich kann aber nicht behaupten, das es vollständig funktioniert, was nicht unbedingt an curvycorners liegen sollte. Ich hatte noch nicht die Zeit, es vollständig und ausgiebig zu testen.

VG
André

[TomH]

Eine Kombination zwischen Javascript und CSS3 wäre auf jeden Fall auch mein Favorit.

CurvyCorners funktioniert auch, aber ich finde das Ergebnis nicht befriedigend (s. Screenshot - oben ist CurvyCorners im IE8 und unten das Ergebnis im Firefox).

[Nils Riel]

Das Problem lässt sich sicherlich beheben, wenn du uns den Link dazu postest.

[TomH]

Das Problem liegt an den Berechnungen von CurvyCorners, denn die gefallen mir nicht so gut.

[Juke]

Ich setze einen umgebendes div auf position: relative; und positioniere die runden Ecken über eine dem img-Tag hinzugefügte Klasse oder id absolut.
- Hat den Nachteil, dass man in TL das template fe_page ändern muss und die img-Tags einfügen.

<img id="corner-top-left" src="dateien/images/layout/corner-top-left.png" alt=" " />
<img id="corner-top-right" src="dateien/images/layout/corner-top-right.png" alt=" " />
<img id="corner-bottom-left" src="dateien/images/layout/corner-bottom-left.png" alt=" " />
<img id="corner-bottom-right" src="dateien/images/layout/corner-bottom-right.png" alt=" " />

img#corner-top-left{top:0px;left:0px;position:absolute;}
img#corner-top-right{top:0px;right:0px;position:absolute;z-index:15;}
img#corner-bottom-left{bottom:0px;left:0px;position:absolute;}
img#corner-bottom-right{bottom:0px;right:0px;position:absolute;z-index:15;}

- Hat den Vorteil, dass bei fluiden Designs die runden Ecken problemlos erhalten bleiben.
- damit kann man alle Sorten von Rahmen machen.
- je nach Design muss man manchmal noch ein bisschen mit z-index dafür sorgen, dass die Ecken immer "oben" bleiben und beim IE6 kann es passieren, dass es - warum auch immer - um 1px verspringt. Korrigier ich dann via ccomments.

Beste Grüße
Jutta

[Nils Riel]

Juke, schau dir mal meine Methode an, du erstellst 4 div's und kannst dann mit vercshiedenen backgrounds und background-positions das gewünschte Resultat erzielen - der IE6 braucht keine extra Anpassungen und auch z-index ist überflüssig. Z.B. hier zu sehen: www.nils-riel.de

[Juke]

Hallo Nils, das mit der Sprite-Technik ist schon ok und wer mag, kann das sicherlich auch so machen. Bei mir ist es wohl einfach Gewohnheit. Und das andere ebenso: ich habe halt eher mal die Tendenz so wenig divs wie möglich zu verwenden und lieber die Elemente direkt anzusprechen. Kann man sich aber auch drüber streiten - oder auch nicht ;-).

In der Regel sind Anpassungen nicht erforderlich, aber bei manchen Designs ist es bei mir dennoch vorgekommen, dass ich einen z-index hinzufügen musste, weil ich z.B. bei TL auch .inside verwendet habe um noch ein weiteres Hintergrundbild hinzuzufügen. Dann hatte ich drei Schichten und meine runde Ecke war verschwunden.

Der Versprung tritt im IE6 gerne mal auf, wenn man diese Technik auch für ganze Rahmen verwendet und man hierbei noch ein weiteres div einfügt. Ich sagte ja auch nur: KANN, ist nicht die Regel.

Beste Grüße
Jutta

[Toffa]

@ Nils,

ich habe versucht Deinen Code nachzubauen aber irgendwie bekomme ich es nicht hin. Kannst Du es evtl. noch etwas besser erklären?

Die Bilder sind ja bei Dir nur kleine Punkte

Danke

[skraddy]

Hallo,

Wenn ich die Ecken von news_simple abrunden möchte, welches Template packe ich denn in einen Div nach der Methode von Juke?
Im Template news-simple werden die einzelnen Newszeilen gestyled und ausgegeben. Ich benötige jedoch das Template, das den Newsblock lädt, bzw. ausgibt.

[Sebastian]

HI

das wären je nach Modul "mod_newsreader.tpl", mod_newsarchive.tpl" oder "mod_newslist.tpl".

Sebastian

[skraddy]

Hallo Besten Dank. Bei genauem Hinsehen im Stylesheet erkennt man auch die tpl Datei.

Besten Dank

skraddy

[skraddy]

Hallo. Bisher hat mir keine der genannten Lösungen bei folgendem helfen können:

Ausganglage: Ich habe eine Box mit Rahmen und mit runden Ecken vor einem Farbverlauf.

Da ich die runden Ecken transparent nach außen habe, damit der Verlauf durchscheint, scheint leider auch der Rahmen durch, sodass sowohl eine Rundung als auch eine Ecke zu sehen sind.

Weiß jemand Rat?

[MacKP]

Hallo skraddy,
hier wäre ein Beispiel : http://translate.google.de/translate...3Dde%26tl%3Den

Du wirst nicht drum herum kommen das komplett über Bilder zu machen an der Stelle. Mit ner border per CSS wird das auf jeden Fall nicht klappen.
Es gibt auch Techniken wo du 4 Bilder machst und die recht groß, damit das flexibel bleibt.
Wenn du die Breite fest haben möchtest, reicht ein Bild für oben und eins für mitte und unten. Die dann auch wieder viel größer, damit sich das ausdehnen kann.

Viele Grüße

[skraddy]

Hi MacKP. Herzlichen Dank für Deine Antwort!

Ich vergaß zu erwähnen, dass die Border mit Grafiken gemacht war, die haben aber auch durch die transparente Rundung an den zulaufenden Ecken durchgeschienen. Ich habe mich jetzt zu curvycorners durch gerungen. Jetzt klappt es auch im IE mit moz-border-radius und webkit-border-radius.

http://www.curvycorners.net

Vielen Dank

skraddy

[MacKP]

Hallo skraddy,
ach so ist das.. da könntest die Rundungen dann einfach nach außen schieben mit position etc.
Denn die Kanten gehen ja nur bis zum Ende der Box.

Aber wenn du es eh jetzt anders gemacht hast ;-)

Viele Grüße

[FloB]

Nach ewiger Fehlersuche habe ich CurvyCorners ans Laufen gebracht – das Script ist echt spitze!

Die aktuelle Version 2.0.4 arbeitet nicht mit mootools zusammen – jedoch die Revision 126 (die aktuelle ist 147). Ich hoffe, dass bald die stabile Version 2.0.5 (und somit die komprimierte) herauskommt …

[felixpfeiffer]

Hallo,

Da möchte ich doch das Thema noch mal wieder aus der Versenkung holen.

Alle bisherigen Ansätze funktionieren ja sehr gut mit divs usw. Aber ein Bild also den uimg-Tag abzurunden scheint nicht zu gehen.
Hintergrundbilder in einem Containser sind da meiner Meinung nach nicht die beste Lösung, da sie ja den Code vor allem für Screenreader unbrauchbar machen.

Gibt es also eine Möglichkeit das anders zu lösen? Evtl. sogar über eine Erweiterung? Dafür müsste man evtl. die getImage-Funktion mit einem Hook versehen, oder was meint Ihr?

Also, Ideen, Anregungen, und weitere Vorschöäge würden mich interessieren.

Gruß, Felix

[MacKP]

Hallo felixpfeiffer,
soweit mir das bekannt ist stolpern Screenreader nicht über divs die mit CSS ein Hintergrundbild bekommen haben... Die bekommen sowas ja gar nicht zu 'sehen' ;-)
Der Quellcode wird dadurch ja nur aufgebläht... Zugegeben, das ist nicht unbedingt so schön, aber auch nicht so nachteilig, da die paar Zeilen in der Regel nicht wirklich ins Gewicht fallen.

Aber natürlich hast du recht: direkt auf ein Bild angewendet wäre natürlich das non plus ultra... Ist aber dann auch nur für solche Stellen etwas und nix für normale Boxen mit Rundungen.

Also an sich nette Idee. Wobei ich so etwas automatisiertes noch nicht gesehen habe. Ist eventuell doch nicht ganz so einfach.

Ansonsten hilft hoffen und warten auf eine breitere Unterstützung von CSS3 ;-)

Viele Grüße

[wernergraser]

meine frage: wie bindet ihr das ein?
genauer gefragt ist die einzige möglichkeit am template herumzuschrauben?
lgw

[felixpfeiffer]

Hallo wernergraser,

also, am einfachsten ist es in der fe_page.tpl den Link einzubauen:

<?php echo $this->doctype; ?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>">
<head>
<base href="<?php echo $this->base; ?>"></base>
<title><?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
<meta name="description" content="<?php echo $this->description; ?>" />
<meta name="keywords" content="<?php echo $this->keywords; ?>" />
<?php echo $this->robots; ?>
<?php echo $this->framework; ?>
<link rel="stylesheet" href="plugins/slimbox/css/slimbox.css" type="text/css" media="screen" />
<?php echo $this->stylesheets; ?>
<script type="text/javascript" src="plugins/mootools/mootools.js"></script>
<script type="text/javascript" src="plugins/slimbox/js/slimbox.js"></script>
<script type="text/javascript" src="tl_files/curvycorners/curvycorners_126.js"></script>
</script>
<?php echo $this->head; ?>

<style type="text/css">
<!--/*--><![CDATA[/*><!--*/

.rounded10 {
-moz-border-radius:10px;
-webkit-border-radius:10px;
}

/*]]>*/-->

</style>


</head>

Dabei ist zu beachten, dass Opera zuliebe der CSS-Code für die Rundungen auch dort eingebunden werden sollte.

Und, gaanz wichtig, versuch die Revision 126 zu bekommen (Google holft Dir), da diese mit mootools zusammen arbeitet. alle Versionen dach (bisher) bekommen da Probleme.

Gruß, Felix

[MacKP]

Oder im Seitenlayout unter Zusätzliche <head>-Tags' eingeben.

;-)

Viele Grüße

[wernergraser]

werd das gleich mal versuchen, ob das für einen grafiker nachvollziehbar ist =)
sonnige grüße aus dem burgenland, werner

[ChrMue]

Dies Script liefert aber auch "nur" runde Ecken.
Sofern Schatten oder andere grafische Kurvenelemente ins Spiel kommen, bleiben nur geschachtelte divs oder absolut positionierte Elemente, richtig?
Gruß
ChrMue

[mdoll]

Und, gaanz wichtig, versuch die Revision 126 zu bekommen (Google holft Dir), da diese mit mootools zusammen arbeitet. alle Versionen dach (bisher) bekommen da Probleme.

Hallo,

in den Kommentaren bei http://www.curvycorners.net/ steht, wie man auch die aktuelle Version mit mootools zum Laufen kriegt:

CurvyCorners 2.0.4 is colliding with Mootools.
Here's a fix: rename function "addEvent" to "curvyAddEvent" in curvycorners.src.js and at the end change the "addEvent()" function call to "curvyAddEvent()".

Ich habs nicht getestet, wollte nur darauf hinweisen!

Gruß
Mathias

[felixpfeiffer]

Hallo mdoll,

dieser Tipp hatte bei mir nciht funktioniert, daher musste ich weiter suchen.

Gruß, Felix

[Frankkirsch]

Hallo,

kann mir jemand sagen, was ich bei der Erweiterung XNifty zu beachten habe.
Irgendwie kommen keine runde Ecken zum Vorschein, egal, welche ID ich ansteuere.
Ich hab auch expliziet die css nochmals eingebunden, weil ich sie nicht im Quelltext entdecken konnte.

Vielleicht weiß ja jemand, wo die Tücken in diesem System liegt.

Gruss
Frank

[wernergraser]

<div class="bg_main">
<div class="oben_links">
<div class="oben_rechts">
<div class="unten_links">
<div class="unten_rechts">
<div>
<div>
<div>
<div>
<div>

So mache ich das, wenn der Content in der Breite variabel ist, ansonsten reichen 3 divs (oben unten und mitte).

so jetzt ist es soweit und ich muss auf curvy verzichten… kunde wünscht sich abgerundete ecken (nix css3!)
hab jedoch keine idee wie ich das umsetzte?
wo kommen die divs her?
wo im template muss ich an welcher schraube drehen???

sonnige grüße

[felixpfeiffer]

so jetzt ist es soweit und ich muss auf curvy verzichten… kunde wünscht sich abgerundete ecken (nix css3!)

Hallo,

warum kein CSS3? Für die Unterstützung im IE<9 gibt es ja entsprechende "Nachrüstungen". Schau dir z.B. mal http://css3pie.com/ an.

Gruß, Felix

[ChrMue]

Danke Felix,

das hab ich gerade gebraucht. Funktioniert perfekt.

Linzenzmäßig muss nichts angegeben werden oder?

[felixpfeiffer]

Ist LGPL, aber du darfst, laut der Website gerne eine Spende an das Projekt abgeben:

http://css3pie.com/documentation/q-and-a/

Gruß, Felix

[wernergraser]

jupp funkt dank schatten super, thx…
sonnig grüße

[Lin]

Ich habe das Problem, dass ich in meinem Standardlayout abgerundete Ecken meines Suchformulars im Footer angezeigt bekommen, im Startlayout nicht, obwohl ich bei beiden Layouts auf dasselbe CSS zugreife. Wie kann das sein? Was muss ich tun, damit in beiden Layouts ECKIGE ECKEN angezeigt werden (vlg. Screenshots)?