zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Drop-Down Menü

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.03.2008, 14:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2008
Beiträge: 19
Impega befindet sich auf einem aufstrebenden Ast
Unglücklich 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.


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:


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 ?

Geändert von Impega (05.03.2008 um 09:20 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.03.2008, 12:19
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.837
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

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.)
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.03.2008, 16:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2008
Beiträge: 19
Impega befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 17.03.2008, 09:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2008
Beiträge: 19
Impega befindet sich auf einem aufstrebenden Ast
Standard

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 ?
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
Drop Down Menü per onklick? BoBoR CSS 18 17.04.2009 12:45
Tab Menü Problem BloodHunger CSS 6 22.12.2008 16:04
Problem mit padding im Menü Sp33dy G0nz4l3s CSS 1 22.09.2006 19:09
Problem mit Menü... Zero-X CSS 18 12.07.2006 17:52
Das Menü und mein Problem Sven CSS 1 13.03.2005 02:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:03 Uhr.