[HTML] CSS validieren?

t_matze · 10 Februar 2004

CSS validieren?

Hat einer von Euch Erfahrung damit, nicht nur seine Seite bezüglich html zu validieren, sondern auch im Hinblick auf css? Wenn ich das versuche (egal ob über die url der css-Datei selbst oder einer html-Seite, die diese Datei eingebunden hat), dann schwafelt das W3C immer was davon, damit sie es parsen können, müsste ich valides html verwenden.

Ja was nun? Die Seite ist html-validiert, und in der css-Datei hat doch html nichts zu suchen, oder?

Und der angebotene Download eines css-Validators ist komplett unübersichtlich, also hab ich das aufgegeben.

Wenn mir da jemand helfen :trost könnte, wäre ich sehr froh!

ZuluDC · 10 Februar 2004

...egal ob über die url der css-Datei selbst oder einer html-Seite, die diese Datei eingebunden hat...

Hab das noch nie gemacht...haste auch beide Versionen versucht?...also einmal als externes CSS (aber mit Verweis auf diese Datei in der htm/html) ...

<link rel="stylesheet" type="text/css" href="format.css">

oder direkt in der htm/html selber als ...

<style type="text/css">

</style>

Mehr fällt mir dazu leider auch nicht ein :/

Tequilla · 10 Februar 2004

Re: CSS validieren?

Moin,

damit das CSS-File vom Validator abgearbeitet werden kann muss es in einer bestimmt Abfolge geschrieben sein. Für jedes Attribut eine eigene Zeile und die Tags u. Classes rückwärts alphabetisch sortiert.

Viel Spass beim sortieren

t_matze · 10 Februar 2004

Na danke! :auge Wieso macht die alphabetische Reihenfolge denn was aus? Sehr seltsam. Aber ich habe bereits für jedes Attribut eine eigene Zeile, insofern dürfte das nicht mehr allzu schwer werden.

Vielen Dank für die Antworten, ich melde dann weitere (hoffentlich Erfolgs-)Ergebnisse.

t_matze · 10 Februar 2004

Irgendwie klappt's immer noch nicht:

Auszüge aus den Ergebnissen
W3C CSS Validator Results for meine styles.css

To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML.

Errors
URI : meine url/css/styles.css
Line: 0 Context : ul

Invalid number : list-style-typedisk is not a list-style-type value : disk
Line: 0 Context : body , textarea

Property scrollbar-base-color doesn't exist : #ffeeaa
Line: 0 Context : body , textarea

Property scrollbar-3dlight-color doesn't exist : #ffcc00
Line: 0 Context : body , textarea

Property scrollbar-arrow-color doesn't exist : #c26527
Line: 0 Context : body , textarea

Property scrollbar-darkshadow-color doesn't exist : #c26527
Line: 0 Context : body , textarea

Property scrollbar-face-color doesn't exist : #ffeeaa
Line: 0 Context : body , textarea

Property scrollbar-highlight-color doesn't exist : #ffffff
Line: 0 Context : body , textarea

Property scrollbar-shadow-color doesn't exist : #000000
Line: 0 Context : body , textarea

Property scrollbar-track-color doesn't exist : #fff5bf
Line: 0 Context : body

Parse Error - Arial;
Line: 0 Context : body

Parse error - Unrecognized : sans-serif;
Line: 0 Context : padding

Parse Error - padding:0% 3%;
Line: 0 Context : padding

Parse error - Unrecognized : }

Warnings
URI : meine url/css/styles.css
Line : 0 font-family: You are encouraged to offer a generic family as a last alternative

Valid CSS information
p {
margin : 10px 0;
}
html , body {
color : #0000d5;
background-color : #fffadc;
}
h4 {
display : block;
margin : 20px 0 0;
}
h2 {
display : block;
font-size : 24px;
line-height : 30px;
color : #000080;
margin : 0 10px;
padding : 5px 5px 5px 200px;
border-top : medium none inherit;
border-right : 1px solid #ffcc00;
border-bottom : 1px solid #ffcc00;
border-left : 1px solid #ffcc00;
background : #ffcc00 url(../images/bg_gold_u.gif) repeat-x;
background-position : 0% 0%;
}
h1 {
display : block;
font-size : 28px;
line-height : 30px;
text-align : center;
color : #ff0000;
margin : 0 10px;
padding : 5px;
border-top : 1px solid #ffcc00;
border-right : 1px solid #ffcc00;
border-bottom : medium none inherit;
border-left : 1px solid #ffcc00;
background : #ffcc00 url(../images/bg_gold_o.gif) repeat-x;
background-position : 0% 100%;
}
... und so weiter, der Rest der Datei.

Was mache ich falsch? Ich kann nicht erkennen, worin sich die beanstandeten Werte von den dann als valide erkannten unterscheiden.

t_matze · 10 Februar 2004

Hm, mir scheint es, als wird die Datei auf dem Weg zu W3C vermurkst: die Hex-Werte habe ich nämlich groß geschrieben, und list-style-type:disk ist in der Datei durch einen Doppelpunkt abgesetzt (wie gefordert), der aber im Validierungsbericht fehlt.

Auf dem Server liegt sie auch in der korrekten Form, es macht also keinen Unterschied, ob ich sie zum validieren hochlade oder die url angebe.

Vielleicht kann mir einer von Euch auf die Sprünge helfen... ? (Ich mußte sie von css nach txt umbenennen, um sie hier hochladen zu können.)

ZuluDC · 10 Februar 2004

Ich labbere einfach mal daher *gg*

html, body {
color:#0000D5;
background-color:#FFFADC;
}

html selber CSS formatieren? Html definiert doch bloss, dass es jetzt los geht mit einer Webseite.

.top {
display:inline;
color:#FFCC00;
font-size:10px;
margin:0px 5px;
}
}

.top {
display:none;
}}

Beide eine Klammer zuviel?

.blink {
display:block;
color:#FF0000;
font-weight:bold;
text-align:center;
/* text-decoration:blink;*/
/* background-color:#80FF00;*/
}

blink als Klasse definiert? Geht das? blink ist eigentlich ein eigenständiger Tag. Namenreservation? Aber vermutlich geht es trotzdem.

Ansonsten scheint es will der Validator bisschen andere Angaben bei margin, background-position, border-bottom...dann macht das Teil noch Leerschläge vor und nach Doppelpunkten. Aber wieso das so sein sollte wie beanstandet....püüühhh....öehmmm...*kopfkratz*

Ich glaube die validieren deinen schönen Code noch ganz kaputt *gg*

BlaSülz · 10 Februar 2004

Würd mir das gute stück ja mal anschauen....

aber extra anmelde mag ich nich

ka wann ich das Board hier wiederfinde und dann is das PW weg

t_matze · 10 Februar 2004

Also, extra für Dich, BlaSülz

Code:

/* Absatzformate */
ul {
	list-style-type:disk;
	}
p {
	margin:10px 0px 10px 0px;
	}
html, body {
	color:#0000D5;
	background-color:#FFFADC;
	}
h4 {
	display:block;
	margin:20px 0px 0px 0px;
	}
h2 {
	display:block;
	font-size:24px;
	line-height:30px;
	color:#000080;
	margin:0px 10px 0px 10px;
	padding:5px 5px 5px 200px;
	border-top:none;
	border-right:1px solid #FFCC00;
	border-bottom:1px solid #FFCC00;
	border-left:1px solid #FFCC00;
	background:#FFCC00 url(../images/bg_gold_u.gif) repeat-x;
	background-position:left top;
	}
h1 {
	display:block;
	font-size:28px;
	line-height:30px;
	text-align:center;
	color:#FF0000;
	margin:0px 10px 0px 10px;
	padding:5px;
	border-top:1px solid #FFCC00;
	border-right:1px solid #FFCC00;
	border-bottom:none;
	border-left:1px solid #FFCC00;
	background:#FFCC00 url(../images/bg_gold_o.gif) repeat-x;
	background-position:left bottom;
	}
div, p, ul, ol {
	display:block;
	}
body, textarea {
	scrollbar-base-color:#FFEEAA;
	scrollbar-3dlight-color:#FFCC00;
	scrollbar-arrow-color:#C26527;
	scrollbar-darkshadow-color:#C26527;
	scrollbar-face-color:#FFEEAA;
	scrollbar-highlight-color:#FFFFFF;
	scrollbar-shadow-color:#000000;
	scrollbar-track-color:#FFF5BF;
	}
body {
	font-family:Verdana; Arial; sans-serif;
	padding:0% 3%;
	}
abbr {
	cursor:help;
	}
a:visited {
	color:#0000EC;
	text-decoration:underline;
	}
a:link {
	color:#000080;
	text-decoration:underline;
	}
a:hover {
	text-decoration:none;
	background-color:#FFCC00;
	}
a:focus {
	text-decoration:none;
	background-color:#FFCC00;
	}
a:active {
	color:#00FF00;
	background-color:#FFFF99;
	}
a.toph2 {
	color:#0000D5;
	}

/* Klassen */
.zentriert {
	text-align:center;
	}
.verweistitel {
	color:#FFCC00;
	font-weight:bold;
	font-size:100%;
	border:3px solid #C26527;
	background-color:#0000D5;
	margin:0px;
	padding:5px;
	}
.verweistext {
	font-size:80%;
	text-align:left;
	color:#000080;
	padding:0px;
	margin:5px 5px 10px 5px;
	}
.verweis:hover {
	text-decoration:none;
	background-color:#D2FFFE;
	border:3px inset #C26527;
	display:block;
	}
.verweis {
	font-size:90%;
	background-color:#5096FF;
	border:3px outset #C26527;
	margin:0px;
	padding:5px;
	display:block;
	}
.update {
	float:right;
	width:auto;
	}
.unterstrichen {
	text-decoration:underline;
	}
.unten {
	vertical-align:bottom;
	padding:5px;
	}
.übersetzt {
/*	float:left;*/
	width:45%;
	}
.txtoben {
	vertical-align:bottom;
	}
.toph2:visited {
	color:#0000D5;
	}
.toph2:hover {
	background-color:transparent;
	border-bottom:3px solid #FF0000;
	}
.toph2 {
	float:right;
	display:inline;
	color:#0000D5;
	font-size:9px;
	line-height:11px;
	margin:15px 5px 5px 5px;
	background-color:transparent;
	}
.ti {
	background-color:#FFEEAA;
	padding:5px 5px 15px 25px;
	border:1px solid #FFCC00;
	margin:0px 10px 0px 10px;
	}
.textbox {
	display:block;
	color:#0000FF;
	background-color:#DADADA;
	border:2px solid #C0C0C0;
	margin:0px;
	}
.rechts {
	text-align:right;
	}
.quelle {
	font-size:70%;
	font-style:italic;
	}
.platzhalter {
	margin:80px 0px;
	}
.original {
	float:right;
	width:45%;
	}
.orgi {
	border:1px solid #C26527;
	padding:3px 10px;
	}
.org {
	text-align:center;
	border:2px double #C26527;
	border-collapse:collapse;
	width:75%;
	}
.oben {
	vertical-align:top;
	padding:5px;
	}
.nowrap {
	white-space:nowrap;
	}
.navunten {
	background-image:url(../images/bar_unten.gif);
	background-repeat:repeat-x;
	background-position:left bottom;
	text-align:center;
	vertical-align:bottom;
	padding:20px 5px 0px 5px;
	width:100%;
	height:40px;
	margin:10px 0px 0px 0px;
	position:fixed;
	bottom:0px;
	left:0px;
	z-index:1;
	display:block;
	}
.navtitel {
	display:inline;
	border:3px outset #C26527;
	color:#FFCC00;
	font-weight:bold;
	font-size:110%;
	line-height:110%;
	background-color:transparent;
	padding:0px 5px;
	}
.navtext {
	display:inline;
	font-size:80%;
	text-align:center;
	white-space:nowrap;
	color:#FFEEAA;
	margin:0px 5px;
	}
.navoben {
	background-image:url(../images/bar_oben.gif);
	background-repeat:repeat-x;
	background-position:left top;
	color:#FFCC00;
	text-align:center;
	vertical-align:top;
	padding:5px;
	width:100%;
	height:40px;
	margin:0px 0px 10px 0px;
	position:fixed;
	top:0px;
	left:0px;
	z-index:1;
	display:block;
	}
.navlink:visited {
	color:#FFCC00;
	text-decoration:underline;
	}
.navlink:link {
	color:#FFCC00;
	text-decoration:underline;
	}
.navlink:hover {
	text-decoration:none;
	background-color:transparent;
	border-bottom:3px outset #FF0000;
	}
.navlink:focus {
	text-decoration:none;
	background-color:transparent;
	border-bottom:3px outset #FF0000;
	}
.navlink:active {
	color:#00FF00;
	background-color:transparent;
	}
.navlink {
	display:inline;
	color:#FFCC00;
	font-weight:bold;
	font-size:100%;
	white-space:nowrap;
	line-height:110%;
	margin:0px 5px;
	}
.navigation {
	display:block;
	background-color:#B3D7FF;
	text-align:center;
	padding:10px;
	border:2px groove #C26527;
	margin:0px 25px 10px 10px;
	width:175px;
	float:left;
	}
.motto {
	padding:5px 0px 10px 0px;
	clear:right;
	}
.mittig {
	vertical-align:middle;
	padding:5px;
	}
.links {
	text-align:left;
	}
.kommentar {
	font-size:70%;
	}
.kapit {
	text-transform:uppercase;
	}
.floatr {
	float:right;
	}
.floatl {
	float:left;
	}
.elmü {
	display:block;
	text-align:center;
	font-size:80%;
	padding:3px;
	border:1px solid #808080;
	background-color:#C0C0C0;
	}
.disc {
	display:list-item;
	padding:0px 20px;
	}
.copy {
	position:relative;
	bottom:auto;
	display:block;
	margin:25px 10px 10px 10px;
	padding:3px;
	font-size:10px;
	text-align:center;
	background-color:#B3D7FF;
	color:#000080;
	border:1px solid #1158FF;
	}
.blink {
	display:block;
	color:#FF0000;
	font-weight:bold;
	text-align:center;
/*	text-decoration:blink;*/
/*	background-color:#80FF00;*/
	}

/* für den Ausdruck ohne Hintergrund */
@media print {
body.ap {
	background:none;
	margin:0px;
	}
.top {
	display:none;
	}}
@page {
	size:landscape;
	}

/* für die Darstellung am Bildschirm */
@media screen,projection {
body.ap {
	background-color:#FFFADC;
	}
a.top {
	color:#FFCC00;
	}
.top:visited {
	color:#FFCC00;
	}
.top:hover {
	background-color:transparent;
	border-bottom:3px solid #FF0000;
	}
.top {
	display:inline;
	color:#FFCC00;
	font-size:10px;
	margin:0px 5px;
	}
	}

t_matze · 10 Februar 2004

Beide eine Klammer zuviel?

Nee, das gehört schon so, zumindest, wenn ich das richtig verstanden habe: Schließlich steht das in dem Bereich, der die Darstellung beim Druck definiert, und da muß ich doch den "@media print"-Bereich in geschweifte Klammern setzen, oder nicht? Aber der Editor ändert dort die Hervorhebungen der css-Befehle, also vielleicht hast Du recht, und die doppelte Klammer ist falsch?

Und die Formatierung von html hatte ich mal irgendwo auf einem Streifzug durch's Netz gesehen, ich glaube in dem Zusammenhang, daß auch außerhalb des body-Tags Inhalte standen. Aber eigentlich kommt das bei mir ja nicht vor, also könnte ich das wieder entfernen.

Sofern ich in SelfHTML richtig gelesen habe, können Klassennamen praktisch beliebig gewählt werden, durchaus auch gleichlautend wie tags oder Eigenschaften.

ZuluDC · 10 Februar 2004

Das es für die Printausgabe gedacht war hab ich glatt übersehen *kicher*...dann hätte ich es genau so wie Du gemacht...bin aber beim Suchen auf was gestossen...man kann das anscheinend auch ohne geschweifte Klammern machen für die Formatierungsangaben selber.

@media print

Dort steht:

<head>
<title>Seite</title>
<style type="text/css">

</style>
</head>

Probieren geht über studieren...

BlaSülz · 10 Februar 2004

Das was ich gefunden habe...

Code:

/* Absatzformate */ 
ul { 
	[b]/*list-style-type:disk; <-- Schreibfehler */[/b]
	list-style-type: disc; 
} 
p { 
	margin:10px 0px 10px 0px; 
} 
html, body { 
	color:#0000D5; 
	background-color:#FFFADC; 
} 
h4 { 
	display:block; 
	margin:20px 0px 0px 0px; 
} 
h2 { 
	display:block; 
	font-size:24px; 
	line-height:30px; 
	color:#000080; 
	margin:0px 10px 0px 10px; 
	padding:5px 5px 5px 200px; 
	border-top:none; 
	border-right:1px solid #FFCC00; 
	border-bottom:1px solid #FFCC00; 
	border-left:1px solid #FFCC00; 
	background:#FFCC00 url(../images/bg_gold_u.gif) repeat-x; 
	background-position:left top; 
} 
h1 { 
	display:block; 
	font-size:28px; 
	line-height:30px; 
	text-align:center; 
	color:#FF0000; 
	margin:0px 10px 0px 10px; 
	padding:5px; 
	border-top:1px solid #FFCC00; 
	border-right:1px solid #FFCC00; 
	border-bottom:none; 
	border-left:1px solid #FFCC00; 
	background:#FFCC00 url(../images/bg_gold_o.gif) repeat-x; 
	background-position:left bottom; 
} 
div, p, ul, ol { 
	display:block; 
} 
body, textarea { 
	[b]/* NUR MICROSOFT INTERNET EXPLORER AB 5.0 */[/b]
	scrollbar-base-color: #FFEEAA; 
	scrollbar-3dlight-color: #FFCC00; 
	scrollbar-arrow-color: #C26527; 
	scrollbar-darkshadow-color: #C26527; 
	scrollbar-face-color: #FFEEAA; 
	scrollbar-highlight-color: #FFFFFF; 
	scrollbar-shadow-color: #000000; 
	scrollbar-track-color: #FFF5BF; 
} 
body { 
	[b]/*font-family:Verdana; Arial; sans-serif; <--  '!!! KOMMA !!!' */[/b]
	font-family:Arial,Verdana,Sans-Serif; 
	padding:0% 3%; 
} 
abbr { 
	cursor:help; 
} 
a:visited { 
	color:#0000EC; 
	text-decoration:underline; 
} 
a:link { 
	color:#000080; 
	text-decoration:underline; 
} 
a:hover { 
	text-decoration:none; 
	background-color:#FFCC00; 
} 
a:focus { 
	text-decoration:none; 
	background-color:#FFCC00; 
} 
a:active { 
	color:#00FF00; 
	background-color:#FFFF99; 
} 
a.toph2 { 
	color:#0000D5; 
} 

/* Klassen */ 
.zentriert { 
	text-align:center; 
} 
.verweistitel { 
	color:#FFCC00; 
	font-weight:bold; 
	font-size:100%; 
	border:3px solid #C26527; 
	background-color:#0000D5; 
	margin:0px; 
	padding:5px; 
} 
.verweistext { 
	font-size:80%; 
	text-align:left; 
	color:#000080; 
	padding:0px; 
	margin:5px 5px 10px 5px; 
} 
.verweis:hover { 
	text-decoration:none; 
	background-color:#D2FFFE; 
	border:3px inset #C26527; 
	display:block; 
} 
.verweis { 
	font-size:90%; 
	background-color:#5096FF; 
	border:3px outset #C26527; 
	margin:0px; 
	padding:5px; 
	display:block; 
} 
.update { 
	float:right; 
	width:auto; 
} 
.unterstrichen { 
	text-decoration:underline; 
} 
.unten { 
	vertical-align: bottom; 
	padding:5px; 
} 
.übersetzt { 
	/* float:left;*/ [b] /*<-- ist aber syntaktisch richtig */ [/b]
	width:45%; 
} 
.txtoben { 
	vertical-align: bottom;	 
} 
.toph2:visited { 
	color:#0000D5; 
} 
.toph2:hover { 
	background-color:transparent; 
	border-bottom:3px solid #FF0000; 
} 
.toph2 { 
	float:right; 
	display:inline; 
	color:#0000D5; 
	font-size:9px; 
	line-height:11px; 
	margin:15px 5px 5px 5px; 
	background-color:transparent; 
} 
.ti { 
	background-color:#FFEEAA; 
	padding:5px 5px 15px 25px; 
	border:1px solid #FFCC00; 
	margin:0px 10px 0px 10px; 
} 
.textbox { 
	display:block; 
	color:#0000FF; 
	background-color:#DADADA; 
	border:2px solid #C0C0C0; 
	margin:0px; 
} 
.rechts { 
	text-align:right; 
} 
.quelle { 
	font-size:70%; 
	font-style:italic; 
} 
.platzhalter { 
	margin:80px 0px; 
} 
.original { 
	float:right; 
	width:45%; 
} 
.orgi { 
	border:1px solid #C26527; 
	padding:3px 10px; 
} 
.org { 
	text-align:center; 
	border:2px double #C26527; 
	border-collapse:collapse; 
	width:75%; 
} 
.oben { 
	vertical-align:top; 
	padding:5px; 
} 
.nowrap { 
	white-space:nowrap; [b]/*<-- CSS 2.0 nur N6.0 */[/b]
} 
.navunten { 
	background-image:url(../images/bar_unten.gif); 
	background-repeat:repeat-x; 
	background-position:left bottom; 
	text-align:center; 
	vertical-align:bottom; 
	padding:20px 5px 0px 5px; 
	width:100%; 
	height:40px; 
	margin:10px 0px 0px 0px; 
	[b]/*position:fixed; <-- ich kenne absolute,relative,static  */[/b]
	position: absolute;
 
	[b]bottom:0px; /* <-- 'bottom' kenn ich nicht?? */[/b]

	left:0px; 
	z-index:1; 
	display:block; 
} 
.navtitel { 
	display:inline; 
	border:3px outset #C26527; 
	color:#FFCC00; 
	font-weight:bold; 
	font-size:110%; 
	line-height:110%; 
	background-color:transparent; 
	padding:0px 5px; 
} 
.navtext { 
	display:inline; 
	font-size:80%; 
	text-align:center;
 
	[b]/white-space:nowrap; *<-- CSS 2.0 nur N6.0 */[/b]

	color:#FFEEAA; 
	margin:0px 5px; 
} 
.navoben { 
	background-image:url(../images/bar_oben.gif); 
	background-repeat:repeat-x; 
	background-position:left top; 
	color:#FFCC00; 
	text-align:center; 
	vertical-align:top; 
	padding:5px; 
	width:100%; 
	height:40px; 
	margin:0px 0px 10px 0px; 
	[b]position:fixed; /* <-- ich kenne absolute,relative,static  */[/b]
	top:0px; 
	left:0px; 
	z-index:1; 
	display:block; 
} 
.navlink:visited { 
	color:#FFCC00; 
	text-decoration:underline; 
} 
.navlink:link { 
	color:#FFCC00; 
	text-decoration:underline; 
} 
.navlink:hover { 
	text-decoration:none; 
	background-color:transparent; 
	border-bottom:3px outset #FF0000; 
} 
.navlink:focus { 
	text-decoration:none; 
	background-color:transparent; 
	border-bottom:3px outset #FF0000; 
} 
.navlink:active { 
	color:#00FF00; 
	background-color:transparent; 
} 
.navlink { 
	display:inline; 
	color:#FFCC00; 
	font-weight:bold; 
	font-size:100%; 
	[b]white-space:nowrap;  /*<-- CSS 2.0 nur N6.0 */[/b]
	line-height:110%; 
	margin:0px 5px; 
} 
.navigation { 
	display:block; 
	background-color:#B3D7FF; 
	text-align:center; 
	padding:10px; 
	border:2px groove #C26527; 
	margin:0px 25px 10px 10px; 
	width:175px; 
	float:left; 
} 
.motto { 
	padding:5px 0px 10px 0px; 
	clear:right; 
} 
.mittig { 
	vertical-align: middle; 
	padding:5px; 
} 
.links { 
	text-align:left; 
} 
.kommentar { 
	font-size:70%; 
} 
.kapit { 
	text-transform:uppercase; 
} 
.floatr { 
	float:right; 
} 
.floatl { 
	float:left; 
} 
.elmü { 
	display:block; 
	text-align:center; 
	font-size:80%; 
	padding:3px; 
	border:1px solid #808080; 
	background-color:#C0C0C0; 
} 
.disc { 
	[b]display:list-item; /* CSS 2.0 !! */
	
	display:block; /* ohne Bullet wenn ober Probleme macht */[/b]
	
	padding:0px 20px; 
} 
.copy { 
	position:relative; 
	[b]bottom:auto;  /* <-- 'bottom' kenn ich nicht?? */[/b]
	display:block; 
	margin:25px 10px 10px 10px; 
	padding:3px; 
	font-size:10px; 
	text-align:center; 
	background-color:#B3D7FF; 
	color:#000080; 
	border:1px solid #1158FF; 
} 
.blink { 
	display:block; 
	color:#FF0000; 
	font-weight:bold; 
	text-align:center; 
	/* text-decoration:blink;*/ 
	/* background-color:#80FF00;*/ 
} 

/* für den Ausdruck ohne Hintergrund 
[b]Ein bischen Formatierung lässt den Sinn der Klammern erkennen!!![/b]*/ 
@media print 
{ 
	body.ap { 
		background:none; 
		margin:0px; 
	} 
	.top { 
		display:none; 
	}
}
	 
@page { 
	[b]size:landscape; /* CSS 2.0, wird meines wissens noch nicht unterstützt! */[/b]
} 

/* für die Darstellung am Bildschirm */ 
@media screen,projection 
{ 
	body.ap { 
		background-color:#FFFADC; 
	} 
	a.top { 
		color:#FFCC00; 
	} 
	.top:visited { 
		color:#FFCC00; 
	} 
	.top:hover { 
		background-color:transparent; 
		border-bottom:3px solid #FF0000; 
	} 
	.top { 
		display:inline; 
		color:#FFCC00; 
		font-size:10px; 
		margin:0px 5px; 
	} 
}

deswegen können immernoch fehler enthalten sein, oder was ich gefunden habe doch richtig sein
mein wissen ist auch nicht immer das neuste

t_matze · 10 Februar 2004

Danke, Ihr zwei, das ist ja schon mal sehr schönes Feedback!

(Und damit die Mäuse etwas geschont werden, verpacke ich mein langes Zitat da oben auch mal in ein code-Feld, so wie BlaSülz.)

Ich setz mich gleich mal ran und korrigiere...

t_matze · 10 Februar 2004

Danke, BlaSülz, für's Korrekturlesen und die vielen guten Kommentare!

"disk" ist tatsächlich ein Schreibfehler - aber auch in dem Beispiel in SelfHTML, aus dem ich es übernommen habe!!! (Unten dran ist es dann nochmal richtig aufgeführt...) Aber es funktioniert mit beiden Schreibweisen (Opera/Mozilla/IE).

Das Scrollbar-Einfärben klappt auch bei Opera, wenn der User es in den Einstellungen auswählt, also sehe ich darin keinen wirklichen Fehler, auch wenn es nur ein "nettes Gimmick" ist, und nichts Wichtiges.

Die Semikola zwischen den Font-Families ... :wand

Beim syntaktisch richtigen float:left war ich nur noch unschlüssig, ob ich es verwenden will oder nicht, deshalb ist es nur auskommentiert und nicht gelöscht.

"white-space:nowrap" hat mir gut gefallen, funktioniert ebenfalls in Opera 7 (den IE muß man wegen css ja nicht als Referenz heranziehen, der kann deutlich weniger), und kommt nur in der Fußzeile zum Einsatz - und auch da nur, wenn das Fenster auf <650 Pixel in der Breite verschmälert wird...

"position:fixed" und damit in Verbindung "bottom" kleben die Fußzeile (".navunten") an das untere Bildschirmende, wo sie bleibt, auch wenn der Text der Seite durchgescrollt wird. Soweit die Theorie, es klappt in Opera tadellos, in Mozilla auch, der IE versagt wieder kläglich und schmeißt sie ans Ende der Seite. Entsprechendes gilt für die obere Navigationsleiste (".navoben"), die auch permanent im Bild bleibt (außer natürlich im Internet Explodierer).

"size:landscape" klappt im IE garnicht, in Opera noch unvollständig (das Blatt wird zwar querformatig angezeigt, aber der Inhalt erstreckt sich nur über die Breite, die für hochkant üblich wäre...

) und Mozilla ignoriert es auch noch. Ich werd's also wohl wieder rausnehmen müssen.

Die Formatierung/Gliederung mit Einrückungen zur besseren Übersicht habe ich hier in meinem Editor schon, nur ließ die sich leider nicht beibehalten, als ich es hier reingestellt habe. Tut mir leid.

@Zulu:

Ich hab noch nicht ganz verstanden, wie ich dann bei unterschiedlichen Angaben je nach tag (p, h1-6, etc.) diese unterscheiden kann, wenn in Deinem Beispiel die font-family ohne jede Zuordnung zu einem tag oder einer Klasse definiert wird. Ich werd mal Deinem Link folgen und schauen, was die dazu schreiben.

@beide:

Wenn Ihr jetzt auch mal sehen wollt, wie das ganze Gewurschtel dann in einer Seite aussieht, dann kann ich Euch den Link per PN oder Mail schicken. Ich will nur nicht, daß Google den in die Finger kriegt, weil das Projekt eigentlich nur für Insider ist.

BlaSülz · 10 Februar 2004

Hätte ich schon gern mal gesehn, aber bin ja nur Gast!

Wird schon gut aussehen

Es ist nicht immer leicht eine Formatierung zu finden,
die in allen geläufigen das gewollte auch darstellt wie es gewollt ist!

Wenn ich etwas helfen konnte

ZuluDC · 10 Februar 2004

Ich gebs zu:
Hab auch nicht ganz verstanden was ich von der anderen Webseite hier reingeschrieben habe...es sah nur auf den ersten Moment so gut aus, da hab ich es einfach hier gepostet *psst...nicht weitersagen...sonst wird mein schlechter Ruf noch ruiniert..lol*

Genau..die Zuordnung ist gar nicht vorhanden und das ist ja schon mal komisch. Entweder bezieht sich das global auf den body-Tag oder vielleicht ist es so gemeint, dass man in dieser Form schreiben sollt:

@media print
{
a font-family:Arial;
size:12px;
p background-color:#000000;
color:#ffffff;
.schrill line-height:12000px;
}

Wobei...überzeugt mich irgendwie auch nicht rein optisch...weiss aber nicht ob es funktioniert.

btw.: BlaSülz find ich einen geilen Nickname

BlaSülz · 10 Februar 2004

btw.: BlaSülz find ich einen geilen Nickname

Ich bin ein Streuner... heute hier morgen da... aber danke

t_matze · 10 Februar 2004

@BlaSülz:
schreib mir an t_matze@yahoo.de eine Mail, dann bekommst Du den Link. Schließlich hast Du kräftig mitgeholfen!

t_matze · 12 Februar 2004

Ha, geschafft!!! Bis auf das Einfärben der Scrollbars ist jetzt alles validiert und für gut befunden! :rollin :funny

ZuluDC · 12 Februar 2004

Gratuliere! Jetzt haste absolut standartkonformen Code

...dumm wäre jetzt, wenn man merken würde, dass nun kein Browser mehr in der Lage ist so klinisch reinen Code anzuzeigen *sfg & kopfeinzieh*

[HTML] CSS validieren?

Senior Member

assimiliert

assimiliert

Senior Member

Senior Member

Senior Member

Anhänge

assimiliert

BlaSülz

Gast

Senior Member

Senior Member

assimiliert

BlaSülz

Gast

Senior Member

Senior Member

BlaSülz

Gast

assimiliert

BlaSülz

Gast

Senior Member

Senior Member

assimiliert