Problem bei Auslagerung von CSS von dedlfix, 06.08.2015 11:01

Problem bei Auslagerung von CSS

Michael 06.08.2015 10:52

css
html

Hallo Zusammen,

ich baue gerade eine Website für den mobilen Einsatz um und bin aktuell dabei den Glauben an CSS zu verlieren.

Meine Seite nutzt Smarty als Template Engine. Die Formatierung der einzelnen Templates habe ich bisher mit CSS direkt im Template vorgenommen.

Hier ein Beispiel:

<style type="text/css" >
<!--
.textLinks {
	float: left;
	width: 540px;
	height: 345px;
}

.textVolleBreite {
	
}

.bildRechts {
	float: left;
	width: 560px;
	height: 375px;
	padding: 0px;
}
-->
</style>


<div class="main textLinks" id="text1">{$text1}</div>
<div class="main bildRechts" id="bild1">{$bild1}</div>
<br style="clear: left;">
<div class="main textVolleBreite" id="text2">{$text2}</div>

Dabei wird "main" aus der zentralen style.css herangezogen.

Um die Styles über eine Weiche besser steuern zu können habe ich angefangen die "lokalen" Styles in meine style.css auszulagern.

Hier ein Auszug:

@charset "UTF-8";

.textLinks {
	float: left;
	width: 530px;
	height: 345px;
	color: red;
	border: 1px solid yellow;
}

.bildRechts {
	float: left;
	width: 500px;
	height: 375px;
	padding: 0px;
}



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

DIV {
	position:relative;
}

.ueberschrift1{
	font-size:14pt;
	font-weight: normal;
	letter-spacing:0.1em
}

.ueberschrift2{
	font-size:12pt;
	font-weight: normal;
	font-style: italic;
}

.ueberschrift3{
	font-size:10pt;
	font-weight: bold;
}

.topmenue {
	float: left;
	width: 80px;
	margin-top:10px;
	margin-left:15px;
	margin-right:15px;
	margin-bottom:10px;
	font-size: 12pt;
	display: block;
}

.center {
	width: 1150px;
	margin: auto;
}

.menue_rahmen{
	margin: auto;
	width: 800px;
}

.topmenue span{
	display: none;
}

.menue_rahmen:hover .topmenue span{
	display: block;
}

.topmenue a{
	color: lightgrey;
	text-decoration: none;
}
.topmenue a:hover{
	color: grey;
	text-decoration: none;
}
.topmenue a:active{
	color: lightgrey;
	text-decoration: none;
}
.topmenue a:visited{
	color: lightgrey;
	text-decoration: none;
}



.head{
	height:100px;
	text-align: center;
	background-color: #e4e0e0;
	background-repeat: repeat-x;
	margin: 0px;
	box-shadow: 3px 3px 5px black;
	z-index: 2;
}

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

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

.footer{
	padding: 10px;
	text-align:center;
}

.footer a{
	color: lightgrey;
	text-decoration: none;
}

.footer a:hover{
	color: grey;
	text-decoration: none;
}
.footer a:active{
	color: lightgrey;
	text-decoration: none;
}
.footer a:visited{
	color: lightgrey;
	text-decoration: none;
}

Ich habe die Styles so umbenannt, dass keine Namen doppelt vorkommen.

Nun zu meinem Problem:

Die Styles werden unterschiedlich interpretiert. Direkt im Teplate wird die Eigenschaft Padding:0px; korrekt angewand. Aus der style.css geladen wird diese Anweisung ignoriert.

Die style.css binde ich wie folgt ein:

<link href="style.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1224px)"/>

Bei kleineren Auflösungen wird eine alternative datei angezogen. Der Wechsel funktioniert.

Alle anderen allgemeinen Styles wie die Hintergrundfarbe der DIVs oder die Schriftgröße werden korrekt geladen. Nur die Eigenschaften der "lokalen" CSS Styles nicht.

Woran könnte dies liegen?

Vielen Dank.

Beitrag melden

– Informationen zu den Bewertungsregeln

akzeptierte Antworten