|
|||
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; } 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;" /> Woran kann diese "Willkür" liegen? Vielen Dank. |
Sponsored Links |
|
||||||
Hallo
Zitat:
Zitat:
Zitat:
Zitat:
Demnach ist auch Zitat:
Zitat:
Code:
//Kontaktformular Code:
/* */ Gruss MrMurphy Geändert von MrMurphy (30.08.2015 um 17:25 Uhr) |
Sponsored Links |
|
|||
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. |
Stichwörter |
css, reihenfolge |
|
|
Ä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 |