Druckbare Version
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?
So mache ich das, wenn der Content in der Breite variabel ist, ansonsten reichen 3 divs (oben unten und mitte).HTML-Code:<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>
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.
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.
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
Für sowas kann man auch die sog. Sliding-Door Technik nutzen. Dann kommt man mit 2 per CSS stylbaren Elementen aus.
Ich habe grade noch das gefunden: http://www.htmlremix.com/css/curved-...-cross-browser
Vielen Dank, sehr interessante Ansätze - werde ich mir bei Gelegenheit mal genau anschauen.
Ansonsten können wir hier ja einfach weiter sammeln...
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é
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).
Das Problem lässt sich sicherlich beheben, wenn du uns den Link dazu postest.
Das Problem liegt an den Berechnungen von CurvyCorners, denn die gefallen mir nicht so gut.
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.
HTML-Code:<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=" " />
- Hat den Vorteil, dass bei fluiden Designs die runden Ecken problemlos erhalten bleiben.Code: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;}
- 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
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
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
@ 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
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.
HI
das wären je nach Modul "mod_newsreader.tpl", mod_newsarchive.tpl" oder "mod_newslist.tpl".
Sebastian
Hallo Besten Dank. Bei genauem Hinsehen im Stylesheet erkennt man auch die tpl Datei.
Besten Dank
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?
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
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
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
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 …
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
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
meine frage: wie bindet ihr das ein?
genauer gefragt ist die einzige möglichkeit am template herumzuschrauben?
lgw
Hallo wernergraser,
also, am einfachsten ist es in der fe_page.tpl den Link einzubauen:
Dabei ist zu beachten, dass Opera zuliebe der CSS-Code für die Rundungen auch dort eingebunden werden sollte.PHP-Code:<?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>
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
Oder im Seitenlayout unter Zusätzliche <head>-Tags' eingeben.
;-)
Viele Grüße
werd das gleich mal versuchen, ob das für einen grafiker nachvollziehbar ist =)
sonnige grüße aus dem burgenland, werner
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
Hallo,Zitat:
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.
in den Kommentaren bei http://www.curvycorners.net/ steht, wie man auch die aktuelle Version mit mootools zum Laufen kriegt:
Ich habs nicht getestet, wollte nur darauf hinweisen!Zitat:
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()".
Gruß
Mathias
Hallo mdoll,
dieser Tipp hatte bei mir nciht funktioniert, daher musste ich weiter suchen.
Gruß, Felix
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
so jetzt ist es soweit und ich muss auf curvy verzichten… kunde wünscht sich abgerundete ecken (nix css3!)Zitat:
Zitat von Nils Riel
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
Hallo,Zitat:
Zitat von wernergraser
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
Danke Felix,
das hab ich gerade gebraucht. Funktioniert perfekt.
Linzenzmäßig muss nichts angegeben werden oder?
Ist LGPL, aber du darfst, laut der Website gerne eine Spende an das Projekt abgeben:
http://css3pie.com/documentation/q-and-a/
Gruß, Felix
jupp funkt dank schatten super, thx…
sonnig grüße
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)?