Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 10.09.2019, 15:27
crane crane ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 26
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