Markus: Seltsamer Fehelr

Hallo leute !
Vielleicht kann mir jemand von euch erklären warum folgendes CSS nicht funktioniert wie es soll:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
 <style type="text/css">
 <!--
  body {
   margin : 0px;
  }

.headtd {
   border-bottom: 1px solid #666666;
   border-right: 1px solid #666666;
  }

.navtd {
   border-bottom: 1px solid #666666;
   border-right: 1px solid #666666;
   font-family: Verdana;
   font-size: 10px;
   font-style: normal;
   font-weight : bold;
   color: #666666;
   height: 24px;
   width: 159px;
  }

a:link {
   text-decoration: none;
   background-color:#FFFFFF;
   color: #666666;
   height: 24px;
   width: 159px;
  }

a:hover {
   text-decoration: none;
   background-color:#d9d9d9;
   color: #666666;
   height: 24px;
   width: 159px;
  }

a:visited {
   text-decoration: none;
   background-color:#FFFFFF;
   color: #666666;
   height: 24px;
   width: 159px;
  }

div {
   padding: 5px;
  }

-->
 </style>
</head>
<body>
 <table cellpadding="0" cellspacing="0">
 <tr>
  <td class="headtd"><img src="gfx/gui.jpg"></td>
 </tr>
 <tr>
  <td class="navtd">
   <a href="FieldViewer" target="content"><div>Schema Felder</div></a>
  </td>
 </tr>
 <tr>
  <td class="navtd">
  <div>Punkt 2</div>
  </td>
 </tr>
 <tr>
  <td class="navtd">
  <div>Punkt 3</div>
  </td>
 </tr>
 <tr>
  <td class="headtd"><img src="gfx/andere.jpg"></td>
 </tr>
 <tr>
  <td class="navtd">
  <div>Punkt 4</div>
  </td>
 </tr>
 <tr>
  <td class="navtd">
  <div>Punkt 5</div>
  </td>
 </tr>
 </table>
</body>
</html>

  1. Moin

    Vielleicht kann mir jemand von euch erklären warum folgendes CSS nicht funktioniert wie es soll:

    Verrätst Du uns auch, wie es denn Deiner Meinung funktionieren soll?
    Ich ahne zwar die Antwort, aber ich würde es trotzdem lieber zuerst von Dir hören äh lesen.

    Thomas J.

    1. Ja ganz easy :)
      Ich dahcte das Problem wäre offensichtlich, aber einscheinend nicht.
      Tschuldingung !

      Also die tabellenzeilen sollen nen Hovereffekt bekommen.
      Und zwar die ganze Zeile und nicht nur die Schrift.

      Gruss
      Markus

      1. Also die tabellenzeilen sollen nen Hovereffekt bekommen.
        Und zwar die ganze Zeile und nicht nur die Schrift.

        Warum tabellen?
        guck mal hier http://css.maxdesign.com.au/listamatic/
         wie man sinnvoll Linklisten (auch mit Hover effekten und auch für den IE) erstellt.

        Wenn dir deine Tablle wirklich so wichtig ist (was aber dumm ist: http://www.seybold.jan-andresen.de/, dann musst du den Links noch die Eigenschaft display:block spendieren.

        Struppi.

        1. Tabellen weil die Formatierung damit leichter fällt.
          Ich bins eben gewohnt :)

          Danke an alle Anderen. Mit display:block hats gefunzt.

          Gruss
          Markus

          1. Tabellen weil die Formatierung damit leichter fällt.
            Ich bins eben gewohnt :)

            Ich hoffe du hast dir mal den Link angeguckt (listamatic), es ist nämlich nicht nur wesentlich einfacher eine Linkliste mit einer Liste zu gestalten, sondern auch noch wesentlich flixbler als mit einer Tabelle.

            Struppi.

      2. Tach

        Also die tabellenzeilen sollen nen Hovereffekt bekommen.
        Und zwar die ganze Zeile und nicht nur die Schrift.

        Dachte ich mir's doch.
        Nur ist eben a ein Inline-Element und somit immun gegen Höhen- und Breitenangaben.

        Erst Du in die CSS-Angaben noch ein display:block einfügst, dann wird der Verweis als Bockelement behandelt.
        Das ist aber nur eine Notlösung. Die besser Methode ist, mit Listen zu arbeiten (s. Antwort von Struppi). Das hat den Vorteil, daß die Navigation auch ohne CSS noch als solche erkennbar ist.
        Bei der Gelegenheit kannst Du auch gleich noch die Tabelle in die Tonne treten.

        Thomas J.

        PS: Jan hat Dich noch auf einige weiter Fehler hingewiesen.

  2. Hallo,

    Vielleicht kann mir jemand von euch erklären warum folgendes CSS nicht funktioniert wie es soll:

    was funktioniert denn wo und wann nicht?

    Mit freundlichen Grüßen

    André

    --
    http://forum.de.selfhtml.org/archiv/2003/10/60651/
    Und denkt dran - lieber um fünf zuhause als um halb im Zinksarg ...
  3. Vielleicht kann mir jemand von euch erklären warum folgendes CSS nicht funktioniert wie es soll:

    Keine Ahnung, da man am code nicht erkennen kann was was sein soll.
    Der Code ist darüber hinaus nicht gültig und wozu die Tabelle?
    Du solltest HTML Elemente verwenden (Hx für Überschriften, P für textabsätze, LI oder OL für Liste usw.)

    Struppi.

  4. Hallo Markus

    Vielleicht kann mir jemand von euch erklären warum folgendes CSS nicht funktioniert wie es soll:

    Du könntest es den Helfern etwas leicher machen, indem Du sagst, was wo nicht geht... Dann wüsste man vielleicht besser wo suchen, anstatt alles durchzuackern!

    Gruss
    Louis

  5. Hallo,

    Vielleicht kann mir jemand von euch erklären warum folgendes CSS nicht funktioniert wie es soll:

    Vielleicht solltest du erst mal erklären was es deiner Meinung nach
    bewirken sollte aber (in welchem Browser) nicht tut, statt hier
    einfach nur ein Stückchen Quelltext hinzurotzen.

    a:link {
       height: 24px;
       width: 159px;
      }

    In Browsern, die CSS richtig interpretieren, sind diese Angaben
    wirkungslos, solange du nicht zusätzlich ein 'display: block' angibst.

    a:hover {  }
      a:visited {  }

    Wenn du willst, daß auch besuchte Links noch 'hovern', mußt du die
    Reihenfolge der Angaben ändern.

    <tr>
      <td class="headtd"><img src="gfx/gui.jpg"></td>
    </tr>

    Kennst du <th>?

    <a href="FieldViewer" target="content"><div>Schema Felder</div></a>

    Ein <div> innerhalb vo <a>...</a> ist nicht erlaubt.

    Gruß, Jan

  6. Ich habs jetzt einfach so gelöst :
    Ohne Tabellen und HTML gültig (glaube ich)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
     <style type="text/css">
     <!--
     body {
      margin : 0px;
     }

    div {
      border-bottom: 1px solid #666666;
      border-right: 1px solid #666666;
      font-family: Verdana;
      font-size: 10px;
      font-style: normal;
      font-weight : bold;
      color: #666666;
     }

    div a {
      display: block;
      padding:5px;
      background-color: #FFFFFF;
     }

    div a:link, a:visited {
      color: #666666;
      background-color: #FFFFFF;
      text-decoration: none;
     }

    div a:hover {
      background-color: #D9D9D9;
      text-decoration: none;
     }

    -->
     </style>
    </head>
    <body>
     <div><img src="gfx/gui.jpg"></div>
     <div><a href="FieldViewer" target="content">Schema Felder</a></div>
     <div><a href="">Punkt1</a></div>
     <div><a href="">Punkt1</a></div>
     <div><img src="gfx/andere.jpg"></div>
     <div><a href="">Punkt1</a></div>
     <div><a href="">Punkt1</a></div>
    </body>
    </html>