Text zentrierung über einem background-image

[Zer0C00l]

Hallo, ich habe ein Problem bei mir rutsch mein test immer wenn ich diesen center in die nächste zeile unter dem Bild. Ich will den Text aber über dem Bild zentriert haben. Was ist mein Problem?
hier der Style Sheet:

.cssnav {
position:relative;
font-family: arial;
background-image: url(button_pressed.jpg);
background-repeat: no-repeat;
display: block;
width: 100px;
height: 20px;
margin: 0;
margin-bottom:0px;
padding: 0;
}
.cssnav a {
display:block;
font-size: 12px;
text-align:center;
width: 100px;
height: 20px;
color: black;
text-decoration: none;
}
.cssnav img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover {
color:red;
}
.cssnav a:hover img{visibility:hidden}
.cssnav span {
float:center;
cursor: pointer;
}

 

[Gumbo]

Hast du ein passendes Beispiel? Ohne ist es schwer dies zu beurteilen.

 

[Zer0C00l]

Ja. Das vorne ist mein CSS Style Sheet warum wid der Text nicht über dem Button zentriet

 

[c2uk]

Zum einen hast Du mal zwei von denen hier vergessen ;

Dann gibt es auch kein float: center; und den margin-bottom mit 0 kann man auch weg lassen, da Du ja schon vorher die komplette margin auf 0 gestellt hast.

Damit man sich das ganze jetzt noch genauer anschauen kann, wäre eine Onlineversion am besten, denn der Fehler könnte durchaus noch wo anders drin stecken, notfalls würde auch die entsprechende Stelle aus dem html code reichen.

  .cssnav {
  position:relative;
  font-family: arial;
  background-image: url(button_pressed.jpg);
  background-repeat: no-repeat;
  display: block;
  width: 100px;
  height: 20px;
  margin: 0; 
  padding: 0; 
  }
   .cssnav a {
 display:block;
 font-size: 12px;
  text-align: center;
  width: 100px;
  height: 20px;
  color: black;
  text-decoration: none;
  }
   .cssnav img {
 width: 100%; 
 height: 100%; 
 border: 0; 
 }
   * html a:hover {
 visibility: visible;
 }
   .cssnav a:hover {
   color: red;
  }
   .cssnav a:hover img {
 visibility: hidden;
 }
   .cssnav span { 
    cursor: pointer;
  }

 

[Zer0C00l]

http://www.dosis-gmbh.com/de/

. Bei Internet Exploerer zentriert er sie bei Mozilla nicht. Konqueror machts auch Firefox nicht komisch!

 

[Gumbo]

Bei Internet Exploerer zentriert er sie bei Mozilla nicht. Konqueror machts auch Firefox nicht komisch!

Wieso sollte der Konqueror es dem Firefox komisch machen? Du solltest etwas besser auf deine Grammatik achten, sonst könnte es schnell zu Missverständnissen kommen.


Du solltest auch unbedingt die Navigation überarbeiten. Denn z. Zt. ist die Website nur mit JavaScript-Unterstützung zugänglich.

 

[Dennis Wronka]

Endlich mal einer der auch mit Konqueror testet.
Bin ja auch im Moment (also nicht jetzt grad, aber so im allgemeinen) mit meiner Website dran, und ich weiss bisher nur, dass die im Konqueror und im Mozi funktioniert. Hab die aber noch nicht im IE gesehen.
Muss die Tage mal wieder Windows starten um das mal zu checken.

 

[c2uk]

Ein möglicher Fehler wäre, dass Du pro Tabellenzelle zwei divs geöffnet aber nur einen geschlossen hast.

Aber das ganze sieht doch sehr unsauber aus, mein Tipp also, ersetze folgendes:

 <div class="cssnav">
 <a href="javascript:doubleLink('content.html','navi.html')"><img src="images/button/button_pressed.jpg"><div style="position:relative;top:-17px;margin-left:5px;font-weight:bold;"><span>Willkommen</span></a></div>

durch das:

 <div class="cssnav">
  <a href="javascript:doubleLink('content.html','navi.html')">Willkommen</a></div>

und Dein css stylesheet sollte so aussehen:

 .cssnav {
 font-family: arial;
 background-image: url(button_n.jpg.jpg);
 background-repeat: no-repeat;
 width: 100px;
 height: 20px;
 margin: 0;
 margin-bottom:0px;
 padding: 0;
  }
.cssnav a {
 font-weight:bold;
 font-size: 12px;
 text-align:center;
 width: 100px;
 height: 20px;
 color: black;
 text-decoration: none;
  }

.cssnav a:hover {
 color:red;
 background-image: url(button_pressed.jpg);
 background-repeat: no-repeat;
  }

Und für den aktiven Link mach folgendes:

<div class="cssnavactive">
<a href="javascript:doubleLink('content.html','navi.html')">Willkommen</a></div>

.cssnavactive {
 font-family: arial;
 background-image: url(button_pressed.jpg);
  background-repeat: no-repeat;
 width: 100px;
 height: 20px;
 margin: 0;
 margin-bottom:0px;
 padding: 0;
   }
 .cssnavactive a {
  font-weight:bold;
 font-size: 12px;
 text-align:center;
 width: 100px;
 height: 20px;
 color: black;
 text-decoration: none;
   }
 
 .cssnavactive a:hover {
  color:red;
 background-image: url(button_pressed.jpg);
 background-repeat: no-repeat;
   }

Den Code könnte man noch weiter vereinfachen, aber prinzipiell sollte es so gehen, habe es jetzt aber nicht ausprobiert

 

[Zer0C00l]

so hab das mal pobiert jetzt läufts garnicht mehr vernünftig. Internet Explorer schafft es aber Mozilla oder ähnliches packt das nicht. sehr komisch!

 

[Zer0C00l]

so jetzt macht er es vernünftig jedoch klappt das hover nicht. Mein background image ist nur so gross wie der Text, beim hovern. Und valign ist nicht da muss mittig im Button stehen. mit vertical-align beim CSS klappt das nicht! Weiss jemand rat? und danke für die hilfe!