Hovereffekt anpassen ul li

[Fishmasta]

Nabend,
in DIESEM Thread wurde mir geraten eine ul für meine Navi zu verwenden.
Das habe ich nun getan, das Problem ist aber immer noch das selbe.

Es geht um DIESE SEITE.

Die css-Datei sieht im Moment wie folgt aus:

@charset "utf-8";

.main_menue li {
    list-style-type:none;
    position:relative;
    margin-left:4px;
    float:left;
}

.main_menue li:hover .hover {
    opacity:1;
}

.main_menue li img {
    border:solid 3px #FFF;
}

.hover {
    opacity:0;
    transition:opacity 0.25s linear;        
    position:absolute;
    background-color:rgba(0,0,0,0.7);
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

.hover p {
    font-family:Arial;
    font-size:12pt;
    font-weight:bold;
    text-align:center;
    color:#fff;
}

Mich stören jetzt die folgenden Sachen:
1) der Hovereffekt überlagert den Rahmen. Der Rahmen soll aber nicht überlagert werden.
2) der Hovereffekt geht an der Unterseite über die Navi hinaus. Das soll auch nicht sein.
3) der Text ist vertikal nicht in der Mitte. Das sollte aber sein.

Wie kann ich diese Fehler beheben?

Hier noch der Code zur Seite:

<ul class="main_menue">
    <li>
        <img src="bilder/main_menue/schauspieler.jpg" width="266" height="400" />
        <div class="hover">
            <p>&nbsp;Schauspieler&nbsp;</p>
        </div>
    </li>    
    <li>
        <img src="bilder/main_menue/locations.jpg" width="266" height="195" />
        <div class="hover">
            <p>&nbsp;Locations&nbsp;</p>
        </div>
    </li>
    <li>
        <img src="bilder/main_menue/autos.jpg" width="266" height="194" />
        <div class="hover">
            <p>&nbsp;Autos&nbsp;</p>
        </div>
    </li>
    <li>
        <img src="bilder/main_menue/tiere.jpg" width="542" height="210">
        <div class="hover">
            <p>&nbsp;Tiere&nbsp;</p>
        </div>
    </li>
</ul>

 

[bodil]

Na, das sieht nicht mehr nach einer Navigation im klassischen Sinne aus ... aber gut!
zu 1) du könntest dem Div den gleichen Rand geben, wie den Bildern ... du kannst aber dein Div, wenn du es eh absolut positionierst übers CSS mitteilen, wieviel Rand es lassen soll:

     bottom:3px;
     left:3px;
     right:3px;
     top:3px;

Die Breiten und Höhenangaben schmeiß hierzu raus.
(Das funktioniert NICHT im IE6!)

zu 2) ja, rätselhaft. Da ich selbst nicht oft Divs in Listenelemente packe, weiß ich dafür auch keine Lösung. Beim Einsatz von Bilder kann es helfen, alle Leerzeichen davor und danach zu entfernen, damit der Browser für diese Leerzeichen im umgebenden Objekt (hier: die Listenelemente) keinen Platz vorsieht.
Eine nicht so elegante Lösung (bei der man sich das Problem mal auf verschiedenen Browsern anschauen müsste) wäre eine Berücksichtigung im bottom, also ein bottom:8px; o.ä.

zu 3) würde ich ein padding vergeben, allerdings ist das schwierig, wenn die Bildgröße nicht vorhersehbar ist. Alternativ:

.hover p {
    ...
    bottom: 50%;
    height: 0;
    position: absolute;
    width:100%
}