css @media funktioniert nicht

[Hugo Stiglitz]

Hi.
Kann mir mal jemand bitte helfen, ich bin langsam etwas am verzweifeln
Und zwar möchte ich, dass der Hintergrund unter 500px Fenstergröße ausgeblendet wird.
Momentan sieht mein CSS geschnipsel so aus:

	.menuDiv ul {
		text-align: center;
		padding-bottom: 5px;
		
		@media (min-width: 500px) {
		background-image: url('/img/design/menuBg02l.jpg'),url('/img/design/menuBg04r.jpg');
		background-repeat: no-repeat;
		background-position: left center,right center;
		background-size: auto 45px;
		}
		
		background-color: #0099cc;
		
	}

Was mache ich falsch?

Ich nutze Safari unter OSX...

 

[Snooty]

Kann man das so verschachteln? Ich denke du musst den @media-Block einzeln setzen und darin das .menuDiv ul notieren.

.menuDiv ul {
  text-align: center;
  padding-bottom: 5px;
  background-color: #0099cc
}
		
@media (min-width: 500px) {
  .menuDiv ul {
    background-image: url('/img/design/menuBg02l.jpg'),url('/img/design/menuBg04r.jpg');
    background-repeat: no-repeat;
    background-position: left center,right center;
    background-size: auto 45px
  }
}

 

[Hugo Stiglitz]

Hi. Danke für deine Antwort.
Naja, ich hab ein wenig gegooglt und irgendwo stand, es würde funktionieren.
Ich hab nun deine Variante probiert. Funktioniert leider auch nicht.
Die fehlenden ";" habe ich gemacht natürlich. Bin echt am verzweifeln....

Darf ich mal meine gesamte CSS posten? Vielleicht überseh ich einfach was...

body {
	background-color: #cccccc;
		background-image: url('/img/design/mainBg01.jpg');
		background-attachment: fixed;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	font-family: Helvetica;
	font-size: 1em;
	color: black;
	margin: 0;
	text-align: center;
}



.logo {
width: 100%;	
text-align: center;
}
.logo img {
width: 450px;
height: auto;	
}


.mainBox {
background-color: white;
height: auto;
min-height: 800px;
width: 70%;	
min-width: 400px;
display: inline-block;	
margin-top: 10px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 0px 15px 15px 15px;
-webkit-box-shadow: 5px 5px 15px black;
box-shadow: 5px 5px 15px black;
border: 1px solid black;
vertical-align: top;
text-align: left;
opacity: 0.95;
}

.mainBoxTop {
	background-color: black;
	width: 98%;
	height: 5px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background-image: url('/img/design/mainTopLeft01.jpg'), url('/img/design/mainTopRight01.jpg');
	background-position: left center, right center;
	background-repeat: no-repeat;

	
}


.menuDiv ul {
  text-align: center;
  padding-bottom: 5px;
  background-color: #0099cc;
}
		
@media (min-width: 500px) {
  .menuDiv ul {
    background-image: url('/img/design/menuBg02l.jpg'),url('/img/design/menuBg04r.jpg');
    background-repeat: no-repeat;
    background-position: left center,right center;
    background-size: auto 45px;
  }
}











.menuDiv li {
	display: inline-block;
	margin-right: 0.1em;

}
.menuDiv a {
	display: block;
    width: 9em;
    text-decoration: none;
    color: black;
    font-size: 1.15em;
	background-color: #00ccff;
	padding: 0.4em;
	margin: 0.2em 0 0 0;

	letter-spacing: 2px;

	-webkit-transition: background-color .25s ease-in;
	transition: background-color .25s ease-in;
	

}
.menuLinkSelected a{
	background-color: #99ffff;
	color: white;
}

.menuDiv a:hover, a:focus {
color: white;
background-color: #99ffff;

-webkit-transition: background-color 0.5s;
transition: background-color 0.5s;	
}

.mainpage {
	text-align: center;
}

.mainpage div {
text-align: left;
display: inline-block;
width: 29%;
min-width: 140px;
border: 1px dotted grey;
border-radius: 15px;
min-height: 500px;	
margin-right: 5px;
vertical-align: top;
	
}
.mainpage h2 {
	color: #0099ff;
}

.sales {
	background-image: url('/img/graphics/mercedes_sprinter01.jpg'),url('/img/graphics/mercedes_oldtimer01.jpg'), url('/img/graphics/steyr_traktor01.jpg');
	background-position: left top, right center, left bottom;
	background-repeat: no-repeat;
	background-size: auto 200px, auto 200px, auto 200px;
	width: 100%;
	min-height: 380px;
	
}
.sales h2 {
	color: #0099ff;
}
.sales h3 {
	color: black;
	
}
.contact {
padding-left: 10%;	
background-image: url('/img/graphics/phone2.png');
background-repeat: no-repeat;
background-position: right top;
background-size: auto 200px;
}
.contact h2, h3 {
	color: #0099ff;
}
.contact a {
	text-decoration: none;
	font-weight: bold;
	color: #0066cc;
}
.contact a:hover {
	color: #0099ff;
	text-decoration: underline;
}
.contact h3 {
	text-align: center;
}

Ergänzung (2. April 2016)

Habe das Problem selbst gelöst nach einer Nachtschicht am Mac
Thread kann geschlossen werden!

 

[CapFuture]

Kleine Empfehlung zum Thema Verschachteln und Lesbarkeit von CSS: Nutze einen CSS Preprozessor wie Less oder SASS.

Es macht dein Leben und den Code leichter und wartbarer

 

[Antoniker]

Hallo,

richtig, verschachteln geht grundsätzlich nicht mit CSS (@Snooty).
Wohingegen wie mein Vorposter @CapFuture bereits geschrieben hat, ein CSS-Preprozessor wie LESS oder SASS so etwas sehr wohl beherrschen und anschließend optimiertes CSS generieren können.

Zu deinem Problem: aus dem letzten CSS sehe ich kein Problem.
Möglicherweiße greifen deine Regeln einfach nicht, weil das HTML anders aussieht? "ul.menuDiv" müsste ja damit einen türkisfarbenen Hintergrund haben, richtig? Wenn das auch nicht der Fall ist, greift selbst die Regel darüber nicht

Poste uns doch bitte auch mal den passenden Teil des HTMLs!

Für Media-Rules siehe auch w3schools.

lg, Michael

 

[Evolutio]

Ich glaube man muss noch angeben für was das Media gilt.

Muss das dann nicht z.B. so sein?

@media screen and (min-width: 500px) {

}

oder

@media (min-width: 300px) and (max-width: 500px) {
}

ich glaube nämlich der brauch noch ein AND um das richtig zuordnen zu können