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

Navi / Drop Down Problem

D

domki

Neues Mitglied
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type"
content="text/html;
charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>VfL Herzlake 1921 e.V.</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css"
href="../css/demo.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#menu {
width: 50%;
padding: 0 20px;
background: #000000;
font-family: Verdana;
font-size: 1em;
color: #FFFFFF;
line-height: 1.5;
float: left;
}
#menu ul {
float: left;
width: 140px;
list-style-type: none;
}
/*--definiert die Block&uuml;berschriften--*/
#menu h3 {
font-size: 1em;
text-align: center;
color: #FFFFFF;
border: 1px solid #AF111D;
background: #000000;
}
/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
text-decoration: none;
display: block;
border: 1px solid #AF111D;
text-align: center;
background: #000000;
color: #FFFFFF;
}
/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu a:hover {
color: #FFFFFF;
background: #AF111D;
}
/*verhindert im Zusammenhang mit position absolute bei ul ul
*eine H&ouml;henvergr&ouml;&szlig;erung von #menu beim Hovern--
*/
#menu li {
position: relative;
}
/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
/*--l&auml;sst die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
}
/*--nur f&uuml;r IE-Versionen &lt;=6 erkennbar--*/
* html #menu ul li {
float: left;
width: 100%;
}
/*--nur f&uuml;r IE 7 erkennbar--*/
*+ html #menu ul li {
float: left;
width: 100%;
}
/*--bewirkt Hover-Effekt f&uuml;r IE &lt;7 auch f&uuml;r ul- und li-Elemente--*/
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}
*html #menu ul li a {
height: 1%;
}
/*-- l&auml;sst die dritte Ebene verschwinden--*/
#menu ul li:hover ul ul {display: none;}
/*-- l&auml;sst die dritte Ebene beim Hovern &uuml;ber die zweite in Erscheinung treten--*/
div#menu ul ul li:hover ul {display: block; position: absolute; top: 0; left: 100%;}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<div style="text-align: center;" id="menu"><!-- öffnet die Navigationsleiste-->
<ul>
<!-- öffnet den ersten Themenblock --><li><!-- öffnet die Listeneinträge von Thema 1 -->
<h3>Infos</h3>
<ul>
<!-- öffnet die Klappnavi von Thema 1 --><li>
<h3></h3>
<ul>
<!--öffnet die dritte Ebene für die Unterpunkte von 1.1--><li></li>
<li></li>
</ul>
<!--schließt die dritte Ebene für die Unterpunkte von 1.1--></li>
<li><a href="#">News</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
<!-- schließt die Klappnavi von Thema 1 --></li>
<!-- schließt die Listeneinträge von Thema 1 -->
</ul>
<!--schließt den ersten Themenblock-->
<ul>
<!-- öffnet den zweiten Themenblock --><li><!-- öffnet die Listeneinträge von Thema 2 -->
<h3>Der Verein</h3>
<ul>
<!-- öffnet die Klappnavi von Thema 2 --><li><a
href="#">Die Geschichte</a></li>
<li><a href="#">Der Vorstand</a></li>
<li><a href="#">Das Stadion</a></li>
</ul>
<!-- schließt die Klappnavi von Thema 2 --></li>
<!-- schließt die Listeneinträge von Thema 2 -->
</ul>
<!--schließt den zweiten Themenblock--></div>
<ul style="text-align: center;">
<!-- öffnet den dritten Themenblock --><li><!-- öffnet die Listeneinträge von Thema 3 -->
<h3>Die Teams</h3>
<ul>
<!-- öffnet die Klappnavi von Thema 3 --><li><a
href="#">1.Herren</a></li>
<li><a href="#">2.Herren</a></li>
<li><a href="#">3.Herren</a></li>
</ul>
<!-- schließt die Klappnavi von Thema 3 --></li>
<!-- schließt die Listeneinträge von Thema 3 -->
</ul>
<!--schließt den dritten Themenblock-->
<!-- schließt die Menüleiste #menu -->
<div style="clear: both; text-align: center;"><a ="">&nbsp;</a></div>
</body>
</html>





irgendwo muss ein fehler drin sein.. wollte den dritten Menüpunkt (Die Teams) ebenfalls im Menü drin haben.. :(
 
1. Benutze bitte die Codetags des erweiterten Editors beim Beiträge erstellen. Code in Reintext ist unübersichtlich und vermindert die Bereitschaft, sich deinem Problem anzunehmen.
2. Entferne Dokumentation aus deinem Code bevor du ihn postest. Gleicher Grund wie 1.
3. Tipp: Rücke deinen Code ein. Das fördert die Übersichtlichkeit ungemein und hilft dir dabei. das Problem möglicherweise selbst zu sehen.
4. Lösung: Der Menüpunkt "Die Teams" war außerhalb des umfassenden <div id="menu">. Deshalb die falsche Darstellung.
So gehts:
HTML: 
<div style="text-align: center;" id="menu">
	<ul>
		<li>
			<h3>Infos</h3>
			<ul>
				<li><a href="#">News</a></li>
				<li><a href="#">Kontakt</a></li>
			</ul>
		</li>
	</ul>

	<ul>
		<li>
			<h3>Der Verein</h3>
			<ul>
				<li><a href="#">Die Geschichte</a></li>
				<li><a href="#">Der Vorstand</a></li>
				<li><a href="#">Das Stadion</a></li>
			</ul>
		</li>
	</ul>
	<ul style="text-align: center;">
		<li>
			<h3>Die Teams</h3>
			<ul>
				<li><a href="#">1.Herren</a></li>
				<li><a href="#">2.Herren</a></li>
				<li><a href="#">3.Herren</a></li>
			</ul>
		</li>
	</ul>
</div>

EDIT//
Die CSS-Eigenschaften in den style="" Attributen solltest du auch noch im Head unterbringen.
Auch das fördert die Übersichtlichkeit.
 
danke für deine Hilfe! Bin leider erst neu hier im Forum ;)

VfL Herzlake 1921 e.V.

soweit bin ich derzeit..

habe derzeit jedoch drei weitere kleine problemchen mit dem internet explorer:


a) im iframe wird ein weißer hintergrund angezeigt, trotz <body style="background-color:transparent">
b) die navi ist nicht zu sehen
blank.gif
bzw. das aufklappen

und folgendes problem im allgemeinen:
c) wenn man aufs bild klickt und es sich vergrößert öffnet er es nur in dem frame.. gehts nicht auch im ganzen fenster dann!?
 
und den letzten punkt:

einmal auf nachrichten klicjen und das bild anklicken...dann siehst es ;)
 
domki schrieb:
a) im iframe wird ein weißer hintergrund angezeigt, trotz <body style="background-color:transparent">
Zum Vergrößern anklicken....

Ergänze das Attribut "allowtransparency" mit dem Wert "true" im iframe-Tag. Wenn Du das nicht verstehst, google mal nach diesem Stichwort.

b) die navi ist nicht zu sehen
blank.gif
bzw. das aufklappen
Zum Vergrößern anklicken....
Dort fehlen sowohl bei relativ als auch bei absolut positionierten Elementen die z-index-Angaben. Der IE verhält sich in solchen Fällen immer unberechenbar. Setze z-index-Werte für jedes Element ein. Tipp: die Ebenen die unten liegen sollen brauchen einen geringeren z-index. Dein Contentbereich, in dem momentan scheinbar nur dieses riesengroße Bild (images/body2_02.gif) enthalten ist, muss auch relativ positioniert und mit einem z-index kleiner als der des Menüs versehen werden.

c) wenn man aufs bild klickt und es sich vergrößert öffnet er es nur in dem frame.. gehts nicht auch im ganzen fenster dann!?
Zum Vergrößern anklicken....

EDIT: Bild gefunden. Das liegt daran, dass Du für den Contentbereich ein iframe verwendest. Verzichte auf das iframe und stell die Inhalte direkt dar, so wie man es auch machen sollte.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben