Grafik-Werkstatt

Beispiel 8

Beispiel 8: Menü auf linker Seite

/* Nullformatierung für alle Browser */
* {padding: 0px; margin: 0px; }

/* Werbung mittig */
table[height="102"] { margin: auto; }

/* Hintergrund hinter Design */
body {
   background-color: #EEEEEE;
   background-image:  none;
   font-family: arial;
   font-size: 14px;
   color: #000000; }

/* Design-Container */
#container {
   width: 992px;
   margin: 10px auto;
   overflow: hidden;
   background-color: #XXXXXX;  }

/* Headerfeld */
#header_container { 
   width: 990px;
   height: 130px;
   margin: 0px 0px 10px 0px;
   background-color: #FFFFFF;
   background-image: url(HIER GRAFIKADRESSE);
   border: 1px solid #c9c9c9;
   border-radius: 20px 20px 0px 0px; }

/* Titel über Homepage */
h1#header { display: none; }

/* Feld der Navigation */
#nav_container {
   float: left;
   width: 180px;
   overflow: hidden; }

/* Titel über Navigation entfernt */
#nav_heading { display: none; }

/* Aufzählungspunkte in Navi entfernt */
ul#nav { list-style-type: none; }

/* Navi-Buttons */
li.nav_element {
   width: 170px;
   height: 30px; 
   margin-bottom: 10px; }

/* Linktexte in Navigation */
li.nav_element a {
   display: block;
   font-size: 13px;
   color: #000000;
   line-height: 20px;
   padding: 5px 10px 5px 15px;
   text-decoration: none;
   background: url(https://img.webme.com/pic/g/grafik-werkstatt/bg2.png) repeat-x; 
   border: 1px solid #c9c9c9; }

/* Hover Navi-Button */
li.nav_element a:hover  {
   color: #FFFFFF; 
   background: url(https://img.webme.com/pic/g/grafik-werkstatt/bg11.png) repeat-x;}

/* aktuell besuchte Seite */
li.checked_menu a {
   color: #FFFFFF;
   background: url(https://img.webme.com/pic/g/grafik-werkstatt/bg9.png) repeat-x;}

/* Headerfeld unter Menue */
#pre_content {display:none;}

/* Feld im Inhalt und Box herum */
#content_container {
   background-color: #FFFFFF;
   overflow: hidden; }

/* Seiteninhalt */
#content {
   float: left;
   width: 540px;
   min-height: 200px;
   padding: 15px;
   overflow: hidden; }

/* Titel Seiteninhalt + Titel über Box */
h2#title , #sidebar_heading {
   padding: 7px 0px 7px 20px;
   margin: -15px -15px 15px -15px;
   background-color: #e0e0e0;
   color: #454545;
   font-size: 14px;
   font-weight: normal; }

/* Links im Seiteninhalt */
#content a {color: #000080; }

/* Hover Link im Seiteninhalt */
#content a:hover {color: #008080; }

/* Rechte Box  */
#sidebar_container {
   float: right;
   width: 200px;
   padding: 15px;
   min-height: 200px;
   overflow: hidden; }

/* Werbetext unter dem Design */
#webme_footer_textlink_dont_hide {
   display:block;
   width: 500px;
   margin: 30px auto;
   color: #454545!important;
   background: none!important; }

/* Feld unter dem Design */
#footer {
   width: 950px;
   padding: 20px;
   margin: auto;
   overflow: hidden;
   background:  none #FFFFFF;
   border: 1px solid #e9e9e9;
   border-radius: 0px 0px 20px 20px; }

/* Linktexte im Footer */
#footer a {
   display:block;
   margin-left:20px;
   float: right;
   color: #000000;
   text-decoration: none;
   font-size: 14px; }

/* unnötige Felder im Design entfernt */
#pre_header {display:none;}
#post_content {display:none;}
#below_content{display:none;}
#counter{display:none;}

<div id="footer">
Heute [visits] Besucher
<a href="/Impressum.htm">Impressum</a>
<a href="/Kontakt.htm">Kontakt</a>

</div>

• Linktext

Rechte Box

Beispielgrafiken für Menü: