Kleines Problem: Hintergrund anzeigen

lisali

Erfahrenes Mitglied
Hallo,

ich möchte ein Menü bauen, dass teiltransparent ist. Also, es hat jeweils oben links+rechts abgerundete Ecken und unten links+rechts. Davon ist der Hintergrund transparent. Also sieht man quasi alles hinter diesen Abrundungen (oder soll man sehen).

Jetzt habe ich das zuerst irgendwie so gebaut, dass ich das ganze in ein <div> gemacht habe und diesem die background-Datei zugewiesen habe. Aber weil diese Ecken eben abgerundet und transparent sind, könnte man denken, dass sie es nicht sind, wegen dem Menü-Hintergrund, der vertikal verläuft.

Ich habe nun folgendes:

HTML:
    <div id="menu" style="clear:left; height:7px; background: url(img/menu.png) no-repeat">
    	<ul style="background:url(img/menuBG.png) repeat-y">
...

Ich möchte diese 7-Pixelhöhe anzeigen, weil das in der menu.png-Spritedatei diese Menü-Ecken darstellt.
Nur geht das leider nicht, wenn kein Textinhalt nach dem <div> steht.
Deswegen wird das ganz ausgeblendet und ich sehe direkt den Anfang von dem <ul>, also menuBG.png.
Was muss ich machen, damit er es anzeigt? Ich habe auch schon min-height: 7px probiert... ging aber nicht.
 
Was hälst du von einem oberen Innenabstand anstelle der Höhendefinition?

HTML:
<div id="menu" style="clear:left; padding-top:7px; background: url(img/menu.png) no-repeat">
    	<ul style="margin:0; padding:0; background:url(img/menuBG.png) repeat-y">
 
Zurück