Browererkennung und Weiterleitung per js

Von einer relativen Positionierung der Submenüs war hier nie die Rede.

Ausgangspunkt ist diese Regel für das Elternelement <div id="menu"> unter Beachtung des höher festgelegten zIndex gegenüber deinem:

Vielleicht hilft hier evtl. im CSS eine z-index-Regel zur höheren Schichtpositionierung weiter.

CSS:
#menu {
position:relative;
z-index:999;
/* hier folgen die übrigen Formatierungen */
}

Edit: Der Tipp gilt hier nicht für die implementierte IE-Weiterleitungsseite "index2.htm" ;)

Meinem empfohlenen/genannten Link bist du anscheinend nicht zum Studium gefolgt, denn es gilt: je höher der Wert, desto weiter oben/vorne, und je niedriger der Wert, desto weiter unten/hinten befindet sich das Element in der Schichtposition.
 
Zuletzt bearbeitet:
Das bringt es leider auch nicht. habe mal alles überflüssige aus der css rausgeschmissen. Jetzt aber genug für heute. Am Montag, wenn Du Bock hast, können wir weiter machen. Wünsche schönen Sonntag. Mache bis dahin die Weiterleitung wieder rein.
CSS:
body {
  background-color: #ffd8b7;
	width: 800px;
	margin: auto;
	padding: 0;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 15px;
	color: black;
	border: 1px solid #800000;
	}

#main {
 	/*width: 800px;          schon erfällt in   "body"               */
	margin: auto;
}

/*--gewährleistet einheitliche Abstände in unterschiedlichen Browsern--*/
* {
	margin: 0;
	padding: 0;
}
.kopfleiste {
	background-color: #ffffff;
	width: 30px;
	padding-top: 8px; /* mit Padding rücke ich die Schrift vom oberen Rand in die Mitte */
}
.brauneleiste {
	background-color: #ffcc99;
	padding: 0 2px 0 2px;
}
.vertlinie {
	background-color: #ffcc99;
	width: 1px;
}
.post {
	text-align: left;
}
.ggtrans {
	text-align: center;
	float: none;
}
a:link {
	background-color: transparent;
	color: black;
	font-size: 13px;
	font-weight: bold;
}
a:visited {
	color: red;
}
a:hover {
	background-color: #CCCCCC;
}
a:active {
	background-color: #ffffff;     
}
table, td {
	vertical-align: top;
	font-size: 1em;
	text-align: left;
	padding: 5px;
}

/*--definiert den Hintergrundbalken der Navi und einige allgem. Angaben--*/
#menu {
  position:relative;
  z-index:999;
	width: 100%;
	background-color: #ffcc99;
	background-color: transparent;
	font-size: 1em;
	line-height: 1.5; /*--bewirkt eine vertikale Textzentrierung--*/
	float: left; /*--nimmt die Navileiste aus dem "Fluss", verhindert float-/clear-Probleme der ul--*/
}

/*--definiert die einzelnen Navigationsblöcke--*/
#menu ul {
	float: left;
	width: 195px; /* Breite der Linkblöcke  */
	list-style-type: none;
	}

/*--definiert die Blocküberschriften--*/
#menu h3 {
	font-size: 1em;
	text-align: center;
	color: black;
	border: 1px solid #800000; 
	background-color: #ffcc99;
}
/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
	height: 25px; /* die höhe statt 40 auf auto   */ /* Höhe der Linkfelder im Klappmenu */
	text-decoration: none;
	display: block;
	border: 1px solid #ffcc99;
	text-align: left;
  background-color: white; 
	color: #000000;
	}

/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu a:hover {
	color: #800000;
}
/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
/* 	position: relative;    Menu wird angezeigt, Video ruscht aber runter */
 position: absolute;
	z-index: 1;
	display: none;
}
#menu li {
	position: relative;
	/*verhindert im Zusammenhang mit pos. absolute bei ul ul eine Höhenvergrößerung von #menu beim Hovern--*/
}

	/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
	display: block;
}
/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:link {
	background-color: #ffcc99;
	height: 30px;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	color: #000000;
	border: 1px solid #003366;
}
/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:hover {
	color: #ff9224;
	border: 1px solid #ccc;
}
	/*--nur für IE-Versionen 6 erkennbar--*/
* html #menu ul li {
	float: left;
	width: 100%;
}
	/*--nur für IE 7 erkennbar--*/
*+ html #menu ul li {
	float: left;
	width: 100%;
}

.link2, a {
	/*  background-color: #ffd8b7;   ----- farbe nur einmal in "body" setzen ---------*/
	color: black;
	font-size: 12px;
	text-decoration: underline;
}
.linkagb, a {
	color: black;
	font-size: 10px;
	font-weight: bold;
	text-decoration: underline;
}
.farbedunkel td {
	background-color: #ffcc99;
}
a.sp:link {
	color: yellow;
	font-size: 13px;
	font-weight: bold;
}
a.sp:hover {
	background-color: #cccccc;
}
a.sp:active {
	background-color: black;
}

p {
	font-size: 14px;
	text-align: left;
	padding-left: 3px;
	padding-right: 10px;
	margin-top: 0;
	margin-bottom: 0;
}

h1 {
	font-size: 14px;
	padding: 0 0 0 0;
	margin-bottom: 0;
	margin-top: 0;
	color: #000000;
	text-align: left;
}
h2 {
	font-size: 14px;
	margin-bottom: 0;
	margin-top: 0;
	font-weight: normal;
	text-align: left;
}

h4 {
	font-size: 13px;
	font-weight: normal;
	text-align: left;
	margin-top: 0;
	padding:10px;
}
h5 {
	font-size: 10px;
	font-weight: normal;
	color: #000000;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
}
.clear {
	clear: both;
}
#aktuelle-angebote {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 200px;
	height: 150px;
	border: #800000 solid 2px;
}
#aktuelle-angebote2 {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 200px;
	height: 150px;
	border: #800000 solid 2px;
}
.linkbox, .linkbox a {
	font-size: 10px;
	text-align: left;
	padding: 0;
}
.footer, .footer a {
	font-size: 10px;
	color: black;
	text-align: center;
	font-weight: normal;
	background-color: #ffdfc6;
	line-height: 1.7;
}
 
Zuletzt bearbeitet von einem Moderator:
Die Lösung liefert hier YouTube mit der "alten Einbettungstechnik" - siehe "Teilen > Einbetten" ;)

Anstelle des genutzten <iframe>-Tags kommen diese Zeilen zum Einsatz:

HTML:
<object width="440" height="250">
  <param name="movie" value="http://www.youtube.com/v/OUDQhGIob-w?hl=de_DE&amp;version=3" />
  <param name="allowFullScreen" value="true" />
  <param name="allowscriptaccess" value="always" />
  <param name="wmode" value="opaque" />
  <embed src="http://www.youtube.com/v/OUDQhGIob-w?hl=de_DE&amp;version=3" type="application/x-shockwave-flash" width="440" height="250" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>
</object>

Mit den Ergänzungen <param name="wmode" value="opaque" /> und dem <embed>-Attribut wmode="opaque" erscheinen die Submenüs in allen IE-Versionen vor dem Video.
 
Zuletzt bearbeitet:
Toll!! Das muss Dich ja an Deiner Ehre gepackt haben dass Du Dir so viel Mühe gemacht hast.
Bitte sei nicht beleidigt, wenn ich um Deine Kontonummer bitte um Dir einen kleinen Dank zu überweisen. E-Mail Adresse findest Du auf meiner Webseite.
Noch eine kleine Bitte, das embed ist nich WC3 konforn, sicher findest Du dafür aber auch noch eine Lösung. Bis hierhin jedenfalls eines großes Dankeschön.
 
Ok, ich habe 3 Facebook "Gefällt mir" (2x meinzuhause24) gegeben. Ich hoffe, ich habe es richtig gemacht. Bei Twitter und Youtube weiß ich leider nicht wie das geht. Kläre mich bite auf.
 
Kannst Du mir bitte den Code vervollständigen, ich weiß nicht, wo ich den Link einsetzen soll. Alter Code unten. Danek.

object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="440" height="250">
<param name="src" value="quicktime.mov" />
<param name="controller" value="true" />
<object type="video/quicktime" data="quicktime.mov" width="440" height="250" class="mov">
<param name="controller" value="true" />
Error text.
</object>
</object>

Alt:
<object width="440" height= "250">
<param name="movie" value= "http://www.youtube.com/v/OUDQhGIob-w?hl=de_DE&amp;version=3" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="opaque" />
<embed src= "http://www.youtube.com/v/OUDQhGIob-w?hl=de_DE&amp;version=3" type= "application/x-shockwave-flash" width="440" height="250" allowscriptaccess="always" allowfullscreen="true" wmode= "opaque" />
</object>
 
Wäre dir dankbar, wenn du endlich mal meiner mehrfach ausgesprochenen Bitte nachkommen würdest, deine Quellcode-Angaben in die Highlight-Tags zu packen, wie wir es hier auch praktizieren, um unsere Beiträge leserlich/übersichtlicher zu formatieren :rolleyes:

Du hast dir für den Flash-Film just das falsche Lösungsbeispiel (für Quicktime-Movie) herausgepickt.

Ein swf-File barrierefrei, valide und browserübergreifend einbauen trifft den Nagel auf den Kopf ;)
 
Zurück