zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden ul ul_hover überdecken

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.12.2010, 18:13
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard ul ul_hover überdecken

Hallo,

die gehoverten ul`s sollen die Bilder rechts überecken.
Gibt es dafür eine Möglichkeit? oder müsste ich die Hierarchie im html ändern?

Link

HTML

PHP-Code:
<div id="wrapper">
<
div id="cont_wrap">
    <
div id="head"></div>
        <
div id="navi">
            <
ul id="cssMenu">
                <
li><a href="#"><strong>Startseite</strong></a></li>
                <
li><a href="#"><strong>Landwirtschaft</strong></a></li>
                <
li><a href="#">- Angebote aus Landwirtschaft</a></li>
                <
li><a href="#"><strong>Forst</strong></a></li>
                <
li><a href="#">- Was bietet der Wald</a></li>
                <
li><a href="#"><strong>Gartenbau</strong></a></li>
                <
li><a href="#"><span>- Stauden</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                    <
ul class="underclass" style="width:178px;">
                        <
li><a href="#">Staudenliste</a></li>
                        <
li><a href="#">Gräser</a></li>
                        <
li><a href="#">Farne</a></li>
                        <
li><a href="#">Kräuter/Tee/Gewürze</a></li>
                    </
ul>
                <!--[if 
lte IE 6]></td></tr></table></a><![endif]--></li>
                <
li><a href="#">- Dachstauden</a></li>
                <
li><a href="#"><span>- Sumpfund Wasserpflanzen</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                    <
ul class="underclass" style="width:166px;">
                        <
li><a href="#"><strong>Wasserpflanzenliste</strong></a></li>
                    </
ul>
                <!--[if 
lte IE 6]></td></tr></table></a><![endif]--></li>
                <
li><a href="#"><span><strong>Seerosen</strong></span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                    <
ul class="underclass" style="width:126px;">
                        <
li><a href="#">Seerosenliste</a></li>
                    </
ul>
                <!--[if 
lte IE 6]></td></tr></table></a><![endif]--></li>
                <
li><a href="#"><strong>Repositionspflanzen</strong></a></li>
                <
li><a href="#"><strong>Nachwachsende Rohstoffe</strong></a></li>
                <
li><a href="#"><strong>Zubehör</strong></a></li>
                <
li><a href="#"><strong>Veranstaltungen</strong></a></li>
                <
li><a href="#"><strong>Praktika Job</strong></a></li>
                <
li><a href="#"><strong>Kauf Verkauf Pacht</strong></a></li>
                <
li><a href="#"><strong>Kontakt</strong></a></li>
                <
li><a href="#"><strong>Anfahrt</strong></a></li>
                <
li><a href="#"><strong>Gästebuch</strong></a></li>
                <
li><a href="#"><strong>Partnerlinks</strong></a></li>
                <
li><a href="#"><strong>Impressum</strong></a></li>
            </
ul>
        </
div>
    <
div>
    <
h1>Startseite Land Forst Gartenbau Laubusch</h1>
    <
p>Hier entsteht der Text über die Startseite der "Land - Forst -Gartenbau" aus Laubusch <br /><br /> 
    
Hier entsteht der Text über die Startseite der "Land - Forst -Gartenbau" aus Laubusch <br /><br />
    </
p>
    <
div id="rahmen">
        <
class="start" href="#">
            <
img id="aktprojekt" onmouseover="new Effect.Opacity( 'aktprojekt', {duration:0.1, from:0.7, to:1.0} );" onmouseout="new Effect.Opacity( 'aktprojekt', {duration:0.9, from:1.0, to:0.7} );" height="250" alt="Aktuelle PORSCHE Restaurationen" hspace="4" width="172" border="0" src="./1.jpg" />
        </
a>
        <
class="start" href="#">
            <
img id="beratung" onmouseover="new Effect.Opacity( 'beratung', {duration:0.1, from:0.7, to:1.0} );" onmouseout="new Effect.Opacity( 'beratung', {duration:0.9, from:1.0, to:0.7} );" height="250" alt="Qualifizierte Beratung rund um Kauf, Restauration, Wartung und Pflege" hspace="4" width="172" border="0" src="./2.jpg" />
        </
a>
        <
class="start" href="#">
            <
img id="reparatur" onmouseover="new Effect.Opacity( 'reparatur', {duration:0.1, from:0.7, to:1.0} );" onmouseout="new Effect.Opacity( 'reparatur', {duration:0.9, from:1.0, to:0.7} );" height="250" alt="Fachgerechte Reparatur, Wartung und Pflege Ihres Porsche Klassikers" hspace="4" width="172" border="0" src="./3.jpg" />
        </
a>
        <
class="start" href="#">
            <
img id="strahl" onmouseover="new Effect.Opacity( 'strahl', {duration:0.1, from:0.7, to:1.0} );" onmouseout="new Effect.Opacity( 'strahl', {duration:0.9, from:1.0, to:0.7} );" height="250" alt="Strahlarbeiten jeglicher Art zum Beispiel Sandstrahlen, Glasperlenstrahlen, Kunststoffstrahlen, Nussschalenstrahlen" hspace="4" width="172" border="0" src="./4.jpg" />
        </
a>
    </
div
    </
div>
</
div>
</
div>
<
div id="bot_nav">
    <
ul id="ul1">
        <
li><a href="#">Link</a></li>
        <
li><a href="#">Link</a></li>
        <
li><a href="#">Link</a></li>
        <
li><a href="#">Link</a></li>
        <
li><a href="#">Link</a></li>
    </
ul>
    <
ul>
        <
li><a href="#">Link</a></li>
        <
li><a href="#">Link</a></li>
        <
li><a href="#">Link</a></li>
        <
li><a href="#">Link</a></li>
        <
li><a href="#">Link</a></li>
    </
ul>
    <
ul>
        <
li><a href="#">Link</a></li>
        <
li><a href="#">Link</a></li>
        <
li><a href="#">Link</a></li>
        <
li><a href="#">Link</a></li>
        <
li><a href="#">Link</a></li>
    </
ul>
    <
ul>
        <
li><a href="#">Link</a></li>
        <
li><a href="#">Link</a></li>
        <
li><a href="#">Link</a></li>
        <
li><a href="#">Link</a></li>
        <
li><a href="#">Link</a></li>
    </
ul>
</
div
CSS

PHP-Code:
    * {
        
margin:0;
        
padding:0;
    }
    
htmlbody {
        
height:100%;
         
background:#e7ddba url("img/stripes_top.jpg") repeat-x 0px 0px;
         
font-family:Arial;
         
font-size:100%;
         
text-align:center;
    }
    
#wrapper {
      
position:relativ;
       
min-height:100%;
       
background:url("img/stripes_bot.jpg"repeat-x left bottom;         
    }
    
#head    {
            
background-image:url(img/head.jpg);
            
background-repeat:no-repeat;
            
width:1000px;
            
height:177px;
            
margin:0 auto;
    }
                                            
                                            
                                            
                                            
                                                    
/*NAVIGATION*/
                                            
    #navi    {                
            
float:left;
            
margin-top:80px;
            
text-align:left;
            
width:206px;
            
height:540px;
    }
    
ul#cssMenu ul{display:none}
ul#cssMenu li:hover>*{display:block}
ul#cssMenu li:hover{position:relative;}
ul#cssMenu ul{
    
positionabsolute;left:98%;top:-1px;}
ul#cssMenu ul ul{
    
positionabsolute;left:98%;top:-2px;}
ul#cssMenu,ul#cssMenu ul{
    
margin:0px;list-style:none;padding:1px 1px 0;background-color:#FFFFFF;border-width:1px;border-style:solid;border-color:#999999;}
ul#cssMenu table {border-collapse:collapse}
ul#cssMenu {
    
display:block;font-size:0;zoom:1;width:200px;floatleft;}
ul#cssMenu ul{
    //width:193px;padding:1px 1px 0;}
ul#cssMenu li{
    
display:block;zoom:1;margin:0 0 1px;font-size:0;}
ul#cssMenu a:active, ul#cssMenu a:focus {outline-style:none}
ul#cssMenu a{
    
display:block;vertical-align:middle;zoom:1;background-color:#f7f4e7;border-width:0px;border-style:none;border-color:#FFFFFF;text-align:left;text-decoration:none;padding:3px;_padding-left:0;font:normal 13px Trebuchet MS, Tahoma, Arial;color: #054d03;text-decoration:none;cursor:auto;}
ul#cssMenu ul li {float:none;}
ul#cssMenu ul a{
    
text-align:left;white-space:nowrap;}
ul#cssMenu li:hover>a{
    
background-color:#076007;border-color:#FFFFFF;border-style:none;font:normal 13px Trebuchet MS, Tahoma, Arial;color: #FFFFFF;text-decoration:none;}
ul#cssMenu li a:hover{
    
_position:relative;background-color:#076007;border-color:#FFFFFF;border-style:none;font:normal 13px Trebuchet MS, Tahoma, Arial;color: #FFFFFF;text-decoration:none;}
ul#cssMenu img{
    
bordernone;vertical-alignmiddle;margin-right:6px;width:24px;height:24px;}
ul#cssMenu ul img{
    
width:10px;height:15px;}
ul#cssMenu img.over{display:none}
ul#cssMenu li:hover > a img.def  {display:none}
ul#cssMenu li:hover > a img.over {display:inline}
ul#cssMenu a:hover img.over,ul#cssMenu a:hover ul img.def,ul#cssMenu a:hover a:hover img.over{display:inline}
ul#cssMenu a:hover img.def,ul#cssMenu a:hover ul img.over,ul#cssMenu a:hover a:hover img.def{display:none}
ul#cssMenu a:hover ul{display:block}
ul#cssMenu span{
    
display:block;overflow:visible;background-image:url(pfeil.png);background-position:right center;background-repeatno-repeat;padding-right:16px;}
ul#cssMenu li:hover>a>span{background-image:url(pfeil_hover.png);}
ul#cssMenu a:hover span{_background-image:url(pfeil_hover.png)}
.underclass    {cursor:auto;}
                                            
                                            
                                            
    
li    {
        list-
style:none;
    }
    
a        {
            
text-decoration:none;
            
color:#165a29;
    
}
    
a:hover    {
            
color:#c7232b;
    
}
    
a.start img {
    
bordernone;
    
backgroundnone;
    
filter:alpha(opacity=70);
    -
moz-opacity0.7;
    
khtml-opacity0.7;
    
opacity0.7;
}
    
#cont_wrap    {
                
margin:0 auto;
                
width:1000px;    
                
padding-bottom:180px;                
    }
    
#cont_wrap:after {
        
content:".";
        
display:block;
        
clear:both;
        
font-size:0;
        
overflow:hidden;
        
height:.1px;
        
visibility:hidden;
    }
    
#cont_wrap h1    {
                
color:#951b1b;
                
margin:30px 0;
    }
    
#cont_wrap p    {
                
text-align:left;
                
margin:0 0 0 250px;
                
width:600px;
    }
    
#rahmen    {
            
margin:0px 0 0 20px;
    }
    
#bot_nav    {text-align:center;
            
width:1000px;
            
height:130px;
            
margin:-135px auto 0;
    }
    
#bot_nav    #ul1        {
                        
float:left;
                        
margin:0 0 0 30px;
                        
width:150px;
            }
    
#bot_nav    ul    {float:left;
            
margin0 0 0 100px;
            
width:150px;
    }
    
#bot_nav    a    {
            
color:white;
    }
    
#bot_nav    a:hover    {
            
color:red;
    } 
Vielen Dank.
__________________
Die Erinnerung ist das einzige Paradies aus dem wir nicht vertrieben werden können.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.12.2010, 18:24
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

z-index für das pos. Element (der Wert 1 reicht).

Und korrigiere mal Deine fehlerhaften IE-CCs.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.12.2010, 18:32
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Ah super vielen Dank !

Um die CCS kümmere ich mich noch.
__________________
Die Erinnerung ist das einzige Paradies aus dem wir nicht vertrieben werden können.
Mit Zitat antworten
  #4 (permalink)  
Alt 22.12.2010, 18:56
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Und evtl. auch mal um das fehlende Wort "nicht" in Deiner Signatur
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #5 (permalink)  
Alt 22.12.2010, 19:05
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Oh
__________________
Die Erinnerung ist das einzige Paradies aus dem wir nicht vertrieben werden können.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
bild nicht überdecken rafa (X)HTML 2 17.10.2009 14:45
Floats verschwinden im nichts, Fließer überdecken Floats. nick CSS 5 09.02.2008 14:34


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:41 Uhr.