zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Menüleiste Größe und Position geht nicht richtig

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.09.2019, 16:27
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 33
crane befindet sich auf einem aufstrebenden Ast
Ausrufezeichen Menüleiste Größe und Position geht nicht richtig

Hallo alle zusammen,
ich habe immer noch ein Problem mit meiner Menüleiste.
Wenn sie horizontal ausgerichtet ist, d.h. bei normaler Fenstergröße, funktioniert alles super. Die Positionen bekomme ich perfekt hin und die Größe, in dem Fall die Weite kann ich perfekt mit einer Minimalbreite so einstellen, dass sich immer genügend Platz für das Anzeigen in einer Linie genommen wird. Die Minimalbreite brauche ich auch nur in dem Submenü, d.h. das was beim darüberfahren ausklappt.

Wenn ich es vertikal ausrichte, also für kleinere Fenster, funktioniert das ganze nicht richtig. Ich möchte das, dass Submenü genau, ohne überlappen links von dem Hauptmenü angezeigt wird und die breite sich so viel Platz nimmt wie nötig ist um in einer Linie angezeigt zu werden.

Ich finde keine Idee um dieses Problem zu lösen. Ich würde mich freuen wenn mir einer von euch vernümftig dabei helfen könnte.

hier die beiden Code segemente

HTML-Code:
<div id="header">
	<div class="hinner">
	<div id="logo"><a href="index.htm"><img src="logo.png" width="70px;" height="70px"><span style="color:blue;">Leonard 

Schmidt</span></a></div>
	<div id="nav"><label for="show-menu" class="show-menu" style="font-size:25pt;"></label>
	<input type="checkbox" id="show-menu" role="button">			
	<ul class="menuc">
		<li class="hm1"><a href="info.htm">&Uuml;ber mich</a></li>
		<li class="hm1"><a href="konzept.htm">Konzept</a></li>
		<li class="hm1"><a href="#">Methoden</a>
			<ul class="hidden methoden">
				
				<li class="spacing"></li>
				<li ><a href="#">Hakomi</a></li>
				<li id="menud"><a href="#">Chen Taiji </a></li>
				<li id="menud"><a href="#">Qi Gong und Meditation</a></li>

			</ul>
		</li>
		<li class="hm1"><a href="#">Termine</a>
		<li class="hm1"><a href="#">Medien</a>
			<ul class="hidden medien">
				
				<li class="spacing"></li>
				<li><a href="#">Bilder</a></li>
				<li id="menud"><a href="#">Videos</a></li>
				
			</ul>
		</li>
		<li class="hm1"><a href="#">Kontakt</a>
			<ul class="hidden kontakt">
				
				<li class="spacing"></li>
				<li><a href="#">Kontakt</a></li>
				<li id="menud"><a href="#">Impressum</a></li>
				<li id="menud"><a href="#">Datenschutz</a></li>
				<li id="menud"><a href="#">Links</a></li>

			</ul>
		</li>
				
	</ul>
	</div>
</div>
</div>
CSS code
Code:
/*Strip the ul of padding and list styling im*/
*{
margin:0;
padding:0;
font-family:sans serif;

}

#header {
  position:fixed; 
  top:0px; 
  left:0px;
  height:75px; 
  width:100%; 
  overflow:hidden;
  background-image: url('bruecke2.png');
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;

}



#header .hinner 
{
  width: 100%;
  max-width: 1200px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  webkit-box-align: center;
  moz-box-align: center;
  ms-flexbox-align: center;
  webkit-flex-align: center;
  align-items: center;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  margin-left:auto;
  margin-right:auto;
  padding-left:2em;
  padding-right:2em;
}

#logo
{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  webkit-box-align: center;
  moz-box-align: center;
  ms-flexbox-align: center;
  webkit-flex-align: center;
  align-items: center;
  position: relative;
  z-index: 1;
  
}

#nav
{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative;
  z-index: 1;
}

.nava
{
  color:#2f6140;
}

li
{
list-style-type:none;
float:left;
}

li a {
	display: block;
	float:block;
	height: 50px;
	width: 100px;
	text-align: center;
	line-height: 50px;
	
	color: lightblue;
	text-decoration: none;
}

li:hover a {
	
	background: rgba(255, 255, 255, 0.3);
	
}
/*Style for dropdown links im*/
li:hover ul  a {
	
	width:100%;
	min-width:100px;
	height: 50px;
	z-index: 1;
	text-align: left;
	padding: 0 10px;
	color: #000000;
	background: #ffffff;	
}

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

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

li ul li {
	display: block;
	float: none;
	padding:0;
		
}

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

/*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: #ffffff;
	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: inline-block;
}

.spacing
{
height:12.5px;
background-color: transparent;
}

/*Responsive Styles*/

@media only screen and (max-width : 979px){
	/*Make dropdown links appear inline*/
	ul {
		position:fixed;
		top: 75px;
		z-index: 1;
		display: none;
		width: 100%;
		min-width:100px;
		
		
		
		
		
	}
	/*Create vertical spacing*/
	#header li {
		
		margin-bottom: 0px;
		margin-left:-50px;
		padding: 0;
		top:75px;
		
		
		
		
	}

	li a
	{
		
		background: #ffffff;
		color: #000000;
		
		
	}

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

li ul
{
  
	
}

/*Style for dropdown links im*/
li:hover ul  a {
	
	
	
	
	
	background: #ffffff;
	
	
}


	/*Make all menu links full width*/
	li {

	float: none;
	

		
}

.hidden
{
position:relative;
top:0;
}
	/*Display 'show menu' link*/
	.show-menu {
			
	display:inline-block;	

	}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
	display: inline-block;
	position:absolute;
	
	
}


ul.methoden 
{

top:100px;


}

ul.medien  
{
top: 200px;


}

ul.kontakt
{
top: 250px;

}

.spacing
{
height:0px;
background-color: transparent;
}

}
Vielen lieben Dank schon mal
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.09.2019, 10:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Erstens: Dein HTML Code weist mehrere Fehler auf: Eine ID darf, wie der Name schon sagt, nur einmal pro Dokument vorkommen (id="menud" wird mehrmals verwendet)
Auch wird ein <li>-Tag nicht korrekt geschlossen.

Das aber nur nebenbei, zu deinem eigentlichen Problem: Eine komplette Lösung habe ich nicht, aber zumindest einen Ansatz:
Du musst den <li>-Elementen position relative geben, dann kannst du die submenüs (<ul>) mit left: 11%, top: 0; neben die Punkte setzen.
left: 11% ist jetzt ein durch trial- und error herausgefundener Wert, hier bitte überprüfen wie man das schöner machen kann. Auch muss dann noch die Hintergrundfarbe angepasst werden damit es sich nicht mit der restlichen Navigation überlagert.

Ein paar weitere Denkpunkte: Hast du das prinzipiell schon einmal auf einem mobilen Gerät getestet ob das dann auch wirklich benutzbar ist? Also ob du dann auch alle Punkte korrekt triffst und es auch lesbar bleibt?
Warum verwendest du für #nav ein display flex? Das wird hier doch eigentlich nicht gebraucht.
Und warum verwendest du dann für die eigentliche Navigaion (das Menü) floats? Mit fixen px-Angaben für Höhe und Breite?
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
größe, klappmenü, position

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
IE 6 / 7 / 8: falsches Elternelement bei position - IE BUG? ebimail CSS 2 01.09.2009 13:30
Was übersehe ich? Psyclown CSS 2 19.10.2008 14:00
Positionierung einiger Elemente falsch CrAzYs CSS 4 09.10.2008 21:45
Bildergalerie? Bild soll in einem Div, text in anderem Div erscheinen? caja13 CSS 11 10.09.2008 17:31
hovereffekt in IE nicht sichtbar xtra6y CSS 2 31.08.2006 18:43


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:42 Uhr.