• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

drop up menu

Status
Für weitere Antworten geschlossen.
P

playthetracksof

Neues Mitglied
drop up menu bitte bitte bitte um hilfe, plage mich schon seit tagen

Hallo liebe Html-Heros,
da ich nicht viel erfahrung mit html habe und ich gerade dabei bin es zu lernen würde mir ein kleiner tipp einfach schon sehr viel weiterhelfen. ich plage mich nun echt schon seit tagen und es ist jetzt meine einzige hoffnung dieses forum.
ich habe mich an einem drop down menü angeleht und versucht es nach oben dropen zu lassen, doch jeglicher versuch scheiterte, da es nicht meinen wünschen entsprach.

ich bitte um einen kleinen tip, worauf ich achten sollte oder wie ich sowas besser gstalten kann.
danke und lg

hier der link zum menü:

Unbenanntes Dokument

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dropup</title>
<link rel="stylesheet" type="text/css" href="bitte.css" />
</head>

<body>


<div id="navcontainer" >

<ul id="navi">
      <li><a href="#" target="Fensterlein">HOME</a></li>
  
      <li style="width:150px;"> 
  
           <ul style="width:150px; height:24px;"> 
                  <a href="#">Tapeziererarbeiten</a> 
                  <a href="#">Böden</a>
                  <a href="#">Heimtextilien</a>
                  <a href="#">Tapeten</a>
                  <a href="#">Vorhangstangen</a>
                  <a href="#">Sonnenschutz</a>
                  <a href="#">Accessoires</a>
              </ul>
          
         <a href="#" target="Fensterlein"  >PRODUKTE & LEISTUNGEN</a>
   
     </li>
      <li style="width:150px; position:relative;"><a href="#" target="Fensterlein" >SERVICE & BERATUNG</a> </li>
      <li style="width:70px;"><a href="#" target="Fensterlein">ÜBER UNS</a>  </li>
       <li><a href="#" target="Fensterlein">PARTNER</a></li>
       <li><a href="#" target="Fensterlein">KONTAKT</a></li>
</ul>
</div>  
 

</body>
</html>
CSS:

Code: 
*{
margin:0;
padding:0;
}



html {
background-color:#faf6ed;

}


#navi{
list-style-type:none;
height:24px;
width:800px;    
}


#navi, #navi ul {
list-style-type:none;
margin-left:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:normal;  
}


#navi li {
width:60px;
float:left; 
}



#navi li ul{
display:none;
}

#navi li:hover ul{
display:block;
}





body {
 behavior:url("csshover.htc");
}



#navcontainer {
z-index:3;
margin-top:5px;
position:absolute;
position:relative;
top:360px;
padding-top:2px;
padding-left: 15px;
background:#FFFFFF;
height:24px;
width:600px; 

}
      
    
      
#navi li { 
border:0px solid #000;
margin:0 0px 0 0;
}


#navi ul li {
border:none;
margin:0;
 }
    
#navi a { 
font-weight:bold; 
display:block;
 padding:0.1em; 
}
 
#navi a:link, #navi a:visited {
 color:#9a914f; 
 background:#fff; 
 text-decoration:none; 
 
}
 
 
#navi a:active, #navi a:hover { 
color:#000;
background:#fff;
text-decoration:none;
height:15px; 
}
      
 a {
text-align: left;
 }
 
Zuletzt bearbeitet:
HTML: 
#navcontainer {
z-index:3;
margin-top:5px;
position:absolute;
position:relative;
top:360px;
padding-top:2px;
padding-left: 15px;
background:#FFFFFF;
height:24px;
width:600px; 

}
ich weiss nicht genau, aber ich denke man sollte sich entscheiden ob man absolute oder relative positionieren will.

lösch mal position:relative

dann würde ich nicht margin-top und top gemeinsam verwenden

lösch mal margin-top

und ersetze
HTML: 
<ul style="width:150px; height:24px;">
durch
HTML: 
<ul style="width:150px; height:0; position:absolute; top:-100px;">
ist nur ein Bastelei aber vielleicht hift es dir weiter
 
drop up menu, the final contdown...hoffentlich :)

hi,
danke für die info. habs gebrauchen können, jedoch geht jetzt mein menü immer wieder zu wenn ich drüber hovere.
vielleicht hat noch jemand einen tip für mich parat.
vielen dank.

link zum menü:
Unbenanntes Dokument




HTML: 
<body>

 <li><a href="#" target="Fensterlein"  >PRODUKTE & LEISTUNGEN</a>
<ul> <a href="#">Tapeziererarbeiten</a> 
                  <a href="#">Böden</a>
                  <a href="#">Heimtextilien</a>
                  <a href="#">Tapeten</a>
                  <a href="#">Vorhangstangen</a>
                  <a href="#">Sonnenschutz</a>
                  <a href="#">Accessoires</a>
                 </ul>
         
       </li> 
 
</body>

Code: 
*{
margin:0;
padding:0;
}



html {
background-color:#faf6ed;

}


ul, li {
list-style:none;
margin-left:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:normal; 
height:24px;
width:150px;     
}

li{
margin-top:300px;
position:absolute;
}


ul{
height:0;
position:absolute;
top:-100px;
left:10px;
width:80px;

}

li ul{
display:none;
}


li:hover ul{
display:block;
}



body {
 behavior:url("csshover.htc");
}
    

 a:link,  a:visited {
 color:#9a914f; 
 background:#fff; 
 text-decoration:none; 
 
}
 
 
a:active, a:hover { 
color:#000;
background:#fff;
text-decoration:none;
height:15px; 
}
      
 a {
text-align: left;
 }
 
es befindet sich ein kleiner spalt zwischen navi und drop"up"
wenn du die zeilenhöhe für die a tags im dropup festlegst kannst du die höhe des submenu berechnen und das top:-100px anpassen, das es direkt anschliesst und nicht wieder zupopt

ps: poste deinen code bitte mit zeilenumbruch
 
Ich hab's mit line-height und em angaben versucht.
Geht so in Firefox 2.0 Opera 9 und Konqueror.
Für IE6 brüchte man Javascript.

HTML: 
* {
    margin:0;
    padding:0;
  }


body {
    color : #4A4A4A;
    font-family : Verdana, Arial, 'Sans Serif';
    font-size: 100.1%;
  }


#navcontainer {
    font-size:0.75em;
  }
ul {
    margin-top : 200px;
    font-size : 0.9em;
    list-style : none;
  }
ul li {
    float : left;
    position : relative;
  }
ul li a {
    display : block;
    line-height : 3em;
    padding-right : 5px;
    padding-left : 5px;
  }
ul li ul {
    clear : both;
    float : none;
    margin-top : -1000em;
    position : absolute;
    top : 0em;
  }
ul li:hover ul {
    clear : both;
    float : none;
    margin-top : -10em;
    position : absolute;
    top : 0em;
  }
ul li ul li {
    display : block;
    float : none;
  }

ul li ul li a {
    display : block;
    float : none;
    line-height : 1.5em;
  }
HTML: 
<div id="navcontainer" >
  <ul id="navi">
  <li><a href="#" target="Fensterlein">HOME</a></li>
   <li style="">
    <a href="#" target="Fensterlein"  >PRODUKTE & LEISTUNGEN</a>
    <ul>
    <li><a href="#">Tapeziererarbeiten</a></li>
    <li><a href="#">Böden</a></li>
    <li><a href="#">Heimtextilien</a></li>
    <li><a href="#">Tapeten</a></li>
    <li><a href="#">Vorhangstangen</a></li>
    <li><a href="#">Sonnenschutz</a></li>
    <li><a href="#">Accessoires</a></li>
  </ul>
  </li>
 <li style="">
<a href="#" target="Fensterlein" >SERVICE & BERATUNG</a>
  </li>
  <li style="">
<a href="#" target="Fensterlein">ÜBER UNS</a>
  </li>
  <li><a href="#" target="Fensterlein">PARTNER</a></li>
  <li><a href="#" target="Fensterlein">KONTAKT</a></li>
  </ul>
  </div>
 
problem mit IE ...

da gibts ein file, welches das scripten erspart, es heißt csshover.htc, habs in deine lösung ins css eingebunden und es funktioniert.

danke für helfen

body { behavior:url("csshover.htc"); }
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben