Homepageberatung || Textgestaltung | Grafiken

Dark Tribals

Design "Dark Tribals"

Dieses dunkle Design nennt sich "Dark Tribals". Es ist absolut themenfrei und passt deshalb auf jede Homepage. Die Beschränkung auf Grau- und Rottöne, die strikte Aufteilung der Felder und die sich nicht verändernde Breite tragen zur Schlichtheit dieses Templates bei. 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="Schwubbel">
<div id="Obermenu">
<div id="Obermenu_punkte">

<a href="#">Kontakt</a>
<a href="#">Gästebuch</a>
<a href="#">Partner</a>

<a href="#">Impressum</a>

</div>
</div>
<div id="ÜberInhalt">

<h1 id="Titel">www.Homepagename.de</h1>

<h2 id="Untertitel">Hier erscheint dein Slogan</h2>

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

Unter dem Design

<div id="UnterInhalt"></div>
<div id="Footer"><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 "DARK TRIBAL" © 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-image: url(https://img.webme.com/pic/s/sp-testseite3/background.png);
    background-color: #000;
    background-repeat: no-repeat;
    background-position: top center;
    font-family: arial, sans-serif;
    font-size: 12px;
    }


/*ÜBERSCHRIFTEN FORMATIEREN*/

h1{
    color:#fff;
    font-size: 38px;
    }
h2{
    color: #BF001D;
    font-size: 30px;
    }


/*ÜBERSCHRIFTEN IM HEADER*/

h1[id="Titel"]{
    margin-top: 50px;
    margin-left: 280px;
    float: left;
    }
h2[id="Untertitel"]{
    margin-top: 110px;
    margin-left: -370px;
    float: left;
    }


/*LINKFORMATIERUNGEN*/

a{
    color: #414141;
    text-decoration: none;
    }
    
a:hover{
    color: #BF001D;
    }


/*GRUNDGERÜST*/

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


/*HORIZONTALES MENÜ*/

#Obermenu {
    background: url(https://img.webme.com/pic/s/sp-testseite3/obermenu.png);
    width: 1000px;
    height: 95px;
    float: left;
    }

#Obermenu_punkte{
    width: 985px;
    margin-left: -15px;
    }

#Obermenu_punkte a:link, 
#Obermenu_punkte a:visited, 
#Obermenu_punkte a:hover {
    background: url(https://img.webme.com/pic/s/sp-testseite3/menu-oben.png);
    text-align: center;
    font-weight: bold;
    width: 100px;
    height: 25px;
    color: #000;
    display:block;
    float: right;
    font-size: 15px;
    padding-top: 5px;
    margin-top: 50px;
    margin-right: 30px;
    }

#Obermenu_punkte a:hover {
    background: url(https://img.webme.com/pic/s/sp-testseite3/menu-oben-hov.png);
    text-decoration: none;
    color: #fff;
    }

/*HEADER*/

#ÜberInhalt{
    width: 1000px;
    height: 209px;
    float: right;
    background: url(https://img.webme.com/pic/s/sp-testseite3/header.png);
    margin-top: -1px;
    color: #fff;
    }


/*NAVIGATION*/

#nav_container{
    width: 260px;
    margin-left: 35px;
    float: left;
    }

#nav_heading{
    height: 40px;
    width: 200px;
    margin-right: 30px;
    float: right;
    color: #fff;
    font-size: 140%;
    margin-top: 20px;
    background: url(https://img.webme.com/pic/s/sp-testseite3/navileiste.png);
    }
    
a.menu{
    display:block;
    text-align: center;
    background: url(https://img.webme.com/pic/s/sp-testseite3/navipunkt.png);
    width: 185px;
    height: 24px;
    color: #000;
    text-decoration: none;
    margin-bottom: 3px;
    padding-top: 3px;
    font-size: 15px;
    font-weight: bold;
    }

ul#nav{
    margin-top: 100px;
    }

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

li.nav_element a:hover{
    list-style-type: none;
    background: url(https://img.webme.com/pic/s/sp-testseite3/navipunkt-hov.png);
    margin-left: 10px;
    color: #fff;
    }

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


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

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


/*SIDEBAR*/

#sidebar_container{
    width: 260px;
    margin-left: 35px;
    margin-bottom: 30px;
    margin-top: 30px;
    float: left;
    clear: left;
    }
    
#sidebar_heading{
    height: 40px;
    width: 200px;
    margin-right: 30px;
    float: right;
    font-size: 140%;
    margin-top: 15px;
    margn-bottom: 30px;
    background: url(https://img.webme.com/pic/s/sp-testseite3/sidebarleiste.png);
    }
    
#sidebar_content{
    color: #fff;
    text-align: justify;
    margin-top: 80px;
    padding-right: 25px;
    padding-left: 25px;
    }

#sidebar_content h2{
    color: #fff;
    }

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

/*INHALT*/

#Contenttop{
    background: url(https://img.webme.com/pic/s/sp-testseite3/contenttop.png);
    width: 1000px;
    height: 30px;
    float: left;
    }

#content{
    width: 610px;
    padding-top: 30px;
    margin-right: 35px;
    padding-right: 25px;
    padding-left: 25px;
    margin-bottom: 30px;
    float: right;
    color: #000;
    }

#UnterInhalt{
    width: 1000px;
    height: 30px;
    float: left;
    background-image: url(https://img.webme.com/pic/s/sp-testseite3/unterinhalt.png);
    }


/*FOOTER*/

#Footer{
    background: url(https://img.webme.com/pic/s/sp-testseite3/footer.png);
    width: 1000px;
    height: 75px;
    color: #fff;
    text-align: center;
    line-height: 8pt;
    margin-bottom: 30px;
    padding-top: 13px;
    float: right;
    }

#Footer a{
    color: #BF001D;
    }
#Footer a:hover{
    color:#fff;
    }

Homepageberatung || Textgestaltung | Grafiken | Templates ||

Dark Tribals