Homepageberatung || Textgestaltung | Grafiken

Business

Design "Business"

Dieses Design besteht fast ausschließlich aus Grautönen und ist klar aufgebaut, sodass es seriös und strukturiert wirkt. Außerdem wurden hier erstmals Icons für verschiedene Social Networks direkt ins Design eingebaut. Im Header und passend dazu auch in der Navigation finden sich Binärcodes. 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="Bookmarks">
<a href="#" target="_blank"><img src="https://img.webme.com/pic/s/sp-testseite8/_facebook.png" alt="" /></a>
<a href="#" target="_blank"><img src="https://img.webme.com/pic/s/sp-testseite8/_twitter.png" alt="" /></a>
<a href="#" target="_blank"><img src="https://img.webme.com/pic/s/sp-testseite8/_rss.png" alt="" /></a>
<a href="#" target="_blank"><img src="https://img.webme.com/pic/s/sp-testseite8/_skype.png" alt="" /></a>
<a href="#" target="_blank"><img src="https://img.webme.com/pic/s/sp-testseite8/_google.png" alt="" /></a>
</div>

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

Unter dem Design

</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> | 
© Social Icons by <a href="http://www.yootheme.com/">YOOtheme.de</a>
</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>

CSS-Code

/*DESIGN "BUSINESS" © 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-testseite8/background-neu.png);
    background-color: #ececec;
    background-repeat: repeat-x;
    background-position: top center;
    font-family: arial, sans-serif;
    font-size: 12px;
    }


/*ÜBERSCHRIFTEN FORMATIEREN*/

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


/*ÜBERSCHRIFTEN IM HEADER*/

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


/*LINKFORMATIERUNGEN*/

a{
    color: #00634D;
    text-decoration: none;
    }
    
a:hover{
    color: #00A07D;
    }


/*GRUNDGERÜST*/

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


/*ICONS & HORIZONTALES MENÜ*/

#Bookmarks{
    margin-top: 20px;
    margin-left: 15px;
    }

#Obermenu {
    width: 1000px;
    height: 95px;
    margin-top: 15px;
    float: left;
    }


#Obermenu_punkte{
    width: 985px;
    margin-right: 15px;
    margin-top: -30px;
    }

#Obermenu_punkte a:link, 
#Obermenu_punkte a:visited, 
#Obermenu_punkte a:hover {
    background: url(https://img.webme.com/pic/s/sp-testseite8/manupunkt3.png);
    text-align: center;
    width: 130px;
    height: 32px;
    color: #000;
    display:block;
    float: right;
    font-size: 15px;
    padding-top: 8px;
    margin-right: 10px;
    }

#Obermenu_punkte a:hover {
    background: url(https://img.webme.com/pic/s/sp-testseite8/menupunkt-hov3.png);
    height: 47px;
    margin-top: -15px;
    text-decoration: none;
    }

/*HEADER*/

#ÜberInhalt{
    width: 1100px;
    height: 210px;
    float: right;
    background: url(https://img.webme.com/pic/s/sp-testseite8/header-gross.png);
    margin-top: 26px;
    margin-right: -50px;
    color: #fff;
    }


/*NAVIGATION*/

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

#nav_heading{
    height: 34px;
    width: 200px;
    float: right;
    text-align: center;
    font-size:  20px;
    padding-top: 6px;
    margin-top: 20px;
    margin-right: 30px;
    background: url(https://img.webme.com/pic/s/sp-testseite8/navihead.png);
    }
    
a.menu{
    display:block;
    text-align: left;
    background: url(https://img.webme.com/pic/s/sp-testseite8/navibutton.png);
    width: 160px;
    height: 25px;
    color: #000;
    text-decoration: none;
    margin-bottom: 3px;
    padding-top: 5px;
    padding-left: 10px;
    font-size: 15px;
    }

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

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

li.nav_element a:hover{
    list-style-type: none;
    font-weight: bold;
    background: url(https://img.webme.com/pic/s/sp-testseite8/navibutton-hov.png);
    color: #fff;
    }

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

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


/*ERSTE EXTRABOX*/

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


/*INHALT*/

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


/*FOOTER*/

#Footer{
    background: url(https://img.webme.com/pic/s/sp-testseite8/footer-neu.png);
    width: 102.2%;
    margin-left: -1.7%;
    height: 98px;
    color: #fff;
    text-align: center;
    line-height: 10pt;
    padding-top: 73px;
    margin-top: -50px;
    float: left;
    }

Homepageberatung || Textgestaltung | Grafiken | Templates ||

Business