zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Reihenfolge der Klassen in CSS relevat?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.08.2015, 16:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2015
Beiträge: 1
MiG87 befindet sich auf einem aufstrebenden Ast
Frage Reihenfolge der Klassen in CSS relevat?

Hallo Zusammen,

dies ist mein erster Beitrag in diesem Forum und ich hoffe ich stelle keine Frage, die schon beantwortet wurde.

Ich schreibe aktuell eine Website für den mobilen Einsatz um. Dazu lagere ich die css Styles der einzelnen Templates in zentrale css files aus.

Hierbei ist mir etwas merkwürdiges (oder auch komplett normales?) aufgefallen. Obwohl die Klassen alle unterschiedlich heißen, scheinen sie sich gegenseitig zu beeinflussen. Die Reihenfolge im CSS Sheet spielt eine entschiedene Rolle, ob die Styles korrekt umgesetzt werden.

Hier ist ein Auszug der entsprechenden Datei:

Code:
@charset "UTF-8";


body, html {
	font-family: arial, helvetica, sans-serif;
	font-size: 0.86em;
	color: #f6f6f6;
	background-color: #333333;
	//background-color: #864264;
	padding:0px;
	border: none;
	margin:0px;
	letter-spacing:0.05em
}

.inhalt{
	background-color: #864264;
	padding:20px;
	z-index: 1;
	box-shadow: 3px 3px 5px black;
}

.main{
	background-color: #f6f6f6;
	color: #333333;
	margin-right: 7px;
	margin-bottom: 7px;
	padding: 15px;
	box-shadow: 3px 3px 5px #1a1a1a;
}

.bild{
	background-color: black;
	color: white;
	margin-right: 7px;
	margin-bottom: 7px;
	padding: 0px;
	box-shadow: 3px 3px 5px #1a1a1a;
}


//Kontaktformular

.kontakt{
	width: 500px;
	height: 537px;
	padding: 5px 15px 15px 25px;
	float:left;
	
	
}
.adresse {
	width: 250px;
	height: 200px;
	padding: 5px 15px 15px 25px;
	float:left;
	
	
}
.oeffnungszeiten{
	width: 250px;
	height: 200px;
	padding: 5px 15px 15px 25px;
	float:left;
	
	background-color: #333333;
	color: #f6f6f6;
	
}

.karte{
	width: 557px;
	height: 300px;
	float:left;
	
}


.kontakt label, input, textarea{
	width: 205px;
	display: block;
	float:left;
}

.kontakt input, textarea{
	background-color: white;
	color: #333333;
	font-size: 11pt;
	border: 1px solid #333333;
	padding: 5px;
	margin-bottom: 10px;
	margin-right: 30px;
}

.kontakt label{
	margin-right: 40px;
}

.kontakt input:hover, textarea:hover, input:focus, textarea:focus{
	outline: 1px #333333 solid;
}


.kontakt br{
	clear: left;
}


.kontakt textarea{
	width: 450px;
	height:200px;
}

//Templates

.centerMedia {
	width: 600px;
	height: 338px;
	float:left;
}

.puffer {
	width: 258px;
	height: 338px;
	padding: 0px;
	float:left;
}

.bildEinDrittel {
	float: left;
	width: 372px;
	height: 244px;
}

.text50 {
	float: left;
	width: 540px;
	height: 345px;
}

.bild50 {
	float: left;
	width: 560px;
	height: 375px;
}

.textLinksKlein {
	float: left;
	width: 350px;
	height: 400px;
}

.bildRechtsGross {
	float: left;
	width: 750px;
	height: 430px;
	padding: 0px;
}

.clr{
	clear:left;
}
Die Aufrufe sehen z.B. so aus:

HTML-Code:
<div class="main kontakt">

<h class='ueberschrift1'>Kontaktformular</h>

	<form name="kontakt" method="post">
	
		<label >Vorname: </label><label>Nachname: </label><br/>
		<input type="text" name="vorname" value=""/><input name="nachname" value="" /><br/>
		<label>Email: </label><label>Telefon: </label><br/>
		<input name="email" value=""/><input name="telefon" value=""/><br/>
		<label>Ihre Nachricht: </label><br/>
		<textarea name="nachricht"></textarea><br/>
		<input type="submit" value="Nachricht senden"><br/>
	
	</form>

</div>


<div class="main adresse">
<h class='ueberschrift1'>Adresse</h>
<p>.......Anschrift.....</p>
</div>
<div class="main oeffnungszeiten">
<h class='ueberschrift1'>Öffnungszeiten</h>
<p>Mo-Sa: 9:00-13:00, 14:30-18:00</p>
<p>Mittwoch und Samstag Nachmittag geschlossen</p>
<p>Weitere Termine nach Vereinbarung</p>
</div>

<div class="main karte">
Google Maps
</div>
<br style="clear:left;" />
Auf dieser Unterseite wird das Kontaktformular nicht mit 500px Breite, sondern mit 100% angezeigt. Ich habe keine Ahnung, woher das stammt.

Woran kann diese "Willkür" liegen?

Vielen Dank.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.08.2015, 17:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Woran kann diese "Willkür" liegen?
Am Webseitenersteller, immer am Webseitenersteller.

Zitat:
Obwohl die Klassen alle unterschiedlich heißen, scheinen sie sich gegenseitig zu beeinflussen.
Nur, wenn sie ineinander verschachtelt sind. Das ist aber hier nicht der Fall.

Zitat:
Die Reihenfolge im CSS Sheet spielt eine entschiedene Rolle
Ja klar. Das ist doch Sinn vom C in CSS = Cascade. Spätere Angaben im Quelltext mit der gleichen Spezifität überschreiben vorher erstellte.

Zitat:
ob die Styles korrekt umgesetzt werden.
Für CSS gibt es Standards, die dem Webseitenersteller natürlich bekannt sein sollten. Styles werden also immer korrekt umgesetzt.

Demnach ist auch

Zitat:
Woran kann diese "Willkür" liegen?
nicht möglich. Aber das hast du kenntlich durch die Anführungszeigen bereits selbst erkannt.

Zitat:
Ich habe keine Ahnung, woher das stammt.
Von deinen "Eigenkreationen". Eventuell hast du von Programmiersprachen (PHP?) nicht auf CSS umgeschaltet. Sowas

Code:
//Kontaktformular
gibt es in CSS nicht. Kommentare (auch einzeilige) sind nur innerhalb

Code:
/* */
zulässig. Wenn du dann schon mal dabei bist kannst du auch gleich noch weitere "Eigenkreationen" suchen und beseitigen.

Gruss

MrMurphy

Geändert von MrMurphy (30.08.2015 um 17:25 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.08.2015, 18:47
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.07.2006
Beiträge: 745
mermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblick
Standard

Du kannst mit den Debug-Funktionen des Browsers („F12“ drücken) üblicherweise ganz gut nachvollziehen, welche CSS-Regeln warum für ein bestimmtes Element greifen.

Hier (Screenshot vom Firefox) sieht man etwa, dass .alt2 die color-Eigenschaft von .tborder und .page überschreibt.

Wenn du dir nicht sicher bist, ob deine CSS-Syntax korrekt ist: Es gibt da diverse Validatoren. Zum Beispiel als Webseite (https://jigsaw.w3.org/css-validator/), aber auch in IDEs oder Editoren integriert.
Mit Zitat antworten
Antwort

Stichwörter
css, reihenfolge

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
Klassen in der css Datei wiederverwenden mappenz CSS 3 23.04.2012 19:11
HTML Reihenfolge vs. CSS Platzierung mimii CSS 20 02.07.2009 13:04
Doctype und CSS Problem tech CSS 3 29.05.2009 20:16
Gibt es eine Reihenfolge in CSS ? esperance CSS 4 28.01.2009 20:29
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 11:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:24 Uhr.