Homepageberatung || Textgestaltung | Grafiken

Soft Flowers

Design "Soft Flowers"

Das Design "Soft Flowers" ist aufregend und geladen. Es gibt viele warme Farbtöne und quirlige Blumenmuster in Header und Hintergrund, die der Homepage Energie verleihen und sehr fröhlich wirken. Die Transparenz des Hauptbereiches lockert alles etwas auf, damit die Website nicht zu voll erscheint. 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 "SOFT FLOWERS" © 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-testseite4/background.png);
    background-repeat: repeat-y;
    background-position: top center;
    background-color: #FFFDF7;
    font-family: arial, sans-serif;
    font-size: 13px;
    }


 /*ÜBERSCHRIFTEN*/

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


/*ÜBERSCHRIFTEN SPEZIELL IM HEADER*/

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


/*LINK-FORMATIERUNGEN*/

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


/*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-testseite4/container.png);
    background-repeat: repeat-y;
    }


/*HEADER UND BREITER STREIFEN*/

#ÜberInhalt{
    width: 1100px;
    height: 300px;
    float: right;
    background: url(https://img.webme.com/pic/s/sp-testseite4/header.png);
    margin-right: -55px;
    margin-top: 2px;
    }


/*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;
    background: url(https://img.webme.com/pic/s/sp-testseite4/menu-oben.png);
    font-weight: bold;
    width: 120px;
    height: 25px;
    color: #FDFFC8;
    display:block;
    float: right;
    font-size: 15px;
    padding-top:5px;
    margin-right: 40px;
    }

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


/*LINKE NAVIGATION*/

#nav_container{
    width: 190px;
    margin-top: -20px;
    margin-bottom: 10px;
    float: left;
    }

#nav_heading{
    height: 50px;
    width: 140px;
    margin-right: 25px;
    margin-top: 10px;
    float: right;
    background: url(https://img.webme.com/pic/s/sp-testseite4/navigation.png);
    }

a.menu{
    display:block;
    background: url(https://img.webme.com/pic/s/sp-testseite4/menupunkt.png);
    width: 135px;
    height: 20px;
    color: #000;
    padding-left: 10px;
    padding-top: 4px;
    margin-left: -25px;
    margin-bottom: 6px;
    }

ul#nav{
    margin-top: 87px;
    margin-left: 5px;
    }

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-testseite4/menupunkt-hov.png);
    }

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

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

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

li.checked_menu a:hover{
    font-weight: bold;
    }


/*SIDEBAR*/

#sidebar_container{
    width: 190px;
    margin-bottom: 30px;
    margin-top: -18px;
    float: right; 
    }
    
#sidebar_heading{
    height: 40px;
    width: 150px;
    float: right;
    margin-top: 15px;
    margin-right: 15px;
    margn-bottom: 15px;
    background: url(https://img.webme.com/pic/s/sp-testseite4/sidebar.png);
    }
    
#sidebar_content{
    color: #000;
    text-align: justify;
    margin-top: 60px;
    padding-left: 25px;
    padding-right: 20px;
    }

#sidebar_content h1{
    color: #000;
    padding-left: 30px;
    }


/*INHALT*/

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

#content{
    width:560px;
    padding-right: 30px;
    padding-left: 30px;
    float: left;
    color: #493A29;
    }

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

#content a{
    color: #8C0015;
    }

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


/*FOOTER*/

#Footer{
    background: url(https://img.webme.com/pic/s/sp-testseite4/footer.png);
    height: 120px;
    width: 1000px;
    color: #000;
    text-align: center;
    float: right;
    margin-bottom: 50px;
    }

#Footer a{
    color: #8C0015;
    }

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

Homepageberatung || Textgestaltung | Grafiken | Templates ||

Soft Flowers