✔ Schriftposition in Tabelle

[Dflex]

Hi

Ich bin gerade dabei ein Redesign meiner HP umzusetzen.

Bisher klappte es auch relativ gut, nur jetzt habe ich ein relativ triviales Problem.
Wenn ich auf einen Link gehe, soll ein Untermenü augehen. Das klappt auch sehr schön.
Damit die Links in diesen Unterkategorien schön Positioniert sind habe ich sie in eine Tabelle geschmissen. Ich habe per CSS einen Rollover-Effekt erzeugt. Zuerst hat der Link ein best. Hintergrundbild. Wenn man über den Link fährt wird es in den anderen Status (Over) gebracht. Jetzt habe ich das Problem, dass die Schrift an der Oberkante der Tabelle hängt, also nicht mittig steht (das hintergrundbild ist 39pixel hoch).
Ich habe schon versucht in den TD-Zellen die height auf 39 zu setzen und valign auf "middle".
Auch per CSS habe ich versucht die Schrift zu positionieren - klappte auch nicht.

Ich poste am besten mal den Code:

<div id="Cat1" style="z-index:1">
  <table cellpadding="0" cellspacing="0" border="1" width="100%">
    <tr align="center">
      <td><a class="Menu2" onClick="hidesub();" href="index.php?section=pics&sub=13a">13a</a></td>
      <td><a class="Menu2" onClick="hidesub();" href="index.php?section=pics&sub=13b">13b</a></td>
      <td><a class="Menu2" onClick="hidesub();" href="index.php?section=pics&sub=13c">13c</a></td>
      <td><a class="Menu2" onClick="hidesub();" href="index.php?section=pics&sub=13d">13d</a></td>
      <td><a class="Menu2" onClick="hidesub();" href="index.php?section=pics&sub=13e">13e</a></td>
      <td><a class="Menu2" onClick="hidesub();" href="index.php?section=pics&sub=13f">13f</a></td>
      <td><a class="Menu2" onClick="hidesub();" href="index.php?section=pics&sub=13g">13g</a></td>
    </tr>
  </table>
</div>

Die OnClick-Funktion könnt Ihr mal außer Acht lassen(ist nur zur Anzeige des Submenüs bzw Ausblendung)

Hier noch das nötige CSS-Zeugs:

#Cat1, #Cat2, #Cat3, #Cat4, #Cat5 {
  visibility: hidden;
  position: absolute;
  text-align: center;
  width: 444px;
}

.Menu, .Menu2 {
  background-repeat: repeat-x;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  display: block;
  color: #000000;
}

.Menu2 {
  background-image:url(menu/submen.jpg);
  height: 39px;
  vertical-align: bottom;
}

.Menu2:link {
}

.Menu2:visited {
}

.Menu2:active {
  background-image:url(menu/submen_o.jpg);
}

.Menu2:hover {
  background-image:url(menu/submen_o.jpg);
}

Benötige Ich eigentlich den :link und den :visited Status wenn ich nichts dran änder?
Ich hatte mal gelesen, dass die genau in dieser Reihenfolge stehen müssen, desßhalb habe ich sie einfach mit reingenommen.

Ich hoffe Ihr könnt mir helfen

Dflex

 

[Dr Dau]

Hallo!

Die Textausrichtung muss auf die Zellen angewand werden und nicht auf die Links, siehe auch SelfHTML.
Ausserdem sind die Linkfornatierungen in der falschen Reihenfolge, siehe ebenfalls SelfHTML.

Gruss Dr Dau

 

[Dflex]

Danke schonmal.

Wie gesagt hatte ich mal gelesen, das es so funktionieren würde(und nur so) - Es geht auch!

In SelfHTML hab ich gar nicht mehr nachgeschaut - Hmm Danke - werds dann mal umändern

Das mit den TD-Zellen hatte ich ja glaub ich schon versucht.
Habs aber nochmal versucht und es hat nix gebracht

Hier der Code dazu:

<div id="Cat1" style="z-index:1">
  <table cellpadding="0" cellspacing="0" border="1" width="100%">
    <tr align="center">
      <td height="39" class="SubLink"><a class="Menu2" onClick="hidesub();" href="index.php?section=pics&sub=13a">13a</a></td>
      <td height="39" class="SubLink"><a class="Menu2" onClick="hidesub();" href="index.php?section=pics&sub=13b">13b</a></td>
      <td height="39" class="SubLink"><a class="Menu2" onClick="hidesub();" href="index.php?section=pics&sub=13c">13c</a></td>
      <td height="39" class="SubLink"><a class="Menu2" onClick="hidesub();" href="index.php?section=pics&sub=13d">13d</a></td>
      <td height="39" class="SubLink"><a class="Menu2" onClick="hidesub();" href="index.php?section=pics&sub=13e">13e</a></td>
      <td height="39" class="SubLink"><a class="Menu2" onClick="hidesub();" href="index.php?section=pics&sub=13f">13f</a></td>
      <td height="39" class="SubLink"><a class="Menu2" onClick="hidesub();" href="index.php?section=pics&sub=13g">13g</a></td>
    </tr>
  </table>
</div>

.Menu, .Menu2 {
  background-repeat: repeat-x;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  display: block;
  color: #000000;
}

.Menu2 {
  background-image:url(menu/submen.jpg);
  height: 39px;
}

.SubLink {
  height: 39px;
  vertical-align: middle;
}

#Cat1, #Cat2, #Cat3, #Cat4, #Cat5 {
  visibility: hidden;
  position: absolute;
  text-align: center;
  width: 444px;
}
.Menu2:link {
}

.Menu2:visited {
}


.Menu2:hover {
  background-image:url(menu/submen_o.jpg);
}

.Menu2:active {
  background-image:url(menu/submen_o.jpg);
}

Hier hab ich nochmal ein Bild von dem Problem gemacht

Der Rahmen kommt natürlich noch weg.
Ich denk ma, dass das irgendwie Probleme mit der Grafik im Hintergrund macht

 

[Dr Dau]

tausche mal
 
.Menu2 {
background-image:url(menu/submen.jpg);
height: 39px;
}
 
gegen
 
.Menu2 {
background-image:url(gruen.gif);
font-size: 18px;
line-height: 39px;
}

Und dann nehme noch height="39" bei den TD-Tag's raus.

Ich habe es auch mit padding-top versucht, dieses funktioniert zwar im IE und Mozilla, nicht aber in Opera.
Dass Problem in Opera ist mir schon häufiger aufgefallen, egal ob in der DIV-Box eine Tabelle ist oder nicht und auch egal ob mit Bild oder ohne.

An der Hintergrundgrafik alleine kann es nicht liegen, Du brauchst ja nurmal eine einfache Tabelle mit Hintergrundgrafik und reinem Text machen ohne irgendwelche Effekte.
Da spielt wohl eher eine Verkettung der einzelnen Formatierungen eine Rolle.

 

[Dflex]

Danke!

Das hat geholfen!