XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Hover effekt auf ganze TD zelle (http://xhtmlforum.de/showthread.php?t=65114)

gato 10.07.2011 19:11

Wenn du einen Link haben möchtest, der wie ein Blockelement funktioniert, dann gibt dem a-Element doch einfach display: block;

gandalf_hh 10.07.2011 19:32

ja, klappt :)
dankeeeeee leute.
ihr wart super.
dachte nicht das es so kurz geschrieben werden kann...

gaby 10.07.2011 22:33

Zitat:

Zitat von Manfred62 (Beitrag 497588)
@gaby
zu deinem Beispiel-Code. Der geht auch deutlich einfacher..
Code:

td  {   
    width: 180px;
    background: yellow;
    border: 2px dotted red;
    }
   
td span {
    float: right;
    }
   
td:hover {
  background: red;
  }

<table>
<tbody>
    <tr>
        <td>
        NIKE AIR MAX <span> 60€ </span>
        </td>
    </tr>
</tbody>
</table>

Manfred

Stimmt, das ist viel einfacher als mein Vorschlag, aber eine kleine Änderung würde ich dennoch machen, um die Darstellung browserübergreifend zu bekommen. ;)

Das 'float' rutscht laut Screenshot-Service im IE-7 und IE-6 in die nächste Zeile.
Wenn man das Float nach vorne setzt, passt es auch in diesen Browsern.

Code:

<td>
    <span> 60€ </span>  NIKE AIR MAX
</td>


gandalf_hh 11.07.2011 01:08

ich habe ja in diese td tabelle link's gesetzt und auf meiner seite ist ja ein a:link usw. nun möchte ich aber das die
einstellungen für meine link's auf der homepage anders sind als die einstellungen für die link's in der tabelle.
kann ich das irgendwie machen?

ich hatte ja in die ganze TD zelle hover reingemacht, nun möchte ich aber ganz links eine zelle ohne hover,
ich komm da irgendwie nicht drum rum. habe versucht style="hover:none;" ging nicht...

ich zähl mal die probleme auf:
1.getrende a:link einstellung...
2.ganz linke spalte ohne hover...
3.beim minimieren der seite bricht die TD zelle ungewönlich schnell was ich nicht möchte...
den vorschlag es andersrum zu schreiben habe ich auch versucht hat bei mir nicht geholfen = <span> 60€ </span> NIKE AIR MAX


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type = "text/css">
a:link {
text-decoration: none;
color:#FFF;
font-family: Tahoma;
font-size: 14px;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
td {
font-family: Tahoma;
font-size: 14px;
color: #FFF;
background-color: #000;
}
td span {
float: right;
margin-right:2px;
width:inherit;
}
td:hover {
background-color: #090;
}
</style>
</head>
<body>
<table>
<tr>
<td style="width:90px; border:none;">12jul. 19.00</td>
<td style="width:230px;"><a href=""><div>NIKE AIR MAX<span>60euro</span></div></a></td>
<td style="width:230px;"><a href=""><div>NIKE AIR MAX<span>60euro</span></div></a></td>
<td style="width:230px;"><a href=""><div>NIKE AIR MAX<span>60euro</span></div></a></td>
</tr>
</table>
</body>
</html>

gandalf_hh 11.07.2011 19:57

ich hab gelesen das ich die a: in klassen aufteilen muss um das umzusetzen. dann hab ich es so versucht:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type = "text/css">
a.klasse_1:link {text-decoration:none; color:#0F0; font-family:Tahoma; font-size:14px;}
a.klasse_1:visited {text-decoration:none; color:#0F0;}
a.klasse_1:hover, a.klasse_1:active, a.klasse_1:focus {text-decoration:none;}

a.klasse_2:link {text-decoration:none; color:#F00; font-family:Tahoma; font-size:14px;}
a.klasse_2:visited {text-decoration:none; color:#F00;}
a.klasse_2:hover, a.klasse_2:active, a.klasse_2:focus {text-decoration:none;}

td {
font-family: Tahoma;
font-size: 14px;
color: #FFF;
background-color: #000;
}
td span {
float: right;
margin-right:2px;
width:inherit;
}


</style>
</head>
<body>
<table>
<tr>
<td style="width:90px; border:none;">12jul. 19.00</td>
<td style="width:230px;"><a href="" class="klasse_1"><div>NIKE AIR MAX<span>60euro</span></div></a></td>
<td style="width:230px;"><a href="" class="klasse_1"><div>NIKE AIR MAX<span>60euro</span></div></a></td>
<td style="width:230px;"><a href="" class="klasse_1"><div>NIKE AIR MAX<span>60euro</span></div></a></td>
</tr>
</table>

<table>
<tr>
<td style="width:90px; border:none;">12jul. 19.00</td>
<td style="width:230px;"><a href="" class="klasse_2"><div>NIKE AIR MAX<span>60euro</span></div></a></td>
<td style="width:230px;"><a href="" class="klasse_2"><div>NIKE AIR MAX<span>60euro</span></div></a></td>
<td style="width:230px;"><a href="" class="klasse_2"><div>NIKE AIR MAX<span>60euro</span></div></a></td>
</tr>
</table>
</body>
</html>



ich wollte auch die hover trennen das hab ich so gemacht leider ohne erfolg:

a.klasse_1:hover { text-decoration:none; background-color:#00F;}
a.klasse_2:hover { text-decoration:none; background-color:#6F0;}

td.a.klasse_1:hover { text-decoration:none; background-color:#00F;}
td.a.klasse_2:hover { text-decoration:none; background-color:#6F0;}

naja ich hab die links trennen können 8)
-aber hover trennen fehlt mir noch
-die zelle ganz links möchte ich ohne hover
-und wenn man die seite minimiert bricht die TD Zelle ungewöhnlich schnell, guckt mal bitte ob das normal ist

Manfred62 11.07.2011 20:38

Du liest die Hinweise nicht, oder??

Setz endlich den Code in die Tags (beim posten)!
Block-Element in Inline-Element ist Murks!
Mach dich mit dem sinnvollen Gebrauch von id und class vertraut!
Noch ein Stichwort: Spezifität.

Ansonsten, falls du das noch nicht kennst/durchgearbeitet hast:
LB Teil 1 (von 2009) kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

Manfred

gaby 12.07.2011 02:19

Zitat:

Zitat von gandalf_hh (Beitrag 497606)
3.beim minimieren der seite bricht die TD zelle ungewönlich schnell was ich nicht möchte...

Hier ist ein Tutorial über FLOAT.

Float

Wenn du das gelesen hast, kannst du besser beurteilen, ob das Umbrechen in die nächste Zeile "ungewönlich schnell" oder normal erfolgt.

Zitat:

den vorschlag es andersrum zu schreiben habe ich auch versucht hat bei mir nicht geholfen = <span> 60€ </span> NIKE AIR MAX
Ältere Browser reagieren bei Floats ohne Breitenangabe sehr unterschiedlich. So machen zb ältere IEs einen Zeilenumbruch, wenn das Float nicht an erster Stelle steht. Lade deinen Code doch mal hoch. Dann kannst du hier kontrollieren, wie es in verschiedenen IEs aussieht.

IE NetRenderer - Browser Compatibility Check -

gaby 13.07.2011 19:06

gelöscht.

Ich habe stattdessen einen eigenen Thread aufgemacht, weil das neue Thema doch etwas vom subject dieses Threads abweicht.

---> http://xhtmlforum.de/65146-gruppe-vo...en-hovern.html


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:12 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019