# Nifty Corners



## spirits007 (14. Dezember 2009)

Ich möchte runde Ecken mit Nifty Corner Cube machen, aber ich verstehe die Anleitung nicht. Wo stelle ich was rein, damit es funktioniert.

Die Dateien niftyCorners.css, niftycube.js, NiftyLayout.css und niftyLayout.js  gehören in den Ordner CSS?

Vielen Dank
Dagmar


----------



## Maik (14. Dezember 2009)

Hi,

in den Beispielen (siehe http://www.html.it/articoli/niftycube/NiftyCube.zip) befinden sich die genannten Dateien zunächst mal im gleichen Verzeichnis, wie die HTML-Dokumente.

Von dort aus lassen sie sich  in einem Unterverzeichnis unterbringen (z.B. namens "css"), und ihr vorgegebener Referenzpfad  wird im HTML-Dokument entsprechend angepasst:


```
<link rel="stylesheet" type="text/css" href="css/niftyCorners.css">

<script type="text/javascript" src="css/niftycube.js"></script>
```


mfg Maik


----------



## spirits007 (14. Dezember 2009)

Das ist klar, so hab ich es eh gemacht.

In der Index.html hab ich in den head Bereich den HTML Code reingkopiert. Aber trotzdem hab ich keine runden Ecken. 

Ich arbeite mit der Yaml Basis. Muss ich in die basemod.css noch was reinstellen?

Normalerweise bin ich nicht so schwer von Begriff, aber das klappt irgendwie nicht.

Hier mal meine selbstgemachten Websites nur damit ihr seht, dass ich mich sonst schon etwas auskenne.

http://www.spirits-of-life.at
http://www.golden-waeller.at
http://www.margit-hofmann.at



Lg.
Dagmar


----------



## Maik (14. Dezember 2009)

Hast du auch mal einen Link zu der problembehafteten Seite? 

Im derzeitigen Blindflug lässt sich dazu nämlich schwer was Hilfreiches sagen ;-)

mfg Maik


----------



## spirits007 (15. Dezember 2009)

Ich habe nur mal eine Testseite gestaltet, damit ich sehe ob es funktioniert, um mir keine bestehende kaputt zu machen.

Ist blöd.


----------



## Maik (15. Dezember 2009)

Der Link zu dieser Testseite genügt mir auch 

mfg Maik


----------



## spirits007 (15. Dezember 2009)

So hab die Seite auf meinen Server raufgeladen. Wie gesagt ist nur ein Test. Daher ist die Seite noch Original Yaml.

file:///Users/dagmarcutka/Website%20Spirits/Spirits/Projekte/friendshipfordogs/index.html

Lg.
Dagmar


----------



## Maik (15. Dezember 2009)

spirits007 hat gesagt.:


> So hab die Seite auf meinen Server raufgeladen. [...]
> 
> file:///Users/dagmarcutka/Website%20Spirits/Spirits/Projekte/friendshipfordogs/index.html


Fein, nur auf deinen lokalen Webserver haben wir keinen Zugriff 

mfg Maik


----------



## spirits007 (15. Dezember 2009)

Ups sorry der Link ist natürlich

http://www.spirits-of-life.at/Projekte/friendshipfordogs/index.html

so jetzt sollte es gehen


----------



## Maik (15. Dezember 2009)

Und auf welches Element willst du die "Nifty Corners" anwenden?

Ich vermisse in deinem Code nämlich die Initialisierung à la:

```
<script type="text/javascript" src="css/niftycube.js"></script>

<script type="text/javascript">
window.onload=function(){
Nifty("div#box","big");
}
</script>
```
wie in dem ersten Beispiel http://www.html.it/articoli/niftycube/nifty1.html.

mfg Maik


----------



## spirits007 (15. Dezember 2009)

Ich möchte die runden Ecken um den kompletten page Bereich.


----------



## Maik (15. Dezember 2009)

Also:

```
<script type="text/javascript" src="css/niftycube.js"></script>

<script type="text/javascript">
window.onload=function(){
Nifty("div.page_margins","big");
}
</script>
```


mfg Maik


----------



## spirits007 (15. Dezember 2009)

Aha ok gemacht, aber schaust du bitte noch mal. die oberen Rundungen macht er zwar, aber man sieht blaue Ecken.


----------



## Maik (15. Dezember 2009)

Na, mein erster Gedanke war, dass da die blaue Seitenhintergrundfarbe durchscheint, und Firebug bestätigt meine Annahme  



			
				http://getfirebug.com/ hat gesagt.:
			
		

> ```
> <b class="niftycorners" style="background: rgb(77, 135, 199) none repeat scroll 0%; margin-left: 0px; margin-right: 0px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: -10px;">
> ```



Der im CSS (basemod.css) definierte Hexidezimal-Farbwert "*#4d87c7*" entspricht "*rgb(77,135,199)*".

mfg Maik


----------



## spirits007 (15. Dezember 2009)

und was mach ich da jetzt


----------



## Maik (15. Dezember 2009)

Auf dieses Hintergrundbild (mit Verlauf) verzichten, denn so wie es aussieht, greifen "Nifty Corners" auf die Eigenschaft background-color zurück.

mfg Maik


----------



## spirits007 (15. Dezember 2009)

Wenn ich die Verlaufsgrafik rausnehme funktioniert es, aber ich will ja einen Farbverlauf machen. Geht das dann mit den Rundungen nicht?

//edit: Aja shit das ist nicht gut. 

//edit2: Schau dir mal bitte diese Seiten an. Ich weiß das die auch mit Nifty Corner gemacht sind aber bei der einen ist ein Farbverlauf und bei der anderen eine Grafik. Warum geht das da.

http://www.nowdesign.at/
http://www.nowtraining.at/index.php


----------



## Maik (15. Dezember 2009)

spirits007 hat gesagt.:


> //edit2: Schau dir mal bitte diese Seiten an. Ich weiß das die auch mit Nifty Corner gemacht sind aber bei der einen ist ein Farbverlauf und bei der anderen eine Grafik. Warum geht das da.
> 
> http://www.nowdesign.at/
> http://www.nowtraining.at/index.php




http://www.nowdesign.at/ 

Dort kommt das "Nifty Corners"-Script überhaupt nicht zum Einsatz, sondern zwei schlichte GIFs mit transparenten Ecken :suspekt:


http://www.nowdesign.at/images/corner.gif
http://www.nowdesign.at/images/cornerBR.gif


http://www.nowtraining.at/index.php

Auch hier kann ich auf Anhieb im Quellcode keine "Nifty Corners"-Komponenten entdecken, außer die  abgerundeten Elemente in diesen beiden Grafikdateien:


http://www.nowtraining.at/img/Bild_Header1.jpg
http://www.nowtraining.at/img/topcur_743.gif


mfg Maik


----------



## spirits007 (15. Dezember 2009)

Aja dann hat mir der Typ einen Blödsinn erzählt. 

Danke auf jeden Fall!

Werd mal schauen ob ich wie ich es dann einsetze.

Lg.
Dagmar


----------

