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

Navigationsleiste: Im Klappmenu Absätze statt Leerstellen.

Egleria

Neues Mitglied
Hi,

Ich habe ein Problem mit meiner Navigationsleiste. Hier mal ein Link zu einer Testseite: Testseite

Das Problem sollte jedem sofort ins Auge springen. Wenn das Klappmenu aufgerufen wird, wird zum beispiel ein Link wie "LUA Scripten für Anfänger" wie folgt angezeigt:

LUA
Scripten
für
Anfänger

Ich gehe ser davon aus, dass ich irgendwo einen Fehler im Code der Navigationsleiste habe. Ich hoffe sehr, dass ihr mir helfen könnt und schonmal danke im vorraus. Hier der Quellcode:

<!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>Dynamische Navigationsleiste</title>

<style type="text/css">
/* Vertikale Navigation */
div#Tmenu {
font-size: 90%;
width: 10em;
padding: 0em;

}
* html div#Tmenu {
width: 15em;
w\idth: 10em; /* (IE 6 in standards-compliant mode) */
}

ul#Navigation {
margin: 0; padding: 0em;
text-align: left;
}

ul#Navigation li {
list-style: none;
position: relative;
margin: 0.4em; padding: 0;
}

* html ul#Navigation li {
margin-right:1.5em; /* Platz fuer Link-Verbreiterung im IE reservieren */
margin-bottom:0;
}

ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 0; left: 9.3em;
border: 1px solid white;
background-color: black;
width: 20em;
text-align:left;
padding-left: 5px;
}

*:first-child+html ul#Navigation li ul {
left: 9em; /* (IE 7 in standards-compliant mode) */
}
ul#Navigation li ul li {
margin: 0; padding-left: 0em;
text-align: left;
}

ul#Navigation a, ul#Navigation span {
display: block;
width: 5em;
font-family: Calibri; font-size: 19px; color: rgb(255,255,255);
line-height:19pt;
text-align:left;
text-decoration: none;
padding: 0em 0em;
}

* html ul#Navigation a, * html ul#Navigation span {
width: 15em;
w\idth: 7em; /* (IE 6 in standards-compliant mode) */
text-align: left;
}

ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
}

li a#aktuell {
}

ul#Navigation li ul span {
}

ul#Navigation li a:active {
}


/* dynamisches Ein-/Ausblenden */
ul#Navigation li ul {
display: none;
}
ul#Navigation li:hover>ul {
display: block;
}
ul#Navigation>li:hover>a {
width: 15em;
}

/* dynamisches Ein-/Ausblenden der JavaScript-generierten Klasse im IE */
* html ul#Navigation li.hoverIE {
margin-right:0; /* reservierten Platz freigeben */
margin-bottom:-1.15em; /* Fehlerkorrektur, ggfls. anpassen */
}

* html ul#Navigation li.hoverIE ul {
display: block;
}

* html ul#Navigation li .hoverIE {
width: 15em;
w\idth: 8.2em; /* (IE 6 in standards-compliant mode) */
}

</style>


<!--[if IE]>
<script type="text/javascript">
// <![CDATA[
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").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() {
this.className="hoverIE"; this.firstChild.className="hoverIE";
}
function ausblenden() {
this.className=""; this.firstChild.className="";
}

window.onload=hoverIE;
}
// ]]>
</script>
<![endif]-->

</head>
<body>

<div id="Tmenu">
<ul id="Navigation">


<li><a>ArcEmu</a>
<ul>
<li><a href="" target="iefensterMain">ArcEmu inkl Scripts kompilieren</a></li>
<li><a href=""iefensterMain">ArcEmu Server in Betrieb nehmen</a></li>
</ul>
</li>


<li><a>LUA-Scripten</a>
<ul>
<li><a href="" target="iefensterMain">LUA Scripten für Anfänger</a></li>
<li><a href="" target="iefensterMain">LUA Scripten für Fortgeschrittene</a></li>
<li><a href="" target="iefensterMain">LUA Befehle Auflistung</a></li>
</ul>
</li>


<li><a>Datenbanken</a>
<ul>
<li><a href="" target="iefensterMain">NextChapter DB installieren</a></li>
<li><a href="" target="iefensterMain">World of Blizzlike DB installieren</a></li>
</ul>
</li>


<li><a>Software</a>
<ul>
<li><a href="" target="iefensterMain">Navicat_SQL_Abfragen</a></li>
</ul>
</li>

<div></div>
</div>

</body>
</html>
 
HTML:
* html ul#Navigation a, * html ul#Navigation span {
width: 15em;
w\idth: 7em; /* (IE 6 in standards-compliant mode) */
text-align: left;
}

steht da beabsichtigt "w\idth"?

HTML:
ul#Navigation a, ul#Navigation span {
display: block;
width: 5em;
font-family: Calibri; font-size: 19px; color: rgb(255,255,255);
line-height:19pt;
text-align:left;
text-decoration: none;
padding: 0em 0em;
}

Dreh ma den width-Wert bisschen höher. Eventuell sogar px statt em nutzen
 
Ein großes Dankeschön an dich.

Habe nun die Width auf 300px erhöht und es funktioniert prima. Für den IE musste ich dasselbe bei w/idth eintragen, was deine Frage beantworten sollte ob das Absicht war ;)
 
Hallo nochmal,

Ich habe leider nun ein neues Problem, entstanden durch die Lösung meines letzens. Hier nochmal die Testseite: Testseite

Das Problem ist folgendes: Zwar werden die Schriftzüge in der aufklappenden Navigationsleiste richtig dargestellt, aber ich kann nichtmehr alle auswählen. Sobald ich versuche einen Unterpunkt auszuwählen, der etwas tiefer liegt, klappt das Fenster vom nächsten Menüpunkt auf. Zum besseren Verständnis hier ein Beispiel von meiner Testseite:

Man geht mit der Maus über "ArcEmu" und anschließend in dem neuen Menu auf "ArcEmu Server in Betrieb nehmen". Daraufhin klappt die Lesite von LUA-Scripten auf, statt das man auf "ArcEmu Server in Betrieb nehmen" anklicken kann.

Ich hoffe ihr könnt mir nochmal helfen ;) Hier auch nochmal der Quellcode, statt der 300px habe ich nun 20em eingetragen:

<!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>Dynamische Navigationsleiste</title>

<style type="text/css">
/* Vertikale Navigation */
div#Tmenu {
font-size: 90%;
width: 10em;
padding: 0em;

}
* html div#Tmenu {
width: 15em;
w\idth: 10em; /* (IE 6 in standards-compliant mode) */
}

ul#Navigation {
margin: 0; padding: 0em;
text-align: left;
}

ul#Navigation li {
list-style: none;
position: relative;
margin: 0.4em; padding: 0;
}

* html ul#Navigation li {
margin-right:1.5em; /* Platz fuer Link-Verbreiterung im IE reservieren */
margin-bottom:0;
}

ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 0; left: 9.3em;
border: 1px solid white;
background-color: black;
width: 20em;
text-align:left;
padding-left: 5px;
}

*:first-child+html ul#Navigation li ul {
left: 9em; /* (IE 7 in standards-compliant mode) */
}
ul#Navigation li ul li {
margin: 0; padding-left: 0em;
text-align: left;
}

ul#Navigation a, ul#Navigation span {
display: block;
width: 20em;
font-family: Calibri; font-size: 19px; color: rgb(255,255,255);
line-height:19pt;
text-align:left;
text-decoration: none;
padding: 0em 0em;
}

* html ul#Navigation a, * html ul#Navigation span {
width: 20em;
w\idth: 20em; /* (IE 6 in standards-compliant mode) */
text-align: left;
}

ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
}

li a#aktuell {
}

ul#Navigation li ul span {
}

ul#Navigation li a:active {
}


/* dynamisches Ein-/Ausblenden */
ul#Navigation li ul {
display: none;
}
ul#Navigation li:hover>ul {
display: block;
}
ul#Navigation>li:hover>a {
width: 15em;
}

/* dynamisches Ein-/Ausblenden der JavaScript-generierten Klasse im IE */
* html ul#Navigation li.hoverIE {
margin-right:0; /* reservierten Platz freigeben */
margin-bottom:-1.15em; /* Fehlerkorrektur, ggfls. anpassen */
}

* html ul#Navigation li.hoverIE ul {
display: block;
}

* html ul#Navigation li .hoverIE {
width: 15em;
w\idth: 8.2em; /* (IE 6 in standards-compliant mode) */
}

</style>


<!--[if IE]>
<script type="text/javascript">
// <![CDATA[
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").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() {
this.className="hoverIE"; this.firstChild.className="hoverIE";
}
function ausblenden() {
this.className=""; this.firstChild.className="";
}

window.onload=hoverIE;
}
// ]]>
</script>
<![endif]-->

</head>
<body>

<div id="Tmenu">
<ul id="Navigation">


<li><a>ArcEmu</a>
<ul>
<li><a href="" target="iefensterMain">ArcEmu inkl Scripts kompilieren</a></li>
<li><a href=""iefensterMain">ArcEmu Server in Betrieb nehmen</a></li>
</ul>
</li>


<li><a>LUA-Scripten</a>
<ul>
<li><a href="" target="iefensterMain">LUA Scripten für Anfänger</a></li>
<li><a href="" target="iefensterMain">LUA Scripten für Fortgeschrittene</a></li>
<li><a href="" target="iefensterMain">LUA Befehle Auflistung</a></li>
</ul>
</li>


<li><a>Datenbanken</a>
<ul>
<li><a href="" target="iefensterMain">NextChapter DB installieren</a></li>
<li><a href="" target="iefensterMain">World of Blizzlike DB installieren</a></li>
</ul>
</li>


<li><a>Software</a>
<ul>
<li><a href="" target="iefensterMain">Navicat_SQL_Abfragen</a></li>
</ul>
</li>

<div></div>
</div>

</body>
</html>
 
Persönlich würd ich eher ein CSS Hovermenü nehmen.

1. kompatibler
2. behebt dein Problem direkt
3. genauso simpel
 
Ja leichter gesagt als getan. ^^

Den Code dieser Navigationsleiste habe ich auch nur aus dem Inet besorgt und etwas angepasst. Ich habe von daher keine Ahnung wo ich ein CSS Hovermenu herkriegen soll *g*

Wenn du da ein gutes Tutorial kennst oder ein Beispielmenu würde mir das vllt schon weiterhelfen :)
 
Danke dir Hokage! Habe das ganze mal nach dem ersten Tutorial ( Das perfekte Menü: Klappmenü: Navigieren in Dimensionen ) von dir gemacht. ;)

Das Ergebnis kann man sich, wenn man nicht den IE verwendet schonmal hier anschauen: Testseite

Funktioniert soweit blendent, allerdings stören mich noch zwei sachen:

1. Für den Internetexplorer: Im Tutorial wird erwähnt, dass man die Datei csshover.htc einbinden muss. Dies soll folgender Code abschnitt vollziehen:

<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->

<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc); font-size: 100%;}
#menu ul li a {height: 1%;}
}
</style>
<![endif]-->
Die Frage ist nun, wo ich die Datei csshover.htc auf meiner Seite hochladen muss. Also in welchen Order und was ich bei url(csshover.htc) einzutragenhabe. ;)


2. Das Klappmenü besitzt einen weisen Rand um jeden Eintrag. Wie schaffe ich es stattdessen, dass nur noch um das gesamte Klappmenü ein einziger Rand angezeigt wird?


Danke schonmal im vorraus für die Antwort :) und hier noch der gesamte Code der Navigationsleiste:

<html>
<head>
<style>
#menu { width: 8em; }

#menu ul { list-style: none; margin: 0; padding: 0; }

#menu a, #menu h2 {
font: 19px Calibri;
display: block;
margin: 0; padding: 2px 3px;
line-height:19pt;
text-align:left;
text-decoration: none;
}

#menu h2 { color: #FFFFFF; }

#menu a {width: 15em; color: #FFFFFF; text-decoration: none;
border: 1px solid white;
background-color: black;
text-align:left;
}

#menu a:hover {width: 15em; color: #FFFFFF; }




#menu li { position: relative; }

#menu ul ul {position: absolute; top: 0; left: 100%; width: 100%; }
#menu ul ul ul {position: absolute; top: 0; left: 285%; width: 100%; }

div#menu ul ul, div#menu ul li:hover ul ul {display: none;}

div#menu ul li:hover ul, div#menu ul ul li:hover ul {display: block;}

</style>

<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->

<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc); font-size: 100%;}
#menu ul li a {height: 1%;}
}
</style>
<![endif]-->


</head>
<body>

<div id="menu">
<ul>


<li><h2>ArcEmu</h2>
<ul>
<li><a href="">ArcEmu inkl. Scripts kompilieren</a></li>
<li><a href="">ArcEmu-Server in Betrieb nehmen</a></li>
</ul>
</li>

<li><h2>LUA-Scripten</h2>
<ul>
<li><a href="">LUA-Scripten für Anfänger</a></li>
<li><a href="">LUA-Scripten für Fortgeschrittene</a></li>
<li><a href="">LUA-Befehle: Auflistung</a></li>
</ul>
</li>


<li><h2>Datenbanken</h2>
<ul>
<li><a href="">NextChapter-DB installieren</a></li>
<li><a href="">World of Blizzlike-DB installieren</a></li>
</ul>
</li>


<li><h2>Software</h2>
<ul>
<li><a href="">Navicat SQL-Abfragen</a></li>
</ul>
</li>


</ul>
</div>
</body>
</html>
 
1. auf deiner testseite sehe ich bisher noch keine veränderung ...

2. dein dropdown menu sollte auch im IE klappen. sowohl im IE8 als auch im IE7

dieser code schnippsel wird nur für IE6 und kleiner benötigt.
jetzt kannst du dir also überlegen, ob du den noch einbaust ;-)

wie genau das jetzt geht, weiß ich auch nciht so genau. hab ich noch nicht gemacht. aber googel kann dir bestimmt helfen ;-)

3. die rahmen deiner navigation werden mit css definiert.
du musst einfach dem äußeren li einen rahmen zuweisen.
und den dropdown li eben ein border:none;
dann sollte das klappen.

grüße
 
Hehe, hatte vergessen die Testseite neu zu publizieren ^^

Das mit dem Rahmen geht nun schon: Testseite

Aber im IE7 oder kleiner passiert halt nichts und das ärgert mich, da nunmal der IE7 standartmäßig bei windows bei ist ^^
 
Da hast du ja ein prächtiges Durcheinander.

Was so auf den ersten Blick auffällt, ist das Tabellenlayout, gefolgt von einem neuen <head>, Styleinformationen, einem neuen <body>, dann dem Ende des Documents, gekennzeichnet durch </body> und </html>, danach jedoch noch weiterer Code.

Das passt absolut nicht zusammen. Ein Document hat nur einen <head>, einen <body> und wird nur von einem <html> eingeleitet und wieder beendet(</html>).

Beseitige zuerst diese Fehler, entferne dann das Tabellenlayout und trenne dann Inhalt von Layout (Styleinformationen in eine separates CSS-Datei).

Erst danach macht es Sinn, sich darum zu kümmern, warum es im IE nicht funktioniert.
 
Thor ich möchte mal deine Antwort auf eine Aussage reduzieren: "Mach es richtig!"

Glaubst du ernsthaft, dass mir mit einer solchen Aussage geholfen wäre. Wenn ich es besser könnte, hätte ich es von vornherein so gemacht ;) Und das es im IE nicht funktioniert liegt schlichtweg daran, dass ich nicht weis wie ich die csshover.htc richtig einbinde.

Ohne dir zu Nahe treten zu wollen - denn ich bin mir sicher, dass du ein Experte auf diesen Gebiet bist - möchte ich dich darauf aufmerksam machen, dass man sich manchmal auf ein geringeres Niveau herabsetzen muss um anderen zu helfen. ;)
 
Thor ich möchte mal deine Antwort auf eine Aussage reduzieren: "Mach es richtig!"

Glaubst du ernsthaft, dass mir mit einer solchen Aussage geholfen wäre.
Natürlich nicht, ebenso wenig wie es uns hilft, wenn jemand sagt, da funktioniert was nicht. Deshalb habe ich dir ja auch schon die ersten Schritte zur Fehlerbeseitigung genannt.

Wenn ich es besser könnte, hätte ich es von vornherein so gemacht ;) Und das es im IE nicht funktioniert liegt schlichtweg daran, dass ich nicht weis wie ich die csshover.htc richtig einbinde.
Code:
body { 
  behavior: url('htc/csshover.htc');
}

Ohne dir zu Nahe treten zu wollen - denn ich bin mir sicher, dass du ein Experte auf diesen Gebiet bist - möchte ich dich darauf aufmerksam machen, dass man sich manchmal auf ein geringeres Niveau herabsetzen muss um anderen zu helfen. ;)
Das hat nichts mit einem anderen Niveau zu tun, nur mit Hilfsbereitschaft.
 
Der Pfad ist richtig und ich glaube nicht, dass es an der Datei liegt. Die haben da schon einige Versionen von bereitgestellt und dürften wissen, was sie da machen.

Ich würde trotzdem erstmal die Fehler beseitigen, erst dann kannst du sicher sein, dass es nicht an deinem Code liegt.
 
Ok, ok, ich komme dir mal entgegen. Schließlich will ich mein Problem ja lösen. :)

Habe mal das ganze mit den doppelten head's etc. verbessert: Testseite

Wie ich das mit dem Tabellenlayout in den Griff kriegen soll ist mir momentan noch etwas heikel. Ich habe nämlich kaum einen Schimmer von HTML ;)

Hoffe aber dennoch, dass du damit erstmal zufrieden bist und so meinen Fehler besser erkennen kannst :)
 
Wie ich das mit dem Tabellenlayout in den Griff kriegen soll ist mir momentan noch etwas heikel. Ich habe nämlich kaum einen Schimmer von HTML ;)
Das ist das Problem, wieso schreibst du dann eine Webseite? Würdest du dir auch dein Auto selber zusammenschrauben, wenn du die Einzelteile hast?

Versteh das jetzt bitte nicht falsch, aber man hört immer wieder von einigen Leuten, dass Webseiten erstellen ganz einfach sei, dem ist nicht so. Das muss man lernen, wie alles andere auch, sonst funktioniert es nicht richtig.

Hoffe aber dennoch, dass du damit erstmal zufrieden bist und so meinen Fehler besser erkennen kannst :)
Es geht nicht darum, dass ich zufrieden bin, sondern darum, dir zu zeigen, was an deiner Seite alles falsch ist und zu Fehlern führen kann.

Das Problem mit dem hover ist einfach, dass du in deinem Conditional Comment die .htc Datei nur für den IE in Versionen kleiner 7 einbindest und im IE6 funktioniert es auch.

Du könntest mal versuchen, es für alle IE-Versionen einzubinden.
 
Du könntest mal versuchen, es für alle IE-Versionen einzubinden.
Nein.
IE7 und IE8 brauchen das nicht.
csshover.htc ersetzt nur das fehlende :hover für semtliche Elemente im IE<=6.
Das Kann der IE ab Vers.7 auch so.

Egleria,
Streiche alles aus dem Code was du nicht verstehst.
Dein Code enthält ein unnötiges script (scripte/overlib.js).

Die Internetexplorer Vers. 6 - 8 sind im Quirksmodus.
Dein Doctyp muß in der ersten Zeile stehen und eine url enthalten:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" [COLOR="DarkRed"][B]"http://www.w3.org/TR/html4/loose.dtd"[/B][/COLOR]>

Dann übe nicht mit einer einfarbigen Seite.
Du mußt die Elemente einfärben um zu sehen wie groß sie sind und um zu verstehen.

Ein Ausklappmenü ist nicht für den css-Einstieg geeignet.
 
Zuletzt bearbeitet:
Dann an dieser Stelle ein großes Dankeschön an dich Thor für deine Hilfe und Geduld :) Habe es nun auf dein Anraten wie folgt eingefügt:

<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
body {behavior: url('csshover.htc'); font-size: 100%;}
#menu li a {height: 1%;}
}
</style>
<![endif]-->

In meinen IE 7 funktioniert es nun tadellos und hoffentlich auch noch in höheren Versionen, was ich derzeit nicht testen kannt. ;)

Was deine Anmerkung zum Website aufsetzen allgemein angeht. Ich muss dir zustimmen, dass man dies alles lernen muss und hart arbeiten um es richtig zu machen. Aber ich bin auch der Meinung, dass jeder Privatperson im 21. Jarhundert die Möglichkeit gegeben sein sollte eine Seite für sich und seine Freunde ins Netz zu stellen ohne direkt Tagelang sich mit HTML etc. auseinanderzusetzen. Ich zum Beispiel benutze das unter Webdesignern als absoluten Müll verschrieende Net Objects Fusion. Ich teile diese Meinung auch durchaus, aber meine Interessen liegen halt in andern Bereichen, nicht beim Webdesign.

Mit diesen Worten nochmal ein Dankeschön an alle :)
 
Zurück
Oben