zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hover effekt auf ganze TD zelle

Antwort
 
LinkBack Themen-Optionen Ansicht
  #21 (permalink)  
Alt 10.07.2011, 19:11
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.823
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Wenn du einen Link haben möchtest, der wie ein Blockelement funktioniert, dann gibt dem a-Element doch einfach display: block;
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
Sponsored Links
  #22 (permalink)  
Alt 10.07.2011, 19:32
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

ja, klappt
dankeeeeee leute.
ihr wart super.
dachte nicht das es so kurz geschrieben werden kann...
Mit Zitat antworten
Sponsored Links
  #23 (permalink)  
Alt 10.07.2011, 22:33
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Manfred62 Beitrag anzeigen
@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>
Mit Zitat antworten
  #24 (permalink)  
Alt 11.07.2011, 01:08
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

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>

Geändert von gandalf_hh (11.07.2011 um 19:45 Uhr)
Mit Zitat antworten
  #25 (permalink)  
Alt 11.07.2011, 19:57
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

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
-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

Geändert von gandalf_hh (11.07.2011 um 19:59 Uhr)
Mit Zitat antworten
  #26 (permalink)  
Alt 11.07.2011, 20:38
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.135
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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
Mit Zitat antworten
  #27 (permalink)  
Alt 12.07.2011, 02:19
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von gandalf_hh Beitrag anzeigen
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 -
Mit Zitat antworten
  #28 (permalink)  
Alt 13.07.2011, 19:06
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

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

Geändert von gaby (13.07.2011 um 19:25 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hilfe css Menu center xXcyberXx CSS 5 28.11.2010 19:51
Problem mit CSS Menü SMundt CSS 9 07.01.2009 19:12
CSS Navigation - Problem mit IE6 pcklinik CSS 4 18.09.2007 12:04
Darstellungsproblem CSS Navigation im IE7 pcklinik CSS 7 09.09.2007 17:25
CSS Einsteiger bittet um Hilfe pcklinik CSS 0 06.09.2007 14:40


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