HpBk-TemplateWorld

Baukasten Design 2

Design Übersicht

» Dieses Design darfst du kostenlos auf deine Homepage einfügen und verwenden. Unter "Und so geht´s" 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 weiter unten auf dieser Seite findest.

Baukasten Design 2

» Der Baukasten mal anders!
Mal ziemlich anders und in anderen Farbumgebungen hat sich Muchloads.de.tl seinen Homepage-Baukasten vorgestellt. Im Header ist jetzt ein Bild mit dem Baukasten Logo etc. aber ihr könnt euch ganz einfach einen eigenen Header in der entsprechenden Größe anlegen und im CSS-Code austauschen. Es gibt eine horizontale Navigation, eine linke Navigation und einen breiten Content. Gecodet wurde dieses Design von arealmelon.de.tl.

» Bewertung des Designs:

Der Design Code

"Text über dem Design" » Code in einem separaten Fenster anzeigen

<div id="upper_shine"></div>
<div id="wrapper">
<div style="clear:both;"></div>
<div id="header"></div>
<div id="menu_left"></div>
<div id="menu">
<div id="menu_i">
<a href="http://arealmelon-test.de.tl/Home.htm">Startseite</a><img src="https://img.webme.com/pic/h/hpbk-templateworld/spacer_.png" style="vertical-align: middle;">
<a href="#">Anmeldung</a><img src="https://img.webme.com/pic/h/hpbk-templateworld/spacer_.png" style="vertical-align: middle;">
<a href="#">Login</a><img src="https://img.webme.com/pic/h/hpbk-templateworld/spacer_.png" style="vertical-align: middle;">
<a href="#">...</a></div>
</div>
<div id="menu_right"></div>
<div id="left"><p class="firsthead">Dein Baukasten</p><p>Adresse: <font style="background:#fec600;"> deinepage.de.tl </font><p style="text-decoration:underline;">deinepage.com bestellen</p><div style="margin-top:20px;">
<li><a href="http://arealmelon-test.de.tl/Test-1.htm" class="test1">Test 1</a></li>
<li><a href="http://arealmelon-test.de.tl/Test-2.htm" class="test2">Test 2</a></li>
<li><a style="border-bottom:1px solid #989898;" href="http://arealmelon-test.de.tl/Test-3.htm" class="test3">Test 3</a></li></div></div>

"Text unter dem Design" » Code in einem separaten Fenster anzeigen

"CSS Code ohne Style Tags" » Code in einem separaten Fenster anzeigen

h1#title {
display:none;
}

h2#title span {
display:none;
}

div.header {
display:none;
}

li.nav_element {
list-style-type:none;
display:none;
}

li.nav_element checked_menu {
display:none;
}

li.nav_element subpage {
display:none;
}

#counter {
display:none;
}

body {
background: none #e1e1e1 no-repeat;
}

* {
margin:0;
padding:0;
}

ul,li {
list-style-type:none;
}

hr {
height:1px;
border:0 solid #e0e0e0;
background-color:#e0e0e0;
margin:5px 0;
}

img {
border:0;
}

.left {
float:left;
padding:8px 8px 8px 0;
}

.right {
float:right;
padding:0 0 8px 8px;
}

#wrapper {
width:878px;
margin:10px auto;
}

h3 {
color:#646464;
font-size:15px;
font-weight:200;
}

#header {
width:876px;
height:158px;
float:left;
background:url(https://img.webme.com/pic/h/hpbk-templateworld/header_1.png);
margin-bottom:10px;
}

#content {
width:645px;
min-height:450px;
float:right;
border:1px solid #989898;
background:#FFF;
color:#000;
text-align:justify;
font-size:15px;
font-weight:200;
padding:10px;
}

#menu {
background-image:url(https://img.webme.com/pic/h/hpbk-templateworld/menu_bg_1.png);
height:36px;
width:866px;
float:left;
margin-bottom:10px;
}

#menu_right {
background-image:url(https://img.webme.com/pic/h/hpbk-templateworld/menu_right_1.png);
width:6px;
height:36px;
display:inline;
float:left;
}

#menu_left {
background-image:url(https://img.webme.com/pic/h/hpbk-templateworld/menu_left_1.png);
width:6px;
height:36px;
display:inline;
float:left;
}

#menu_i {
float:left;
height:34px;
display:inline;
padding-top:2px;
}

#menu_i a:link,#menu_i a:visited,#menu_i a:hover {
font-family:Arial, Helvetica, Verdana, sans-serif;
font-weight:500;
font-size:18px;
text-decoration:none;
color:#000;
margin-left:5px;
margin-right:7px;
}

#menu_i a:hover {
color:#000;
}

#copyright {
float:left;
color:#000;
font-size:10px;
margin-left:10px;
margin-top:3px;
}

#visits {
float:right;
color:#000;
font-size:10px;
margin-right:10px;
margin-top:3px;
}

input {
border:1px solid #b4b4b4;
font-family:Arial, Helvetica, Verdana, sans-serif;
font-weight:700;
font-size:16px;
text-decoration:none;
color:#000;
padding:7px;
}

textarea {
border:1px solid #b4b4b4;
font-family:Arial, Helvetica, Verdana, sans-serif;
font-weight:200;
font-size:13px;
text-decoration:none;
color:#000;
padding:7px;
}

input[type=submit] {
border:1px solid #b4b4b4;
font-family:Arial, Helvetica, Verdana, sans-serif;
font-weight:200;
font-size:13px;
text-decoration:none;
color:#000;
background:#FFF;
padding:7px;
}

#left {
float:left;
width:204px;
border:1px solid #989898;
background:url(https://img.webme.com/pic/h/hpbk-templateworld/left_bg_1.png) #e1e1e1 repeat-x;
min-height:470px;
}

#left p {
padding-left:5px;
padding-top:5px;
font-size:18px;
}

#left p.firsthead {
font-weight:700;
}

#left li a {
display:block;
width:194px;
background:transparent;
border-top:1px solid #989898;
text-decoration:none;
font-family:Arial, Helvetica, Verdana, sans-serif;
color:#000;
margin:0;
padding:5px;
}

#footer {
width:877px;
height:139px;
float:left;
background:url(https://img.webme.com/pic/h/hpbk-templateworld/footer_1.png);
margin-top:20px;
}

table[height="102"] {
margin:auto;
}

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.

Vielen Dank an...

» www.Muchloads.de.tl für das Einsenden und das Erstellen dieses Designs.

Was bedeutet dieses Symbol?

» Dieses Symbol steht für den "Template TÜV". Fast alle Designs auf HpBk-TemplateWorld besitzen diese Zertifizierung. Wenn ihr in der Design-Beschreibung das "Template TÜV-Siegel" findet, könnt ihr euch darauf verlassen, dass das Design 100%-ig funktioniert, wenn ihr den Code richtig einfügt, da ich dieses Design ausgiebig getestet habe. Des Weiteren garantiere ich mit diesem Symbol, dass das Design sowohl im neuesten Internet-Explorer, als auch im neuesten Mozilla Firefox richtig angzeigt wird. Habt ihr dennoch einen Fehler gefunden, meldet euch bitte umgehend bei mir über das Kontaktformular.

Kommentar zu dieser Seite hinzufügen: