theatermacher: Tabellenzeile soll bei hover eine infobox anzeigen

Beitrag lesen

@@theatermacher:

nuqneH

<table width="670" cellspacing="0" cellpadding="0" border="0" align="left">

Keins dieser Attribute sollte in HTML verwendet werden. Gib sämtlich Darstellung per CSS an!

<thead>
        <tr class="titel">

Die Klasse ist überflüssig. Dieses tr-Element ist das einzige innerhalb von thead; in CSS per [code lang=css]thead > tr


>   
>   
> >     <tbody>  
> >         <tr class="evenrow">  
> >         ⋮  
> >         <tr class="oddrow">  
>   
> Auch diese Klassen sind überflüssig. [Zebrastreifen](http://bittersmann.de/articles/zebra)  
>   
> Qapla'  
>   
> PS: Ich seh grad, ich sollte die Expressions mal auf `runtimeStyle`{:.language-javascript} umschreiben.  
  
  
  
Danke für Eure Antworten.  
  
@gunther  
  
Damit mein Ziel deutlicher wird, hier der Link zu meiner Testseite:  
<http://uedlige.dramatik.ch>  
Die Funktionen der Zellen in der Kolonne Whg.-Nr. sollen über die ganze Zeile gehen. Also, egal in welche Zelle in der Zeile ich hovere, soll sich die Infobox öffnen. Und egal wo ich in der Zeile hinklicke soll das entsprechende Dokument geöffnet werden.  
Und hier noch das CSS für den betreffenden Tabellenbereich:  
~~~css
  
table {  
        float: left;  
        width: 670px;  
        margin-top: 0px;  
        margin-bottom: 10px;  
        background:#e4e4e4;  
}  
  
tr {  
       font-family: Arial, Verdana, Helvetica, sans-serif;  
       height:18px;  
       font-size:12px;  
       curser:pointer;  
}  
  
tr.titel th {  
       color:#ffffff;  
       text-align:left;  
       background: #236a9e;  
  
}  
tr.titel:hover {  
background: #236a9e;  
}  
tr.evenrow {  
 background-color: #e4e4e4;  
}  
tr.oddrow{  
        background-color: #ffffff;  
}  
tr:hover {  
background:#abcde5;  
}  
td  {  
        font-size: 12px;  
        color:#000;  
        font-weight:400;  
       /* background-color: #e4e4e4; */  
}  
td a:hover {  
color: #ec761e;  
}  
td.leer {  
width:50px;  
}  
  
/* --- Test für Infobox --- */  
  
#box{  
height:18px;  
width:60px;  
padding:0;  
margin:0px;  
border:0px solid red;  
}  
  
#box div{display:none;}  
  
#box:hover div{  
display:block;  
width:300px;  
height:550px;  
position:absolute;top:200px;left:0px;  
border:0px dashed black;  
padding:0px;  
font:normal 14px verdana, sans-serif;  
z-index:9910;  
}  
  
td.infobox {  
background:#abcde5;  
}  
  
td.infobox:hover {  
background:#64a8d7;  
color:#fff;  
}  

@gunnar

<table width="670" cellspacing="0" cellpadding="0"

border="0" align="left">


> Keins dieser Attribute sollte in HTML verwendet werden. Gib sämtlich  
> Darstellung per CSS an!  
  
Danke für diesen Hinweis. Ja, das werde ich tun. Ich bin halt kein Hirsch in Tabellen. Ich tu mich immer sehr schwer mit css und Tabellen.  
  
Ich werde auch Deine übrigen Hinweise betr. css Klassen umsetzen. Das mit den Zebrastreifen habe ich nicht gleich geschnallt, werde es aber ausprobieren.  
  
LG Harry  
  
  
  

0 49

Tabellenzeile soll bei hover eine infobox anzeigen

theatermacher
  • css
  1. 0
    Matthias Apsel
    1. 0
      theatermacher
      1. 0
        Gunther
      2. 0
        Gunnar Bittersmann
        1. 0
          theatermacher
          1. 0
            Gunther
            1. 0
              theatermacher
              1. 1
                Matthias Apsel
                1. 0
                  theatermacher
                  1. 0
                    Der Martin
                    1. 0
                      theatermacher
                      1. 0
                        Gunther
                        1. 0
                          theatermacher
                          1. 0
                            Matthias Apsel
                            1. 0

                              Semantik

                              Gunther
                              • html
                              1. 2
                                Matthias Apsel
                                1. 0
                                  Gunther
                                  1. 0
                                    Matthias Apsel
                                    1. 0
                                      Gunther
                                      1. 1
                                        Der Martin
                                        1. 0
                                          Gunther
                                          1. 0
                                            Matthias Apsel
                                            1. 0
                                              Gunther
                                              1. 0

                                                Link über ganze Tabellenzeile

                                                Matthias Apsel
                                                1. 0

                                                  Link über ganze Tabellenzeile auch für alte Browser

                                                  Matthias Apsel
                                                  1. 0

                                                    Responsive Design

                                                    Gunther
                                                    • design/layout
                                                    1. 0
                                                      Matthias Apsel
                                                      1. 0
                                                        Gunther
                                                        1. 0
                                                          Matthias Apsel
                                                          1. 0
                                                            Gunther
                                                            1. 0

                                                              Das letzte Wort

                                                              Matthias Apsel
                                                              • menschelei
                                      2. 0
                                        Matthias Apsel
                                        1. 0
                                          Matthias Apsel
                                          1. 0
                                            Matthias Apsel
                                  2. 0
                                    Kai345
                                    1. 0
                                      Gunther
                                      1. 0

                                        Zugänglichkeit

                                        Matthias Apsel
                                2. 0
                                  Gunnar Bittersmann
                    2. 0
                      Matthias Apsel
                    3. 0
                      Gunnar Bittersmann
                      1. 0
                        Matthias Apsel
                      2. 0
                        Der Martin
                  2. 0
                    Matthias Apsel
                    1. 0
                      Matthias Apsel
        2. 1
          Kai345
          1. 0
            Gunnar Bittersmann
            1. 0
              Matthias Apsel
            2. 1
              Kai345