Redundanzen

[Dom]

Hallo zusammen!
Ich habe bei der Erstellung einer kleinen Webseite versucht, möglichst sauber zu arbeiten. Dazu gehört auch die CSS-Datei der Seite möglichst sauber und prägnant ohne Redundanzen zu erstellen. Die Validatoren für CSS und HTML der W3C habe ich bereits drüberlaufen lassen:
Hier das Ergebnis meiner Arbeit (wenn es interessiert, poste ich auch den Link zur HTML-Seite).
Vielen Dank für jeden Tipp oder Anregung

@charset "utf-8";  
/* Uebergeordnete Angaben */  
body {  
	background-color: #828fc6;  
	font-family: Verdana,Arial,sans-serif;  
	font-size: 100.1%;  
	font-style: normal;  
	font-variant: normal;  
	font-weight: normal;  
	text-decoration: none;  
	width: 957px;  
	margin: 0px auto;  
}  
li {  
	border-style: solid;  
	border-color: #FFF;  
	color: #FFF;  
	display: block;  
}  
a {  
	text-decoration: none;  
	color:#FFF;  
}  
/* Ueberschriften */  
h1 {  
	margin: 10px 0px 0px 0px;  
	border: 2px solid #FFF;  
}  
h2, h3, h4 {  
	font-weight: bold;  
	color: #960F0F;  
	margin: 0px;  
	padding-top: 10px;  
}  
h2 {  
	font-size: 1.4em;  
	padding-left: 20px;  
}  
h3, h4 {  
	font-style: italic;  
	font-size: 1.1em;  
	text-align: right;  
	padding-right: 20px;  
}  
h4 {  
	padding-top: 0px;  
}  
/* Formatierung für horizontale und vertikale Navigation */  
#horizontalnavigation, #vertikalnavigation {  
	list-style: none;  
	margin: 0px;  
	padding: 0px;  
}  
#horizontalnavigation li {  
	text-align: center;  
	float: left;  
	font-size: 0.8em;  
	font-weight: bold;  
	padding-top: 5px;  
	padding-bottom: 5px;  
}  
#horizontalnavigation li.zelle1 {  
	border-width: 0px 2px 2px 2px;  
	width: 227px;  
}  
#horizontalnavigation li.zelle2 {  
	border-width: 0px 2px 2px 0px;  
	width: 240px;  
}  
#horizontalnavigation li a {  
	font-weight: normal;  
}  
#horizontalnavigation li a:hover {  
	text-decoration: underline;  
}  
#vertikalnavigation {  
	width: 231px;  
	float: left;  
}  
#vertikalnavigation li {  
	border-width: 0px 2px 2px 2px;  
	background-image: url(../Grafiken/Button.jpg);  
	font-size: 1em;  
	font-weight: bold;  
	padding: 10px 5px 10px 15px;  
}  
#vertikalnavigation li a {  
	font-weight:normal;  
}  
#vertikalnavigation li a:hover {  
	font-weight: bold;  
	color: #828fc6;  
}  
/* Formatierungen fuer den Content-Bereich */  
#hauptfenster, #praxisraeume {  
	border-style: solid;  
	border-color: #828fc6;  
	border-width: 5px 0px 0px 0px;  
	background-image: url(../Grafiken/Hintergrund.jpg);  
	width: 726px;  
	height: 351px;  
	margin: 0px;  
	padding: 0px;  
	float: right;	  
}  
#praxisraeume {  
	border-bottom-style: none;  
	background-image: url(../Grafiken/Praxisraeume.jpg);  
}  
/* Textformatierung fuer den Content-Bereich */  
p {  
	padding: 10px 20px 0px 20px;  
	margin: 0px;  
	line-height: 23px;  
	color: #000;  
	font-size: 1em;  
}  
p.fettschrift {  
	font-weight: bold;  
}  
p.kleinereschrift {  
	padding-top: 5px;  
	line-height: 19px;  
	font-size: 0.8em;  
}  
.kriterienliste li {  
	display: list-item;  
	list-style: square;  
	border-style: none;  
	font-size: 1em;  
	color: #000;  
	padding-top: 6px;  
}  
.kriterienliste li.kleinereschrift {  
	font-size: 0.8em;  
	padding-top: 3px;  
}  
#personenangaben {  
	float:left;  
}  
#personenangaben a {  
	color: #960F0F;  
}  
#personenangaben a:hover {  
	text-decoration:underline;  
}  
#portraitbild {  
	padding-top:20px;  
}  
#googlekarte {  
	width: 265px;  
	height: 240px;  
}  
/* Fussnote */  
#fussnote {  
	padding: 0px;  
	font-size: 0.6em;  
	color: #FFF;  
	float:right;  
}  
#fussnote a {  
	text-decoration:underline;  
}

Viele Grüße

[ChrisB]

Hi,

an den Stellen, wo du bspw. für die Schrift und für Rahmen jeweils einzelne Angaben machst, würde sich die Benutzung der shorthand-properties anbieten.

Und text-decoration:underline gibst du an diversen Stellen als Inhalt einzelner Regeln an - zu einer Regel zusammenfassen, die alle betreffenden Selektoren enthält.

MfG ChrisB

[Dom]

Besten Dank Chris,
hab ich übernommen und hat auch geklappt. Bei den font-Angaben allerdings nur für den Body.

@charset "utf-8";  
/* Uebergeordnete Angaben */  
body {  
	background-color: #828fc6;  
	font: normal normal normal 100.1% "Verdana","Arial",sans-serif;  
	text-decoration: none;  
	width: 957px;  
	margin: 0px auto;  
}  
li {  
	border: solid #FFF;  
	color: #FFF;  
	display: block;  
}  
a {  
	text-decoration: none;  
	color:#FFF;  
}  
/* Ueberschriften */  
h1 {  
	margin: 10px 0px 0px 0px;  
	border: 2px solid #FFF;  
}  
h2, h3, h4 {  
	font-weight: bold;  
	color: #960F0F;  
	margin: 0px;  
	padding-top: 10px;  
}  
h2 {  
	font-size: 1.4em;  
	padding-left: 20px;  
}  
h3, h4 {  
	font-style: italic;  
	font-size: 1.1em;  
	text-align: right;  
	padding-right: 20px;  
}  
h4 {  
	padding-top: 0px;  
}  
/* Formatierung für horizontale und vertikale Navigation */  
#horizontalnavigation, #vertikalnavigation {  
	list-style: none;  
	margin: 0px;  
	padding: 0px;  
}  
#horizontalnavigation li {  
	text-align: center;  
	float: left;  
	font-size: 0.8em;  
	font-weight: bold;  
	padding-top: 5px;  
	padding-bottom: 5px;  
}  
#horizontalnavigation li.zelle1 {  
	border-width: 0px 2px 2px 2px;  
	width: 227px;  
}  
#horizontalnavigation li.zelle2 {  
	border-width: 0px 2px 2px 0px;  
	width: 240px;  
}  
#horizontalnavigation li a {  
	font-weight: normal;  
}  
#vertikalnavigation {  
	width: 231px;  
	float: left;  
}  
#vertikalnavigation li {  
	border-width: 0px 2px 2px 2px;  
	background-image: url(../Grafiken/Button.jpg);  
	font-size: 1em;  
	font-weight: bold;  
	padding: 10px 5px 10px 15px;  
}  
#vertikalnavigation li a {  
	font-weight:normal;  
}  
#vertikalnavigation li a:hover {  
	font-weight: bold;  
	color: #828fc6;  
}  
/* Zusammenfassung der Underline-Formatierungen */  
#horizontalnavigation li a:hover, #personenangaben a:hover, #fussnote a {  
	text-decoration: underline;  
}  
/* Formatierungen fuer den Content-Bereich */  
#hauptfenster, #praxisraeume {  
	border: solid #828fc6;  
	border-width: 5px 0px 0px 0px;  
	background-image: url(../Grafiken/Hintergrund.jpg);  
	width: 726px;  
	height: 351px;  
	margin: 0px;  
	padding: 0px;  
	float: right;	  
}  
#praxisraeume {  
	border-bottom-style: none;  
	background-image: url(../Grafiken/Praxisraeume.jpg);  
}  
/* Textformatierung fuer den Content-Bereich */  
p {  
	padding: 10px 20px 0px 20px;  
	margin: 0px;  
	line-height: 23px;  
	color: #000;  
	font-size: 1em;  
}  
p.fettschrift {  
	font-weight: bold;  
}  
p.kleinereschrift {  
	padding-top: 5px;  
	line-height: 19px;  
	font-size: 0.8em;  
}  
.kriterienliste li {  
	display: list-item;  
	list-style: square;  
	border-style: none;  
	font-size: 1em;  
	color: #000;  
	padding-top: 6px;  
}  
.kriterienliste li.kleinereschrift {  
	font-size: 0.8em;  
	padding-top: 3px;  
}  
#personenangaben {  
	float:left;  
}  
#personenangaben a {  
	color: #960F0F;  
}  
#portraitbild {  
	padding-top:20px;  
}  
#googlekarte {  
	width: 265px;  
	height: 240px;  
}  
/* Fussnote */  
#fussnote {  
	padding: 0px;  
	font-size: 0.6em;  
	color: #FFF;  
	float:right;  
}

[Gunnar Bittersmann]

@@Dom:

nuqneH

body {
[…]
text-decoration: none;

Das steht im internen Stylesheet eines jden Browsers; die Angabe ist also überflüssig.

width: 957px;

Das ist kein sinnvoller Wert für die 'width'-Eigenschaft. Oder besser gesagt: 'width' ist nicht die beste Eigenschaft für diesen Wert. Verwende 'max-width'!

Qapla'

[Dom]

text-decoration: none;  

Hab ich übernommen! Besten Dank!

width: 957px;  

Das ist kein sinnvoller Wert für die 'width'-Eigenschaft. Oder besser gesagt: 'width' ist nicht die beste Eigenschaft für diesen Wert. Verwende 'max-width'!

Bin dem Link gefolgt und habe auch noch ein paar weitere Artikel zu max-width gelesen. Ganz klar ist mir das nicht, aber ich habe in meiner css-Datei jetzt stehen:
max-width: 957px;
Wird in allen Browsern korrekt dargestellt.

Viele Grüße
Dom

[Gunnar Bittersmann]

@@Dom:

nuqneH

Ganz klar ist mir das nicht,

Schieb mal dein Browserfenster zusammen. Da wirst du einen deutlichen Unterschied sehen, wenn du 'width' bzw. 'max-width' verwendest.

Qapla'

[Dom]

Schieb mal dein Browserfenster zusammen. Da wirst du einen deutlichen Unterschied sehen, wenn du 'width' bzw. 'max-width' verwendest.

Qapla'

Ok, besten Dank! Der Unterschied ist eindeutig!
Aus dem Beitrag zur Seitenbewertung habe ich auch noch den Tipp übernommen, min-width ebenfalls einzusetzen.

Viele Grüße
Dom