Kleopatra´s Bucht

Das Layout

Kleopatra´s Bucht. So lautet der Name dieses Designs.

Eine Badebucht in Ägypten lädt uns zum Relaxen ein. Wellness pur in der Natur. Die Farbe des Bikinis haben wir ins Design einfließen lassen, sicher haben Sie es schon bemerkt.


Die Technik

Allgemein: Das Layout haben wir für Sie so angelegt, daß Sie ggfls. bzgl. des Logo-Fotos (Badebucht) auch Ihr Foto durch unseres ersetzen können, d.h. auch Ihr Foto würde sich dann hinter das transparente Menü legen.

Der Design-Hintergrund: Auch die Hintergrund-Grafik (background-image) - die hier hinter dem gesamten Layout liegt, können Sie tauschen bzw. auch nur die Hintergrundfarbe (background-color) ändern. (Müssen Sie aber nicht, gerne können Sie natürlich auch unsere Grafiken verwenden). Der Schatten paßt sich auch Ihrer gewählten Grafik an. Die Hintergrundgrafik ist hier übrigens nur 240x240 Pixel groß und wird gekachelt, also wiederholt (background-repeat:repeat) In der Datei "format.css" bei:

body
{margin-top: 5px; margin-left: 0px;
margin-right: 0px;margin-bottom:15px;
background-color: #546563;
background-image:url(images/back3.jpg);
font-family: verdana,trebuchet ms,georgia,arial,
helvetica, tahoma ,verdana,  sans-serif;
background-repeat:repeat;
background-position:  50% 0%;
}

Die Menü-Durchsichtigkeit: Für die Menü-Transparenz-Grafik (trans01.png) sind noch einige weitere transparente Grafiken (trans02.png BIS trans08.png) zum Experimentieren mit anbei, diese haben entweder eine andere Transparenz-Farbe und/oder eine andere Transparenz-Stärke . Hier der betreffende Quelltext aus der Datei "format.css":

/* transparentes Menü*/
#top2 {
text-align:left;
vertical-align:top;
padding-left:10px;
border:solid 1px #000;
background-repeat:repeat;
background-position:  50% 50%;
background-image:url(images/trans01.png);
}

Logo-Foto und Rahmen: Die dünne schwarze Rahmen-Linie, eine sog. Haar-Linie, können Sie auch anpassen, sprich die Farbe sowie die Dicke der Linie. Das gibt dem Layout einen ganz neuen Anstrich. Und/oder fügen Sie doch eine eigene Logo-Grafik (hier die Badebucht) ein. Nachstehend sehen Sie den entsprechenden Quelltext-Auszug aus der Datei "format.css".

/* rahmen um die seite + logo */
.haupt {
border:solid 1px #000;
background-color:#627574;
background-image:url(images/logo.jpg);
background-repeat:no-repeat;
background-position:50% 0%;
}

Die Navigation

Textlinks. Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen. Das transparente Menü oben ist als Haupt-Menü um einige Links erweiterbar. Ein zweites Menü befindet sich unten im Fussbereich.

Die allgemeinen Links (Links im Text) sehen zur Zeit aus wie nachstehend: Um den Mouseover-Effekt anzuschauen, fahren Sie mit der Maus über den Link: Beispiel-Link


Dead Text

Beispiel Füll Text. Fusce bibendum pretium ante. Pellentesque sed enim nec odio laoreet congue. Nullam aliquam rhoncus libero. Morbi vitae sem. Sed quis lorem. Curabitur suscipit vehicula est. Donec venenatis. Nachfolgend sehen Sie zwei Beispiele für Listen. Listen sind textliche Aufzählungen. Durch die Einrückung lockern Listen auch jeden Text auf. Dies sind nur Beispiele, die Ihnen als Anregung gelten sollen, natürlich können Sie jede der Listen verlinken oder auch nicht verlinken. Auch kann jedes Aufzählungszeichen farbig oder nicht farbig gestaltet werden. Jede der Listen können Sie natürlich auch um weitere Listenpunkte nach unten erweitern bzw. verkürzen.
Liste mit Aufzählungszeichen "Square", verlinkt:
Praesent nisl mi, condimentum sed, bibendum semper, fringilla a, felis. Phasellus tincidunt odio vel nulla. Morbi vitae urna quis nulla imperdiet rhoncus. Aliquam feugiat, nulla non semper mollis, sapien velit rutrum urna, eu vehicula erat risus et leo.
Liste mit Aufzählungszeichen "Ziffern numerisch fortlaufend", verlinkt:
  1. Sed
  2. Condimentum
  3. Bibendum
  4. Semper
Maecenas a nulla. Maecenas nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris eu massa. In semper. Morbi vitae nisl at felis placerat porttitor. Morbi molestie. Cras ligula sapien, consequat sed, scelerisque ut, pulvinar vel, sem. In vulputate gravida orci.
Mike Muster GmbH & Co. KG Spezialstrasse 55 47234 Sampletown