✔ Abstand zwischen <ul> und <li>

[waswiewo]

Guten Abend,

ich habe eine Frage, und zwar bin ich hier dabei eine navileiste einzurichten als dropdown menu!

Wenn ihr auf den link gehen solltet, sehr ihr sicher schon mein Problem! Der Abstand zwischen oberer Leiste und dem Submenu soll weg... aber ich kriege es nicht hin. Wisst ihr welchen Fehler ich gemacht habe?

Link zur css-datei: klick
Link zur html-datei: klick

Ich hoffe es weiß einer Rat =)

Vielen Danke schoneinmal im Vorraus

mfg waswiewo

 

[Maik]

Hi,

du hast zwei Möglichkeiten, um die Lücke nach den Grafikelementen zu schliessen:

img {
border:0px solid;
display:block;
}

oder

div#nav
{
        float: left;
        position:relative;
}

div#nav ul ul
{
          position: absolute;
          top:39px;
          display: none;
}

 

[waswiewo]

Das ist ja der absolute OBERHAMMER! Es geht, danke

Ich freu mich riesig, mann mann mann =)

Und so extrem schnell geantwortet, super Forum!

mfg

 

[waswiewo]

Hallo ich bins nochmal,

ich habe Das Menu jetzt in mein Design integriert, aber bin mit zwei Dingen noch nicht zufrieden. Link zur Page: klick

Problem 1:

unter der Menuleiste ist eine kleine Lücke, in welche sich ein Stüch Design vom Banner wiederholt, was eingetlich nicht sein darf... ich vermute das es an dem <div> liegt, bin mir aber nicht sicher!

Problem 2:

Ich habe meine links so formatiert (per css), dass sie bei :hover oben und unten einen border haben, einmal dotted und einmal bashed. Nur dummerweise ist in meinem menu nun auch dieser rand bei den verlinkten Bilddateien. Ich habe diesen <a>-tags beieits eine klasse gegeben, und in der css-datei a.nav:hover {border:0px;} stehen

hier mal ein Auszug aus der Css-datei:

/* ------------------------------------------- */


a
{
    text-decoration: none;
    color: #FFA500;
}

a:link
{
    text-decoration: none;
    color: #FFA500;
}

a:visited
{
    text-decoration: none;
    color: #FFA500;
}


a:hover
{
    text-decoration: none;
    color: #8B0000;
    border-top:1px;
    border-bottom:1px;
    border-top-style:dashed;
    border-bottom-style:dotted;
}

a.navi:hover a.img:hover
{
    text-decoration: none;
    color: #8B0000;
    border-top:0px;
    border-bottom:0px;
    border-top-style:dashed;
    border-bottom-style:dotted;
}

a:active
{
    text-decoration: none;
    color: #8B0000;
}


/* ------------------------------------------- */

EDIT: Was mir gerade noch aufgefallen ist, dass der IE das menu nicht richtig anzeigt, auch die transparenten .png-bilder stellt er nicht dar =( gibts da einen weg, den IE auszutricksen?

Vllt wisst ihr ja Rat

mfg waswiewo =)

 

[Maik]

Hi.

Problem Nr.1:

img {
border:0px solid;
display:block;
}

Problem Nr.2:

a:hover
{
    text-decoration: none;
    color: #8B0000;
    border-top:0px;
    border-bottom:0px;
}

a.navi:hover
{
    text-decoration: none;
    color: #8B0000;
    border:0px;
    border-top:1px;
    border-bottom:1px;
    border-top-style:dashed;
    border-bottom-style:dotted;
}

Die Links der ersten Menüebene erhalten dann nicht die Klasse .navi.

Problem Nr.3 (IE):

div#nav ul ul
{
        position: absolute;
        top: 39px;
        display: none;
        width:155px;
}

Die Vorgängerversionen des IE7 können transparente PNGs nicht darstellen. Einen Workaround bietet hier Cross-browser semi-transparent backgrounds.

 

[waswiewo]

Guten Morgen,

vielen, vielen herzlichen Dank!

der Code hat mir sehr weitergeholfe, musste ihn aber noch ein klein wenig anpassen... funktioniert jetzt alles so wie ich es mir vorgestellt habe!

Echt sau gut

Das Forum wird weiterempfohlen =)

Würd sagen, damit is der Thread geschlossen...

mfg waswiewo