Homepageberatung || Textgestaltung | Grafiken

Wood & Paint

Design "Wood & Paint"

Das Design "Wood & Paint" ist chaotisch und geordnet zugleich. Alle Bereiche sind klar abgegrenzt und durch die Holzoptik strukturiert, in sich aber durch Farbkleckse locker und "laut". Dieses Template eignet sich natürlich sehr gut für künstlerische Websites, aber auch für andere freundliche Themen kann es sicher gut genutzt werden. Der Code für dieses Design findet sich unten, eine Anleitung zum Einbauen in deine Seite findest du hier.
Vorher Nutzungsbedingungen lesen!

Demo für dieses Template

Copyright-Hinweise von Homepageberatung.de.tl dürfen nicht entfernt oder verändert werden.

Über dem Design

<div id="Topbanner"></div>
<div id="Schwubbel">
<div id="ÜberInhalt">
<h1 id="Titel">www.Homepagename.de</h1>
<h2 id="Untertitel">Hier erscheint dein Slogan</h2>
</div>
<div id="Obermenu">
<div id="Obermenu_punkte">

<div id="Link1"><a href="#">Home</a></div>
<div id="Link2"><a href="#">Kontakt</a></div>
<div id="Link3"><a href="#">Partner</a></div>
<div id="Link4"><a href="#">Impressum</a></div>

</div>
</div>

<div id="Contenttop"></div>

Unter dem Design

<div id="UnterInhalt"></div>

<div id="Footer"><br/><br/>
© Content by <a href="#">Seitenname.de</a> | 
© Design by <a href="http://www.homepageberatung.de.tl">Homepageberatung.de.tl</a><br/><br/>

<a href="#">Interessant</a> | 
<a href="#">Partner</a> | 
<a href="#">Kontakt</a> | 

<a href="#">Impressum</a> | 
<a href="#">Gästebuch</a><br/>

</div>

</div>

CSS-Code

/*DESIGN "WOOD & PAINT" © BY HOMEPAGEBERATUNG.DE.TL
Dieser Urheberrechtshinweis darf weder entfernt noch verändert werden!*/

#header_container{display:none;}
h2#title{display:none;}
#counter{display:none;}


/*WERBUNG MITTIG*/

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


/*HINTERGRUND*/

body{
    background-color: #8E8E8E;
    font-family: arial, sans-serif;
    font-size: 12px;
    }


/*ÜBERSCHRIFTEN FORMATIEREN*/

h1{
    color:#fff;
    font-size: 45px;
    }
h2{
    color: #000;
    font-size: 37px;
    }


/*ÜBERSCHRIFTEN IM HEADER*/

h1[id="Titel"]{
    margin-top: 140px;
    margin-left: 340px;
    float: left;
    }
h2[id="Untertitel"]{
    margin-top: 100px;
    margin-left: -630px;
    float: left;
    }


/*LINKFORMATIERUNGEN*/

a{
    color: #FF0101;
    text-decoration: none;
    }
    
a:hover{
    color: #BA0000;
    }


/*GRUNDGERÜST*/

#Schwubbel{
    width: 1100px;
    margin: 0px auto;
    margin-top: -460px;
    }        
    
#container{
    width: 1100px;
    float: left;
    background: url(https://img.webme.com/pic/s/sp-testseite7/container-neu.png);
    background-repeat: repeat-y;
    }


/*HEADER UND HINTERBANNER*/

#Topbanner{
    background: url(https://img.webme.com/pic/s/sp-testseite7/topbanner2.png);
    width: 102.2%;
    margin-left: -1.7%;
    height: 500px;
    }

#ÜberInhalt{
    width: 1100px;
    height: 300px;
    float: left;
    background: url(https://img.webme.com/pic/s/sp-testseite7/header2.png);
    margin-bottom: 30px;
    margin-top: 10px;
    color: #fff;
    }


/*HORIZONTALES MENÜ*/

#Obermenu {
    width: 1100px;
    height: 90px;
    margin-top: -40px;
    margin-bottom: 20px;
    float: left;
    }

#Obermenu_punkte{
    width: 560px;
    margin-left: 290px;
    }

#Obermenu_punkte a:link, 
#Obermenu_punkte a:visited, 
#Obermenu_punkte a:hover {
    background: url(https://img.webme.com/pic/s/sp-testseite7/menupunkt.png);
    text-align: center;
    font-weight: bold;
    width: 110px;
    height: 30px;
    color: #D4D0C8;
    display:block;
    float: left;
    font-size: 15px;
    padding-top: 10px;
    margin-right: 30px;
    }
#Obermenu_punkte a:hover{
    color: #fff;
    }

#Link1 a:hover{
    background: url(https://img.webme.com/pic/s/sp-testseite7/menupunkt-1.png);}
#Link2 a:hover{
    background: url(https://img.webme.com/pic/s/sp-testseite7/menupunkt-2.png);}
#Link3 a:hover{
    background: url(https://img.webme.com/pic/s/sp-testseite7/menupunkt-3.png);}
#Link4 a:hover{
    background: url(https://img.webme.com/pic/s/sp-testseite7/menupunkt-4.png);}



/*NAVIGATION*/

#nav_container{
    width: 300px;
    margin-left: 50px;
    float: left;
    }

#nav_heading{
    height: 38px;
    width: 180px;
    float: right;
    color: #fff;
    text-align: center;
    font-size: 25px;
    margin-right: 45px;
    margin-top: 45px;
    padding-top: 2px;
    background: url(https://img.webme.com/pic/s/sp-testseite7/navipunkt.png);
    }
    
a.menu{
    display:block;
    text-align: center;
    background: url(https://img.webme.com/pic/s/sp-testseite7/navipunkte.png);
    width: 160px;
    height: 23px;
    color: #fff;
    text-decoration: none;
    margin-bottom: 6px;
    padding-top: 2px;
    font-size: 17px;
    }

ul#nav{
    margin-top: 120px;
    margin-left: 45px;
    }

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

li.nav_element a:hover{
    list-style-type: none;
    font-weight: bold;
    color: #ececec;
    }

li.subpage a{
    margin-left: 10px;
    font-style: italic;
    }

li.subpage a:before{
    content: "> ";
    }

li.checked_menu a{
    background: url(https://img.webme.com/pic/s/sp-testseite7/navipunkte-che.png);
    color: #000;
    font-weight: bold;
    }


/*SIDEBAR*/

#sidebar_container{
    min-height: 200px;
    width: 300px;
    margin-bottom: 30px;
    margin-left: 50px;
    margin-top: 30px;
    float: left; 
    clear:left;
    }
    
#sidebar_heading{
    height: 38px;
    width: 180px;
    color: #fff;
    float: right;
    text-align: center;
    font-size: 25px;
    margin-top: 15px;
    margin-right: 45px;
    margn-bottom: 30px;
    padding-top: 2px;
    background: url(https://img.webme.com/pic/s/sp-testseite7/navipunkt-che.png);
    }
    
#sidebar_content{
    color: #000;
    text-align: justify;
    margin-top: 80px;
    margin-left: 45px;
    padding-right: 20px;
    }

#sidebar_content a:hover{
    color: #95A5DB;
    text-decoration: underline;
    }
    

/*INHALT*/

#Contenttop{
    background: url(https://img.webme.com/pic/s/sp-testseite7/top.png);
    width: 1100px;
    height: 70px;
    margin: 0px auto;
    float: left;
    }

#content{
    width: 620px;
    min-height: 500px;
    background: url(https://img.webme.com/pic/s/sp-testseite7/content.png);
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 30px;
    padding-right: 44px;
    padding-left: 24px;
    margin-right: 50px;
    float: right;
    color: #000;
    }

#UnterInhalt{
    width: 1100px;
    height: 70px;
    float: left;
    background-image: url(https://img.webme.com/pic/s/sp-testseite7/bottom.png);
    }


/*FOOTER*/

#Footer{
    width: 800px;
    height: 163px;
    background: url(https://img.webme.com/pic/s/sp-testseite7/footer.png);
    color: #fff;
    text-align: center;
    margin-right: 150px;
    margin-top: -50px;
    padding-top: 55px;
    float: right;
    }

Homepageberatung || Textgestaltung | Grafiken | Templates ||

Wood & Paint