Homepageberatung || Textgestaltung | Grafiken

Simple Blue

Design "Simple Blue"

"Simple Blue" ist ein sehr schlichtes Design für Leute, die genug vom vielen Schnickschnack haben. Weiche und runde Linien und Schattierungen machen es sanft. Für dieses klare Design wurden nur Grautöne, abgesehen vom Hintergrund, verwendet. Die Hintergrundfarbe lässt sich sehr einfach anpassen. 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="Ü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/><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 "SIMPLE BLUE" © 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-testseite12/hinterstreifen.png);
    background-color: #CFE5F7;
    background-repeat: repeat;
    background-position: top center;
    font-family: arial, sans-serif;
    font-size: 12px;
    }


/*ÜBERSCHRIFTEN FORMATIEREN*/

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


/*ÜBERSCHRIFTEN IM HEADER*/

h1[id="Titel"]{
    margin-top: 98px;
    margin-left: 300px;
    float: left;
    }
h2[id="Untertitel"]{
    margin-top: 150px;
    margin-left: -420px;
    float: left;
    }


/*LINKFORMATIERUNGEN*/

a{
    color: #9DADBB;
    text-decoration: none;
    }
    
a:hover{
    color: #CFE5F7;
    }


/*GRUNDGERÜST*/

#Schwubbel{
    width: 1100px;
    margin: 0px auto;
    }        
    
#container{
    width: 1100px;
    float: left;
    background: 

url(https://img.webme.com/pic/s/sp-testseite12/container2.png);
    background-repeat: repeat-y;
    }


/*HEADER*/

#ÜberInhalt{
    width: 1100px;
    height: 350px;
    float: none;
    background: url(https://img.webme.com/pic/s/sp-testseite12/header.png);
    margin-top: 20px;
    margin-bottom: -50px;
    color: #fff;
    }


/*NAVIGATION*/

#nav_container{
    margin-left: 85px;
    width: 200px;
    float: left;
    }

#nav_heading{
    float: left;
    color: #000;
    font-size: 140%;
    margin-top: 30px;
    }
    
a.menu{
    display:block;
    border-bottom: 1px solid #73808A;
    border-top: 1px solid #73808A;
    width: 185px;
    height: 26px;
    color: #73808A;
    text-decoration: none;
    margin-bottom: -1px;
    padding-left: 10px;
    padding-top: 4px;
    font-size: 13px;
    font-weight: bold;
    }

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

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-testseite12/menu-hover.png);
    color: #fff;
    }

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

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

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


/*SIDEBAR*/

#sidebar_container{
    margin-left: 85px;
    width: 200px;
    margin-bottom: 30px;
    margin-top: 30px;
    float: left; 
    clear:left;
    }
    
#sidebar_heading{
    float: left;
    color: #000;
    font-size: 140%;
    margin-top: 15px;
    }
    
#sidebar_content{
    color: #73808A;
    text-align: justify;
    margin-top: 60px;
    }

#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-testseite12/top.png);
    width: 1100px;
    height: 50px;
    margin: 0px auto;
    float: left;
    }

#content{
    width: 630px;
    margin-right: 85px;
    float: right;
    color: #000;
    }
#UnterInhalt{
    width: 1100px;
    height: 50px;
    float: left;
    background-image: 

url(https://img.webme.com/pic/s/sp-testseite12/bottom2.png);
    }


/*FOOTER*/

#Footer{
    width: 1000px;
    color: #fff;
    text-align: center;
    margin-bottom: 30px;
    float: right;
    }

#Footer a{
    color: #000;
    }

Homepageberatung || Textgestaltung | Grafiken | Templates ||

Simple Blue