Navigation

[Thomas]

Hallo zusammen

Ich bin gerade dabei meine Navi zu verschönern. Hierzu habe ich als vorlage das im SELFHTML Tutorial gefundene Script als vorlage genommen.

Doch leider schaffe ich es nicht das Script meinem Design anzupassen.

Hier ist der Code meines Designs:

Könnte mir jemand helfen dass anzupassen:

  
html, body  
{  
 color: #8c909a;  
 font-family: Verdana, sans-serif;  
 font-size: 12px;  
 padding: 0;  
 margin: 0;  
 background: #1e1e1e;  
 font-size: 12px;  
}  
  
/* Header */  
#header  
{  
 height: 54px;  
 line-height: 54px;  
 background: #1e1e1e;  
 font-family: Verdana, sans-serif;  
 font-size: 24px;  
 color: #0033FF;  
}  
  
/* Structure */  
.body  
{  
 margin-left: auto;  
 margin-right: auto;  
 padding: 0;  
 width: 800px;  
}  
  
#cols  
{  
 background: #1e1e1e url("img/boxed.gif") no-repeat;  
 height: 150px;  
}  
  
  
.col  
{  
 float: left;  
 width: 400px;  
}  
  
#menu  
{  
 margin: 10px 0;  
 background: #000066 url("img/mbg2.gif");  
 height: 42px;  
 line-height: 42px;  
}  
  
#items  
{  
 margin-left: auto;  
 margin-right: auto;  
 width: 800px;  
 color: #000;  
}  
  
#footer  
{  
 height: 150px;  
 background: #000 url("img/fbg.gif") repeat-x;  
 font-size: 10px;  
 margin: 10px 0 0;  
}  
  
/* Styling */  
  
#header a  
{  
 color: #0033FF;  
}  
  
#menu a  
{  
 color: #000;  
 font-weight: bold;  
 border-right: 1px solid #000066;  
 display: block;  
 float: left;  
 padding: 0 10px;  
}  
  
#menu a:hover  
{  
 background: #000066 url("img/mbg.gif");  
}  
  
#selected  
{  
 background: #000066 url("img/mbg.gif");  
}  
  
a  
{  
 color: #fbaf32;  
 text-decoration: none;  
}  
  
a:hover  
{  
 color: #f0e155;  
}  
  
h1  
{  
 color: #0033FF;  
 font-size: 24px;  
 font-family: Verdana, sans-serif;  
 font-weight: normal;  
 margin: 0.2em 0;  
}  
  
p  
{  
 line-height: 1.5em;  
 margin: 0;  
 padding: 0;  
}  
  
blockquote  
{  
 border: 1px #333 solid;  
 border-left: 5px #333 solid;  
 background: #262626;  
 margin: 10px 0;  
 padding: 10px;  
}  
  
code  
{  
 border: 1px #333 solid;  
 border-left: 5px #333 solid;  
 background: #262626;  
 margin: 10px 0;  
 padding: 10px;  
 display: block;  
 white-space: pre;  
}  
  
.postInfo  
{  
 margin: 10px 0;  
 font-size: 10px;  
}  
  
ul  
{  
 margin: 10px 0;  
 padding-left: 32px;  
}  
  
li  
{  
 list-style-image: url("img/dot.gif");  
}  
  
.right  
{  
 float: right;  
}  
  
.about  
{  
 padding-top: 8px;  
 padding-left: 24px;  
}  

Hier ist der Code der Navi (aus SELFHTML)

  
  body {  
    font: normal 100.01% Helvetica, Arial, sans-serif;  
    color: black; background-color: #ffffe0;  
  }  
  
  div#Rahmen {  
    width: 47.1em;  
    padding: 0.8em;  
    border: 1px solid black;  
    background-color: silver;  
  }  
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */  
    width: 48.7em;  
    w\idth: 47.1em;  
  }  
  div#Rahmen div {  
     clear: left;  
  }  
  ul#Navigation {  
    margin: 0; padding: 0;  
    text-align: center;  
  }  
  
  ul#Navigation li {  
    list-style: none;  
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */  
    position: relative;  
    margin: 0.4em; padding: 0;  
  }  
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */  
    margin-bottom: -0.4em;  
  }  
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */  
    margin-bottom: -0.1em;  
  }  
  
  ul#Navigation li ul {  
    margin: 0; padding: 0;  
    position: absolute;  
    top: 1.6em; left: -0.4em;  
    display: none;  /* Unternavigation ausblenden */  
  }  
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */  
    left: -1.5em;  
    lef\t: -0.4em;  
  }  
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */  
    background-color:silver; padding-bottom:0.4em;  
  }  
  ul#Navigation li:hover ul {  
    display: block;  /* Unternavigation in modernen Browsern einblenden */  
  }  
  ul#Navigation li ul li {  
    float: none;  
    display: block;  
    margin-bottom: 0.2em;  
  }  
  
  ul#Navigation a, ul#Navigation span {  
    display: block;  
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */  
    padding: 0.2em 1em;  
    text-decoration: none; font-weight: bold;  
    border: 1px solid black;  
    border-left-color: white; border-top-color: white;  
    color: maroon; background-color: #ccc;  
  }  
  * html ul#Navigation a, * html ul#Navigation span {  
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */  
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */  
  }  
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {  
    border-color: white;  
    border-left-color: black; border-top-color: black;  
    color: white; background-color: gray;  
  }  
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */  
    color: maroon; background-color: silver;  
  }  
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */  
    background-color: maroon;  
  }  

Wenn isch jemand bis hierher durchgekämpft hat... Danke...

Kann mir jemand helfen dass anzupassen...?

Bitte

LG Thomas

[Christoph Schnauß]

hallo,

Kann mir jemand helfen dass anzupassen...?

Vermutlich kann das jemand - aber woran soll man das denn "anpassen"? Was willst du wie geändert haben, damit es zu deinen Anforderungen paßt (mal abgesehen von den Fehlern, die sich leicht mit dem CSS-Validator herausfinden lassen)?

Grüße aus Berlin

Christoph S.