---

<div id="areas">
  <ul>
    <li><a href="" id="areas_button01"><span>product</span>information</a></li>
    <li><a href="" id="areas_button02"><span>press</span>releases</a></li>
  </ul>
</div>

---

---

#areas ul li a{padding-right:7px;color:#FFF;padding-left:65px;padding-top:0px;font-size:20px;width:150px;height:52px;display:block;}
#areas ul li a span{color:#FF8000;display:block;}

---

---

<p class="konto"><a onclick="switchMenu('')"; >...</a></p>

---

---

p.konto a {
        font-family:        Arial;
        font-size:                17px;
        color:                        #4CA829;
        padding-left:        3px;
        border-left:        3px solid #009DE0;
}
p.konto a:hover {
        font-family:        Arial;
        font-size:                17px;
        color:                        #4CA829;
        padding-left:        6px;
        border-left:        3px solid #009DE0;
}

---

---


<img src="http://xhtmlforum.de/images/180px-Bradypus.jpg" usemap="#green" border="0">
    <map name="green" >
                <area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html">
                <area shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html">
                <area class="tipper" rel="{content:'tipContainer1'}" shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">           
    </map>
   
    <div class="tipContainer" id="tipContainer1" style="width: 200px;" >
              <h3>Ringstrasse / Lagerflächen</h3>       
    </div>

---

---

<div id="mitte1">
        <ul class="level1">
                <li class="level1"><a href="home.html">Home</a></li>
                <li class="level1">Leistungen
                        <ul class="level2">
                                <li class="level2"><a href="bla1.html">Blabla 1</a></li>
                                <li class="level2"><a href="bla2.html">Blabla 2</a></li>
                                <li class="level2"><a href="bla3.html">Blabla 3</a></li>
                        </ul>
                </li>
                <li class="level1">Studios</li>
        </ul>
</div>

---

---

div#mitte1 ul.level1
        {
        position:relative;
        margin-top:30px;
        margin-left:220px;
        margin-bottom:0px;
        height:30px;
        z-index:100;
        }

div#mitte1 li.level1
        {
        display:block;
        float:left;
        list-style:none;
        width:108px;
        line-height:30px;
        text-align:center;
        font-family:open-sans,Arial,Verdana,sans-serif;
        text-transform:uppercase;
        text-shadow: 1px 1px 0px #DDD;
        font-size:13px;
        color:#111;
        }

div#mitte1 ul.level1 a
        {
        display:block;
        color:#111;
        text-decoration:none;
        }

div#mitte1 li.level1 span
        {
        display:block;
        color:#111;
        background:transparent url(../img/hl_menue_active.png);
        }

div#mitte1 li.level1:hover, li.level1 a:hover
        {
        color:#111;
        background:transparent url(../img/hl_menue_hover.png);
        }

div#mitte1 ul.level2
        {
        opacity:0;
        visibility:hidden;
        display:block;
        position:absolute;
        background:#FFF url(../img/hl_menue_level2.png) no-repeat;
        list-style:none;
        text-align:left;
        line-height:13px;
        padding-left:0px;
        padding-top:5px;
        margin-left:2px;
        text-shadow: 1px 0px 0px #DDD;
        border:1px 0px 0px 1px solid #DDD;
        -moz-box-shadow: 2px 2px 1px #555;
        -webkit-box-shadow: 2px 2px 1px #555;
        box-shadow: 2px 2px 1px #555;
        }

div#mitte1 li.level1:hover ul.level2
        {
        opacity:1.0;
        transition:opacity 0.3s ease-in-out 0s;
        -o-transition:opacity 0.3s ease-in-out 0s;
        -moz-transition:opacity 0.3s ease-in-out 0s;
        -webkit-transition:opacity 0.3s ease-in-out 0s;
        visibility:visible;
        display:block;
        color:#000;
        text-decoration:none;
        }

div#mitte1 li.level2
        {
        display:block;
        font-family:open-sans,Arial,Verdana,sans-serif;
        font-size:11px;
        text-align:left;
        color:#222;
        list-style:none;
        }

div#mitte1 li.level2 a
        {
        display:block;
        min-width:105px;
        padding:6px;
        font-family:open-sans,Arial,Verdana,sans-serif;
        font-size:11px;
        text-align:left;
        color:#222;
        list-style:none;
        }

div#mitte1 li.level2 a:hover
        {
        display:block;
        color:#000;
        background:#DDD; url(none);
        font-weight:normal;
        text-shadow: 1px 1px 3px #AAA;
        }

---

Angehängte Grafiken

schrift.jpg (11,9 KB)

---

http://localhost:7566/baugebiete/index.html
http://localhost:7566/assets/sf.css

HTML, BODY, TD, INPUT, SELECT {

        font-family : Trebuchet MS, Geneva, Arial, Helvetica, sans-serif;

        font-size: 14px;

}

http://localhost:7566/assets/sd.css

#nav {

        position: absolute;

        top: 126px;

        left:0px;

        width: 740px;

        height: 16px;

        padding: 0px;

        padding-left:260px;

        margin: 0px;

        background-color:;

        overflow:hidden;

}



#plaintext {

        position: absolute;

        top: 10px;

        left: 61px;

}



#plaintext a {

        color: #703300;

        text-decoration: none;

}





#logo {

        float:right;       

        width: 700px;

        height: 0px;

        overflow:hidden;

       

}





#nav a {

        display: block;

        float: right;

        text-align: center;

        text-decoration : none;

        text-transform : uppercase;

        padding: 0px 15px 0px 15px;

        margin: 0px;

        font-size : 12px;

}



#nav a.active {

background-color: #1a0b9b;



}



#nav a:hover {

background-color: #f39938;



}



#home embed {

position: absolute;

top: 1px;

margin-left: -200px;

width: 1400px;

zoom: 1;

overflow: visible;



}



#content {



        float:left;

position: absolute;

top: 153px;



        width: 1000px;

        padding: 5px 5px 10px 5px;

        background-color:;

        border-top-color:;

        border-top-width:0px;

}



* html #content {



        padding: 5px 5px 10px 5px;

}













#multicolum{

          width: 100%;

            }

   

          #multicolum_left{

            width: 50%;

            float:left;





            }

   

          #multicolum_right{

            width: 50%;

            float: right;

            }



          #multicolum_clearer {

      clear: both;

            }









#mm {

position:absolute;

top:680px;

left:1000px;



width:91px;

height:202px;

background :url(../images/pmm.gif) ;

        background-repeat:no-repeat;

        background-position:bottom;

        }



/*

#subnav {

        float:right;

        background-color:#014da1;

        width: 500px;

        padding: 0px 0px 0px 0px;

       

}



* html #subnav {



        padding: 10px 0px 10px 0px;

       

}



#subnav a {

       

        display: inline;

        float: right;

        text-decoration : none;

        margin: 0px;

        color: #FFFFFF;

        font-size : 130%;

        /*background : url(../images/pbull.gif) no-repeat;*/

        width:80px;

        overflow:hidden;

        padding: 2px 10px 4px 10px;





}



#subnav a.active {

       

       

        width:80px;

        overflow:hidden;

        background-image : url(../images/back_subnav.gif);



}



* html #subnav a.active {

       

       

        width:80px;

        overflow:hidden;



}



#subnav a:hover {

       

        width:80px;

        background-image : url(../images/back_subnav.gif);

}



* html #subnav a:hover {

       

        width:80px;

        background-image : url(../images/back_subnav.gif);               

}



*/



#sidebar {

        position:absolute;

        background-color:#FFFFFF;

        top: 345px;

        left: 620px;

        width: 0px;

        padding-top: 5px;

        padding-left:5px;

        padding-right:5px;

        border-right-color: #00b1e6;

        border-right-style:solid;

        border-right-width:0px;

        border-top-color: #00b1e6;

        border-top-style:solid;

        border-top-width:1px;

}



* html #sidebar {



        width: 310px;



}









form.search {

        padding: 0px;

        margin: 20px 0px 20px 4px;

}



form.search input {

        margin: 0px;

        vertical-align : middle;

}



input.search {

        border : 1px solid #C0C0C0;

        width: 118px;

        padding: 2px;

        color: #CC9933;

        font-size: 10px;

}








http://localhost:7566/assets/sc.css

/* Content und Sidebar-Elemente */



body {

        height:100%;

        margin: 0px;

        padding: 0px 10px 10px 10px;

        background-image:url(../images/back_pl.gif);       

        background-repeat:repeat;       



        background: url(../images/pback.gif) top center no-repeat;

       







}









#content h1 {

        height:40px;

        font-size: 280%;

        font-weight : normal;

        margin: 0px;

        padding: 5px 0px 2px 0px;       

        color: #114783;

       

}



#content h2, #sidebar h2 {

        font-size: 100%;

        font-weight : bold;

        margin-bottom: 20px;

       

}



#content h2 {

        padding: 10px 0px 2px 0px;        color: #114783;

}



#sidebar h2 {

        padding: 2px 5px 2px 5px;       

        color: #114783;

        font-size: 100% !important;

       

}



#content h3 {

        font-size: 100%;

        font-weigth: bold;

        margin: 0px;

        padding: 2px 0px 2px 0px;       

        color: #000000;

}



#content p {

                margin: 0px;

        margin-right: 0px;

        padding: 5px 0px 5px 0px;       

        line-height: 120%;

        color:#00000;        font-size: 100%;

}



#sidebar p {

        width: 300px;

        margin: 0px;

        padding: 2px 5px 2px 5px;       

        line-height: 160%;

        color:#114783;

        font-size: 120%;

}





#sidebar img {

        padding: 0px 5px 0px 0px;       

        line-height: 160%;

}





#content a, #sidebar a {

        text-decoration: none;

        font-weight : bold;

        color: #114783;

}



#content a:hover, #sidebar a:hover {

        text-decoration: underline;

}



#content .sidepicture {

        float: left;

        padding: 5px 0px 5px 0px;

        margin: 4px 20px 4px 0px;

        width: 180px;

}





#content .clearer {

        clear: both;

}



#more {

        margin: 0px;

        padding: 20px 0px 0px 0px;

        text-align: right;

}



#more a {

        text-decoration : none;

        background : url(../images/pbull.gif) no-repeat;

        padding: 2px 0px 4px 15px;

        color: #114783 !important;

        font-weight: normal !important;

}





/* Liste */



#content ul, #sidebar ul {

        list-style: none;

        padding: 0px;

        margin: 6px 0px 6px 10px;

}



#content li, #sidebar li {

        padding: 2px 0px 2px 16px;

        background: url(../images/pbull.gif) no-repeat top left;

}



/* Tabelle */



#content table.cells {

        border: 0px solid #C0C0C0;       

}



#content td.cell {

        background-color: ;

}



#content td.headercell {

        background-color: #ffffff;

        color: #ffffff;

        font-weight: bold;

}



/* Teaser */



div.teaserelement {

        float: left;

        padding: 0px 20px 0px 0px;

        margin: 0px;

}



div.teaser {

        margin: 0px;

        padding: 2px 0px 2px 0px;       

}



div.teaserpicture {

        float: right;

        padding: 0px;

        margin: 4px 0px 10px 10px;

        border: none;

}



p.teasertext {

        margin: 0px;

        padding: 4px 0px 4px 0px;

}



.teasernav {

        clear: both;

        padding: 2px 0px 2px 0px;

        margin: 0px;

        text-align: center;

}



/* Absatztype Formular */



input.box {

        border : 1px solid #C0C0C0;

        width: 480px;

        vertical-align: top;

        padding: 1px;

        margin: 0px 0px 10px 14px;

}



form.formular textarea  {

        border : 1px solid #C0C0C0;

        width: 480px;

        height: 200px;

        vertical-align: top;

        padding: 1px;

        margin: 0px 0px 10px 14px;

}



form.formular .formcaption {

        width: 10px;

        line-height: 180%;

        float: left;

        clear: left;

}



form.formular .formnote {

        color: #CC9933;

        line-height: 160%;

        padding: 2px 0px 10px 192px !important;

}



.buttoncaption {

        line-height: 200%;

}





/* Plugin-Styles */



P.s2d  {

        font-size: 180%;

        color: #FFFFFF;

        font-weight : bold;

        margin: 0px;

        padding: 2px 0px 2px 0px;

        line-height: 200%;

}



P.s2dsmall  {

        font-size: 80%;

}



a.s2dsmall, a.s2dinfo  {

        text-decoration:underline !important;

}





#enclose {

        position: relative;

        left: 50%;

        margin: 0px 0px 0px -500px;

        padding-top:100px;

        width:1000px;

        height:767px;

       



        }

---

---

#home embed {

position: absolute;

top: 1px;

margin-left: -200px;

width: 1400px;

zoom: 1;

overflow: visible;



}

---

---

<div class="aussen">
  <ul class="switcher>
    <li>Ansicht 1</li>
    <li>Ansicht 2</li>
    <li>Ansicht 3</li>
  </ul>
  <div class="innen">
    <div class="item"> Inhalt </div>
    <div class="item"> Inhalt </div>
    <div class="item"> Inhalt </div>
...
    <div class="item"> Inhalt </div>
  </div>
</div>

---