Princess Of Swords.

Das Layout.  

Prinzessin der Schwerter. Dieses Layout ist wahrscheinlich eher etwas für Fortgeschrittene. Die volle Schönheit enfaltet sich erst beim Herunter-Scrollen. Denn damit wird die Frau ohne linksseitige Leiste dargestellt. Die Navigations-Box schiebt sich somit also über die Frau-Grafik. Ein überraschender und netter Effekt. Übrigens: Nicht nur das Grundlayout ist transparent: Auch die 3 Kästchen links schieben sich transparent beim Scrollen über das Design und der Mouseover ist ebenfalls transparent, sofern er sich über der Grafik befindet.

Hinweis: Lesen Sie bitte ganz unten die Erklärung zur "Inklusive-Grafik !



Die Technik.  

Hier steckt jede Menge Technik drin!

1) Transparenz:

Transparenz ist ein vielbeachtetes und kompliziertes Thema im Web. Es gibt unterschiedliche Ansätze, wie Tranparenz per Grafikprogramm, CSS-Transparenz-Filter, gif -oder png-Grafiken. Auch muss man das unterschiedliche Verhalten der grossen Browser (wie IE, NN, Firefox, Opera) sowie auch deren einzelne Browser-Versionen mit einkalkulieren. Da es wahrscheinlich nur die Profis interessiert, erwähnen wir nachfolgend nur das Wesentliche: Bitte vergleichen Sie die unterschiedlchen Browser oder machen Sie Ihre eigenen Erfahrungen, es lohnt sich. Wir haben es bezüglich aller grossen Browser so gestaltet, dass es im Internet-Explorer schon reichlich gut ausschaut, in den anderen grossen Browsern (NN, Firefox, Opera) wird die Transparenz jedoch noch weitaus exakter dargestellt.

Wie funktioniert die Transparenz?
Wir haben uns bei diesem Layout für nachstehende Lösung entschieden: Die Brower NN, Firefox und Opera erhalten eine png-Grafik (welche Transparenz beherrscht), für den IE wird eine sogenannte Browserweiche erstellt, die es ermöglicht, dass der Internet-Explorer, welcher unterhalb der Version 7 kein png darstellen kann, die Transparenz über einen CSS-Filter erhält.

2) CSS-POSITIONIERTES-LAYOUT:

Dies ist ein rein CSS POSITIONIERTES LAYOUT. Was heisst das? Die verschieden Objekte (Bereiche), wie Menü oder Inhaltsbereich, werden hier anstatt per Tabellen über sogenannte "Div-Container", auch bezeichnet als "Boxen", platziert. Über diese Boxen erfolgt auch im wesentlichen das Layout, also die Anordnung der Objekte, sprich Innenabstände (padding), Rahmen (border), Aussenabstände (margin) sowie Positionierung und Grösse. Seite ohne Frames.

3) Allgemein:

Die Schwert-Grafik ist unten innerhalb des Monitors positioniert. Auch bei wechselnden Monitorauflösungen behält die Grafik diesen Platz bei. Ausserdem ist diese Grafik festgesetzt, d.h. es scrollt nur der Inhalt. Die Schrift ist im Blocksatz, d.h. gleiche Ausrichtung der Schrift an linker und rechter Kante. Das sieht schön aus, jedoch kann es mitunter bei sehr langen Wörtern den Text auseinanderziehen. Die Abhilfe ist einfach, entscheiden Sie je nach Bedarf: Ersetzen Sie "text-align:justify" durch "text-align:left". Und zwar in der Datei format.css bei:
#main p {text-align:justify;margin: 0px;}

Wie üblich mit ausgelagerter CSS-Datei. Anlegen von Links bzw. HTML-Seiten: Die Datei Startdatei "index.html" ist zu kopieren und jeweils unter einem neuen Namen abzuspeichern.



Die Navigation.  

Textlinks. Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen. 10 Textlinks. So sehen die allgemeinen Links (Links im Text) zur Zeit aus: Beispiel-Link



Hinweis:

Die "Inklusive-Grafik" soll Sie nicht verwirren, sondern dient einzig und allein dem Zwecke des Kopierschutzes. Dieses Layout ist grundsätzlich sowohl bei privatem als auch kommerziellen Inhalt zu bezahlen.
Nach Bezahlung erhalten Sie dieses Design ohne den " INKLUSIVE-SCHRIFTZUG "

Das Bildmaterial (die Frau auf der linken Seite) wurde uns freundlicherweise von der Seite www.uwe-braunschweig.de zur Verfügung gestellt, Sie dürfen das Bildmaterial auch für Ihre Seite benutzen sofern Sie:

a) einen sichtbaren Link auf Ihrer Seite einfügen in Form von:
Bildmaterial (c) www.uwe-braunschweig.de (z. B. im Impressum)

b) Ihre Seite weder pornographische, rassistische noch verbotene Inhalte enthält

Verstösse hiergegen werden rechtlich sowohl von uns als auch vom Urheber des Bildmaterials verfolgt !