HpBk-TemplateWorld

Baukasten Design 1

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 1

» Echt beeindruckend!
In der zweiten Runde hatten meine Kandidaten ja die Aufgabe bekommen, ein neues Design für den Homepage-Baukasten.de zu entwickeln. Dieses Design ist zwar angelehnt an das aktuelle Baukasten Design, sieht aber trotzdem einfach hervorragend aus. Außerdem wird ein leerer Header bereitgestellt, den ihr frei beschriften könnt.

» Bewertung des Designs:

Der Design Code

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

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

<div id="Footer"> 
<div class="Footer"> 
<div class="col5"> 
<h2>Baukasten</h2> 
<ul> 
<li><a href="index.html">Impressum</a></li> 
<li><a href="index.html">AGB</a></li> 
<li><a href="index.html">Datenschutz</a></li> 
<li><a href="index.html">Jobs</a></li> 
</ul> 
</div> 
<div class="col5"> 
<h2>Erste Schritte</h2> 
<ul> 
<li><a href="index.html">Anmelden</a></li> 
<li><a href="index.html">Einloggen</a></li> 
<li><a href="index.html">Stöbern</a></li> 
<li><a href="index.html">Bearbeiten</a></li> 
</ul> 
</div> 
<div class="col5"> 
<h2>Pakete</h2> 
<ul> 
<li><a href="index.html">free</a></li> 
<li><a href="index.html">werbefrei</a></li> 
<li><a href="index.html">plus</a></li> 
<li><a href="index.html">upgrade</a></li> 
</ul> 
</div>
<div class="col5"> 
<h2>Hilfe</h2> 
<ul> 
<li><a href="index.html">Allgemeine Fragen</a></li> 
<li><a href="index.html">Forum</a></li> 
<li><a href="index.html">Support</a></li> 
<li><a href="index.html">Hilfeseite</a></li> 
</ul> 
</div>
<div class="col5"> 
<h2>Sonstiges</h2> 
<ul> 
<li><a href="index.html">Jugendschutz</a></li> 
<li><a href="index.html">Ermittlungsbehören</a></li> 
<li><a href="index.html">Neuste Seiten</a></li> 
<li><a href="index.html">Nützliche Seiten</a></li> 
</ul> 
</div>
</div>
</div>
<div id="Copyright"><div style="float: left">© 2011 Deine Seite  </div><div style="float: right">Design by <a href="http://www.pexxi.de.tl/">Pexxi</a></div>

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

td[height="102"]{
position:absolute;
left:50%;
margin-left:-384px; 
}

body{
background-image: url(https://img.webme.com/pic/h/hpbk-templateworld/636007_sd7ftgcfvk.png);
font-family: Arial;
color: #000;
font-size: 14px;
}

#nav_container,#title,#header,#counter{
display:none;
}

h2{
color: #000;
font-size: 16px;
}

a{
color: #000;
text-decoration: none;
font-weight: bold; 
}

a:hover{
text-decoration: underline;
}

#container{
width: 952px;
margin: 0 auto;
}

#Leiste_oben{
background-image: url(https://img.webme.com/pic/h/hpbk-templateworld/632400_ruuz9ur9pt.png);
height: 35px;
padding-top: 5px;

}

#Login{
width: 470px;
float: left;
}

#Header{
background-image: url(https://img.webme.com/pic/h/hpbk-templateworld/640582_4ssztm3v3m.png);
width: 952px;
height: 182px;
}

#Navi{
background-image: url(https://img.webme.com/pic/h/hpbk-templateworld/632400_ruuz9ur9pt.png);
height: 32px;
text-align: center;
padding-top: 8px;
}

#Navi a{
color: #000;
font-size: 18px;
text-decoration: none;
padding-right: 10px;
padding-left: 10px;
}

#Navi a:hover{
color: #fff;
}

#content{
width: 876px;
background-image: url(https://img.webme.com/pic/h/hpbk-templateworld/636059_peg5cnrdh5.png);
background-repeat: repeat-x;
background-color: #fff;
border: 1px solid #d0d0d0;
float: left;
padding-left: 70px;
padding-top: 0px;
margin-top: -13px;
border: double 3px #d0d0d0;
border-top: 0px;
}

#Footer{
width: 946px;
height: 135px;
background-image: url(https://img.webme.com/pic/h/hpbk-templateworld/636065_ddtb9auppr.png);
background-repeat: repeat-x;
float: left;
text-align: center;
font-size: 14px;
border:double 3px #d0d0d0;
border-top: 0px;
}

.Footer ul{ 
margin-top: -5px; 
margin-left: -35px; 
}

.Footer li{ 
list-style: none; 
}

.Footer li a{ 
display: block; 
line-height: 1,2em; 
font-weight: normal;
padding-bottom: 5px;
}

.col5{ 
float: left; 
width: 20%; 
}

#Copyright{
height: 25px;
width: 906px;
font-size: 12px;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
float: left;
border:double 3px #d0d0d0;
border-top: 0px;
margin-bottom: 10px;
background-image: url(https://img.webme.com/pic/h/hpbk-templateworld/636118_zxf9pn86gx.png);
background-repeat: repeat-x;
}

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.Pexxi.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.

Kommentare zu dieser Seite:

Kommentar von:	28.12.2012 um 12:06 (UTC)
pluto069 Offline	:-

Kommentar von Leon Schulze( ), 25.01.2012 um 12:57 (UTC):
Klar. Das einzige was du nicht verwenden darfst ist das Logo und wahrscheinlich auch die Grafiken. Die stehen unter dem Copyright von hpk.de / webme!