wie #navigation für subnavigation umgehen?

[Oliver Sempf]

Hallo,
ich habe folgendes Problem:

Ich habe mit für meine Homepage BackGround Images angefertigt, für den Hintergrund, Buttons usw., nun habe ich ein Problem.
ich möchte gerne unter die Hauptpunkte, die mit den Button BG Images realisiert worden sind, eine art unternavigation machen, also für den Bereich SHows z.b. Nitro und SmackDown, das hatte ich mir, als ich das Template erstellt habe, so gedacht, dass ich das ganz einfach als Text nehme, nach dem Motto sieht ganz gut aus, und ist einfach zu verändern...
Tja nichts dergleichen, sobald ich <a href="SmackDown">ashdakl< /a> eingeben, wird das automatisch zu einem Button was an meinem CSS Code liegt!?

Nun meine Frage, wie kann ich das umgehen?

hier der CCS Code:

 body, html, #navigation, #container, #inhalt {
           margin:0;
           padding:0;
}
body {
                                 margin-top: 1em;
           font: 100.01% times-new-roman;
           background-image: url(images/boardbg.jpg);
           text-align: center;
}
#container {
           width: 50em;
           text-align: left;
           margin: 0 auto;
           background-color:#333333;
           color: #E6DCCF;
           height: 665px;
}
#kopf {
           background-image: url(images/header.jpg);
           color: #E6DCCF;
           padding: 10px;
           text-align: center;
           height: 80px;
}
#navigation {
           width: 200px;
           float: left;
           clear: left;
           margin: 0em;
          background-image: url(images/background.jpg);
           border-style: solid solid none solid;
        border-color: #000;
        border-width: 2px;
}


#inhalt {
           background-color: #333333;
           color: #E6DCCF;
           margin-left: 12.70em;
           height: 565px;
}
p {
           margin: 25px 25px 0 25px;
}
h1 {
           margin: 0 25px;
           padding:25px 0;
           font-size: 1.3em;
}

#navigation ul {
        list-style-type: none;
        }

#navigation li a {
          voice-family: "\"}\"";
          voice-family: inherit;
          height: 25px;
        text-decoration: none;
        }

#navigation li a:link, #navigation li a:visited {
        color: #CCC;
        display: block;
        background:  url(buttonbg.jpg);
        padding: 8px 0 0 10px;
}

        h2 {
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}

ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }
img {
    border: none;
}
      #footer {
           background-image: url(images/footer.jpg);
           color: #E6DCCF;
           padding: 10px;
           text-align: center;
           font-size: 9px;



           }

achso hab den Link zum Problem vergessen:

www.fwf-wrestling.de

mfg. Oliver Sempf

[threadi]

Definier die Unterpunkte auch als Listenpunkte und gib deren Design per CSS an. Beispiel:

HTML:

<ul>
<li>Navigationspunkt
<ul>
<li>unterpunkt</li>
</ul>
</li>
<li>2. Navigationspunkt</li>
</ul>

CSS:

li { /* Hauptnavigationspunkte */ background-image: url(bild.gif); }
li li { /* Subnavigationspunkte /* background-image: none; }

[Oliver Sempf]

wenn ich das so angeben würde, würd das ja auch klappen, aber sobald ich das verlinken will wird das zu einem Button...

an dem Code:

solange ich das so lasse:

<div id="navigation">
                     <ul>                                 <!-- CSS Tabs -->
<li><a id="current" href="Home.html">Home</a></li>
- Impressum<br>
<li><a href="Superstars.html">Superstars</a>
<ul>
<li><a href="downstars.html">- SmackDown</a><br>
- Nitro<br>
- Office<br>
- HoF
<li><a href="champions.html">Champions</a></li>
<font-height="20px">- SmackDown<br>
- Nitro<br>
- Office</font>
<li><a href="news.html">News</a></li>
- FWF<br>
- SmackDown<br>
- Nitro<br>
<li><a href="shows.html">Shows</a></li>
- SmackDown<br>
- Nitro<br>
- PPVs
<li><a href="klumnen.html">Kolumnen</a></li>
- demächst
<li><a href="extras.html">Extras</a></li>
<li><a href="http://www.fwf-board.de">FWF-Board</a></li>

                       </ul>
                </div>

bleibt das ja auch so, sobald ich aber ein <a href="...">asd< /a> einfüge wird es zu nem Button, dank dem Code:

#navigation ul {
        list-style-type: none;
        }

#navigation li a {
          voice-family: "\"}\"";
          voice-family: inherit;
          height: 25px;
        text-decoration: none;
        }

#navigation li a:link, #navigation li a:visited {
        color: #CCC;
        display: block;
        background-image:  url(buttonbg.jpg);
        padding: 8px 0 0 10px;
}

soll ich das ganze kopieren und denn bloß sub for navigation setzen?
und wenn ja wie soll ich das drin integrieren?

mfg. Oliver Sempf

[threadi]

Dann musst du natürlich auch für die Links in der Subnavigation den CSS-Code anpassen. Also:

#navigation li a {
          voice-family: "\"}\"";
          voice-family: inherit;
          height: 25px;
        text-decoration: none;
        }

#navigation li a:link, #navigation li a:visited {
        color: #CCC;
        display: block;
        background-image:  url(buttonbg.jpg);
        padding: 8px 0 0 10px;
}

#navigation li li a:link, #navigation li li a:visited {
 background-image: none;
 /* weitere Angaben für Subnavigation hier rein */
}

[Oliver Sempf]

eine letzte Frage hab ich noch, wenn man auf die Homepage geht, dann sieht man ja bei dem Punkt demnächst, unter Kolumnen, dass da son Abstand nach links rechts oben und unten ist.
Wie bekomm ich das so hin, das es aussieht wie die gan normale schrift? also links anliegend, kaum raum nach unten/oben?

P.S. danke für die schnelle Hilfe

[threadi]

Dein Quellcode ist nicht valide. Achte darauf, dass jedes HTML-Element auch wieder geschlossen wird. Also ein <li> mit einem </li> beenden und NICHT mit <br /> ! Das führt vermutlich gerade zu dieser Darstellung.