Größe der Hintergrundbilder in Naviagtionsleisten

[rantanplan55]

Hallo !

Ich habe eine Navigationsleiste mit einer ul und <a>s darin. Da die Größe der <a>s mit der Einheit em festgelegt ist, ändert sich die Größe der "Buttons" wenn man im Browser die Schriftgröße ändert. Dadruch wiederrum passt das Hintergrundbild nicht mehr schön in den Button, weil CSS die Bilder ja abschneidet bzw. kachelt anstatt zu "stretchen".

Meine Frage jetzt: Ist es nicht möglich, Hintergrundbilder zu verwenden für HTML-Elemente deren Größe mit em festgelegt wurde immer schön anzupassen ?

Wäre dankbar für jede Hilfe !

[suit]

Ich habe eine Navigationsleiste mit einer ul und <a>s darin.

ul-Elemente dürfen keine a-Elemente als direkte Nachfahren haben.

Meine Frage jetzt: Ist es nicht möglich, Hintergrundbilder zu verwenden für HTML-Elemente deren Größe mit em festgelegt wurde immer schön anzupassen ?

Ja, aber nur in sehr modernen Browsern.

[rantanplan55]

ul-Elemente dürfen keine a-Elemente als direkte Nachfahren haben.

Ja, ich habe die <li>s dazwischen verschwiegen.

Ja, aber nur in sehr modernen Browsern.

Danke! werd ich mir mal ansehen...

Aber was haben alle anderen mit diesem Problem gemacht ?
Keine Hintergrundbilder für "Buttons" verwendet?
Mit dem unschöneren Buttons bei Nicht-Standard Schriftgröße gelebt?
Starre Größe der Buttons?

Hier mein HTML:

  
<div id="navigation">  
 <ul>  
  <li>  
   <a class="active" href="indexx.shtml" title="Zur Startseite">Home</a>  
  </li>  
  <li>  
   <a class="inactive" href="kontakt.shtml" title="Nehmen Sie Kontakt auf">Kontakt</a>  
  </li>  
  <li>  
   <a class="inactive" href="impressum.shtml" title="Impressum und rechtliche Hinweise">Impressum</a>  
  </li>  
 </ul>	  
</div>

Mein CSS:

  
#navigation {  
 margin-top:1em;  
 margin-left:auto;  
 margin-right:auto;  
 width:21em;  
 height:3em;  
}  
  
#navigation ul	{  
 list-style:none;  
 padding: 0px;	  
 margin:0px;  
}  
  
#navigation li	{  
 float:left;  
 text-align:center;  
}  
  
#navigation a	{  
 width:7em;  
 height:1.2em;  
 display:block; /*"Button" aus Link machen */  
 text-decoration:none;  
 padding:.9em .0em .9em .0em  
}  
  
#navigation a:hover {  
 background-image: url(buttonactive.gif);  
 color:white;  
}  
  
.active {  
 background-image: url(buttonactive.gif);  
 color:white;  
}  
  
.inactive {  
 background-image: url(button.gif);  
 color:#7D7D7D;  
}

[suit]

Aber was haben alle anderen mit diesem Problem gemacht ?

Keine Hintergrundbilder für "Buttons" verwendet?

Beispielweise

Mit dem unschöneren Buttons bei Nicht-Standard Schriftgröße gelebt?

Moderne Browser skalieren Bilder mittlerweile sehr gut.

Starre Größe der Buttons?

Auch das ist eine Möglichkeit

Oder die von Patrick genannten Sliding Doors.

Oder Bilder die in eine Farbe verlaufen und sich nicht wiederholen.

background-image: url(buttonactive.gif);
background-image: url(buttonactive.gif);
background-image: url(button.gif);

Darunter kann ich mir nichts vorstellen - welche möglichkeiten sich dir auftun, hängt primär von deinem Design ab (oder von den Abstrichen am Design, die du bereit bist zu machen).

[Gunnar Bittersmann]

@@suit:

nuqneH

ul-Elemente dürfen keine a-Elemente als direkte Nachfahren haben.

Stand auch nicht im OP, dass sei das hätten.

Meine Frage jetzt: Ist es nicht möglich, Hintergrundbilder zu verwenden für HTML-Elemente deren Größe mit em festgelegt wurde immer schön anzupassen ?

Ja, aber nur in sehr modernen Browsern.

Die da wären?

Qapla'

[suit]

Die da wären?

Als vendor-specific extension zumindest Safari (-ktml-background-size, -webkit-background-size), Opera (-o-background-size) und Firefox (-moz-background-size).

[Gunnar Bittersmann]

@@suit:

nuqneH

Die da wären?

Als vendor-specific extension zumindest Safari (-ktml-background-size, -webkit-background-size), Opera (-o-background-size) und Firefox (-moz-background-size).

Déjà-vu.

Qapla'

[Beat]

Als vendor-specific extension zumindest Safari (-ktml-background-size, -webkit-background-size), Opera (-o-background-size) und Firefox (-moz-background-size).

halte ich _jetzt_noch_nicht_ für eine taugliche Option. Diese Eigenschaft muss schon fläschendeckend implementiert werden, solange CSS keine Eigenschaftentests kennt.

Optionen solten nur dann angewendet werden, wenn sie bereichern, nicht wenn sie definieren.

mfg Beat

[cygnus]

Hallo :)

halte ich _jetzt_noch_nicht_ für eine taugliche Option. Diese Eigenschaft muss schon fläschendeckend implementiert werden, solange CSS keine Eigenschaftentests kennt.

Was denn nun, fläschchendeckend oder flaschendeckend?

mfg
cygnus

[Beat]

halte ich _jetzt_noch_nicht_ für eine taugliche Option. Diese Eigenschaft muss schon fläschendeckend implementiert werden, solange CSS keine Eigenschaftentests kennt.

Was denn nun, fläschchendeckend oder flaschendeckend?

Egal! Auf jeden Fall Flash-abschreckend!

mfg Beat

[cygnus]

Hallo :)

Was denn nun, fläschchendeckend oder flaschendeckend?

Egal! Auf jeden Fall Flash-abschreckend!

Ja, so seid ihr Männer

mfg
cygnus

[Gunnar Bittersmann]

@@suit:

nuqneH

Firefox (-moz-background-size).

?? Der aktuelle (3.5.5) macht’s nicht. Hast du eine 3.6er Beta-Version am Start?

Qapla'

[suit]

?? Der aktuelle (3.5.5) macht’s nicht. Hast du eine 3.6er Beta-Version am Start?

Bei mir läuft hier grade ein 3.7a1 - sollte aber ab 3.6 unterstützt werden.

[Beat]

Ich habe eine Navigationsleiste mit einer ul und <a>s darin. Da die Größe der <a>s mit der Einheit em festgelegt ist, ändert si....

Spontan würde ich die Backgrounds den <li> Elementen zuweisen, und die <a> Elemente mit display:block sowieso strecken, um den mausaktiven Bereich zu vergrössern. Deine li Elemente brauchen dann eine zu den Hintergrund-Grafiken passende Grösse in pixel.

mfg beat

[Patrick Andrieu]

Hallo rantanplan55!

Meine Frage jetzt: Ist es nicht möglich, Hintergrundbilder zu verwenden für HTML-Elemente deren Größe mit em festgelegt wurde immer schön anzupassen ?

Du bist ein Kandidat für die Technik der Sliding Doors:

http://www.alistapart.com/articles/slidingdoors2/

Viele Grüße aus Frankfurt/Main,
Patrick