online 1
gast (50)

/ Forum / Webseiten/HTML

Webseiten/HTMLWebseiten/HTML

Fragevon _mpact vom 07.02.2020, 10:54 Options

Lösung

CSS Menü im Vordergrund halten

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?


Antwort schreiben

Antwort 1 von katy vom 07.02.2020, 11:16 Options

Hallo _mpact,

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

katy

Antwort 2 von _mpact vom 07.02.2020, 13:20 Options

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

Antwort 3 von katy vom 07.02.2020, 13:39 Options

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

Antwort 4 von _mpact vom 07.02.2020, 13:55 Options

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

Antwort 5 von katy vom 07.02.2020, 15:51 OptionsLösung

Lösung
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

Antwort 6 von _mpact vom 07.02.2020, 16:26 Options

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

Ähnliche Themen

Transparentes Dropdown Menü
JokaInThaHouse  11.04.2007 - 69 Hits - 2 Antworten

Probleme mit dem geliebten VLC-Player
Kung  05.07.2007 - 118 Hits - 1 Antwort

"dropup"-menü für css
hardy115  16.10.2007 - 74 Hits -

Direktformatiertes CSS "überschreiben"
Mich  23.02.2008 - 76 Hits - 3 Antworten

CSS Fehler beim IE 6
FirstAid  12.04.2008 - 46 Hits - 6 Antworten

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Version: supportware 1.9.150 / 10.06.2022, Startzeit:Mon Jan 26 01:23:17 2026