• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Probleme mit :hover und div-tag

ZeitGeist

ZeitGeist

Lounge-Member
Moin

kann mir sagen wie ich diese links alle auf die länge des obersten
bekomme??
Code: 
<a href="start.html" style="text-decoration:none">
  <div class="greenLink">
    Home
  </div>
</a>
das ist der link mit der gewünschten länge

Code: 
<a href="portraits/portraits.html" class="greenLink">
  Portraits
</a>
<br><br>
<a href="kennlernfahrt/uebersicht.html" class="greenLink">
  Kennlernfahrt
</a>
das sind die neuen links, wo die längen angabe nicht mehr greift da die class sich auch nen link bezieht, und nicht mehr auf nen div-tag. Mit dem Div-Tag funktioniert allerdings der hover-effekt den ich brauche nicht mehr...

hier noch der css code:
Code: 
.greenLink
{
  height:20px;
  width:132px;
  background-color:#D3E6BD;
  font-size:16px;
  color:#FC7216;
  text-decoration:none;
  text-align:left;
  padding-left:0.5cm;
  padding-right:0.5cm;
  margin-top:0.2cm;
  margin-bottom:0.2cm;
}

würd mich freuen wenn mir wer helfen könnte....

Dank im voraus
 
das mit dem "width" ist ja ganz gut und ganz schön - aber ein "<a href.." hat keine länge - also entwerder auch <div>-tags oder tabellenzellen:

Code: 
<a href="portraits/portraits.html">
 <div class="greenLink">
  Portraits
 </div>
</a>
<br><br>
<a href="kennlernfahrt/uebersicht.html">
 <div  class="greenLink">
  Kennlernfahrt
 </div>
</a>
 
schad, hab gehofft nicht alles umbauen zu müssen, bei div-tags geht der hover effekt nicht, dann muss ich es wohl mit der tabelle probieren

danke sehr J-C
 
also entweder hab ich was falsch verstanden, oder es geht so auch nicht.
ich hab um die links jeweils eine zelle drum rum gelegt, und der Zelle kann ich wieder meine hover class zuordenen, die tut ja nur im <a>-tag. ich kann jetzt zwar der zelle ne hintergrundfarbe geben, aber die sollte sich ja eigentlich ändern beim drüberfahren, und das tut jetzt nur der link mit seiner verkürzten hintergrund farbe

oh ich seh gerade das hab ich vergessen zu erwähnen im ersten post
 
SO?
Code: 
<table>
  <tr>
    <td class="greenLink"><a href="portraits/portraits.html">Portraits</a></td>
  </tr>
  <tr>
    <td class="greenLink"><a href="kennlernfahrt/uebersicht.html">Kennlernfahrt</a></td>
  </tr>
</table>
 
mal sone Frage - wie soll denn der "hover-effekt" deiner meinung nach funktionieren? du weist doch nur einmal eine Klasse zu und das wars da is nixx mit "onMoverOver" bzw "hover:"
 
also - du weißt den objekte statisch eine CSS-klasse zu ... und was soll sich denn ändern, wenn man mit der maus drüberfährt?
 
hintergrundfarbe
schriftstärke
und textdecoration

hier die classen:
Code: 
.greenLink
{
  height:20px;
/*  width:132px;*/
  background-color:#D3E6BD;
  font-size:16px;
  color:#FC7216;
  text-decoration:none;
  text-align:left;
  padding-left:0.5cm;
  padding-right:0.5cm;
  margin-top:0.2cm;
  margin-bottom:0.2cm;
}
.greenLink:hover
{
  height:20px;
 /* width:132px;*/
  background-color:[b]#6EAB24;[/b]
  font-size:16px;
[b]  font-weight:bold;[/b]
  color:#FC7216;
  text-decoration:[b]underline;[/b]
  text-align:left;
  padding-left:0.5cm;
  padding-right:0.5cm;
  margin-top:2mm;
  margin-bottom:2mm;
  cursor:hand;
}
vielen dank für deine geduld schon mal!!
 
okay...

soweit ich weiss, gibt es die eigenschaft :hover nur für links und nicht für <td> oder <div> etc...
versuch mal folgendes

klamüsere die class auseinander - in eine klasse für die links (nur text-farben und text-attribute) und eine klasse für die tabellenspalte
 
nein will nicht, hover funktioniert nicht in anderen tags...

danke für deine mühen, guck mich mal nach javascript um....

Edit
habs jetzt so gelöst,
funktioniert in IE (6) und NS(7)
Code: 
function GreenActive(id)
{
var id = "GreenLink"+ id;
document.getElementById(id).style.backgroundColor="#6EAB24";
document.getElementById(id).style.textDecoration="underline";
document.getElementById(id).style.fontWeight="bold";
}
function GreenPassive(id)
{
var id = "GreenLink"+ id;
document.getElementById(id).style.backgroundColor="#D3E6BD";
document.getElementById(id).style.textDecoration="none";
document.getElementById(id).style.fontWeight="normal";
}
Code: 
<a href="aids/uebersicht.html" style="text-decoration:none">
<div class="greenLink" id="GreenLink4" onMouseover="GreenActive(4)" onMouseout="GreenPassive(4)">
Aids-Tag
</div>
</a>
 
Zuletzt bearbeitet:
hier mal meine variante
Code: 
<html>
  <head>
    <style>
.greenLink
{
  font-size:16px;
  color:#FC7216;
  text-decoration:none;
}
.greenLink:hover
{
  font-size:16px;
  font-weight:bold;
  color:#FC7216;
  text-decoration:underline;
}
td.greenTab
{
  height:20px;
  background-color:#D3E6BD;
  text-align:left;
  padding-left:0.5cm;
  padding-right:0.5cm;
  margin-top:0.2cm;
  margin-bottom:0.2cm;
}
td.greenTabOver
{
  height:20px;
  background-color:#6EAB24;
  text-align:left;
  padding-left:0.5cm;
  padding-right:0.5cm;
  margin-top:0.2cm;
  margin-bottom:0.2cm;
  cursor:hand;
}

    </style>
    <script language=javascript>
     function over(td)
     {
      document.getElementById(td).className = "greenTabOver";
     }
     function out(td)
     {
      document.getElementById(td).className = "greenTab";
     }
    </script>
  </head>
  <body>
    <table>
      <tr>
        <td id='portrait' class="greenTab" onMouseOver=over('portrait'); onMouseOut=out('portrait');><a href="portraits/portraits.html" class="greenLink">Portraits</a></td>
      </tr>
      <tr>
        <td id='kennenlern' class="greenTab" onMouseOver=over('kennenlern'); onMouseOut=out('kennenlern');><a href="kennlernfahrt/uebersicht.html"class="greenLink">Kennlernfahrt</a></td>
      </tr>
    </table>
  </body>
</html>
 
das mit der tabOver Klasse find ich recht sinnvoll, hat man die formatierungen wieder zentral

aber wär es nicht sinnvoller dann alles wieder in eine Klasse zumachen und per Javascript die andere klasse reinzuladen??
nun hast du ja 2 mouseover effekte (einmal JS einmal CSS) und der eine wird nur ausgelöst wenn man den link berührt...

oder seh ich da was falsch?
 
die eine ist für den link und die andere für die tabellenzelle - das MUSS getrennt sein
 
schon wieder was vergessen
ich lass die tabelle weg und bleib bei den div-tags wie ich es ganz am anfang hab...

ist egal
danke nochmal für deine Hilfe
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben