Button-Optik Probleme

[Twilo]

Hallo,

sorry, mir fällt kein besserer Betreff ein

ich bin hier schon etwas am verzweifeln...

ich habe folgende Grafik

die Menüpunkte sollen ungefähr so aussehen
für mein Menü verwende ich eine Liste

wie muss ich das angehen, damit das ganze noch gut aussieht, wenn man die Schriftgrösse verändert

ich habe das bis jetzt so probiert (zum testen hab ich inline-Style verwendet), dafür hab ich die Grafik auseinander geschnitten

<ul id="menu">  
  <li style="position: relative; height: 2em; width: 10em; background: #b2ecff url(/Bilder/startseite_rechts.gif) repeat-y right center;">  
    <div style="z-index: 5;background:url(/Bilder/startseite_links.gif) left bottom no-repeat; width: 20px; height: 2em;position: absolute; top: 0; left: 0;"></div>  
    <div style="width: 10em; height: 16px; background:url(/Bilder/startseite_oben.gif) right top no-repeat; position: absolute; top: 0; right: 0;"></div>  
    <div style="z-index:100; line-height: 1.7em;position: absolute; top: 0; left: 25px;"><a href="#">Startseite</a></div>  
    <div style="width: 10em; height: 16px;background:url(/Bilder/startseite_unten.gif) right bottom no-repeat; position: absolute; bottom: 0; right: 0;"></div>  
  </li>  
  <li>...</li>  
</ul>  

im Internet Explorer und bei Opera, bei bestimmten Vergrösserungen, wird die  startseite_unten.gif Grafik und ganz unten angezeigt, sondern etwas höher

warum die Browser das machen kann ich mir nicht erklären :-(
Firefox und Konqueror stellen es mir so dar, wie ich es mit vorstelle

der Code für diese Ausgabe finde ich etwas overhead

gibt es dafür eine bessere Lösung?

mfg
Twilo

[Zeromancer]

Hallo,

ich habe folgende Grafik

ohne Rundung würde mir folgendes einfallen:

• unteren Rahmen in der Grafik weglassen und diesen durch CSS ersetzen. Die ganze Grafik etwas größer konzipieren, dann hast du Reserven für das Strecken.

Beispielhaft:

  
li.navi a {  
  width:7em;  
  display:block;  
  background:#fff url('hintergrund.gif') no-repeat left top;  
  border-bottom:solid 3px #09f;  
}  

Mit Rundung:

• Grafik größer machen und zerschneiden
• Rundung dem li-Element als Hintergrund zuweisen (no-repeat center right);
• Rest dem a-Element als Hintergrund zuweisen (no-repeat center right) und hoffen, dass es bündig mit der Rundung abschließt
• Unteren Rahmen der Grafik durch CSS (border-bottom) ersetzen.

************************************************************
Alles nur Vermutungen, aber einen Versuch wäre es doch wert?
************************************************************

Mit freundlichen Grüßen,
André

[Twilo]

Hallo,

• Rundung dem li-Element als Hintergrund zuweisen (no-repeat center right);

dann bleibt doch die Rundung immer gleich, oder hab ich ein Denkfehler?

• Rest dem a-Element als Hintergrund zuweisen (no-repeat center right) und hoffen, dass es bündig mit der Rundung abschließt

was meinst du jetzt mit Rest?

• Unteren Rahmen der Grafik durch CSS (border-bottom) ersetzen.

du meinst den linken Border, oder?

ps. da hab ich mir ja was vorgenommen ^^

mfg
Twilo

[Marian]

Hi twilo,

mach doch bei jedem link:
<div class="link_before"></div><a href="www.xy.de" class="link"><div class="link_after">

und dann im css:
[code lang=css]
.link_before {background-color:dunkeltürkis; height:bildhoehe}
.link        {background-image:url(nurdiemitte.gif); height:bildhoehe; background-repeat:no-repeat}
.link_after  {background-image:url(kurve.gif); height:bildhoehe; background-repeat:no-repeat; width:bogenbreite}

ich mach absichtlich kein border-top:dunkeltürkis solid 2px und border-bottom:genauso, weil das ja doch nicht immer gescheit aussieht. und kein link:before, weil das auch nicht jeder browser (zb IE) kann. border-left:dunkeltürkis solid 20px;

Gruß, Marian

[Marian]

[blabla]

ich mach absichtlich kein border-top:dunkeltürkis solid 2px und border-bottom:genauso, weil das ja doch nicht immer gescheit aussieht. und kein link:before, weil das auch nicht jeder browser (zb IE) kann. border-left:dunkeltürkis solid 20px;

hab das wohl zu früh abgeschickt, wollte eigentlich schreiben, dass man border-left:dunkeltürkis solid 20px am ehesten noch überlegen kann.

Gruß, Marian