Supportnet / Forum / Webseiten/HTML

HI Habe folgendes Problemchen: Ich habe für meine Webseite ein schickes Horizontales dropdown-CSS menü gebastelst. Auf der Seite an sich befinden sich auch Dropdownlisten, direkt unter dem menü. Beim Aufklappen des Menüs sollte dieses logischerweise über allen anderen elementen der Webiste leigen, das tuts auch soweit, nur bei diesen DropDownListen nicht. Ich hab den DDL und dem Menü auch schon entsprechende z-index Werte gegeben, aber es änder sich nichts an der Sache.... Der inhalt der Seite liegt an für sich schon in nem <div> dessen z-index niedriger als der des menüs ist . Hilfe?

Hallo _mpact,

bist du bereit, einen Link zur fraglichen Seite hier einzustellen? Oder kannst du wenigstens den betreffenden Quellcodeteil posten?

katy

N Link kann ich nich anbieten, da das ne Intranetseite wird, und ich momentan eh noch lokal aufm pc arbeit.

Mit Dem quellcode is das so ne sache - das wäre verdammt viel, zudem ist die Seite an sich in asp.net, was an für sich nichts zur sache tut, da am ende sowieso html bei raus kommt, aber ich kann mal versuchen die wichtigsten sachen zu erklären:

Also, das CSS menü an sich sind 2 ineinander verschachtelte unsortiere listen (reines HTML), per css wird dann daraus ein dropdown menü. Der Code ist eigentlich genauso wie hier:
http://www.1ngo.de/web/tmenu.html

die asp-dropdowns sehen so aus:

    <asp:DropDownList ID="DropDownYears" runat="server" AutoPostBack="True" DataSourceID="ObjectDataSource1"
        DataTextField="year" DataValueField="year" CssClass="DropDown">
    </asp:DropDownList>

nachdem der Code vom server beareitet wurde, wird daraus folgendes HTML:

    <select name="ctl00$ContentPlaceHolder1$DropDownYears" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$DropDownYears\',\'\')', 0)" id="ctl00_ContentPlaceHolder1_DropDownYears" class="DropDown">
	<option selected="selected" value="2008">2008</option>
</select>

Die Besagte DropDow hat also die Klasse "DropDown"
im Stylesheet wird dann folgendermaßen formatiert:

.DropDown{width: 120px; z-index: 10;}

Das gesamte CSS menü hat einen z-index von 2, die angegebene width wert wird auch übernommen, jedoch der z-index bleibt völlig unbeeindruckt :\ Ander elemente, egal ob reines HTML oder durch aso generiertes werden korrkt hinter dem aufklappenden menü dargestellt

Hallo _mpact,

sarry, aber der Link zu einer "ähnlichen" Seite bringt natürlich nichts, denn "Der Teufel sitzt im Detail" (so lautet das Sprichwort doch?).

Also frage ich gleich nach ohne mir die Seite anzuschauen: sind die li positioniert (gibt es irgendwo die Eigenschaft position)? Ansonsten muss z-index vom Browser ignoriert werden.

katy

hi katy

Jo, die <li> sind positioniert (dazu sollte auch die ähnliche seite dienen, weil ich den dort veröffentlichten code als vorlage verwendet habe)

hab mir mein code mal angeschaut, und überall wo ein z-index definiert war eventuell fehlende position atribute dazugesetzt, haben wirklich n paar gefehlt, Jedoch hat das ganze auch nix gebracht.. ich versuch trotzdem mal mein CSS zu posten, sorry falls was doppelt drinne is, is noch etwas konfus ;) Bis jetzt siehts auch aufm IE6 ordentlch aus, FF, IE7 und Co sind noch nich perfekt, haben aber das selbe problem.

/*----------Menü----------*/


  div#Tmenu {	background: #003668;
				padding-left: 0px;
				height: 30px;
				width: 1000px;
				border: none;
				border-left: none;
				font-size: 90%;
				font-family: Arial;
				font-weight: lighter;
				float: left;
				margin-right: 0px;
				z-index: 2;
				background-image: url(bgmenu.jpg);
				background-repeat: repeat-x;
				position: absolute;}

  
 /** html div#Tmenu {
    width: 1000px;
    w\idth: 39.8em;   IE 6 in standards-compliant mode} */
  
  div#Tmenu div {	clear: left;
					height: 30px;
					width: 1000px;
					position: absolute;
					margin-right: 0px;
					z-index: 2;
					border: none;}
  
  ul#Navigation {   margin: 0px; 
					padding: 0px;
					text-align: center;
					z-index: 2;
					border: none;}

  ul#Navigation li {	list-style: none;
						float: left;
						position: relative;
						margin: 0px; 
						padding: 0px;
						width: 100px;
						height: 32px;
						background-color: Transparent;
						z-index: 2;
						border: none;}
						
  * html ul#Navigation li {position: relative;
							margin-bottom: 0px;
							border: none;
							z-index: 2;}

  ul#Navigation li ul {	margin: 0px; 
						padding: 0px;
						position: absolute;
						background-color: Transparent;
						border: none;
						z-index: 2;}
						
  * html ul#Navigation li ul {	left: -1.5em;
								lef\t: -0.4em;
								z-index: 2;
								position: absolute;}
								
  ul#Navigation li ul li {	float: none;
							display: block;
							margin-top: 0px; 
							margin-bottom: 0px;
							height: 100%;
							padding-left: 0px;
							padding-right: 0px;
							left: 5px;/*problem*/
							z-index: 2;
							position: relative;}

  ul#Navigation a {	display: block;
					width: 7em;
					text-decoration: none; 
					text-align: center;
					font-weight: lighter;
					padding: 3px 3px 3px 3px;
					border-left: solid 1px #FFFFFF;
					border-right: solid 1px #FFFFFF;
					color: white; 
					background-color: #003668;
					margin: 0px;
					width: 100px;
					height: 32px;
					background-image: url(bgmenu.jpg);
					background-repeat: repeat-x;
					z-index: 2;
					position: relative;}

  /* html ul#Navigation a, * html ul#Navigation span {
    width: 9.2em;
    w\idth: 7em;  * IE 6 in standards-compliant mode }*/
  
  
  ul#Navigation a:hover{	padding: 3px 3px 3px 3px;
							margin: 0px;
							border-left: solid 1px #ADD8E6; 
							border-right: solid 1px #ADD8E6;
							background-color: #004d94;
							background-image: url(bgmenuhover.jpg);
							background-repeat: repeat-x;
							z-index: 2;
							position: relative;}
												
  ul#Navigation li ul a:hover {		border-left: solid 1px #ADD8E6; 
									border-right: solid 1px #ADD8E6;
									height: inherit;
									z-index: 2;
									position: absolute;
									background-image: inherit;}
									
 ul#Navigation li a#home{	border-left: none;
							z-index: 2;
							position: relative;}
  

									
  ul#Navigation li ul a{	border-top: solid 1px #FFFFFF;
							margin-top: 0px;
							margin-bottom: 0px;
							background-color: #003f72;
							z-index: 2;
							background-image: none;
							position: relative;}




/* dynamisches Ein-/Ausblenden */
  ul#Navigation li ul {
    display: none;
	z-index: 2;
	position: relative;}
	
  ul#Navigation li:hover ul {
    display: block;
    height: 100%;
    position: absolute;
    background: transparent;
    z-index: 2;
  }

Hier noch n bild wies im Browser ausschaut:

http://img91.imageshack.us/img91/6174/pagese4.jpg

Hallo _mpact,

dein Bild hat's endlich bei mir klicken lassen. Das Problem ist meines Wissens nicht lösbar. Formularelemente werden vom Betriebssystem erzeugt und entziehen sich daher teilweise der Browserkontrolle - und damit dem CSS.
Versuch am besten das Layout so zu ändern, dass Überschneidungen nicht passieren.
Ansonsten kannst du diesen Workaround ausprobieren: SelfHTML-Archiv. Allerdings erscheint er mir recht aufwändig.

katy

mmmh.. das aber echt ne blöde sache, wer hätte das gedacht :\
Das mit dem Layout kann ich eher vergessen, da die Menüeinträge doch auch recht weit nach unten aufklappen. Bleibt wohl nur dieser iframe-fix, was auch immer ein iframe is, aber werd mich schlau machen ^^

Danke katy für deine bemühungen. Schön Feierabend : )

Gruß Jörg

• Transparentes Dropdown Menü
• Probleme mit dem geliebten VLC-Player
• "dropup"-menü für css
• Direktformatiertes CSS "überschreiben"
• CSS Fehler beim IE 6