Design "Paper Fold"

Design im Poddi-Style

Design:	Paper Fold
Kategorie:	CSS Profi / HPBK
Aktuelle Version:	1.0
Erscheinung:	18.Juli 2010
Getestet auf:	»Firefox »MSIE »Google Chrome »Safari

---

Die Designcodes

Text über dem Design

<div id="paper_fold">
<h1 id="head">Homepage-Titel</h1>
<h2 id="slogan">Paper Fold</h2>

Text unter dem Design

<div id="bottom"><hr />
<center>©Copyright 2010 by <a href="http://www.deine-website.de.tl" target="_blank">Deine-Website.de.tl</a> .  -  Design by <a href="http://www.poddi.de.tl" target="_blank">Poddi</a></center></div>
</div>

CSS Code ohne Style-Tags

    /* Paper Fold  -  Copyright by www.Poddi.de.tl */


    /*VERSTECKT*/

h2#nav_heading{display:none;}
#header_container{display:none;}
h2#title{display:none;}
#sidebar_container{display:none;}

    /*VERSTECKT ENDE*/


    /*HINTERGRUND*/

body{
    background-image: url(https://img.webme.com/pic/p/poddi-designs/pf_bg.png);
    background-repeat: repeat;
    background-color: #191919;
    font-family: arial, sans-serif;
    color: #fff;
    font-size: 12px;
    }
   
    /*HINTERGRUND ENDE*/
   
   

    /*FORMATIERUNG*/
*{padding: 0; margin: 0;}
                    
h1{
    font-size: 16px;
    color: #ff6f00;
    font-weight: bold;
    }

h2{
    font-size: 13px;
    font-style: italic;
    color: #6b6b6b;
    font-weight: bold;
    }

p {
    line-height: 1.4em;
    padding:0px 0px 5px 0px;
    color:#646464;
    }

a {
    color:#Fc5305;
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:medium;
    text-decoration:none;
    }

a:hover {
    color:#fd8a00;
    }

hr{
    height: 1px;
    border: 0px solid #e0e0e0;
    background-color: #e0e0e0;
    margin: 10px;
    margin-left: 0px;
    margin-right: 0px;
    }

    /*FORMATIERUNG ENDE*/



    /*HEADER*/
   
h1#head{
    font-size: 30px;
    color: #ff6f00;
    font-weight: bold;
    margin-left: 10px;
    margin-top: 20px;
    }

h2#slogan{
    font-size: 17px;
    font-style: italic;
    color: #fff;
    font-weight: normal;
    margin-left: 150px;
    margin-bottom: 10px;
    }

    /*HEADER ENDE*/



    /*DESIGNCONTAINER*/

#paper_fold{
    width: 750px;
    margin: 10px auto;
    }

    /*DESIGNCONTAINER ENDE*/



    /*NAVIGATION*/

#nav_container{
    width: 730px;
    height: 21px;
    background-image: url(https://img.webme.com/pic/p/poddi-designs/pf_nav_bg.png);
    background-color: #ff6f00;
    float: left;
    clear:both;
    padding: 4px 10px 0px 10px;
    color: #fff;
    font-size: 12px;
    }

li.nav_element, li.subpage{
    list-style-type: none;
    float: left;
    padding-right: 10px;
    }

a.menu:after{
    content: url(https://img.webme.com/pic/p/poddi-designs/pf_nav_trenn.png);
    float: right;
    }

a.menu{
    color: #eeeeee;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    padding-right: 10px;
    }

a.menu:hover{
    color: #ffffff;
    }

    /*NAVIGATION ENDE*/
   
   
   
    /*INHALTSBEREICH*/

#pre_content{
    width: 750px;
    height: 30px;
    background-image: url(https://img.webme.com/pic/p/poddi-designs/pf_content_top.png);
    background-color: #fff;
    float: left;
    clear:both;
    }

#content{
    width: 690px;
    min-height: 192px;
    background-image: url(https://img.webme.com/pic/p/poddi-designs/pf_content_bg.png);
    background-position: bottom right;
    background-color: #fff;
background-repeat: no-repeat;
    float: left;
    clear:both;
    padding: 0px 30px 0px 30px;
    color: #6b6b6b;
    font-size: 12px;
    line-height: 1.4em;
    }

    /*INHALTSBEREICH ENDE*/



    /*FOOTER*/

#bottom{
    width: 580px;
    height: 64px;
    background-image: url(https://img.webme.com/pic/p/poddi-designs/pf_content_bottom.png);
    background-color: transparent;
    background-repeat: no-repeat;
    float: left;
    clear:both;
    padding: 5px 140px 30px 30px;
    font-size: 12px;
    color: #6b6b6b;
    overflow: hidden;
    margin-bottom: 20px;
    }

#bottom hr{
    margin: 20px 0px 30px 0px;
    }
   
    /*FOOTER ENDE*/
   
   
   
    /*WERBUNG ZENTRIEREN*/

table[height="102"] {
    margin:auto;
    } 

    /*WERBUNG ZENTRIEREN ENDE*/