XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Problem mit Drop-Down Menü (http://xhtmlforum.de/showthread.php?t=50698)

Impega 04.03.2008 15:43

Problem mit Drop-Down Menü
 
Hi @ all,

ich soll hier eine Seite ein bischen anpassen.
Dabei habe ich jedoch einige Probleme.

Oben unter dem Head gibt es einen Banner und dadrunter ein horizontales Drop-Down-Menü.
Ich suche vergeblich die Stelle, an der ich die Breite der zweiten Hirarchie fstlegen kann.
Im moment sieht es folgender Maßen aus:

vielleicht hat jemand einen guten tip für mich, so dass sich die Schrift der Unterordnung auf selber Höhe mit der obersten Ordnung liegt und ich die Unterordnung in der Breite verkürzen kann.
Das ganze soll zum Ende hin vom Typ der hier im Forum oben liegenden Navigation aussehen.

Über hilfreiche Tips wäre ich sehr dankbar.

gruß

EDIT:
die breite der gedroppten einträge habe ich hinbekommen.
komischer weise haben diese was von der ersten ebene geerbt, oder so.

jetzt müsste ich nur noch wissen, wie ich das gedroppte weiter nach rechts, in den schwarz gezeichneten kasten mit den diagonalen grünen strichen, geschoben bekomme.
http://img504.imageshack.us/img504/969/schiebaj3.th.jpg

EDIT 2:
das verschieben hat geklappt. ich bin auf selfhtml fündig geworden und habe dort zum ersten mal gesehen, dass man

Code:

position:relative; left:36px;
noch weitere attribute bei position: relative hat.

kaum hat man das eine problemchen gelößt, so tritt auch schon das nächste auf:
dazu zunächst mal ein screen mit 3 verschiedenen browseransichten, wo das optische problem sofort erkennbar sein sollte:
Opera / Firefox / IE7:
http://img341.imageshack.us/img341/4...obenqu0.th.jpg

Beim Firefox sieht es so weit schonmal ganz gut aus. Beim Opera ist die zweite Ordnung um 1px zu weit nach rechts verschoben und beim IE7 wird alles zu weit verschoben und es gibt graue kästchen.

jemand eine idee, die hilfreich wäre ?

Crizzo 06.03.2008 13:19

An Hand von Bildern können wir dir leider nicht helfen.
Kannst du mal "testbaren Code" online stellen bzw. hier posten.
testbarer Code: inkl. komplettem CSS und HTML sowie möglichst wenig, was nicht zum Problem gehört (Inhalt, Werbebanner, usw.)

Impega 10.03.2008 17:43

das problem hab ich lösen können.
das layout lag zunächst direkt in der html datei und es wurde noch eine externe css importiert, bei der es einen

li { ... } gab, in dem der text auf -20px verschoben wurde.
die breite passte jetzt auch zur ersten hirarchie, da ich den vorgegeben code nochmal komplett neu gemacht habe.
einen kleinen makel gibt es jedoch noch.
im IE 7 gibt es einen Minimalen Abstand zwischen den gedroppten Menüeinträgen.
den dazugehörigen code werde ich wohl erst ab nächstem montag hier posten können, da ich bis zum ende der woche in einer oracle schulung bin.

Impega 17.03.2008 10:50

hi,

hier ist mal der code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

        <title>Titel</title>

        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />

        <link href="style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE() {
    var LI = document.getElementById("TopNavi01").firstChild;
    do {
      if (sucheUL(LI.firstChild)) {
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }

  function sucheUL(UL) {
    do {
      if(UL) UL = UL.nextSibling;
      if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
  }

  function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "#000000";
    /*Hier Standardhintergrundfarbe*/
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}
</script>

</head>

<body>
    <div id="Rahmen">
        <ul id="TopNavi01">
            <li><a href="#"><b><u><i>Überschrift1</i></u></b></a>
                <ul id="TopNavi02">
                    <li><a href="#" Target="_top">Unterpunkt 1</a></li>
                    <li><a href="#" Target="_top">Unterpunkt 2</a></li>
                    <li><a href="#" Target="_top">Unterpunkt 3</a></li>
                    <li><a href="#" Target="_top">Unterpunkt 4</a></li>
                    <li><a href="#" Target="_top">Unterpunkt 5</a></li>
                    <li><a href="#" Target="_top">Unterpunkt 6</a></li>
                </ul>
            </li>
            <li><a href="#"><b><u><i>Überschrift2</i></u></b></a>
                <ul id="TopNavi02">
                    <li><a href="#" Target="_top">Unterpunkt 1</a></li>
                    <li><a href="#" Target="_top">Überschrift 2 Unterpunkt 2</a></li>
                    <li><a href="#" Target="_top">Unterpunkt 3</a></li>
                    <li><a href="#" Target="_top">Unterpunkt 4</a></li>
                    <li><a href="#" Target="_top">Unterpunkt 5</a></li>
                    <li><a href="#" Target="_top">Unterpunkt 6</a></li>
                </ul>
            </li>
            <li><a href="#"><b><u><i>Überschrift3</i></u></b></a>
                <ul id="TopNavi02">
                </ul>
            </li>
            <li><a href="#"><b><u><i>Überschrift4</i></u></b></a>
                <ul id="TopNavi02">
                </ul>
            </li>
            <li><a href="#"><b><u><i>Übershrift5</i></u></b></a>
                <ul id="TopNavi02">
                </ul>
            </li>
        </ul>
    </div>

</body>

</html>

die CSS:
Code:

* {
    margin:0px;
    padding: 0px;
}
body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black;
    background-color: #ffffff;
    margin: 0px;
}
ul#TopNavi01 {
    /*Ausrichtung der gesamten Buttons nach oben/unten/links/rechts*/
    margin: 0;
    text-align: left;
}
/*Innen- und Außenabstände der einzelnen Buttons der jeweiligen ul*/
ul#TopNavi01 li {
    height: 25px;          /*Hoehe der ersten Navigationsebene */
    width: 150px;          /* Breite der ersten Navigationsebene */
    list-style: none;
    float: left;  /* Listet die Menuepunkte der ersten Navigationsebene nebeneinander */
    position: relative;
    background-color: yellow;    /* nicht sichtbar */
}
/*a href-Formatierung*/
ul#TopNavi01 li a {
    background-color: darkmagenta; /*Hintergrundfarbe Buttons*/
    color: greenyellow; /*Schriftfarbe der h-ref*/
    text-align: left;
}
/*Ausrichten der Navigation der zweiten Ebene*/
ul#TopNavi01 li ul {
    width: 150px;
    top: 25px; /*Abstand der Navi der Ebene 2 zu den Buttons der Ebene 1*/
    display: none;  /* Unternavigation ausblenden */
}
ul#TopNavi01 li:hover ul {
    display: block; 
}
/*Hintergrund Untermenu*/
ul#TopNavi01 li ul li {
    float: none;
    display: block;
    background-color: mediumspringgreen;/*ohne Auswirkung*/

}
/*Eigenschaften aller Buttons bestimmen, ausgewählt über tag<a>.*/
ul#TopNavi01 a, ul#TopNavi01 span {
    display: block;
    text-decoration: none;
    font-weight: bold;
    width: 150px; /*Setzt die Breite der oberen Buttons */
    padding-top: 0.5em;/*Bei FireFox ca. 0.5, damit der Kontakt zwischen 1.Ebene und 2.Ebene nicht abreisst!*/
}
/* Hovereffekte fuer die erste Ebene */
ul#TopNavi01 a:hover, ul#TopNavi01 span, li a#aktuell {
    border-color: red;
    border-left-color: lightgreen;
    border-top-color: purple;
    color: white;
    background-color: grey;
}
/*Eigenschaften aktuelle Unterseite*/
ul#TopNavi01 li ul span {
    background-color: chartreuse;
}
/*Farbe der Buttons beim Runterflip (TopNavi02)*/
ul#TopNavi02 li a {
    width: 145px;
    height: 24px;
    padding: 0px 0px 0px 5px;
    text-align: left;
    border-bottom: 1px solid black;
    background-color: deeppink; /*Hintergrundfarbe Leiste*//*ohne Auswirkung*/
    color: lightgrey;
}
/*Mouseover-Eigenschaften für TopNavi02*/
ul#TopNavi02 li a:hover {
    background-color: yellowgreen;
    color: black;
}


Überschrift 2 Unterpunkt 2 ist bewußt viel länger gewählt. dabei springt der zu lange text in eine neue zeile, die jedoch durch den Unterpunkt3 verdeckt wird.
wie kann man diesem "fehler" (?!) umgehen ?
das problem tritt beim Firefox, IE7 und dem Opera auf.
beim IE6 gibt es das problem nicht, da dieser das flipdown über javascript erhält und es ohne dieses auch nicht zu machen scheint.

weiß jemand rat ?


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:37 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023