Drop-Down-Menü funktioniert nicht, wie es sollte

Efchen · 6 Februar 2009

Bernhard schrieb:
Browsershots hilft hier nur bedingt, da man damit das Ausklappen nicht testen kann...

Dann klappt man das halt im Code vorher aus und entfernt das display:none; Das ist wohl das einfachste :-)

Keyno · 6 Februar 2009

Kann mir noch jemand bei meinem Template helfen? Sonst versuch ich mal n andres :)

Keyno · 8 Februar 2009

Alsoo, ich hab mir jetzt ein andres Template von freecsstemplates.org geholt.
Mit dem ging's auch schon vieeel einfacher, ein Drop-Down-Menü einzubauen, der IE spackt aber noch ein bisschen rum ;ugl

Ich habe das 'mal hochgeladen, hier noch'mal der Link: Finanz- Beratungs- und Vermittlungs GmbH - Startseite

Jetzt wotte ich es aber noch so haben, dass die die ausklappen so groß sein sollen, wie das, von dem sie ausgeklappt werden (hoffe das ist verständlich :)).
Wer den HTML-Code nicht auslesen kann/möchte, stelle ich den 'mal noch hier 'rein:

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Professional
Description: A two-column, fixed-width design with dark color scheme background.
Version    : 1.0
Released   : 20081230

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Finanz- Beratungs- und Vermittlungs GmbH - Startseite</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>

<div id="wrapper">
<div id="header">
    <div id="logo">
        <h1><a href="index.html">Finanz- Beratungs- und Vermittlungs GmbH </a></h1>
        <p>Wechseln zu <a href="kindex.html">Kimmig Haus GmbH</a></p>
    </div>
    <div id="menu">
        <ul id="menu">
            <li class="active"><a href="#">Startseite</a></li>
            <li>Das Unternehmen
                <ul>
                  <li><a href="">Geschichte</a></li>
                  <li><a href="">Mitarbeiter</a></li>
                  <li><a href="">Partner</a></li>
                </ul>
            </li>
            <li>Produkte
                <ul>
                  <li><a href="">Baufinanzierung</a></li>
                  <li><a href="">Versicherung</a></li>
                </ul>
            </li>
            <li>Termine
                <ul>
                  <li><a href="">Anmeldung</a></li>
                  <li><a href="">Seminare</a></li>
                </ul>
            </li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </div>
</div>
<div id="page">
    <div id="content">
        <div class="post">
            <h1 class="title">Willkommen</h1>
            <div class="entry">
                <p>Jeder bezahlt in seinem Leben ein Haus, leider nicht das <b>Eigene</b>.<br />
                Diese Pr&auml;sentation zeigt Ihnen wie Sie Ihre W&uuml;nsche nach Wohneigentum erf&uuml;llen k&ouml;nnen.<br />
                <extra><a href="./immobilienerwerb/index.html">Pr&auml;sentation starten</a></extra></p>
            </div>
        </div>
        <div class="post">
            <h1 class="title">Forward-Darlehen</h1>
            <div class="entry">
                <p>Auch f&uuml;r die Weiterfinanzierung Ihrer Immobilie bieten wir Ihnen eine M&ouml;glichkeit, das <extra2><a href="./forwarddarlehen/index.html">Forward-Darlehen</a></extra2></p>
            </div>
        </div>
        <div class="post">
            <h1 class="title">Immobilienrechner</h1>
            <div class="entry" style="text-align:center;">
                <h3><a href="./immobilienerwerb/immorechner.xls">Hier k&ouml;nnen Sie den FBV Immobilienrechner downloaden!</a></h3>
                <a href="./immobilienerwerb/immorechner.xls"><img src="./immobilienerwerb/immorechner.JPG" alt="FBV Immobilienrechner" /></a>
            </div>
        </div>
    </div>
</div>
</div>

<div id="footer">
    <p>&copy; 2009 <strong>Finanz- Beratungs- und Vermittlungs GmbH</strong></p>
</div>
</body>
</html>

CSS:

Code:

body {margin: 0px;padding: 0px;background: #242323;text-align: justify;font: 13px Arial, Helvetica, sans-serif;color: #444444;}
h1, h2 {margin-top: 0px;font-weight: normal;color: #FFFFFF;}
h1 {font-size: 2.4em;}
h2 {font-size: 1.8em;}
extra {font-size: 1.4em; font-weight: bold;text-align:center;}
extra2 {font-size: 1.1em; font-weight: bold;}
p, ol, ul {margin-bottom: 1.8em;line-height: 160%;}
a {color: #000000;}
a:hover {text-decoration: none;color: #FF0000;}
a img {border-color: #000000;}
a:hover img {border-color: #FFFFFF;}
#wrapper {width: 900px;margin: 0 auto;border: 10px solid #FFFFFF;}
#header {width: 900px;height: 100px;}
#header a {text-decoration: none;color: #FFFFFF;}
#logo {padding: 10px 0px 10px 20px;}
#logo h1, #logo p {margin: 0px;line-height: normal;font-weight: normal;color: #FFFFFF;}
#menu {color: #FFFFFF;}
#menu ul {margin: 0px;padding: 0px;list-style: none;line-height: normal;}
#menu li {margin: 0px;background:#242323;cursor: default;width: auto;padding: 6px 20px;float:left;}
#menu li:hover {text-decoration: none;background: #404040;}
#menu .active {background: #404040;}
#menu, #menu ul {list-style-type:none;margin:0;padding:0;}
#menu li ul {display:none;}
#menu li:hover ul {display:block;position:absolute;}
#menu ul li {position:relative;display:block !important;display:inline;}
#page {padding: 10px 0px 0px 0px;background: #FFFFFF;}
.post .title {margin: 0px;background: #444444;padding: 7px 15px;font-size: 1.4em;font-weight: bold;}
.post .entry {padding: 0 20px;}
#footer {clear: both;width: 900px;height: 50px;margin: 0px auto 30px auto;color: #FFFFFF;}
#footer p {margin: 0px;padding: 19px 0px 0px 0px;text-align: center;line-height: normal;font-size: smaller;}
#footer a {color: #FFFFFF;}

Wäre nett, wenn mir noch jemand helfen kann 8).

MfG Keyno

Bernhard · 8 Februar 2009

Hallo Keyno,

Keyno schrieb:
Alsoo, ich hab mir jetzt ein andres Template von freecsstemplates.org geholt.
Mit dem ging's auch schon vieeel einfacher, ein Drop-Down-Menü einzubauen, der IE spackt aber noch ein bisschen rum ;ugl

Ich habe das 'mal hochgeladen, hier noch'mal der Link: Finanz- Beratungs- und Vermittlungs GmbH - Startseite

Jetzt wotte ich es aber noch so haben, dass die die ausklappen so groß sein sollen, wie das, von dem sie ausgeklappt werden (hoffe das ist verständlich :)).
Wer den HTML-Code nicht auslesen kann/möchte, stelle ich den 'mal noch hier 'rein:

HTML:

Code:

<div id="menu"> <ul id="menu"> <extra><a href="./immobilienerwerb/index.html">Präsentation starten</a></extra> <extra2><a href="./forwarddarlehen/index.html">Forward-Darlehen</a></extra2>

Als erstes solltest Du eine ID nur einmal vergeben.
In diesem Fall erschwert der Fehler auch die Antwort etwas.

<extra> und <extra2> ist IMHO kein valides HTML, tut aber hier nichts zur Sache...

Keyno schrieb:
CSS:
#menu {color: #FFFFFF;}
#menu ul {margin: 0px;padding: 0px;list-style: none;line-height: normal;}
#menu li {margin: 0px;background:#242323;cursor: default;width: auto;padding: 6px 20px;float:left;}
#menu li:hover {text-decoration: none;background: #404040;}
#menu .active {background: #404040;}
#menu, #menu ul {list-style-type:none;margin:0;padding:0;}
#menu li ul {display:none;}
#menu li:hover ul {display:block;position:absolute;}
#menu ul li {position:relative;display:block !important;display:inline;}
[/code]Wäre nett, wenn mir noch jemand helfen kann 8).

MfG Keyno

Je nachdem, wie Du Dich bei der Beseitigung der doppelten ID entscheidest,
muss es entweder #menu ul li heißen, oder ul#menu li.

Da Du dem li als Breite auto gegeben hast, kannst Du dem li ul li keine Breite in
Abhängigkeit des Listenelemts geben.

Daher müsstest Du entweder dem li eine feste Breite geben (in em), die Du dann
auch dem li ul li geben könntest. Über entsprechende Klassen könntest Du das
auch für jedes li individuell machen...
Oder Du gibst einfach allen li ul li eine einheitliche Breite.

Grüße
Bernhard

Efchen schrieb:
Dann klappt man das halt im Code vorher aus und entfernt das display:none; Das ist wohl das einfachste :-)

Nee, das Problem ist, dass der IE :hover nur für <a href=""> kennt. Das darf man aber nicht verschachteln.
Daher ist eben sowas wie Whatever:hover erforderlich - und das muss man unbedingt testen.

Keyno · 8 Februar 2009

Ich habe jetzt die Breitenangabe (width) auf genau 110px gestellt statt auf auto. Dazu habe ich einfach bei dem ul id="menu" rausgenommen, bringt wohl so wie so nichts

Das mit den extra's ändere ich später einfach mit h3. Du hast wohl mit w3c gecheckt, na? Viele Errors gibt's ja auch nicht 8). Später schreibe ich auch noch Vaild HTML | CSS dazu :grin:.

Aber, was ich wotte, wäre, dass es 1. im IE so aussieht wie im FF ;) und 2. dass sich das hover-Menü nicht bei der Schrift, sondern schon da, wo sich der Hintergrund ändert, ausklappt.
Könnte man das mit padding hinbekommen?
Im IE brauche ich glaube ich so etwas wie Whatever:hover, was ich bereits von der Seite, von dem ich das Drop-Down Menü Script habe, schon kenne.

Meine aktuelle Seite:
HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Professional
Description: A two-column, fixed-width design with dark color scheme background.
Version    : 1.0
Released   : 20081230

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Finanz- Beratungs- und Vermittlungs GmbH - Startseite</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <!--[if lte IE 6]>
      <style type="text/css" media="screen">#menu { behavior:url("csshover.htc"); }</style>
    <![endif]-->
</head>
<body>

<div id="wrapper">
<div id="header">
    <div id="logo">
        <h1><a href="index.html">Finanz- Beratungs- und Vermittlungs GmbH </a></h1>
        <p>Wechseln zu <a href="kindex.html">Kimmig Haus GmbH</a></p>
    </div>
    <div id="menu">
        <ul>
            <li class="active"><a href="#">Startseite</a></li>
            <li>Das Unternehmen
                <ul>
                  <li><a href="">Geschichte</a></li>
                  <li><a href="">Mitarbeiter</a></li>
                  <li><a href="">Partner</a></li>
                </ul>
            </li>
            <li>Produkte
                <ul>
                  <li><a href="">Baufinanzierung</a></li>
                  <li><a href="">Versicherung</a></li>
                </ul>
            </li>
            <li>Termine
                <ul>
                  <li><a href="">Anmeldung</a></li>
                  <li><a href="">Seminare</a></li>
                </ul>
            </li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </div>
</div>
<div id="page">
    <div id="content">
        <div class="post">
            <h1 class="title">Willkommen</h1>
            <div class="entry">
                <p>Jeder bezahlt in seinem Leben ein Haus, leider nicht das <b>Eigene</b>.<br />
                Diese Pr&auml;sentation zeigt Ihnen wie Sie Ihre W&uuml;nsche nach Wohneigentum erf&uuml;llen k&ouml;nnen.<br />
                <extra><a href="./immobilienerwerb/index.html">Pr&auml;sentation starten</a></extra></p>
            </div>
        </div>
        <div class="post">
            <h1 class="title">Forward-Darlehen</h1>
            <div class="entry">
                <p>Auch f&uuml;r die Weiterfinanzierung Ihrer Immobilie bieten wir Ihnen eine M&ouml;glichkeit, das <extra2><a href="./forwarddarlehen/index.html">Forward-Darlehen</a></extra2></p>
            </div>
        </div>
        <div class="post">
            <h1 class="title">Immobilienrechner</h1>
            <div class="entry" style="text-align:center;">
                <h3><a href="./immobilienerwerb/immorechner.xls">Hier k&ouml;nnen Sie den FBV Immobilienrechner downloaden!</a></h3>
                <a href="./immobilienerwerb/immorechner.xls"><img src="./immobilienerwerb/immorechner.JPG" alt="FBV Immobilienrechner" /></a>
            </div>
        </div>
    </div>
</div>
</div>

<div id="footer">
    <p>&copy; 2009 <strong>Finanz- Beratungs- und Vermittlungs GmbH</strong></p>
</div>
</body>
</html>

CSS:

Code:

body {margin: 0px;padding: 0px;background: #242323;text-align: justify;font: 13px Arial, Helvetica, sans-serif;color: #444444;}
h1, h2 {margin-top: 0px;font-weight: normal;color: #FFFFFF;}
h1 {font-size: 2.4em;}
h2 {font-size: 1.8em;}
extra {font-size: 1.4em; font-weight: bold;text-align:center;}
extra2 {font-size: 1.1em; font-weight: bold;}
p, ol, ul {margin-bottom: 1.8em;line-height: 160%;}
a {color: #000000;}
a:hover {text-decoration: none;color: #FF0000;}
a img {border-color: #000000;}
a:hover img {border-color: #FFFFFF;}
#wrapper {width: 900px;margin: 0 auto;border: 10px solid #FFFFFF;}
#header {width: 900px;height: 100px;}
#header a {text-decoration: none;color: #FFFFFF;}
#logo {padding: 10px 0px 10px 20px;}
#logo h1, #logo p {margin: 0px;line-height: normal;font-weight: normal;color: #FFFFFF;}
#menu {color: #FFFFFF;}
#menu ul {margin: 0px;padding: 0px;list-style: none;line-height: normal;}
#menu li {margin: 0px;background:#242323;cursor: default;width: 110px;padding: 6px 20px;float:left;}
#menu li:hover {text-decoration: none;background: #404040;}
#menu .active {background: #404040;}
#menu, #menu ul {list-style-type:none;margin:0;padding:0;}
#menu li ul {display:none;}
#menu li:hover ul {display:block;position:absolute;}
#menu ul li {position:relative;display:block !important;display:inline;}
#page {padding: 10px 0px 0px 0px;background: #FFFFFF;}
.post .title {margin: 0px;background: #444444;padding: 7px 15px;font-size: 1.4em;font-weight: bold;}
.post .entry {padding: 0 20px;}
#footer {clear: both;width: 900px;height: 50px;margin: 0px auto 30px auto;color: #FFFFFF;}
#footer p {margin: 0px;padding: 19px 0px 0px 0px;text-align: center;line-height: normal;font-size: smaller;}
#footer a {color: #FFFFFF;}

MfG Keyno

Bernhard · 8 Februar 2009

Keyno schrieb:
Ich habe jetzt die Breitenangabe (width) auf genau 110px gestellt statt auf auto. Dazu habe ich einfach bei dem ul id="menu" rausgenommen, bringt wohl so wie so nichts

Bei einer festen Breitenangabe in px musst Du nur aufpassen, was passiert, wenn
der Besucher Deiner Seiten den Schriftgrad vergrößert, daher ist em besser...

Keyno schrieb:
Das mit den extra's ändere ich später einfach mit h3. Du hast wohl mit w3c gecheckt, na? Viele Errors gibt's ja auch nicht 8). Später schreibe ich auch noch Vaild HTML | CSS dazu :grin:.

Klar, das ist immer das Allererste, wenn es irgendwo Darstellungsfehler gibt...

Keyno schrieb:
Aber, was ich wotte, wäre, dass es 1. im IE so aussieht wie im FF ;) und 2. dass sich das hover-Menü nicht bei der Schrift, sondern schon da, wo sich der Hintergrund ändert, ausklappt.
Könnte man das mit padding hinbekommen?
Im IE brauche ich glaube ich so etwas wie Whatever:hover, was ich bereits von der Seite, von dem ich das Drop-Down Menü Script habe, schon kenne.

Meine aktuelle Seite:
CSS:

Code:

#menu ul {margin: 0px;padding: 0px;list-style: none;line-height: normal;} #menu, #menu ul {list-style-type:none;margin:0;padding:0;}

Da könntest Du auch noch aufräumen: #menu ul ist doppelt...

Keyno schrieb:
Code:

#menu li {margin: 0px;background:#242323;cursor: default;width: 110px;padding: 6px 20px;float:left;}

MfG Keyno

Du gibst dem li 20 px padding, daher musst Du dem li ul diese 20 px wieder abziehen:

Code:

#menu li ul {margin-left:-20px;}

Grüße
Bernhard

Keyno · 8 Februar 2009

Juhu, hab' es so hinbekommen, dass es perfekt im FF 3 aussieht, doch was ist mit den anderen Browsern? :(
Beim IE ist es am falscher Ort, wo es ausklappt. Bei anderen Browsern denke ich, so etwas ähnliches..
Weiß wer, wie ich das jetzt Browserunabhängig hinbekomme?
(ich habe margin-left:-20px; und padding: 5px 0px 0px 0px; bei #menu li ul hinzugefügt)

Grüße
Keyno

Danke für deine Hilfe Bernhard!

neuroleptika · 8 Februar 2009

Code:

#menu li:hover ul {display:block;position:absolute;}

Für IE immer top und left für position: absolute; angeben.

Code:

#menu li:hover ul {
display:block;
position:absolute;
top: 0;
left: 0;
}

Browsershots hilft hier nicht weiter.
Aus Bildern lässt sich nicht erkennen ob :hover greift.

Keyno · 8 Februar 2009

neuroleptika schrieb:
Code:

#menu li:hover ul {display:block;position:absolute;}

Für IE immer top und left für position: absolute; angeben.

Code:

#menu li:hover ul { display:block; position:absolute; top: 0; left: 0; }

Browsershots hilft hier nicht weiter.
Aus Bildern lässt sich nicht erkennen ob :hover greift.

Wenn ich das mache, dann sieht es nicht nur im IE, sondern auch im FF falsch aus.. :idea:

Also wohl eher das falsche, trotzdem danke!

neuroleptika · 8 Februar 2009

Keyno schrieb:
Also wohl eher das falsche, trotzdem danke!

Nein,
es ist nicht eindeutig geklärt wie die Browser sich ohne diese Werte verhalten sollen.
Der IE verhält sich da auf jedenfall anders wie die meißten Browser.

Keyno · 8 Februar 2009

neuroleptika schrieb:
Nein,
es ist nicht eindeutig geklärt wie die Browser sich ohne diese Werte verhalten sollen.
Der IE verhält sich da auf jedenfall anders wie die meißten Browser.

Wie soll ich das dann machen?;)

Edit: habs raus! top: 20px; left: 20px;
Edit2: Sieht dann genau so aus, wie davor im IE :(

neuroleptika · 8 Februar 2009

lade das Beispiel mal hoch.

Im IE7 kann ich es mir heute abend aber nicht mehr ansehen.

Keyno · 8 Februar 2009

K, geuploadet :)
Ich kann auch einen Screenshot machen, wie es da gerade aussieht^^

Edit: Screenshot vom IE7 unter Vista hier (drücken für Großansicht):

neuroleptika · 9 Februar 2009

Hier stimmt nichts:

Code:

<style type="text/css" media="screen">#menu { behavior:url("csshover.htc"); }</style>

Die csshover.htc konnte ich unter der Adresse auch nicht finden.

Menüs würde ich nicht mit display: none; verstecken.
Schiebe sie lieber mit position: absolute; aus dem Sichtbereich.
Screenreader kennen kein :hover.
Sie können das Ausklappmenü nicht öffnen.

Wenn du das Menü mit position: absolute; versteckst bleibt es für Screenreader erreichbar.

ul li ul sollte wird von ul li aus positioniert werden. Der IE(5-7) braucht dazu Werte für top und left.

Den Abstand nach oben würde ich mit padding-top in em angeben.
So kann der Abstand bei jeder Schriftgröße eingehalten werden.

Hier habe ich es hochgeladen:
dropdown IE6
Für den IE6 habe ich csshover3.htc von Whatever:hover verwendet.

Das Script von A List Apart: Articles: Suckerfish Dropdowns würde hier aber auch reichen.

Ich würde immer prüfen ob ein Dropdown überhaupt nötig ist.
Verteilerseiten sind oft geeigneter und können auch schön aussehen.

Die dropdown-Felder würde ich viel größer machen.
Du hast massig Platz zur Verfügung.

Keyno · 9 Februar 2009

Wow!!!
Passt zu 99% :-)

Ich habe aber dennoch 1, 2 Fragen:
1. Wie schaffe ich es, dass die header-Höhe genau so hoch ist, wie da, wo das Navi endet? (Bei Ranzoomen Überschreitung sehbar)
2. Beim Darüberfahren von den ausgeklappten Feldern sieht man, dass es sich bei dem obersten wieder ein kleines bisschen überschneidet. Wie verändere ich das?
3. Ich wotte gerne noch nach Kontakt ein Feld zum Einloggen setzen, dazu langt der Platz aber nicht mehr (nicht einmal Login passt hin, Als FBV Mitglied einloggen wäre mir jedoch lieber). Könnte ich die andere Felder, wie bspw. Kontakt oder Startseite kleiner machen, dass das noch Platz hat? Die Seite an sich möchte ich nämlich nicht noch breiter machen, es gibt schließlich noch 800x600 und 1024x786 und die Seite jetzt ja schon 900px Breite hat.

Ich weiß, dass das Feinheiten sind, welche auch nicht so wichtig für mich sind, trotzdem fände ich es so schöner. (Seite ganz aktuell)

Danke für diese kompetente Hilfe !

Grüße
Keyno

neuroleptika · 9 Februar 2009

1.
Entferne die height-Angabe aus #header. Der header passt sich dann automatisch an.

2.
Ich weiß nicht was du meinst. In welchem Browser überschneidet es sich denn?

3.
Du könntest das padding-right verringern. Da fällt die Verkleinerung am wenigsten auf.

Code:

#menu ul li a, #menu ul li span { 
...
padding-right: 10px;
...
}

Probiere es mit verschiedenen Schriftgrößen aus. Wenn es keine zwei Stufen Vergrößerung im ff verträgt würde ich noch weiter reduzieren.

Keyno · 9 Februar 2009

neuroleptika schrieb:
1.
Entferne die height-Angabe aus #header. Der header passt sich dann automatisch an.

Danke ! Passt perfekt :)

neuroleptika schrieb:
2.
Ich weiß nicht was du meinst. In welchem Browser überschneidet es sich denn?

Eine minimale Sache, jedoch bei genauem Betrachten sieht man es, auch im IE.

neuroleptika schrieb:
3.
Du könntest das padding-right verringern. Da fällt die Verkleinerung am wenigsten auf.

Code:

#menu ul li a, #menu ul li span { ... padding-right: 10px; ... }

Probiere es mit verschiedenen Schriftgrößen aus. Wenn es keine zwei Stufen Vergrößerung im ff verträgt würde ich noch weiter reduzieren.

Hat geklappt, danke!
Edit: Kann ich das noch kleiner machen, fände ich noch besser :)
(aktuelle Seite online)

Grüße
Keyno

neuroleptika · 9 Februar 2009

Das Kommt durch das padding-top in em.
Deine Zeilenhhöhe wird aber durch die Schriftgröße in px bestimmt. Deshalb passt es nicht Pixelgenau.
Wenn der erste ausgeklappte Menüeintrag genau unter dem Hauptmenü sitzen soll funktioniert meine Variante so nicht.
Dann mußt du doch auf top: 0 verzichten:

Code:

   #menu ul li ul {
  position: absolute;
  /[COLOR="DarkRed"]*top: -9999px; entfernen*/[/COLOR]
  left: -99999px;
  }

   #menu ul li:hover ul {
  position : absolute;
  left: 0px;
 [COLOR="#8b0000"] /*top: 0; entfernen*/[/COLOR]
 [COLOR="#8b0000"] /*padding-top: 2em; entfernen*/[/COLOR]
  background:  #242323;
  }

Scheint auch im IE6 und IE7 zu klappen.

Wegen der Größe mußt du einfach ausprobieren wie es am besten aussieht.
Siehe es dir aber auch mit verschiedenen Schriftgrößen an (nicht nur mit der Zoomfunktion). Im IE7 und ff3 kann man zwischen Textgröße und Seitenzoom wählen. Opera hat nur eine Zoomfunktion, ff2 nur einen Textzoom.

Keyno · 9 Februar 2009

Du bist echt ein Gott! :)
Dank dir sieht die Seite so aus, wie ich sie wollte!

Es gäbe nur eine Winzigkeit, die mich schon immer interessiert hat, ich jedoch nie wusste, wie man das auch machen kann. Ich wotte es nämlich gerne so wie bei Apple machen, dass man nicht in der Adressleiste sieht ../index.html, sondern immer nur ../, also z.B. gaestebuch/gaestebuch.php und dann wotte ich es so, dass nur gaestebuch/ angezeigt wird.

Wenn jemand Zeit hat, mir das zu erklären, fände ich das super-duper nett. Ich denke mit den Jahren weiß ich das dann so wie so, spätestens wenn ich mal zur Uni geh' (bin noch in der 8. Klasse auf einem Gymnasium). Wenn sich jemand die Zeit nehmen will, kann er mir das aber auch schon jetzt erklären

Ist ja auch nich so wichtig :)

DANKE, DANKE, DANKE vor allem an neuroleptika und Efchen !!!!!

neuroleptika · 9 Februar 2009

Sowas kann man auf Apache-Servern in der .htaccess festlegen.

Frage im dem Unterforum: Server - Apache & Co.

Drop-Down-Menü funktioniert nicht, wie es sollte

Efchen

Guest

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied