Select Feld Überlappungsproblem

andrew22 · 15.11.2006, 18:15

hi,

wie kann ich denn verhinden das sich das <select><optio></option></select> Feld über meine div Bereiche drüber setzt beim scrollen ?!

also mit z-index funktioniert das nicht ...

bei div bereichen geht das super mit z-index nur select feld ?!

thx

nikosch · 15.11.2006, 18:24

ich denke, die browser geben der bedienbarkeit des formulars den vorrang.

Zergling-new · 15.11.2006, 19:56

Plugins und Formular-Elemente, speziell <select> haben da ihre eigenen Regeln (vorgeschrieben vom Betriebssystem bzw. Browser).

Notfalls temporär ausblenden (display:none).

andrew22 · 16.11.2006, 09:59

wieso macht der IE da nur so ne Zicken

beim Firefox klappt das wunderbar.

nun ja nur wie weiss das select wann es nicht mehr angezeigt werden soll

das ganze soll ja passieren wenn ich den bereich scrolle und dann der content bereich unter dem header bereich verschwindet.

thx

Zergling-new · 16.11.2006, 11:11

In dem du einen Algorithmus schreibst, der dem <select> das mitteilt bzw. es gleich auch ausblendet?

andrew22 · 16.11.2006, 11:41

hast du rein zufällig einen solchen Algorithmus bzw. gibt es irgendwo Beispiele mit denen ich mir den Algorithmus zusammenbasteln soll ?

thx :wink:

nikosch · 16.11.2006, 15:46

schreib doch mal genau, wie deine seite aufgebaut ist und was wann ausgeblendet werden soll, dann wird 1/ dir das eigentliche problem klar und 2/ können wir dann vielleicht weitere ansätze liefern.

andrew22 · 16.11.2006, 16:03

okay

..

ich habe einen Header <div id="header"> dieser ist fixed.

dann habe ich meinen content Bereich <div id="content"> dieser ist per z-index so angelegt das er beim scrollen unter dem header verschwindet.

Im Firefox klappt alles super ...

allerdings im IE habe ich das Problem das die select box sich über den Header legt alles andere verschwindet schön nur die select box nicht ..

das ist sozusagen mein Problem .

M3g4Star · 16.11.2006, 16:38

Versteh ich leider immer noch nicht ^^

Hast vllt mal den Code dazu das man sich das man anschaun kann ???

andrew22 · 17.11.2006, 14:13

hier einfach mal nen Beispiel Code :

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Feststehende Kopf- und Fußzeile</title>
	<style type="text/css">
		body
		{
			position:absolute;
			height: 100%;
		}
		html, body
		{
			top:0; left:0; right:0;
			min-height:100%;
			margin:0;
			padding:0;
			width:100%;
			height: 100%;
		}
		#header_container
		{
			position:fixed;
			top:0; left:0; right:0;
			text-align:center;
			margin:0;
			height:3em;
			z-index:3;
		}

		#header
		{
			position:absolute;
			top:0; left:0; right:0; bottom:0;
			height:100%;
			background:#efefef;
			z-index:3;
			margin:0;
			padding:0.2em;
		}
		#menu
		{
			position:fixed;
			top:4em;
			left:.5em;
			width:9em;
			border: 3px dotted #dedede;
			padding:.5em;
		}
		#content
		{
			margin:0;
			padding-top:4.85em;
			padding-left:12em;
			padding-bottom:3em;
			z-index:2;
			background: #ffffff;
			height: auto;
		}
		#footer_container
		{
			position:fixed;
			bottom:0; left:0; right:0;
			text-align:center;
			margin:0;
			height:2em;
			z-index:3;
		}
		#footer
		{
			position:absolute;
			top:0; left:0; right:0; bottom:0;
			background:#efefef;
			z-index:3;
		}

		/* Nun für den MSIE */
		* html, * html body
		{
			overflow:hidden;
			bottom:0;
			height:100%;
		}
		* html #header_container, * html #footer_container
		{
			position:absolute;
			width:100%;
			padding-right:16px;

		}
		* html #menu
		{
			position:absolute;
		}
		* html #header,* html #footer
		{
			height:100%;
			position:static;
			background: #efefef;
		}
		* html #content
		{
			position:absolute;
			top:0; bottom:0; left:0; right:0;
			height:100%;
			width:100%;
			overflow:auto;
			margin:0;
		}

		#menu li
		{
			list-style: none;
			margin:0;
			padding:0.3em;
		}
		#menu li#active
		{
			padding:0.5em;
			text-decoration:underline;
		}
		#menu a:link, #menu a:visited
		{
			display:block;
			background:#eeeeee;
			color:black;
			text-decoration:none;
			margin:0;
			padding:0.2em;;
		}
		#menu a:hover
		{
			background:#4f4f4f;
			color:#ffffff;
			text-decoration:underline;
		}
		* html #menu
		{
			margin:0;
			width:10.5em;    /* Der IE soll das Element breiter darstellen, da margin und padding hier von
							    der Breite abgezogen wird! */
		}
	</style>
</head>
<body>

	<div id="header_container">
		<h1 id="header">Seite mit Header und Footer (2)</h1>

	</div>


	<ul id="menu">
		[*]Einfacher Footer
		[*]Feststehender Footer
		[*]Feststehender Footer für den Internet Explorer
		[*]Kombination: Ein Footer für alle
		[*]Feststehende Kopf- und Fußzeile

		<li id="active">Alternative Positionierung, feste Navigation
		[*]Zum Artikel
	[/list]

<div id="content">

<select name="test">
				<option>blaa</option>
		</select>

		

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

		

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

		

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

		

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

		

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>

		

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>

		

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus</p>

		

Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.</p>

		

Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</p>

		

Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Gratuitous octopus niacin, sodium glutimate.</p>

		

Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</p>

		

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit&aacute; de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>

		

Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p>

	</div>

	<div id="footer_container">

		<div id="footer">
			Und hier ist der endgültige Footer!
		</div>
	</div>

</body>
</html>

bitte im IE testen da sieht man dann das sich das Select Feld über den Header drüber legt.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Kein Ergebnis bei SELECT (MySQL 4.1.9)	dr.e.	Datenbanken	4	15.06.2008 19:54
Select / Option Feld mit CSS nachbauen ?	andrew22	HTML, Usability und Barrierefreiheit	2	30.11.2006 16:06
Select feld mit Daten füttern	M-Arens	PHP Tipps 2006	12	08.06.2006 12:38
Hintergrundbild bei select feld		HTML, Usability und Barrierefreiheit	7	05.12.2005 13:42
Select Feld nach Überprüfung		PHP Tipps 2005-2	4	31.08.2005 22:22
Array nach Feld sortieren		PHP Tipps 2005-2	2	07.08.2005 23:00
select feld mit datenbank-tabelle		PHP Tipps 2005-2	4	13.06.2005 12:28
select feld automatisch als "submit" setzen bei au		PHP Tipps 2005-2	10	07.06.2005 08:23
select feld mit auswahl aus mysql tabelle		PHP Tipps 2005	10	01.06.2005 14:17
Select Feld nicht automatisch zurücksetzen nach Send Button		PHP Tipps 2005	5	17.03.2005 16:13
[Erledigt] Select Feld - Eingabe merken ?!?		PHP-Fortgeschrittene	4	18.11.2004 12:30
Multiple Select in einen Feld in MYSQL einfügen		Datenbanken	4	22.09.2004 18:15
select feld	andrew22	HTML, Usability und Barrierefreiheit	2	13.09.2004 17:16
[Erledigt] 2 mal select 1 form		PHP-Fortgeschrittene	1	01.09.2004 20:13
select Feld automatisch aktualisieren		PHP-Fortgeschrittene	6	13.08.2004 16:00

15.11.2006, 18:15
andrew22 Erfahrener Benutzer Registriert seit: 20.06.2003 Beiträge: 233	Select Feld Überlappungsproblem hi, wie kann ich denn verhinden das sich das <select><optio></option></select> Feld über meine div Bereiche drüber setzt beim scrollen ?! also mit z-index funktioniert das nicht ... bei div bereichen geht das super mit z-index nur select feld ?! thx


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

15.11.2006, 18:24
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	ich denke, die browser geben der bedienbarkeit des formulars den vorrang.

15.11.2006, 19:56
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Plugins und Formular-Elemente, speziell <select> haben da ihre eigenen Regeln (vorgeschrieben vom Betriebssystem bzw. Browser). Notfalls temporär ausblenden (display:none).

16.11.2006, 09:59
andrew22 Erfahrener Benutzer Registriert seit: 20.06.2003 Beiträge: 233	wieso macht der IE da nur so ne Zicken beim Firefox klappt das wunderbar. nun ja nur wie weiss das select wann es nicht mehr angezeigt werden soll das ganze soll ja passieren wenn ich den bereich scrolle und dann der content bereich unter dem header bereich verschwindet. thx

16.11.2006, 11:11
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	In dem du einen Algorithmus schreibst, der dem <select> das mitteilt bzw. es gleich auch ausblendet?

16.11.2006, 11:41
andrew22 Erfahrener Benutzer Registriert seit: 20.06.2003 Beiträge: 233	hast du rein zufällig einen solchen Algorithmus bzw. gibt es irgendwo Beispiele mit denen ich mir den Algorithmus zusammenbasteln soll ? thx :wink:

16.11.2006, 15:46
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	schreib doch mal genau, wie deine seite aufgebaut ist und was wann ausgeblendet werden soll, dann wird 1/ dir das eigentliche problem klar und 2/ können wir dann vielleicht weitere ansätze liefern.

16.11.2006, 16:03
andrew22 Erfahrener Benutzer Registriert seit: 20.06.2003 Beiträge: 233	okay .. ich habe einen Header <div id="header"> dieser ist fixed. dann habe ich meinen content Bereich <div id="content"> dieser ist per z-index so angelegt das er beim scrollen unter dem header verschwindet. Im Firefox klappt alles super ... allerdings im IE habe ich das Problem das die select box sich über den Header legt alles andere verschwindet schön nur die select box nicht .. das ist sozusagen mein Problem .

16.11.2006, 16:38
M3g4Star Erfahrener Benutzer Registriert seit: 23.08.2007 Beiträge: 1.510	Versteh ich leider immer noch nicht ^^ Hast vllt mal den Code dazu das man sich das man anschaun kann ???