Homepageberatung || Textgestaltung | Grafiken

Red Business

Design "Red Business"

"Red Business" ist ein schlichtes, aber trotzdem elegantes Design in Grau- und Rottönen. Dieses Design verleiht ein seriöses, aber nicht zu ernstes Auftreten. Der Inhaltsbereich ist klar vom Rest des Designs abgegrenzt, obere Menüpunkte verleihen mehr Spielraum. 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">
<br/>
<div id="Trennlinie"></div>
</div>

Unter dem Design

<div id="Footer">
<div id="Trennlinie"></div>
<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 id="UnterInhalt"></div>

</div>

CSS-Code

/*DESIGN "Red 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: url(https://img.webme.com/pic/s/sp-testseite24/hintergrund2.png);
    background-repeat: repeat;
    background-position: top center;
    background-color: #ececec;
    font-family: arial, sans-serif;
    font-size: 13px;
    }


 /*ÜBERSCHRIFTEN*/

h1{
    color:#8C0015;
    font-size: 30px;
    }
h2{
    color: #493A29;
    font-size: 20px;
    }


/*ÜBERSCHRIFTEN SPEZIELL IM HEADER*/

h1[id="Titel"]{
    float: left;
    margin-top:40px;
    margin-left: 40px;
    float: left;
    }
h2[id="Untertitel"]{
    float:left;
    margin-top: 90px;
    margin-left: -180px;
    float: left;
    }


/*LINK-FORMATIERUNGEN*/

a{
    color: #fff;
    text-decoration: none;
    }
    
a:hover{
    color: #8C0015;
    }


/*GRUNDGESRÜST*/

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


/*HEADER*/

#ÜberInhalt{
    width: 1000px;
    height: 200px;
    float: right;
    background: url(https://img.webme.com/pic/s/sp-testseite24/header.png);
    margin-top: 20px;
    }


/*HORIZONTALE MENÜPUNKTE*/

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

#Obermenu_punkte{
    width: 1000px;
    }

#Obermenu_punkte a:link, 
#Obermenu_punkte a:visited, 
#Obermenu_punkte a:hover {
    text-align: center;
    font-weight: bold;
    height: 25px;
    color:  #AFAFAF;
    display:block;
    float: right;
    font-size: 15px;
    padding-top:5px;
    margin-right: 30px;
    }

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


/*NAVIGATION*/

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

#nav_heading{
    float: left;
    color:  #AFAFAF;
    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: 50px;
    width: 200px;
    margin-bottom: 30px;
    margin-top: 30px;
    float: left; 
    clear:left;
    }
    
#sidebar_heading{
    float: left;
    color:  #AFAFAF;
    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-testseite24/container.png);
    width: 1000px;
    height: 30px;
    margin: 0px auto;
    float: left;
    }

#content{
    width: 630px;
    margin-right: 50px;
    float: right;
    color: #000;
    }

#UnterInhalt{
    width: 1000px;
    height: 20px;
    float: left;
    background-image: url(https://img.webme.com/pic/s/sp-testseite24/ende.png);
    margin-bottom: 50px;
    }

#content a{
    color: #8C0015;
    }

#content a:hover{
    color: #fff;
    }

#Trennlinie{
    width: 950px;
    height: 1px;
    background: #AFAFAF;
    float: left;
    margin-left: 25px;
    }

/*FOOTER*/

#Footer{
    background: url(https://img.webme.com/pic/s/sp-testseite24/container.png);
    width: 1000px;
    color: #000;
    text-align: center;
    float: right;
    }

#Footer a{
    color: #8C0015;
    }

#Footer a:hover{
    color: #fff;
    }

Homepageberatung || Textgestaltung | Grafiken | Templates ||

Red Business