zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden Keine Reaktion auf bestimmte Anweisungen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.08.2019, 20:53
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 32
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
  #2 (permalink)  
Alt 19.08.2019, 09:01
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Deine Problembeschreibung versteh ich nicht.
Zitat:
keine Reaktion auf bestimmte Anweisungen
Welche Reaktion erwartest du?
Zitat:
Ich möchte anbestimmten stellen ...
An welchen Stellen?
Zitat:
...einmal eine max-width:1200px statt width:1200px verwenden.
Warum willst du das tun?
Zitat:
Wenn ich das tue dann gibt es keinen Effekt
Welchen Effekt soll das haben - was willst du damit erreichen?

Zu deinem Nav-Leisten Problem:
Gib deinem
HTML-Code:
li a {
   display: inline-block;
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.08.2019, 09:39
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.979
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Um deine schwer nachzuvollziehenden Beschreibung zu verbessern, könnte dir ein Werkzeug helfen.

Du kannst mit dem Inspektor (https://developer.mozilla.org/de/doc...iten_Inspektor) z.b. feststellen ob CSS Regeln auf ein Element angewendet werden oder nicht (und evtl. auch warum nicht).
Mit Zitat antworten
  #4 (permalink)  
Alt 19.08.2019, 13:16
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 32
crane befindet sich auf einem aufstrebenden Ast
Standard

An den Stellen wo width: 1200px steht möchte ich max-width verwenden.
Der Effekt soll sein das der betroffene Bereich maximal 1200px groß ist und wenn das Fenster also die Anzeigefläche kleiner wird der Bereich erst einmal nach links verschoben wird und bei Bedarf mit schrumpft.

Das andere Problem mit der Navigationsleiste konnte ich lösen.
Ich musste nur im Css bei li a Display: block hinzufügen und alles funktioniert wie gewünscht.
Mit Zitat antworten
  #5 (permalink)  
Alt 19.08.2019, 13:49
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Das sollte eigentlich schon mit dem jetzigen Code funktionieren, wie du es beschreibst.
Aber da ich nicht ganz so sicher bin, was du siehst, was ich nicht sehe, probiere folgendes:
ersetze alle deine
HTML-Code:
width: 1200px;
durch
HTML-Code:
width: 100%;
max-width: 1200px;
Mit Zitat antworten
Antwort

Stichwörter
angabe, keine reaktion, width

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
suche bestimmte Bildergalerie gandalf_hh Javascript & Ajax 12 09.06.2011 16:48
Transparenz für bestimmte Bereiche aufheben? AllOutAnime CSS 8 17.06.2008 22:12
Browser auf bestimmte Größe setzen (mit CSS?) Krischu CSS 4 03.04.2007 14:43
Formular: Bestimmte Zahl auslesen (erste, zweite, dritte ...) STRiDeR Serveradministration und serverseitige Scripte 1 22.03.2007 13:49
Screenreader: nur bestimmte Passagen vorlesen lassen...? paul_le Barrierefreiheit 0 12.02.2006 09:35


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:55 Uhr.