[CSS] Befehl hover?

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

    [CSS] Befehl hover?

    Hallo,

    ich möchte eine Tabelle machen, die Tabelle soll einen linken und rechten Border haben, und wenn man über den daneben sthenden link drüber geht (hover) soll sich linke bzw. rechte Border der Tabelle wechseln
    soll stell ich mir das vor

    #left {
    color: #990000;
    font-size: 14px;
    }
    #left a {
    color: #990000;
    text-decoration: none;
    font-size: 14px;
    border-color: #FF0000;
    border-left: 12px;
    border-left-style: dashed;
    }
    #left a:hover {
    color: #990000;
    text-decoration: none;
    font-size: 14px;
    border-color: #0000CC;
    border-left: 12px;
    border-left-style: dashed;
    }

    und mit #right das gleiche

    Aber irgendwie funktioniert das nicht, könnt ihr mir sagen ob die idee über gut ist, oder ob man das leichter machen kann, ich möchte eig nur das ich über eine link geh und daneben dann ein streifen die farbe wechselt
    Habt ihr ne idee wie der code richt gehört?
    thx
    Manuel
    Stichworte: -
  • #2
    border-left-color:
    border-left-style:
    border-left-width:
    Für Rechtschreibfehler übernehme ich keine Haftung!

    Kommentar

    • #3
      oder kürzer:
      PHP-Code:
      border-left: 1px solid #f00; 
      z.b.

      gruß
      peter
      Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
      Meine Seite

      Kommentar

      • #4
        [CSS] IE zeigt es nicht an

        sry, aber ich komm echt net weiter, IE zeigts den Border gar net an, ich gib euch besser mal meinen ganzen Quelltext ^^

        <html>
        <head>
        <title>Unbenanntes Dokument</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <style type="text/css">
        #picstabelle {
        color: #990000;
        font-size: 14px;
        width:51%;
        height:737px;
        border: 1px;

        }
        #left {
        border-left-color: #0000FF;
        border-left-style: dashed;
        border-left-width: medium;

        }
        #left a {
        border-left-color: #0000FF;
        border-left-style: dashed;
        border-left-width: medium;
        }
        #left a:hover {
        border-left-color: #00FF66;
        border-left-style: dashed;
        border-left-width: thick;
        }
        #right {
        border-color: #FFFF00;
        border-right: 12px;
        border-right-style: dashed;
        }
        </style>
        </head>

        <body>

        <div align="center">
        <table id="picstabelle" >
        <tr>
        <th height="81" colspan="3" scope="col">Manuel Bild </th>
        <th scope="col">&nbsp;</th>
        <th colspan="3" scope="col">Kevin Bild </th>
        </tr>
        <tr>
        <th height="24" colspan="3" scope="col"><div align="right">Bilder von mir </div></th>
        <th width="40" scope="col">&nbsp;</th>
        <th colspan="3" scope="col"><div align="left">Bilder von mir </div></th>
        </tr>
        <tr>
        <th width="9" height="10" scope="row">&nbsp;</th>
        <th id="left" width="132" height="10" scope="row"><div align="left"><a href="#">Meine Freunde</a> </div></th>
        <td width="40" height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td width="48" height="10">&nbsp;</td>
        <td id="right" width="170" height="10"><div align="center">Meine Freunde </div></td>
        <td width="11">&nbsp;</td>
        </tr>
        <tr>
        <th height="10" scope="row">&nbsp;</th>
        <th height="10" scope="row"><div align="left"><a href="#">Skilager 2006</a> </div></th>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td id="right" height="10"><div align="center">Bonny</div></td>
        <td>&nbsp;</td>
        </tr>
        <tr>
        <th height="10" scope="row">&nbsp;</th>
        <th id="left" height="10" scope="row"><div align="left"><a href="#">Schule</a></div></th>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td id="right" height="10"><div align="center">Schule</div></td>
        <td>&nbsp;</td>
        </tr>
        <tr>
        <th height="10" scope="row">&nbsp;</th>
        <th height="10" scope="row"><div align="left">Pf&auml;nderbahn</div></th>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td id="right" height="10">Zeichnungen</td>
        <td>&nbsp;</td>
        </tr>
        <tr>
        <th height="10" scope="row">&nbsp;</th>
        <th height="10" scope="row"><div align="left">Ausflug Augsburg </div></th>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td height="10">Musikumzug</td>
        <td>&nbsp;</td>
        </tr>
        <tr>
        <th height="10" scope="row">&nbsp;</th>
        <th height="10" scope="row"><div align="left">Informationstag</div></th>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
        <tr>
        <th height="10" scope="row">&nbsp;</th>
        <th height="10" scope="row"><div align="left">Augsburger Zoo </div></th>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
        <tr>
        <th height="10" scope="row">&nbsp;</th>
        <th height="10" scope="row"><div align="left">Faschingsumzug</div></th>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
        <tr>
        <th height="10" scope="row">&nbsp;</th>
        <th height="10" scope="row"><div align="left">Autenried</div></th>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
        <tr>
        <th height="10" scope="row">&nbsp;</th>
        <th height="10" scope="row"><div align="left">AooA-Bilder</div></th>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td height="10">&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
        <tr>
        <th height="22" colspan="7" scope="row">&nbsp;</th>
        </tr>
        </table>
        </div>
        </body>
        </html>

        ich möchte einfach das neben jeden link in der Tabelle ein Border, der die Farbe wechselt wenn man über den link drüberfährt
        oder könnt ihr mir vll ein anderen quelltext geben wo so was drin ist? benötigt man da eig PHP?
        thx
        Gruß Manuel

        Kommentar

        • #5
          ich möchte einfach das neben jeden link in der Tabelle ein Border, der die Farbe wechselt wenn man über den link drüberfährt
          wenn das nur beim link passieren soll, brauchst du afaik nen JS. ansonsten würde ichs beim hover über die Tabellenzeile machen. Dann geht's mit reinem CSS.

          Hier haben wir übrigens grad nen Thread, der ne CSS Eigenschaft über JS verändert.

          benötigt man da eig PHP?
          Ganz sicher nicht!

          Kommentar

          • #6
            Re: [CSS] IE zeigt es nicht an

            Original geschrieben von Fir3bird
            sry, aber ich komm echt net weiter,
            dann lerne vernünftig CSS, was soll denn der Sch**ß mit mehrfach vorkommene IDs.

            Kommentar

            • #7
              ich habe mir das so vorgestellt wie auf der seite
              hier klicken
              die Navi von der linken seite, so etwas hab ich mir da vorgestellt
              kannst mir da weiterhelfen?

              Kommentar

              • #8
                Dir gehts um die Navigation?

                Oh mein gott, schei* auf Tabelle, definniere es als Liste und dann klappts auch mit dem Border. Übrigens. Du wolltest Quelltext? Da hast du ihn.

                Speicher die seite lokal ab, reduzier sie immer weiter (zwischendurch prüfen ob navi noch hovert/funktioniert) bis du nur noch die navi hast. dann sollte es selbst ohne css-grundlagen ein leichtes sein, den code zu kopieren.

                Kommentar

                • #9
                  Original von TobiaZ
                  wenn das nur beim link passieren soll, brauchst du afaik nen JS. ansonsten würde ichs beim hover über die Tabellenzeile machen. Dann geht's mit reinem CSS.
                  Sollte imho auch beim a mit Nur-CSS funzen
                  Code:
                  <html>
<head>
<style type="text/css">
a{
border-left:blue solid 10px;
}
a:hover{
border-left:green solid 10px;
}
</style>
</head>
<body>
<table>
<tr>
<td><a href="test.html">Klick</a></td></tr>
</table>
</body>
</html>
                  Gruss

                  tobi
                  Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

                  [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
                  Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

                  Kommentar

                  • #10
                    Zu dem Zeitpunkt bin ich davon ausgegangen, dass in der Tabelle auch daten stehen und nicht nur ein einsamer link pro zeile...

                    Kommentar

                    • #11
                      @Fir3bird

                      wenn du sowas pisseliges suchst, dann schau dir mal die beiden html-css-tutorials von mir an. besonders im zweiten wird gezeigt, wie man sowas macht.

                      bei verständnisproblemen empfehle ich dir die theorie zu html und css

                      gruß
                      peter
                      Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                      Meine Seite

                      Kommentar

                      • #12
                        OffTopic:
                        Kennst du die Links zu deiner Seite eigentlich alle ausm Kopf?

                        Kommentar

                        • #13
                          Original geschrieben von TobiaZ
                          OffTopic:
                          Kennst du die Links zu deiner Seite eigentlich alle ausm Kopf?
                          OffTopic:
                          nö, hab den auftritt in meiner fav-liste, der rest läuft über copy & paste.


                          gruß
                          peter
                          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                          Meine Seite

                          Kommentar

                          • #14
                            so, etzt hab ichs doch noch hinbekommen ^^
                            hIeR

                            Kommentar

                            • #15
                              OffTopic:
                              die arme tabelle.

                              Kommentar

                              Vorherige template Weiter
                              Lädt...
                              X