Homepageberatung || Textgestaltung | Grafiken | Templates ||

Classical Music

Design "Classical Music"

Bei dem Design "Classical Music" handelt es sich um ein CSS-Template mit dem Thema Musik. Dieses Thema ließe sich allerdings einfach durch einen anderen Banner überschreiben und würde so universell einsetzbar. Es wurden weitgehend mattbraune und graue Farbtöne verwendet. 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">

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

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

Unter dem Design

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

</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/>



<br/><img src="https://img.webme.com/pic/m/musiktest2/footergrafik.png" alt="" />
</div>

CSS-Code

/*DESIGN "CLASSICAL MUSIC" © 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: url(https://img.webme.com/pic/m/musiktest2/fliesen-bg.png);
    background-repeat: repeat;
    background-position: top center;
    font-family: arial, sans-serif;
    font-size: 13px;
    }


 /*ÜBERSCHRIFTEN*/

h1{
    color:#BF001D;
    font-size: 37px;
    }
h2{
    color: #fff;
    font-size: 29px;
    }


/*ÜBERSCHRIFTEN SPEZIELL IM HEADER*/

h1[id="Titel"]{
    margin-top: 100px;
    margin-left: 250px;
    float: left;
    }
h2[id="Untertitel"]{
    margin-top: 155px;
    margin-left: -300px;
    float: left;
    }


/*LINK-FORMATIERUNGEN*/

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


/*GRUNDGESRÜST*/

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


/*HEADER UND BREITER STREIFEN*/

#Topbanner{
    background: url(https://img.webme.com/pic/m/musiktest2/topbanner-bg.png);
    repeat: repeat-x;
    height: 300px;
    width: 100%;
    }

#ÜberInhalt{
    width: 1100px;
    height: 300px;
    float: right;
    background: url(https://img.webme.com/pic/m/musiktest2/header-deko-leer.png);
    margin-right: -50px;
    margin-top: -2px;
    margin-bottom: 2px;
    }


/*HORIZONTALE MENÜPUNKTE*/

#Obermenu {
    background: url(https://img.webme.com/pic/m/musiktest2/container.png);
    width: 1000px;
    height: 40px;
    float: left;
    }

#Obermenu_punkte{
    width: 650px;
    margin-left: 370px;
    }

#Obermenu_punkte a:link, 
#Obermenu_punkte a:visited, 
#Obermenu_punkte a:hover {
    text-align: center;
    background: url(https://img.webme.com/pic/m/musiktest2/button.png);
    font-weight: bold;
    vertical-align: middle;
    width: 100px;
    height: 28px;
    color: #fff;
    display:block;
    float: left;
    font-size: 15px;
    padding-top:5px;
    margin-top: 0px;
    margin-left: 30px;
    margin-right: 20px;
    }

#Obermenu_punkte a:hover {
    text-decoration: none;
    color: #BF001D;
    background: url(https://img.webme.com/pic/m/musiktest2/button-hov.png);
    height: 28px;
    }


/*LINKE NAVIGATION*/

#nav_container{
    width: 170px;
    margin-right: 10px;
    margin-top: -53px;
    margin-bottom: 10px;
    float: left;
    }

#nav_heading{
    height: 50px;
    width: 140px;
    margin-right: 10px;
    float: right;
    margin-bottom: 0px;
    margin-top: 20px;
    background: url(https://img.webme.com/pic/m/musiktest2/navigation.png);
    }

a.menu{
    display:block;
    background: url(https://img.webme.com/pic/m/musiktest2/menupunkt.png);
    width: 135px;
    height: 20px;
    color: #000;
    padding-left: 10px;
    padding-top: 4px;
    margin-left: -25px;
    margin-bottom: 5px;
    }

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

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


li.nav_element a:hover{
    list-style-type: none;
    background: url(https://img.webme.com/pic/m/musiktest2/menupunkt-hov.png);
    }

li.subpage a{
    width: 135px;
    margin-left: -15px;
    font-style: italic;
    }

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

li.checked_menu a{
    background: url(https://img.webme.com/pic/m/musiktest2/menupunkt-che.png);
    font-weight: bold;
    }

li.checked_menu a:hover{
    background: url(https://img.webme.com/pic/m/musiktest2/menupunkt-chehov.png);
    font-weight: bold;
    }


/*SIDEBAR*/

#sidebar_container{
    width: 190px;
    margin-bottom: 30px;
    margin-top: -50px;
    float: right; 
    }
    
#sidebar_heading{
    height: 40px;
    width: 150px;
    float: right;
    margin-top: 15px;
    margin-right: 15px;
    margn-bottom: 15px;
    background: url(https://img.webme.com/pic/m/musiktest2/sidebar.png);
    }
    
#sidebar_content{
    color: #000;
    text-align: justify;
    margin-top: 60px;
    padding-left: 25px;
    padding-right: 20px;
    }

#sidebar_content h1{
    color: #000;
    padding-left: 30px;
    }


/*INHALT*/

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

#content{
    width:570px;
    background: transparent;
    padding-right: 30px;
    padding-left: 30px;
    float: left;
    color: #493A29;
    }

#UnterInhalt{
    width: 1000px;
    height: 120px;
    float: left;
    background-image: url(https://img.webme.com/pic/m/musiktest2/untercontent.png);
    }


/*FOOTER*/

#Footer{
    background: url(https://img.webme.com/pic/m/musiktest2/footer.png);
    Height: 200px;
    color: #A5A4A4;
    text-align: center;
    width: 100%;
    float: right;
    }