Homepageberatung || Textgestaltung | Grafiken

Blue Bricks

Design "Blue Bricks"

Das erste blaue Design "Blue Bricks" hegt eine rustikale Optik und hat im Hintergrund größtenteils dunkle Farbtöne. Alles wirkt etwas abgenutzt und veraltet, hat aber kein Thema, sodass dieses Template zu jeder nicht zu feinen Website passen kann. Obere Menüpunkte finden sich im sehr großen Headerbereich. 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="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 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 "BLUE BRICKS" © 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-testseite5/background.png);
    background-color: #000;
    background-repeat: repeat-y;
    background-position: top center;
    font-family: arial, sans-serif;
    font-size: 12px;
    }


/*ÜBERSCHRIFTEN FORMATIEREN*/

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


/*ÜBERSCHRIFTEN IM HEADER*/

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


/*LINKFORMATIERUNGEN*/

a{
    color: #95A5DB;
    text-decoration: none;
    }
    
a:hover{
    color: #fff;
    }


/*GRUNDGERÜST*/

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


/*HEADER*/

#ÜberInhalt{
    width: 1100px;
    height: 500px;
    float: left;
    background: url(https://img.webme.com/pic/s/sp-testseite5/header.png);
    margin-left: -50px;
    margin-bottom: 30px;
    margin-top: -115px;
    color: #fff;
    }


/*HORIZONTALES MENÜ*/

#Obermenu {
    width: 1100px;
    height: 95px;
    margin-top: -170px;
    float: left;
    }

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

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

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


/*NAVIGATION*/

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

#nav_heading{
    height: 38px;
    width: 200px;
    float: right;
    color: #fff;
    text-align: center;
    font-size: 25px;
    margin-right: 40px;
    margin-top: 50px;
    padding-top: 2px;
    background: url(https://img.webme.com/pic/s/sp-testseite5/naviheader.png);
    }
    
a.menu{
    display:block;
    text-align: center;
    background: url(https://img.webme.com/pic/s/sp-testseite5/menu.png);
    width: 210px;
    height: 26px;
    color: #fff;
    text-decoration: none;
    margin-bottom: 6px;
    padding-top: 4px;
    font-size: 17px;
    }

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

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-testseite5/menu-hov.png);
    }

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


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


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

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


/*SIDEBAR*/

#sidebar_container{
    background: url(https://img.webme.com/pic/s/sp-testseite5/sidebar.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    min-height: 200px;
    width: 300px;
    margin-bottom: 30px;
    margin-top: 30px;
    float: left; 
    clear:left;
    }
    
#sidebar_heading{
    height: 38px;
    width: 200px;
    color: #fff;
    float: right;
    text-align: center;
    font-size: 25px;
    margin-top: 15px;
    margin-right: 40px;
    margn-bottom: 30px;
    padding-top: 2px;
    background: url(https://img.webme.com/pic/s/sp-testseite5/sideheader.png);
    }
    
#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;
    }
    

/*INHALT*/

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

#content{
    width: 614px;
    min-height: 500px;
    background: url(https://img.webme.com/pic/s/sp-testseite5/inhalt.png);
    background-repeat: no-repeat;
    background-position: top right;
    padding-top: 30px;
    padding-right: 44px;
    padding-left: 24px;
    margin-bottom: 30px;
    float: right;
    color: #fff;
    }
#UnterInhalt{
    width: 1000px;
    height: 12px;
    float: left;
    background-image: url(https://img.webme.com/pic/s/sp-testseite5/inhaltgrenze.png);
    }


/*FOOTER*/

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

Homepageberatung || Textgestaltung | Grafiken | Templates ||

Blue Bricks