HpBk-TemplateWorld

Baerliin

Design-Übersicht

» Dieses Design darfst du kostenlos für deine Homepage verwenden. Unter "Und so geht´s" (weiter unten auf dieser Seite) findest du eine kurze Anleitung, wie du dieses Design im Homepage-Baukasten einfügst. Mit einem Klick auf das Bild des Designs vergrößert du die Vorschau.

» Bitte beachte:
Die Copyright Informationen im Footer des Designs dürfen auf keinen Fall entfernt oder geändert werden, da du sonst gegen die Lizenz- und Nutzungsrechte des Designs verstößt. Dieses Design ist ein User-Design und wurde freundlicherweise von einem Design-Einreicher bereitgestellt. Bei Fragen zur Veränderung des Designs kontaktiere bitte den Anbieter, dessen Homepage-Adresse du unter "Vielen Dank an..." findest.

Baerliin

» Berlin für deine Seite!
Das Design ist farblich passend zum Deutschen Bundestag. Braun und Grau verbinden sich gut zu einem Einheitlichem Bild. Die Headergrafik kann auch ausgetauscht werden. Ein Coolmenü ist des Weiteren auch verhanden. Optimal geeignet für 8 Navigationsseiten.Weitere Navigationsseiten könnte man aber auch in den rechten Boxen einbinden.

» Bewertung:

Design-Code

» Text unter dem Design | Code in einem separaten Fenster öffnen.

» CSS-Code ohne Style Tags | Code in einem separaten Fenster öffnen.

/* Nullformatierung für alle Browser */
*{padding: 0px; margin: 0px; }

/* Werbung mittig */
table[height="102"] { margin: auto; }

/* Hintergrund hinter Design */
body {
background-color: #babccb;
background-image:  none;
font-family: arial;
font-size: 14px;
color: #000000; }

/* Design-Container */
#container {
width: 962px;
margin: 10px auto;
overflow: hidden; }

/* Headerfeld 1000 x 400 */
#header_container {
width: 1000px;
height: 422px;
margin-bottom: -20px;
background-color: #;
background-image: url(https://img.webme.com/pic/h/ho-allround/header4.png);
}

/* Titel im Headerfeld entfernt */
h1#header {display: none; }

/* Feld der Navigation */
#nav_container {
width: 995px;
margin-bottom: 10px;
height: 40px;
background-color: #e3c495;
background-image:  none;
border: 3px solid #000000; }

/* Titel über Navigation entfernt */
#nav_heading {display: none; }

/* Aufzählungspunkte in Navi entfernt */
ul#nav {
list-style-type: none; }

/* Navi-Buttons */
li.nav_element {
margin-bottom: 10px;
width: 110px;
height: 40px;
float: left;
text-align: center;
border-right: 3px solid #000000;
background-color: #e3c495;
background-image:  none; }

/* Hover Navi-Button */
li.nav_element:hover { background-color: #a0896a; }

/* Linktexte in Navigation */
li.nav_element a {
display: block;
font-size: 15px;
color: #000000;
line-height: 40px;
text-decoration: none; }

/* Hover Linktexte Navigation */
li.nav_element a:hover { color: #FFFFFF; }

/* Seiteninhalt */
#content {
float: left;
width: 665px;
min-height: 200px;
padding: 20px 20px 20px 20px;
background-color: #e3c495;
background-image:  none;
border: 3px solid #000000;
overflow: hidden; }

/* Link im Seiteninhalt */
#content a {color: #000080; }

/* Hover Link im Seiteninhalt */
#content a:hover {color: #008080; }

/* Rechte Box */
#sidebar_container {
float: right;
width: 200px;
min-height: 200px;
padding: 20px 20px 20px 20px;
background-color: #e3c495;
background-image:  none;
border: 3px solid #000000;
overflow: hidden; }

/* Liste in rechter Box */
#sidebar_content ul {
list-style-type: square;
margin: 15px 0px 15px 25px; }

/* Linktexte in Box */
#sidebar_content ul li a {
color: #000000;
font-size: 14px;
text-decoration: none; }

/* Hover Linktexte Box */
#sidebar_content ul li a:hover { color: chocolate; }

/* Feld unter dem Design */
#footer {
width: 920px;
padding: 20px 20px 20px 20px;
margin: auto;
background-color: #e3c495;
background-image:  none;
border: 3px solid #000000; }

/* unnötige Felder im Design entfernt */
#pre_header {display:none;}
#post_header {display:none;}
#post_content {display:none;}
#below_content{display:none;}
#counter{display:none;}
#title{display:none;}
#sidebar_heading{display:none;}

Und so geht´s

» Zuerst musst du dich in den Homepage-Baukasten einloggen.
» Dann klickst du auf "Design einstellen" und wählst dort das "CSS-Design - Nur für Profis geeignet" aus.
» Danach klickst du auf "Erweiterte Einstellungen" und fügst die Codes, die hier auf der Seite stehen, in die verschiedenen Felder "Text über dem Design", "Text unter dem Design" und "CSS-Code ohne Style Tags" ein.
» Danach speicherst du das Ganze ab und darfst dein neues Design bestaunen.
» Beachte bitte, dass dieses Design für 8 Menüpunkte ausgelegt ist. Diese werden automatisch aus dem Seiteneditor übernommen Wenn man die Hintergrundfarbe des Designs ändert (im Code einfach anderen Farbwert einsetzen), dann ändert sich überall die Hintergrundfarbe, da beispielsweise auch die Headergrafik einen transparenten Hintergrund hat.