Homepageberatung || Textgestaltung | Grafiken

Mystic Night

Design "Mystic Night"

Ein mystisches, sehr geheimnisvolles Design, das an einen Sternenhimmel erinnert. Zusätzlich zum oberen Menü gibt es außerdem noch jeweils oben und unten Linkleisten, in denen Partner, News oder andere wichtige Seiten präsentiert werden können. 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 id="Top_Punkte">
Unsere Neuigkeiten
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
</div>
<div id="Topend"></div>

Unter dem Design

<div id="Bottomend"></div>
<div id="UnterInhalt">
<div id="Bottom_Punkte">
Unsere Partner
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</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/>

</div>

</div>

CSS-Code


/*DESIGN "MYSTIC NIGHT" © 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: #000;
    font-family: arial, sans-serif;
    font-size: 12px;
    }


/*ÜBERSCHRIFTEN FORMATIEREN*/

h1{
    color:#fff;
    font-size: 35px;
    }
h2{
    color: #AEF2EA;
    font-size: 20px;
    }


/*ÜBERSCHRIFTEN IM HEADER*/

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


/*LINKFORMATIERUNGEN*/

a{
    color: #2C837C;
    text-decoration: none;
    }
    
a:hover{
    color: #fff;
    }


/*GRUNDGERÜST*/

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


/*HEADER*/

#Topbanner{
    width: 1200px;
    height: 500px;
    background: url(https://img.webme.com/pic/s/sp-testseite13/nachthimmel.png);
    margin: 0px auto;
    margin-top: -120px;
    color: #fff;
    }

#Überinhalt{
    width: 200px;
    height: 50px;
    float: left;
    color: #fff;
    }


/*HORIZONTALES MENÜ*/

#Obermenu {
    width: 800px;
    height: 95px;
    margin-top: -60px;
    float: right;
    }

#Obermenu_punkte{
    width: 800px;
    }

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

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


/*NAVIGATION*/

#nav_container{
    width: 250px;
    float: left;
    }

#nav_heading{
    width: 200px;
    color: #2C837C;
    float: right;
    text-align: left;
    font-size: 18px;
    margin-top: 15px;
    }
    
a.menu{
    display:block;
    text-align: center;
    width: 180px;
    height: 20px;
    color: #fff;
    text-decoration: none;
    margin-bottom: 6px;
    font-size: 17px;
    }

ul#nav{
    margin-top: 70px;
    margin-left: 15px;
    }

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

li.nav_element a:hover{
    color: #2C837C;
    }

li.subpage a{
    font-size: 15px;
    color: #2C837C;
    font-style: italic;
    }


li.subpage a:hover{
    color: #45D9CB;
    font-style: italic;
    }


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

li.checked_menu a{
    color: #45D9CA;
    font-weight: bold;
    }


/*SIDEBAR*/

#sidebar_container{
    width: 250px;
    margin-bottom: 30px;
    margin-top: 30px;
    float: left; 
    clear:left;
    }
    
#sidebar_heading{
    width: 200px;
    color: #2C837C;
    float: right;
    text-align: left;
    font-size: 18px;
    margin-top: 15px;
    margn-bottom: 30px;
    }
    
#sidebar_content{
    color: #fff;
    text-align: justify;
    margin-top: 80px;
    margin-left: 45px;
    padding-right: 20px;
    }

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

/*LEISTE MIT LINKS - OBEN*/

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

#Top_Punkte{
    height: 30px;
    width: 600px;
    margin-left: 40px;
    padding-top: 10px;
    font-size: 16px;
    color: #AEF2EA;
    float: left;
    }

#Top_Punkte a{
    margin-right: 20px;
    color: #fff;
    float: left;
    }

#Top_Punkte a:hover{
    color: #298375;
    }


/*INHALT*/

#Topend{
    width: 1000px;
    height: 40px;
    margin-top: 40px;
    background: url(https://img.webme.com/pic/s/sp-testseite13/top.png);
    float: right;
    }

#content{
    width: 680px;
    padding-top: 30px;
    padding-right: 44px;
    padding-left: 24px;
    margin-bottom: 30px;
    float: right;
    color: #fff;
    }

#Bottomend{
    width: 1000px;
    height: 40px;
    background: url(https://img.webme.com/pic/s/sp-testseite13/bottom.png);
    float: right;
    }



/*LEISTE MIT LINKS - UNTEN*/

#UnterInhalt{
    background: url(https://img.webme.com/pic/s/sp-testseite13/unterinhalt.png);
    width: 1000px;
    height: 40px;
    margin: 0px auto;
    margin-top: 20px;
    float: right;
    }

#Bottom_Punkte{
    height: 30px;
    width: 600px;
    margin-right: 40px;
    text-align: right;
    padding-top: 10px;
    font-size: 16px;
    color: #AEF2EA;
    float: right;
    }

#Bottom_Punkte a{
    margin-left: 20px;
    color: #fff;
    float: right;
    }

#Bottom_Punkte a:hover{
    color: #298375;
    }


/*FOOTER*/

#Footer{
    width: 1100px;
    height: 150px;
    color: #fff;
    text-align: center;
    margin-top: 30px;
    margin-right: -50px;
    float: right;
    }

Homepageberatung || Textgestaltung | Grafiken | Templates ||

Mystic Night