Oliver Weibel: Liste mit zwei Elemente, doch einem Link ...!

Hallo zusammen

Ich bin echt am verzweifeln. Bin an einer Seite mit CSS 2.1 und muss diese mit nur diesem aufbauen, also nix Tabellen usw.
Da stosse ich nun an eine Grenze meines Wissens und hoffe auf Eure Hilfe:

Bei der Navigation hab ich nicht nur n Text, welcher eingerückt ist, sondern auch noch eine zusätzliche Navigationshilfe, welche bei der TopLevel erscheint. Nun wollte ich diese zwei Dinge in zwei Elemente packen. Den Text in die <li> Liste und das Element in eine Class. Doch elider funktioniert der Link nur auf den Text und das Element erhält keinen Link, obwohl dieser ganz aussen steht ...

Hier noch etwas Code:

Das CSS:
ul#1level {
list-style: none;
    margin: 0 0 0 -25px;
}

ul#1level li {
    list-style: none;
    display: block;
    font-weight: bold;
    color: #ffffff;
    background-color: #767676;
    border-bottom: 1px solid white;
}

ul#1level .doppel {
    list-style: none;
    font-weight: bold;
    padding: 2px 4px 2px 4px;
    margin: 0 0 0 -15px;
    color: #ffffff;
    width: 15px;
    background-color: #767676;
    border-bottom: 1px solid white;
}

ul#1level a {
text-decoration: none;
    display: block;
    color: ffffff;
    background-color: #767676;
    padding-bottom: 2px;
    padding-top: 2px;
}

ul#1level a:link {
    background-color: #767676;
}

ul#1level a:visited {
    background-color: #767676;
}

ul#1level a:hover {
    background-color: #E30074;
}

ul#1level a:active {
    background-color: E30074;
}

Und wie es in XHTML eingebunden ist:
<div id="Navigation">
<ul id="1level">
  <li><a href="#"><font class="doppel">::</font>Mein Inhalt</a></li>
</ul>
</div>

Danke für jede Hilfe.
Gruss
Oliver

  1. Hi,

    Ich bin echt am verzweifeln. Bin an einer Seite mit CSS 2.1 und muss diese mit nur diesem aufbauen, also nix Tabellen usw.

    hehe - sowas würde ich gern öfter lesen. ;-)

    Bei der Navigation hab ich nicht nur n Text, welcher eingerückt ist, sondern auch noch eine zusätzliche Navigationshilfe, welche bei der TopLevel erscheint. Nun wollte ich diese zwei Dinge in zwei Elemente packen. Den Text in die <li> Liste und das Element in eine Class.

    Kannst Du das auch mal verständlicher formulieren und/oder eine Beispielseite verlinken?

    ul#1level {

    das ist eine ungültige ID.

    Und wie es in XHTML eingebunden ist:
    <div id="Navigation">
    <ul id="1level">

    ist das DIV hier wirklich nötig?

    <li><a href="#"><font class="doppel">::</font>Mein Inhalt</a></li>

    Igitt - font. Und i.V. mit einer CSS-Klasse ist das doch wirklich widersinnig.

    freundliche Grüße
    Ingo

    1. Super, danke mal erst für den Tipp, bez. classe, darum gehts jetzt auch im Firefox ;-)

      Die Font hab ich raus geschmissen und alles etwas einfacher gestaltet, hab gelesen, dass es besser ist neue Link klassen zu def.
      Komischerweise sieht der IE leider die Links nicht, keine Rollovers und keine Klicks möglich, echt komisch.

      Hier noch der Link:
      http://www.ci-net.ch/start.xhtml

      1. Hi,

        Komischerweise sieht der IE leider die Links nicht, keine Rollovers und keine Klicks möglich, echt komisch.

        Hier noch der Link:
        http://www.ci-net.ch/start.xhtml

        Vielleicht liegt es an der fehlenden Header-Angabe zum Content-Type. Firefox bietet mir die Seite zum Download an.
        Du solltest sie mit der Endung .html benennen.

        freundliche Grüße
        Ingo

        1. Komisch, beim IE gehts, auch bei Safari. Nur der Firefox, kann die Seite nicht anzeigen ...

          By the way, das Rollover geht jetzt auf IE, wier auch immer, jedoch stimmt die Linkfarbe noch nicht, wahrscheinlich n Reihenfolge Problem.

  2. Moinsen,

    zwei kleine Tipps/Anmerkungen:

    <div id="Navigation">
    <ul id="1level">

    Klassen dürfen nicht mit Zahlen beginnen.

    <li><a href="#"><font class="doppel">::</font>Mein Inhalt</a></li>

    mach doch mal <span class="doppel">, dann validiert es auch jenseits von HTML4.01 Transitional (welchen DocType DU benutzt hast geht aus Deinem Beispielcode nicht hervor).

    --
    cu,
    Maz
  3. Öhm die Navigation erinnert mich aber mal ganz stark an eine Webpräsenz einer großen Telekommunikations Firma in Magenta...

    1. Jaaa, ist ja nur n Test ...
      wollte die mal nach bauen.

      Hab jetzt aber das Problem gelöst :-)

      Waren noch ein paar Tippfehler drinne und jetzt gehts.

      Danke für das Händchen halten.