Ankündigung

Einklappen
Keine Ankündigung bisher.

Tabellenzelle als Link

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 2
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige 1 2 Weiter
  • #1

    Tabellenzelle als Link

    Kann man eine ganze Tabellenzelle <td> zu einem Link machen? Mit anderem Hintergrund bei Hover z.B. ?
    Stichworte: -
  • #2
    ja

    Kommentar

    • #3
      Ok, danke. Frage doof gestellt. Habs mit nem Forumkenner zu tun War schon lange nicht mehr da. Neuer Versuch.

      Wie kann man eine ganze Tabellenzelle <td> zu einem Link machen? Mit anderem Hintergrund bei Hover z.B. ?

      Kommentar

      • #4
        Code:
        td a { display:block;width:100%;height:100%;background-color:#eee;color:000; }
td a:hover { background-color:yellow; }

        Kommentar

        • #5
          thx so much - and merry xmas

          Kommentar

          • #6
            Wenn ich das einzufügen versuche, verschiebt es mir den Inhalt um ca. 3px nach unten. Um gleich richtig zu fragen. Wie kann ich dieses Problem beheben?

            Kommentar

            • #7
              margin, padding alles auf 0
              line-height auf die Höhe der Zelle

              sollte Abhilfe schaffen.

              Kommentar

              • #8
                Da es noch nicht sehr viel Code ist, schreib ich ihn mal hier rein ... Ich raff es leider net so ganz, steh grad auf dem Schlauch.

                index.php (bisher nur html)

                Code:
                <html>
<head>
 <title>Projekt</title>
 <link rel="stylesheet" type="text/css" href="mj05_style.css">
</head>
<body>
<table align="center" valign="top" width="600" height="100%" background="mj05_bg.png" cellspacing="0" cellpadding="0">
 <tr>
  <td width="600" height="155"colspan="6">
  </td>
 </tr>
 <tr>
  <td class="mj05_menu" width="44">
   [img]mj05_placeholder.gif[/img]
  </td>
  <td class="mj05_menu" width="74">
   home
  </td>
  <td class="mj05_menu" width="200">
   Biographie
  </td>    
  <td class="mj05_menu" width="200">
   Nummer
  </td>
  <td class="mj05_menu" width="77">
   Kontakt
  </td>
  <td class="mj05_menu" width="5">
  </td> 
 </tr>
 <tr>
  <td width="600" colspan="6">
  </td>
 </tr>
</table> 

 hhllo
</body>
                CSS
                Code:
                /* CSS für Projekt */

/* Wichtige Farben

*/

body {
 background-color: rgb(224, 224, 224);
 margin: 0px;
 font-family: arial, tahoma, verdana, sans-serif;
 font-size: 12px;
 text-align: justify;
 }

td {
 font-family: arial, tahoma, verdana, sans-serif;
 font-size: 12px;
 align: center;
 text-valign: middle;
 } 
 
/* Spezialfälle */

td.mj05_menu {
 height: 24px;
}

a.mj05_menu {
 display: block;
 width: 100%; 
 height: 24; 
 font-family: arial, tahoma, verdana, sans-serif;
 font-size: 12px; 
 color: rgb(0, 0, 0);
 text-decoration: none;
 vertical-align: middle;
 text-align: center;
 padding: 0px; 
 }
 
a:hover.mj05_menu { 
  background-color: rgb(138, 124, 114); 
 }
                Darf auch sonstige Kritik o.Ä. kommen

                Kommentar

                • #9
                  Wozu überhaupt eine Tabelle?
                  Eine Liste tuts auch.

                  Fehlender Doctype, deshalb schaltet der IE in den Quircksmode.

                  Ansonsten geht das schon eleganter, da habe ich aber jetzt leider keine Zeit zu.

                  Kommentar

                  • #10
                    cellspacing:0;
                    cellpadding:0;

                    ich glaub die befehle müsstes einbauen..

                    mfg
                    Andi

                    Kommentar

                    • #11
                      Wie wäre es, von der Tabelle ganz Abstand zu nehmen?


                      Code:
                      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Projekt</title>
<style type="text/css">
* {
  padding:0px;
  margin:0px;
  }
  
html, body {
  height: 100%;
  }

body {
  background-color: rgb(224, 224, 224);
  font:12px arial, tahoma, verdana, sans-serif;
  text-align: justify;
  background-image(mj05_bg.png);
  }

#menu {
  margin: 155px 0 0 44px;
  list-style-type: none;
  width: 555px;
  height: 24px;
  }
  
#menu li {
  float: left;
  line-height: 24px;
  }
  
#menu li a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  text-align: center;
  display: block;
  width: 100%;
  }
 
#menu li a:hover {
  background-color: rgb(138, 124, 114);
  }
 </style>
</head>
<body>
  <ul id="menu">
    <li style="width:74px;">home
    <li style="width:200px;">Biographie
    <li style="width:200px;">Nummer
    <li style="width:77px;">Kontakt[/list]
  <p style="clear:both;">
     hhllo
  </p>
</body>
</html>

                      Kommentar

                      • #12
                        Danke, werd mir das mal noch anschauen.

                        Kommentar

                        • #13
                          Hmm Es gelingt mir ums Verderben nicht, das zu coden, was ich will ...

                          Es geht darum, dass die Seite so aussehen soll, wie auf diesem Bild:



                          Die 4 Links oben sollen den Hover-Effekt bekommen. Kann mir jemand weitere Tipps geben?

                          Kommentar

                          • #14
                            Wie sieht denn dein Quellcode aus?

                            Kommentar

                            • #15
                              Lass doch Tabellen Tabellen sein und machs "richtig".

                              Hier als kleiner Denkanstoss: http://d4rk.com/jstest/hover.html

                              Kommentar

                              Vorherige 1 2 Weiter
                              Lädt...
                              X