Runden Ecken für phpWCMS 1.4x (ein Testbericht)

[kukki]

Häufig werde ich von jüngeren Website-Interessenten nach Web2 - speziell runden Ecken befragt. Diesbezüglich habe ich schon einmal versucht, dafür eine Lösung zu nutzen, erst einmal mit nur dem mainBlock. Im Ergebnis hatte man eine nicht konforme Lösung, die zwar super funktionierte, aber mich bezüglich Qualität nicht so sehr überzeugte. Nyfthy-Corners ist eine Möglichkeit, da hatte ich aber Probleme

Vor 14 Tagen bin ich dann wieder auf dieWebsite von Roger Johansson gestoßen und fand einen Artikel, der zwischenzeitlich ge"upgraded" wurde und nun in einer optimierten konformen Version zu Verfügung steht.

Wer's ausprobieren will, kann dies nur erst einmal mit seiner eigenen Layoutvorlage im mainBlock ausprobieren. Es ist relativ einfach, wenn man den Instruktionen auf der Website step by step folgt und das Ergebnis war nach einer winzigen Anpassung sofort und konform sichtbar. Die ganze Sache funktioniert mit 2x2 Grafiken (*.png und gif), womit die Probleme bei IE6 ausgemerzt werden:


Da phpWCMS ohne Javascript nicht richtig zu benutzen ist, war diese unbegründete Ablehnung - ein JavaScript und CSS - schnell vergessen - JavaScript cb.js erst einmal in das root-Verzeichnis ablegen und im Head einbinden, die CSS in template/inc_css ablegen und in der Vorlage aktivieren, einen DIV-Konstrukt um {CONTENT} mit class=cbb gelegt und einfach mal ansehen und staunen ...
So sieht die Sache bei Verwendung meines bisherigen Layouts aus!

Ich werde die Sache weiterverfolgen, weil man bei dieser Lösung nur die obige Vorlagengrafik ändern muß um eine anders aussehende Lösung zu erstellen. In absehbarer Zeit stelle ich dann das gerade im Test stehende (costumer)Layout vor, das relativ einfach erstellt werden kann

[update]

Mal abgesehen davon, dass

Da phpWCMS ohne Javascript nicht richtig zu benutzen ist

das so nicht stimmt: weiter so!

[G-Punkt]

Mit runden Ecken experimentiere ich auch grad rum, habe für mich für Nifty Corners Cube entschieden, funktioniert recht gut.

plus

• + nebeneinanderliegende divs können immer die gleiche Höhe haben.
  + keine pics
  + funzt in allen Browsern ohne spezielle Anpassung (soweit ich das mit dem IETester sehen kann)

minus

• - es gibt nur zwei Radien - small oder big. Ich versuche grad, weitere Radien zu definieren...

Und hier ist die Nifty Corners Cube Baustelle

[kukki]

Sooooooo, auf einer nicht ganz so wichtigen nichtkommerziellen Website habe ich dieses System innerhalb einer Stunde installiert und eingerichtet ... und ... dabei auch noch gleich ein paar Ungereimtheiten in meiner CSS aufgeklärt ... man gönnt sich ja sonst nichts
Entgegen der IEcb.css habe ich die netsprechenden Stellen der Grafiksteuerung ergäntz wie folgt:

Code: Select all

	background:url(/box.png) no-repeat 100% 0 !important;
	background:url(/box.gif) no-repeat 100% 0;

Dadurch ist die IEcb.css nicht notwendig, die eigentlich nur aus den Zeilen

Code: Select all

<!--[if lt IE 8]>
<style type="text/css">
/* Required IE fixes
================================================*/
/* Serve gif images to IE/Win pre version 7 */
* html .i1,
* html .i2 {background-image:url(/borders.gif);}
.....
* html .button .bb div {background-image:url(/button.gif);}
</style>
<![endif]-->

besteht. Schaut einfach mal rein, auch unter IE6, sieht ganz gut aus, ist aber noch nicht ganz perfekt, da ja nur erst #mainBlock und .webnews geändert wurden.

[kukki]

Mit runden Ecken experimentiere ich auch grad rum, habe für mich für Nifty Corners Cube entschieden, funktioniert recht gut. .........

Und hier ist die Nifty Corners Cube Baustelle

Sieht doch gut aus - auch im IE6, aber wie eben von Dir schon angeführt ein optischer Nachteil, die angeschränkten Radien ... aber immerhin, bei mir hat's nicht hingehauen, bei Dir schon ...

[kukki]

Bei Benutzung der Tastenkombination Shft/ Strg und +/- :

FF: bleiben die Boxen mit den runden Ecken konstant,

IE7: es gibt ein kleines Problem bei der ordentlichen Darstellung (Zentrierung/ top/ bottom - liegt wohl eher an meinem CSS ) ---> kann mir da jemnd einen Tipp geben?

• (Vielleicht liegt es auch an den Standalone-Installierungen des IE5,6 ?)

IE6: den interessieren weder Shft/ Strg u. +/-
OP9.x: nur +/- , Strg u. + oder -
Safari bei Shft u.+/-
------------------------------------------------------------------------------------------------

Nach einem längeren Versuch ist es eigentlich sicher, dass man diese Art der Runden Ecken sinnvoll nur in einem "costumer block layout" im Hauptblock benutzen sollte. [EDIT: HEUTE WEISS ICH ES BESSER! /EDIT] Es gibt einfach zu viele Bedingungen aus der "normalen" Vorlage, die nur über eine hardcodierte Änderung abzustellen wären. Bis zu einem gewissen Grad kann man die Blöcke damit versehen. Danach wird es tricky ....
Ein "Manko" ist, dass jedes DIV, welches mit class=cbb versehen wurde, auch wenn nichts drinnen steht, einen Rahmen erzeugt. Deswegen ist auf dieser Seite kein Horizontalmenüpunkt ohne einen Unterpunkt!

Das flip-flop-Menü muss man auch ein wenig anpassen, damit die Seitenabstände stimmen. Ich habe dieses erst einmal "abgerüstet" .

Ein Costumer-Block_layout-Test folgt

[kukki]

In den letzten Tagen habe ich mich mal den Einrichtung dieser Runden Ecken mit Hilfe von SEITENLAYOUT - (x)Eigener: (aus Vorlage Haupt-Block) - gewidmet. Eine (statische) Vorlage für den Hauptblock findet man ja auf der Website von Roger Johansson, allerdings war ich am Ende nicht so richtig zufrieden. Meine Hoffnungen waren größer als die Polizei erlaubt.

Problemtisch wird die Verwendung von flip-flops-Navig, man kommt aus den Anpassungen (seitlicher Freiraum, Verschieben nach links/ rechts etc) nicht mehr heraus, vielleicht habe ich mich auch zu dumm angestellt
... einzelne ID-Blöcke (mainBlock, headerBlock etc) bedürfen einiger Anpassungen (CSS), so dass am Ende eine komplett umgearbeitete frontend.css entsteht. Das wollte ich eigentlich weniger.

Dafür klappt aber der Einsatz im "normalen" Seitenlayout/ Vorlage ganz gut.
Wer die Arbeit scheut oder unsicher damit ist, dem empfehle ich für einen schnellen Erfolg die Art wie ich es aus dem Bauch heraus auf dieser Website gemacht habe
Dabei spielt es keine große Rolle ob der Scrollbalken im mainBlock oder am Viewportrand ist.

Und ein wichtiger Hinweis
Wer im mainBlock einge Blöcke verwendet, was ja nicht so abwegig ist, muß diese ziemlich genau beobachten, da gibt es unter Umständen verrückte Reaktionen.

[santscho]

Runde Ecken lasse ich mittels einfachem CSS generieren. Geht allerdings im IE nicht.

http://www.yaml.phpwcms.org/galerie.phtml

Code: Select all

-moz-border-radius: 2em;

Santscho

[update]

da gibt es auch eine webkit-Variante...
btw: wie bekommst Du das CSS valide?

[kukki]

Runde Ecken lasse ich mittels einfachem CSS generieren. Geht allerdings im IE nicht.

http://www.yaml.phpwcms.org/galerie.phtml

Code: Select all

-moz-border-radius: 2em;

Santscho

Deswegen auch uninteressant!

[kukki]

da gibt es auch eine webkit-Variante... btw: wie bekommst Du das CSS valide?

Diese "neue" Meldung habe ich ignoriert, denn es scheint nur schmückendes Beiwerk zu sein.

In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected

taucht auch zur Freude einiger unserer aktiven Mitglieder in deren CSS-Code auf

Diese Meldung von cb.css habe ich auch erst einmal ignoriert, weil ich einfach nur die Funktionalität ergründen wollte. Wenn alles richtig zufriedenstellend läuft, kann man sich dieser Piddelpaddel-Meldung auch annehmen.

Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .cbb und .button a:hover

[update]

[kukki]

Durch das Einfügen von

Code: Select all

width: auto;

konnten diese Fehlermeldungen im Validator beseitigt werden.

Die Meldungen mit gleichem Hintergrund können / müssen mühevoll beseitigt werden. Ich habe an diesen Stellen ein wenig rumgespielt und nun eine im Aufbau befindliche Website mit einer solchen fehlerfreien cb.css bestückt. Wer will, kann sich diese runterladen und selber damit ein wenig experimentieren.

Wenn man diese Runden Ecken mehrmals benutzt hat, ist es gar nicht so mühevoll, die entsprechenden Stellen anzupassen. Einzig allein die Abstimmung mit dem Hintergrund bleibt die größere Arbeit dabei. Ansonsten braucht man nur einen Rahmen, einen Rand, die Einbindungen wie oben und schon läuft die Sache ganz gut.

Custumerblöcke funktionieren auch, bringen aber ein wenig mehr Arbeit bezüglich der Anpassung an die Breiten und Höhen.

[Oliver Georgi]

Runde Ecken funktionieren auch im IE ganz ohne JavaScript - es ist aber Puzzelei. Die verfügbaren JavaScripts können einem die Arbeit aber abnehmen - funktioniert auch dann nicht unbedingt zuverlässig für jeden Fall.

Als Tipp!

Alle Border-Radius kompatiblen Browser entsprechend ansprechen.

Für alle IE müssen es dann die Conditions sein - inkl. "conditinierte" IE Ausnahmen im Quelltext.

Das Grundprinzip immer:

// Der grundsätzliche Aufbau

Code: Select all

<div class=".rounded">
<!--[if IE]><div class="tl"></div><div class="tr"></div><![endif]-->

Hier der Inhalt!!!
Ganz wichtig für den IE - Contentfluß wahren. Prinzipiell könnte man die oberen Ecken-DIVs auch nach unten stellen, da sowieso absolut positioniert. Damit kommt der IE aber gerne durcheinander.

<!--[if IE]><div class="bl"></div><div class="br"></div><![endif]-->
</div>

// kompatible Browser:

Code: Select all

.rounded {
	position: relative;
	background-color: #FFF;
	-moz-border-radius: 6px; /* Mozilla: Firefox etc. */
	-webkit-border-radius: 6px; /* Webkit: Safari, Chrome */
	border-radius: 6px; /* für wenns dann mal Standard ist */
}

und dann die passende CSS - könnte man auch per IE Condition auslagern oder aberm wenn es sonst keine weiteren Vorkommen gibt auch im gleichen Dokuemnt halten:

Im Übrigen empfehle ich, sich auf ein einziges Hintergrundbild zu konzentrieren, das alle 4 Ecken beinhaltet (hier 12 x 12px groß). Lädt schneller und ist leicht zu überblicken. Wir können mit GIF arbeiten, das "transparent" Rund sollte die Hintergrundfarbe der Fläche besitzen, auf der die gerundete Box steht. Aber das ist variabel.

Code: Select all

.rounded .tl,
.rounded .tr,
.rounded .bl,
.rounded .br {
	position: absolute;
	width: 6px;
	height: 6px;
	overflow: hidden;
	background: #FFF url(4-ecken-bild.gif) no-repeat 0 0;
}
.rounded .tl {
	background-position: 0 0;
	left: 0;
	top: 0;
}
.rounded .tr {
	background-position: -6px 0;
	right: 0 !important;
	/* ältere IE wollen statt 0 ein -1 - probieren */
	right: -1px;
	top: 0;
}
.rounded .bl {
	background-position: 0 -6px;
	left: 0;
	bottom: 0 !important;
	/* ältere IE wollen manchmal statt 0 ein -1 - probieren */
	bottom: -1px;
}
.rounded .br {
	background-position: -6px -6px;
	right: 0 !important;
	bottom: 0 !important;
	/* ältere IE wollen manchmal statt 0 ein -1 - probieren */
	right: -1px;
	bottom: -1px;
}

Oliver