Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 18.08.2019, 20:53
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 Keine Reaktion auf bestimmte Anweisungen

Hallo alle zusammen,
ich habe mal wieder ein Problem mit meiner Homepage.
Irgend wie gibt es keine Reaktion auf bestimmte Anweisungen. Es bezieht sich generell auf die im CSS gewählte Breite. Ich möchte anbestimmten stellen einmal eine max-width:1200px statt width:1200px verwenden. Wenn ich das tue dann gibt es keinen Effekt. Mit nur width an den Stellen geht es. Das verstehe ich nicht.
Und dann habe ich plötzlich das Problem das in der Menüleiste Nav oben nicht auf die Breite von 100px reagiert wird. Ich habe nichts geändert. Die breite wird in der Rubrik li a angegeben.

Hier die beiden Codes:

HTML-Code:
<link rel="stylesheet" href="nav.css">
<div id="header">
	<div class="hinner">
	<div id="logo"><img src="logo.png" width="50px;" height="50px"></div>
	<div id="nav"><label for="show-menu" class="show-menu" style="font-size:25pt;">&#9776</label>
	<input type="checkbox" id="show-menu" role="button">			
	<ul class="menuc">
		<li class="hm1"><a href="#" style="color: yellow;">&Uuml;ber mich</a></li>
		<li class="hm1"><a href="#">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>


<div id="container">
	<div class="cinner">
		<div>
			<h1>Buddhismus</h1>
			<ul style="list-style-type:square">
				<li style="float: none">Test</li>
				<li style="float: none">Test</li>
				<li style="float: none">Test</li>
			</ul>
		</div>
		<div >
			<h1>Buddhismus</h1>
			<ul>
				<li>Test</li>
				<li>Test</li>
				<li>Test</li>
			</ul>
		</div>
	</div>
</div>
<div id="footer">
	<div class="finner">
	<div id="footerup" style="height:45%; style="line-height:0%;"><a href="impressum.htm">Impressum</a> | <a 

href="datenschutz.htm">Datenschutz</a> | <a href="links.htm">Links</a></div>
	<div id="footerdown" style="font-family: Helvetica Neue, Helvetica, Arial, sans-serif;">&copy; 2019 Leonard Schmidt</div>
</div>
</div>
und das css:
Code:
/*Strip the ul of padding and list styling im*/
*{
margin:0;
padding:0;
}

#header {
  position:absolute; 
  top:0px; 
  left:0px;
  height:75px; 
  width:100%; 
  overflow:hidden;
  background-image: url('wald.png');
  align-items: center;
  display: flex;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  
  
  
    
}

#header::before, #header::after
{
  display:inline-block;
  width:2em;
  height:75px;
  content: '';
}

#header .hinner 
{
  width:1200px;
  display: flex;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  
}

#logo
{
  display: -webkit-flex;
  display: flex;
  position: relative;
  z-index: 1;
  height: 50px;
  line-height:50px;
}

#nav
{
  display: -webkit-flex;
  display: flex;
  position: relative;
  z-index: 1;
  height:50px;
  line-height:50px;
}

li
{
display: block;
float:left;
}

li a {
	float:none;
	height: 50px;
	width:100px;
	text-align: center;
	line-height: 50px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #ffffff;
	text-decoration: none;
}

li:hover a {
	
	background: rgba(255, 255, 255, 0.3);
	
	
}
/*Style for dropdown links im*/
li:hover ul  a {
	
	width:170px;
	height: 50px;
	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;
		
}

/*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: 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;
		
		
	}
	/*Create vertical spacing*/
	li {
		
		margin-bottom: 0px;
		margin-left:-50px;
		
		top:75px;
		
		
		
	}

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

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

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


	/*Make all menu links full width*/
	ul li, li a {

	float: none;

		
}

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

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


ul.methoden 
{

top:100px !important;
right:100px;

}

ul.medien  
{
top: 200px !important;
right:100px;

}

ul.kontakt
{
top: 250px !important;
right:100px;
}

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

}

#container {
  position:absolute; 
  top:75px;
  width:100%;
  bottom:50px; 
  overflow:auto; 
  background: #a3a3a3;
  z-index:-1;
  display: flex;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

#container .cinner 
{
  width:1200px;
  display: flex;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  
  
}

#container::before, #container::after
{
  display:inline-block;
  width:2em;
  height:100%;
  content: '';
}

#footer {
  position:absolute; 
  bottom:0px; 
  width: 100%; 
  height:50px; 
  overflow:hidden; 
  background:#ffd9f7;
  border-top:1px solid #000000;
  line-height: 30px;
  display: flex;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

#footer::before, #footer::after
{
  display:inline-block;
  width:2em;
  height:75px;
  content: '';
}

#footer .finner
{
  width:1200px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  flex-direction: column;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
  
  
#footer a, p {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
Ich hoffe jemand von euch kann und will mir bei diesem Problem helfen.
Ich weis nämlich einfach nicht weiter.

Vielen lieben Dank
Mit Zitat antworten
Sponsored Links