zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Elternelement uneinbeflusst vom Kindelement bei Liste

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.07.2019, 09:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 23
crane befindet sich auf einem aufstrebenden Ast
Standard Elternelement uneinbeflusst vom Kindelement bei Liste

Hallo alle zusammen,
ich bin mit meinem Menü schon etwas weiter gekommen. Nun möchte ich es schaffen, dass bei dem Menü das aus Listen besteht das Elternelement von den Änderungen im Kindelement nicht beeinflusst wird. Das heißt in meinem Fall:
Das Elternelement hat eine bestimmte Größe die kleiner als die Größe des Kindelement ist. Nun möchte ich das sobald das Kindelement dargestellt wird das Elternelement nicht in der Größe und der Position vom Kindelement beinflusst wird. Aktuell ist es so sich die Position vom Elternelement ändert, eine Lücke zum nächsten Elternelement entsteht und das Kindelement somit nicht über in die vertikale Postion vom nächsten Elternelement ragt.

Es soll letztendlich so wie auf dem Bild aussehen. Hier ist zur Verdeutlichung ein Menüpunkt blau markiert.

Mein dazugehöriger Code:
HTML-Code:
<link rel="stylesheet" href="nav2.css">

<style>
li.hm1
{
float: left;
}
<div style="float: right;" ><label for="show-menu" class="show-menu" style="position: absolute; border: 1px solid blue; right:100px; top:0;font-size:25pt;"></label>
	<input type="checkbox" id="show-menu" role="button">
	<ul class="menuc">
		<li class="hm1"><a href="#">Home</a></li>
		<li class="hm1"><a href="#">&Uuml;ber mich</a></li>
		<li class="hm1"><a href="#">Konzept</a>
			<ul class="hidden"">
				
				<li><a href="#">Hakomi</a></li>
				<li><a href="#">Chen Taiji </a></li>
				<li ><a href="#">Qi Gong und Meditation</a></li>

			</ul>
		</li>
		<li class="hm1"><a href="#">Methoden</a>
			<ul class="hidden">
				
				<li><a href="#">Was ist Hakomie</a></li>
				<li><a href="#">Themen</a></li>
				<li><a href="#">Termine</a></li>

			</ul>
		</li>
		<li class="hm1"><a href="#">Medien</a>
			<ul class="hidden">
				
				<li><a href="#">Bilder</a></li>
				<li><a href="#">Videos</a></li>
				
			</ul>
		</li>
		<li class="hm1"><a href="#">Links</a></li>
		<li class="hm1"><a href="#">Kontakt</a></li>
	</ul>
</div>
CSS:
Code:
ul {
	position: relative;
	z-index: 1;
	list-style-type:none;
	margin:0px 0px;
	padding:0px 0px;
	
	
	text-align: justify;
    	
	
	
}

/*Create a horizontal list with spacing im*/
li {
	
}

/*Style for menu links im*/
li a {
	display:block;
	width:100px;
	float:none;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #ffffff;
	background: #000000;
	text-decoration: none;
	
}

/*Hover state for top level links im*/
li:hover a {
	
	background:red;
	
}



/*Style for dropdown links im*/
li:hover ul  a {
	min-width:140px;
	color: #000000;
	background: blue;
	
}

/*Hover state for dropdown links maybe*/
li:hover ul a:hover {
	color: #000000;
	background: #999999;
}


/*Hide dropdown links until they are needed im*/
li ul {
	display: none;
}

/*Make dropdown links vertical im*/
li ul li {
	display: block;
	float: none;
	
	
}



/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
	display: block;
	position:relative;
	top:0;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	width: 50px;
	height: 50px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #000000;
	
	text-align: center;
	
	display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
	display: none;
	-webkit-appearance: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ .menuc{
	display: block;
}

Das mit der Check box und den daraus entstehenden Veränderungen haben mit meiner Frage nichts zu tun. Der Button kommt letztendlich abhängig von der Fenstergröße zum Vorschein.
Das Ergebnis vom Code sieht wie auf dem 2. Bild aus.
Vielleicht hat einer eine Idee was und wo im Code ich was für meine Lösung ändern muss.

Vielen lieben Dank
Angehängte Grafiken
Dateityp: jpg Menue.jpg (18,3 KB, 5x aufgerufen)
Dateityp: jpg Menue2.jpg (21,9 KB, 2x aufgerufen)

Geändert von crane (20.07.2019 um 18:21 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.07.2019, 14:03
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 99
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Da stimmt so einiges nicht - hast du den Code selbst geschrieben oder irgendwo kopiert?
Weder deine Fehlerbeschreibung, noch das angehängte Bild, passen zu dem Code, den du gepostet hast.
Bei mir sieht das Ganze so aus...

Das Menü klebt an der rechten Seite und bei 'hover' überdeckt das Untermenü die Hauptmenüelemente.
Die Checkbox hat keine Funktion... ist auch (ohne tricksen) nicht von der Seite aus zugänglich.
Was ist denn deine Absicht... was soll zu sehen sein, wenn man die Seite aufruft... was soll passieren, wenn man auf das [?] klickt... und wie soll denn das fertige Menü aussehen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.07.2019, 18:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 23
crane befindet sich auf einem aufstrebenden Ast
Standard

Ich habe eine kleine Änderung im von mir geposteten Code vorgenommen. Ich habe ausversehen einen Teil vom Code vergessen.
Und dann habe ich auch noch ein Bild von der richtigen Darstellung angehängt.
Mit Zitat antworten
  #4 (permalink)  
Alt 20.07.2019, 19:01
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 99
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Und wie sollen wir dir jetzt weiterhelfen... in dem unvollständigen Code nach Fehlern suchen?
Mit Zitat antworten
  #5 (permalink)  
Alt 20.07.2019, 19:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 23
crane befindet sich auf einem aufstrebenden Ast
Standard

Bitte ignoriert die Teile mit dem Label und so, die dafür verantwortlich sind das wenn das Fenster eine bestimmte Größe hat ein Button erscheint. Der responsive Teil fehlt im Css Code da er für die Darstellung und die Lösung nicht nötig ist. Mit und ohne diesem Css Teil wird alles wie auf dem 2. Bild dargestellt.
Und ja bitte schaut in meinem Code nach wo etwas geändert werden muss, dass das Menü nach dem Aufklappen so wie auf dem 1. Bild aussieht.
Ich bitte euch sehr darum, da ich selber auf keine Idee komme. Dafür ist dieses und andere Foren auch da.
Vielen lieben Dank
Mit Zitat antworten
  #6 (permalink)  
Alt 20.07.2019, 20:30
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 99
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Dann poste auch bitte den Code, der das anzeigt, was im Bild 2 zu sehen ist... wie gesagt, das kann nicht der Code aus deinem Anfangspost sein, denn der erzeugt das, was ich in meiner Antwort als Bild angehängt habe.
Habe aber trotz des fehlenden Codes den Verdacht, dass die <ul>'s der Untermenüs mit
Code:
position: relative;
positioniert sind - ändere das mal auf
Code:
position: absolute;
und schau, ob das etwas verbessert?
Mit Zitat antworten
Antwort

Stichwörter
liste, unterliste, verschiedene größen

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Kindelement gleich hoch wie variables Elternelement Cu Chullain CSS 4 22.12.2009 22:54
margin wirkt sich aufs elternelement aus anstatt Kindelement Cu Chullain CSS 3 01.10.2009 20:10
<li> von einer Liste in andere verschieben tichy Javascript & Ajax 5 16.07.2009 13:54
Bunte Liste: Code kürzen? Steakfred CSS 2 23.01.2008 11:43
Liste (inline) Umbruch erzeugen Steakfred CSS 3 09.05.2006 12:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:35 Uhr.