HILFE! "formate.css" wird nicht benutzt

[fRuNK]

Habe meine Site komplett umgestrickt und diesmal CSS benutzt. In der Phase5-Vorschau sah alles super aus, aber jetzt wo das Ding online ist, scheint der Browser die .css nicht zu finden, bzw. zu verarbeiten. Sie liegt im gleichen Verzeichnis wie die .HTMLs...

Wer weiß Rat?!?

mfG

fRuNK

[fRuNK]

Ich muß meinen Hilferuf relativieren...
Unter MSIE funktioniert alles, aber Opera stellt die unsichtbare Tabelle nicht so hin wie ich wollte (rechts:leer, mitte: 480px, links:leer). Opera macht die mittlere Spalte sammt Inhalt 100% breit.
Außerdem hatte ich in die .css geschrieben, daß alles <u> unsichtbar (gleiche color wie background) sein sollte. Macht Opera auch nicht...

mfG

fRuNK

[Viennamade]

Hallo fRunK!

Schau mal:
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.cyberfrunk.de%2Fformate.css&warning=1&profile=css2&usermedium=all

Das letzte Zeichen Deines CSS ist eine runde Klammer, sollte eine spitze Klammer sein.

Gruß
Viennamade

[fRuNK]

Hallo Frater V.

Deine Augen scheinen um einiges besser zu sehen als meine, aber vielleicht hast Du auch einfach nur den schärferen Monitor :)

Der Fehler ist jetzt jedenfalls behoben und der Validator findet nichts mehr. Danke dafür!

Bleibt die Tabelle... Warum findet beim MSIE alles in einer 480px breiten mittigen Spalte statt, bei Opera und NN aber nicht???

Ich gehe nochmal wälzen, vielleicht habe ich eine mißverständliche Schreibweise gewählt...

mfG

fRuNK

[Viennamade]

Hallo fRunK,

vielleicht hast Du auch einfach nur den schärferen Monitor :)

mag sein, dann muß Deiner aber einem algenverseuchtem Aquarium ähneln

Bleibt die Tabelle... Warum findet beim MSIE alles in einer 480px breiten mittigen Spalte statt, bei Opera und NN aber nicht???

Weil Du die Sternderln falsch verwendest. Schau Dir an: http://selfhtml.teamone.de/html/tabellen/aufbau.htm#vordefinieren. Genauer das "Beispielschema 3" und lies drunter die Erläuterungen (insbesondere zu eben diesem Beispiel).

Beste Grüße
Viennamade

[fRuNK]

Hallo Viennamade,

jau, das mit den Sternchen wird`s wohl gewesen sein! Nächstes Mal bin ich schlauer :)

Ich habe aber mittlerweile den ganzen colgoup-tag rausgeschmissen und einfach <td width="480"> in die mittlere Spalte gecoded. Schlechter Stil? Jedenfalls läuft´s jetzt auf allen drei Browsern so, wie ich es mir vorgestellt habe, was mich sehr zufrieden macht.

Vielen Dank für Deine Mühe,

fRuNK

[Viennamade]

Hallo fRuNK!

Ich habe aber mittlerweile den ganzen colgoup-tag rausgeschmissen und einfach <td width="480"> in die mittlere Spalte gecoded. Schlechter Stil?

Mh, wie soll ich das beantworten? Wohl am besten, Thomas Luethi zu zitieren, aus einem Posting zu Deinem letzten Thread:

"
So richtig sinnvoll waere zu dem Zweck der Zeilenlaengen-
Beschraenkung eigentlich die CSS-Angabe einer Maximalbreite, z.B.
p { max-width:30em; }
oder so (ca. 45 - 50 Buchstaben).
Aber der schlechte alte MS IE kann das nicht.
(Es gibt aber Basteleien mit expression u.s.w.,
siehe /archiv/)
"

Vielen Dank für Deine Mühe,

Gern geschehen :-)
Viennamade

[Thomas Luethi]

Hallo,

Ich habe aber mittlerweile den ganzen colgoup-tag rausgeschmissen und einfach <td width="480"> in die mittlere Spalte gecoded. Schlechter Stil?

Die ganze Tabelle an sich ist ueberfluessig und somit schlechter Stil.
(Ja, auch SelfHTML z.T. etwas veraltet... Einerseits ist ueber die Jahre
organisch gewachsen und enthaelt einige Altlasten, andererseits ist
auch die aktuelle Version 8.0 aus dem Jahr 2001...)

Momentan hast Du auf http://www.cyberfrunk.de/kapitel1.html etwa folgendes:

<table width="100%">
<td></td>
<td width="480">
  <p>Navigation</p>
  <h2>Ueberschrift</h2>
  <p>Viel viel viel Inhalt. Bla bla bla</p>
</td>
<td></td>
</table>

Du willst damit den gesamten Inhalt auf eine Breite von 480px zwingen.

Dass das an sich nicht optimal ist und dass - wenn schon -
max-width:480px
oder
max-width:30em
theoretisch besser waeren, habe ich ja schon gesagt
(und Viennemade hat mich sogar zitiert - welche Ehre! ;-)

Die fixe Breite kannst Du genausogut im CSS angeben.
Pack alles in einen DIV und gib diesem die Breite in CSS.
Mit margin:auto rechts und links kannst Du ihn zentrieren,
also links und rechts davon den gleichen Leerraum haben,
wenigstens fuer moderne Browser.
Um den DIV auch in kaputten und veralteten Browsern wie
dem MS IE bis 5.5 zu zentrieren, musst Du noch
text-align:center fuer BODY angeben.
(Oder allenfalls einen weiteren DIV darum packen und
fuer diesen text-align:center angeben, was ich allerdings
ueberfluessig finde.)

HTML:
<body>
<div class="layoutblock">
  <p>Navigation</p>
  <h2>Ueberschrift</h2>
  <p>Viel viel viel Inhalt. Bla bla bla</p>
</div>
</body>

CSS:
body { text-align:center; }
div.layoutblock { width:480px; margin-left:auto; margin-right:auto; text-align:left; }

Und ja, ich weiss, dass man statt einer Klasse auch eine ID nehmen koennte,
solange man nur einen einzigen DIV pro HTML-Seite hat, der diese
Eigenschaften haben soll.
HTML:
<div id="layoutblock">
Das CSS wuerde dann zu:
#layoutblock { ... }
oder
div#layoutblock { ... }
wobei die zweite Schreibweise des Selektors
AFAIK in gewissen Browsern nicht erkannt wird.
Fuer mich mithin ein Grund, keine IDs zu verwenden.

Zum Zentrieren von Block-Level-Elementen siehe auch:
http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/
http://www.netandmore.de/faq/fom-serve/cache/1239.html
http://www.tiptom.ch/homepage/faq.html?q=tabzentriert
(In den meisten Beispielen wird eine Tabelle zentriert, aber man
kann mit den gleichen Methoden auch andere Elemente zentrieren.)

Gruesse,

Thomas

[fRuNK]

N´Abend!

HTML:
<body>
<div class="layoutblock">
  <p>Navigation</p>
  <h2>Ueberschrift</h2>
  <p>Viel viel viel Inhalt. Bla bla bla</p>
</div>
</body>

CSS:
body { text-align:center; }
div.layoutblock { width:480px; margin-left:auto; margin-right:auto; text-align:left; }

Haut super hin !!!

Ich nehme jetzt auf ein anderes Posting bezug. Zu meiner Schande muß ich gestehen, daß ich mich immer wieder in den ellenlangen Threads verirre und dann nicht mehr in der Lage bin, ein spezielles Posting wiederzufinden. War von at oder Viennamade :)

Warum sollte ich die Fontgröße nicht in pt angeben?

Das styles den Vorteil der .css zunichte machen, leuchtet mir ein. Ich sehe mich aber trotzdem vor folgendes Problem gestellt:

Ich brauche einige Text-Formate :
Überschrift Maxi zentriert( <h1> in .css definiert )
Überschrift Groß zentriert (<h2>, definiert )
Überschrift Groß linksbündig (da geht der Ärger los: <h2> schon vergeben ...)
Text normal Blocksatz ( <p> definiert)
Text normal zentriert (ärgerlich...)

usw.usf.

Auf den Punkt gebracht: mir sind die "Platzhalter" ausgegangen. Die Versuchung ist natürlich groß, <h3> - <h6> und <i>, <b> dafür zu nehmen, aber wenn ich das mache, haut mir Thomas den Quellcode derma?en um die Ohren, daß ich tagelang nichts mehr hören kann. Und womit? Mit Recht! NonCss-Browser würden dann nämlich das Kleingedruckte zur Überschrift machen und Überschiften normalgroß/kursiv darstellen...
Deshalb bin ich auf die styles ausgewichen. Gibt es eine bessere Lösung? Vermutlich schon.

Bin echt gespannt!

fRuNK

[Thomas Luethi]

Hallo Frunk,

Haut super hin !!!

Sehr schoen!

Zu meiner Schande muß ich gestehen, daß ich mich immer wieder in den ellenlangen Threads verirre und dann nicht mehr in der Lage bin, ein spezielles Posting wiederzufinden.

Benutzt Du schon die /my/-Ansicht?
Damit kann man sich bei jedem Posting den gesamten Thread
anzeigen lassen. Es geht viel schneller, einen Thread von A - Z
zu durchblaettern, um ein Posting wieder zu finden.

Einmalig: http://forum.de.selfhtml.org/ oben links: "User-Registrierung"
Von dann an kannst Du Dich ueber "User-spezifische Ansicht"
bzw. direkt ueber http://forum.de.selfhtml.org/my einloggen.
Sehr praktisch...

Warum sollte ich die Fontgröße nicht in pt angeben?

http://www.netandmore.de/faq/fom-serve/cache/414.html

Das styles den Vorteil der .css zunichte machen, leuchtet mir ein.

Du meinst Style-Attribute in HTML-Elementen, auch "Inline-Styles" genannt.
Wie Du richtig sagst, machen sie die Vorteile von externen Stylesheets zunichte.

Überschrift Groß zentriert (<h2>, definiert )
Überschrift Groß linksbündig (da geht der Ärger los: <h2> schon vergeben ...)

<h1>, <h2>, <h3> ... sind hierarchisch gedacht.
Die sollten Dir also nicht ausgehen.

Ich finde, dass jedes einzelne Dokument ein <h1> verdient.
Andere Leute finden, dass man auf der Homepage <h1> haben kann
und dann auf den Unterseiten mit <h2> anfangen kann.

Lass Dich von der Darstellung (grosse Schrift etc.) nicht beirren.
Ueberlege Dir, wo in der Hierarchie die Ueberschriften stehen.

Wenn Du wirklich zwei gleichwertige Ueberschriften hast,
die verschieden _aussehen_ sollen, dann gibt es ja immer
noch Klassen.

<h2>Normale Ueberschrift 2</h2>
<h2 class="kapitel">Kapitel-Ueberschrift</h2>

Nimm auch fuer die Klassennamen Begriffe, die nichts
mit dem Aussehen, sondern mit der Sache zu tun haben.

Vielleicht willst Du in 2 Monaten die Kapitelueberschriften
nicht mehr linksbuendig und fett, sondern rechtsbuendig
und kursiv.
Da waere es dann doof, so etwas zu haben:
<h2 class="linksfettgross">Kapitel-Ueberschrift</h2>

Fuer normale Absaetze brauchst Du vielleicht eher mal Klassen,
weil es da ja nur gerade das <p>-Element gibt.
Z.B.
<p class="navigation"> ... </p>
<p>Normaler Text-Absatz ...</p>
<p>Weiterer Text-Absatz ...</p>
<p class="fusszeile">Die Rechte an diesem Text ...</p>

Die Navigations-Zeile am Seitenanfang sieht zur Zeit so aus:

<p style="text-align:center"><i>
<a href="index.html">Home</a>
<u>_____</u><a href="news.html">News</a>

<u>_____</u><a href="archiv.html">Archiv</a>
<u>_____</u><a href="links.html">Links</a>
<u>_____</u><a href="impressum.html">Impressum</a>
<hr noshade color="#000080" size="1">
</i></p>

Das wuerde ich z.B. so schreiben:

HTML:
<p class="navigation">
<a href="index.html">Home</a>
<a href="news.html">News</a>
<a href="archiv.html">Archiv</a>
<a href="links.html">Links</a>
<a href="impressum.html">Impressum</a>
</p>

CSS:
p.navigation
  {
   border-bottom:1px solid #000080; /* Ersetzt den <hr> */
   text-align:center;
   font-style:italic; /* Wenn es denn sein muss... */
  }

p.navigation a
  { padding-left:1.2em; padding-right:1.2em; /* ersetzt die "sinnlosen" <u>-Abstaende */ }

[...] aber wenn ich das mache, haut mir Thomas den Quellcode dermassen um die Ohren, daß ich tagelang nichts mehr hören kann.

?:-)

Du hast mich bisher nur von meiner "netten" Seite kennen gelernt
und schreibst sowas?!?

Ich kann noch ganz anders.
Z.B. bei Leuten, die innert 24 Stunden drei "Meinung"-Threads zur
gleichen Site eroeffnen, obwohl sie die HTML- und inhaltlichen
Fehler, die man ihnen im ersten Thread zu korrigieren nahelegte,
noch immer drin haben...

Bei Dir habe ich gemerkt, dass Du lernwillig und -faehig bist - da macht
es Spass, zu helfen, und ich bleibe im _Ton_ gemaessigt und lieb.
(In der Sache kann ich durchaus hart sein, aber das ist bei Dir
gar nicht gross noetig.)

Gruesse,

Thomas

[fRuNK]

Moin.

Einmalig: http://forum.de.selfhtml.org/ oben links: "User-Registrierung"
Von dann an kannst Du Dich ueber "User-spezifische Ansicht"
bzw. direkt ueber http://forum.de.selfhtml.org/my einloggen.
Sehr praktisch...

Registriert bin ich schon, hab´ nur noch nicht die Muße gehabt, die diversen Einstellungen vorzunehmen... mach ich aber jetzt!

Du hast mich bisher nur von meiner "netten" Seite kennen gelernt
und schreibst sowas?!?

Sorry, da hatte ich wohl den ganz dicken ":)" vergessen, aber der Satz ging ja auch noch weiter...

Ich kann noch ganz anders.
Z.B. bei Leuten, die innert 24 Stunden drei "Meinung"-Threads zur
gleichen Site eroeffnen, obwohl sie die HTML- und inhaltlichen
Fehler, die man ihnen im ersten Thread zu korrigieren nahelegte,
noch immer drin haben...

Nochmal "Sorry". Das liegt zum einen daran, daß ich (wie oben schon erwähnt) bislang Schwierigkeiten hatte etwas wiederzufinden, wenn der Threat zu lang wurde, zum anderen daran, daß ich erst seit ein paar Tagen weiß, wie man HTML buchstabiert und zuweilen ein wenig informationsüberflutet bin.

So, jetzt werde ich den restlichen Inhalt Deines Postings - schön der Reihe nach - abarbeiten.

Danke und bis bald!

fRuNK

[Thomas Luethi]

Hallo Frunk,

Sorry, da hatte ich wohl den ganz dicken ":)" vergessen,

Halb so wild!

Z.B. bei Leuten, die innert 24 Stunden drei "Meinung"-Threads zur
gleichen Site eroeffnen, [ohne Fehler zu korrigieren]

Nochmal "Sorry".

Grosses Missverstaendnis!
Ich meinte nicht Dich!
(Du hast AFAIR auch "nur" 2 Threads geoeffnet, die ich
nicht als Doppelpostings empfand.)

Ich meinte Dennis und seine drei Threads.
* <archiv/2004/2/71684/>
* [pref:t=71892&m=413965]
* [pref:t=71984&m=414456]

Beim zweiten "platzte mir der Kragen", so dass Tim Tepasse
mich - zurecht - etwas kritisierte ([pref:t=71892&m=414492]).

Seither versuche ich, wieder sachlicher und netter zu sein.
Deshalb reagierte ich auch etwas empfindlich auf
Deinen Satz "... um die Ohren schlagen ...".

Wie ich schon schrieb, ist es eine Freude, Dir zu helfen.

Du nimmst Kritik und Vorschlaege an und setzt sie um.
(Wenn Du die online sichtbaren Seiten nicht alle 5 Minuten
aktualisierst, finde ich das voellig OK. Ich glaube Dir,
dass Du offline am Quelltext arbeitest. Und ich sehe
Fortschritte.)
Du gibst Dir Muehe.

Das alles spricht fuer Dich.

Also, weiter so!

Gruesse,

Thomas

[fRuNK]

Moin Thomas,

Dein Lob beschämt mich, jetzt reicht´s :)
Das ganze kommt mir sowieso immer mehr wie eine Zen-Story vor, nur daß der Meister in diesem Fall ein paar Jahre jünger als der Schüler ist. Aber das ist vollkommen okay: Wie ich Deiner Vita entnehme, hast Du in Deinem bisherigen Leben schon einiges mehr gerissen als ich in meinem :(
Erwähnte ich eigentlich schon, daß ich die Lösung des bekannten "What is the sound of one hand clapping?"-Koans gefunden habe?

Genug geplaudert und zurück zum Thema:

Das mit den Klassen in CSS habe ich kapiert. Ich habe heute Nacht noch einiges darüber gelesen und bin sehr angetan davon. Super praktisch!

Ich habe den neuen Quellcode noch nicht online gestellt, weil ein Problem mit der Navigation aufgetaucht ist:

p.navigation { border-bottom:1px solid #000080;
               text-align:center;
               font-style:normal;}
p.navigation a { padding-left:1.2em; padding-right:1.2em; }

Der letzte Teil will einfach nicht hinhauen :(
Die fünf Anker sind und bleiben zentriert und haben normalen Textabstand zueinander. Ich habe schon mit verschiedenen Werten (em, mm, %, usw. experimentiert, aber der gewünschte Effekt tritt nicht ein. Wenn man den Wert groß genug wählt, wird alles zusammen eine Zeile verrückt, der Abstand der einzelnen Anker zueinander bleibt aber konstant "normal". Das bedeutet zumindest, daß die Zeile nicht stumpf überlesen wird.
Was mache ich falsch?

mfG aus Oldenburg:

fRuNK

[Thomas Luethi]

Hallo Frunk,

Erwähnte ich eigentlich schon, daß ich die Lösung des bekannten "What is the sound of one hand clapping?"-Koans gefunden habe?

-v please!
(Bitte etwas ausfuehrlicher schreiben, was Du meinst.
Du sprichst - fuer mich - in Raetseln. Und wenn wir schon
dabei sind - wie alt bist denn Du?)

p.navigation { border-bottom:1px solid #000080;
               text-align:center;
               font-style:normal;}
p.navigation a { padding-left:1.2em; padding-right:1.2em; }

Der letzte Teil will einfach nicht hinhauen :(

Ich vermute mal, dass es im MS IE keine Wirkung zeigt.
Mein Fehler. Sorry. In Mozilla zeigt es den gewuenschten Effekt.

Das Box Modell mit margin, border und padding
http://www.w3.org/TR/REC-CSS2/box.html
http://www.jendryschik.de/wsdev/einfuehrung/css/box-modell.html
bezieht sich grundsaetzlich auf "Boxen".
Normalerweise braucht man es fuer
Block-Level-Elemente (<p>, <h1> u.s.w.)

Trotzdem dachte ich, dass man insbesondere padding auch bei
Inline-Elementen (wie <A>) anwenden kann und dass die
Browser dies auch umsetzen (Mozilla tut es in diesem Fall).

Dass es theoretisch erlaubt ist, padding auch bei Inline-Elementen
(bzw. "inline boxes") zu verwenden, schliesse ich aus mehreren
Passagen in der CSS 2 Specification, z.B.
http://www.w3.org/TR/REC-CSS2/visuren.html#q7

Ich wollte es Dir eigentlich ersparen - aber:
Du koenntest jetzt versuchen, mit display: rumzuspielen,
um die <A>-Elemente zu Block-Level-Elementen zu machen,
damit auch der MS IE padding verwendet, z.B.
display:run-in; /* CSS 2.0 */
display:inline-block; /* erst in den Errata bzw. CSS 2.1 hinzugekommen */
http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop
http://www.w3.org/TR/CSS21/visuren.html#display-prop

Obwohl ich auch Deine bisherige Navigationsleiste
mit einem Absatz und 5 darin enthaltenen Links
<p class="navigation"><a>Link1</a>  <a>Link2</a>  <a>Link3</a>  <a>Link4</a></p>
fuer Deine Zwecke voellig OK finde, erlaube ich mir noch,
Dich darauf hinzuweisen, dass die semantisch "korrekte"
bzw. "uebliche" HTML-Auszeichnung dafuer eine UL-Liste
(oder allenfalls OL-Liste) waere.

Auch Listen kann man mit CSS so formatieren, dass die
Links horizontal nebeneinander stehen.
Ein paar Ideen kriegst Du vielleicht hier:
http://www.alistapart.com/articles/taminglists/ (Bsp. ziemlich weit unten)
http://css.maxdesign.com.au/listamatic/ (Horizontal lists)
Wieweit diese Beispiele auch im MS IE funktionieren,
weiss ich leider nicht.

Wenn Dir das ganze zu umstaendlich ist, lass es
ruhig bei Deiner Leiste mit <p>, aber mach doch die
Abstaende statt mit <u>____</u> lieber mit ein paar " "
<p class="navigation"><a>Link1</a>     <a>Link2</a>     <a>Link3</a>     <a>Link4</a></p>

---

Wenn Du noch immer aufnahmefaehig und lernbegierig bist,
kannst Du jetzt noch versuchen, die Seiten auch noch
behindertengerecht zu gestalten.

Zugänglichkeitsrichtlinien für Web-Inhalte 1.0
http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html
Weitere Seite zum Thema "Barrierefreiheit":
http://www.einfach-fuer-alle.de/

Fuer Blinde und andere Leute mit "speziellen Browsern"
waere es evtl. noch sinnvoll, bei Deiner Leiste jeweils
ein Trennzeichen zwischen den Links zu machen.
http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html#tech-divide-links
Welches Zeichen dafuer am besten geeignet ist, weiss ich
auch nicht. "-" wird vielleicht als "minus" vorgelesen,
"[" als "eckige Klammer auf", "|" als "Senkrechter Trennstrich"
oder "Pipe" ...
<p class="navigation"><a>Link1</a> <span>-</span> <a>Link2</a> <span>-</span> <a>Link3</a> <span>-</span> <a>Link4</a></p>
Diese Trennzeichen kannst Du dann per CSS unsichtbar machen,
indem Du ihnen die gleiche Farbe gibst wie dem Hintergrund:
p.navigation span { color:#ffffff; background-color:#ffffff; }
(Eigentlich moechte man sie mit display:none; ganz ausblenden,
aber was man so "versteckt", wird den Blinden offenbar auch
nicht mehr vorgelesen, da die meiste Spezialsoftware auf
dem MS IE basiert und auch die Stylesheets beruecksichtigt,
welche man fuer media="screen" einbindet. Leider.)

Liebe Gruesse,

Thomas

[fRuNK]

Hallo Thomas,

zunächst einmal möchte ich mich dafür entschuldigen, schon wieder einen neuen Threat eröffnet zu haben, aber ich hatte befürchtet, daß Du in den Snowboard-Urlaub aufgebrochen bist und bin ein wenig ungeduldig geworden, weil mein Urlaub Montag endet und ich bis dahin ein halbwegs vernünftiges Gerüst für meinen Fortsetzungsroman fertig haben wollte, mit dem ich dann in den nächsten Wochen arbeiten kann.

-v please!
(Bitte etwas ausfuehrlicher schreiben, was Du meinst.
Du sprichst - fuer mich - in Raetseln. Und wenn wir schon
dabei sind - wie alt bist denn Du?)

Ich bin Jahrgang ´71 und abgebrochener Soziologiestudent, was ich mittlerweile sehr bereue, weil ich mich mittlerweile schon seit Jahren mit schlechtbezahlten Doofjobs durchschlage und langsam die Lust daran verliere, aber das ist off-topic...

Ein Koan ist ein traditionelles japanisches Rätsel, daß Zen-Meister ihren Schüler aufgeben, um diese der Erleuchtung zuzuführen. Die Dinger sind meist ausgesprochen paradox und "What is the sound of ONE hand clapping?" ist wohl eines der bekanntesten. Da Zen-Geschichten meistens darauf hinauslaufen, daß der Schüler nach langer Meditation zum Meister läuft und stolz seine gefundene Lösung präsentiert, dann aber grundsätzlich zusammengestutzt und zurück in seine Kammer geschickt wird, fand ich die Antwort "Die Ohrfeige des Meisters" auf oben erwähntes Koan mal ausgesprochen komisch, was vielleicht aber auch abgebrochener Soziologiestudentenhumor und auf jeden Fall off-topic ist..

Ich vermute mal, dass es im MS IE keine Wirkung zeigt.
Mein Fehler. Sorry. In Mozilla zeigt es den gewuenschten Effekt.

IE: kein Effekt
NN und Opera: Die fünf Anker stehen ÜBER einander - sehr mysteriös!
(Ich hab es gerade nochmal überprüft, das liegt daran, daß ich versehentlich 12em geschrieben habe :) mein Fehler)

Ich werde mir jetzt nochmal die restlichen Ratschläge und Links zu Gemüte führen, glaube aber, daß ich tendenziell doch zu der Variante mit den Leerzeichen greifen und es mir schnuppe sein lassen werde, daß nicht alles auf den Pixel genau ausgerichtet ist. Mir läuft wie gesagt ein wenig die Zeit davon und vielleicht finde ich ja später nochmal die Zeit, das ganze wirklich perfekt zu machen (obwohl ich mittlerweile glaube, daß dieses Ideal aufgrund der unterschiedlichen Standarts wohl nie zu erreichen ist.)

Bis bald!

fRuNK

[Ingo Turski]

Hi,

sehr schön erklärt, jedoch:

Ich finde, dass jedes einzelne Dokument ein <h1> verdient.
Andere Leute finden, dass man auf der Homepage <h1> haben kann
und dann auf den Unterseiten mit <h2> anfangen kann.

dies ist m.E. keine Frage der eigenen Meinung, sondern der Struktur.
Jede Seite steht zunächstmal für sich alleine - sie kann und wird ja auch oft noch vor der Startseite angesurft. Wenn man nun mit <h2> beginnt, ist das kein Zeichen sinnoller Struktur. Oder sollte ein Besucher hieraus zwangsläufig messerscharf schließen können, daß es in einem anderen Dokument die dazugehörige <h1> gibt?
Noch schlechter sind natürlich falsch platzierte Überschriften, wie <h3> ... <h2> oder <h2> ... <h4>.
Gruß
Ingo

freundliche Grüße
Ingo

[at]

Hallo.

Noch schlechter sind natürlich falsch platzierte Überschriften, wie <h3> ... <h2> oder <h2> ... <h4>.

Bei einer Struktur mit mehreren gleichberechtigten Kapiteln innerhalb einer Seite halte ich zumindest das erste Beispiel für einen durchaus gängigen Ausschnitt.
MfG, at

[Ingo Turski]

Hi,

Noch schlechter sind natürlich falsch platzierte Überschriften, wie <h3> ... <h2> oder <h2> ... <h4>.

Bei einer Struktur mit mehreren gleichberechtigten Kapiteln innerhalb einer Seite halte ich zumindest das erste Beispiel für einen durchaus gängigen Ausschnitt.

stimmt - aber nur unter der Voraussetzung, daß hier vor <h3> noch ein <h2> steht. h1 - h2 - h3 - h2 ist natürlich völlig korrekt.

freundliche Grüße
Ingo

[fRuNK]

Noch eine Frage:

div.layoutblock {width:480px; margin-left:auto; margin-right:auto; text-align:left; }

in .css funktioniert, max-width:480px aber nicht. Weshalb nicht? Ich denke mittlerwiele nämlich auch, daß das wg. Handhelds besser wäre...

Ich würde nicht fragen, wenn ich SelfHTML nicht schon erfolglos dazu befragt hätte :)

fRuNK

[MudGuard]

Hi,

max-width:480px aber nicht. Weshalb nicht?

Weil Du vermutlich den Internet Explorer benutzt, der dazu zu dumm ist.

Im Mozilla geht das...

cu,
Andreas

[fRuNK]

Moin.

Ich selber benutze Opera, habe aber den Anspruch, daß meine Site auf allen Browsern gut angezeigt wird. Klar ist der IE großer Mist, aber was willst Du machen, wenn der am weitesten verbreitet ist?!? Wenn der alte Golf nicht geradeausfährt, muß man als Straßenbauer halt zusehen, daß die Straßen kurvig sind...

mfG aus Oldenburg:

fRuNK

[Thomas Luethi]

Hallo Frunk,

div.layoutblock {width:480px; margin-left:auto; margin-right:auto; text-align:left;} funktioniert, max-width:480px aber nicht.

Es funktioniert schon - aber nur in Browsern. Z.B. im Mozilla. Oder in Opera.

Im MS IE funktioniert es nicht - aber der ist auch kein Browser.

CSS 2.0 ist vom Mai 1998.
Der MS IE 6.0 ist vom Oktober 2001.

Du kannst doch nicht im Ernst von Microsoft erwarten,
das sie in nur 3 Jahren und 5 Monaten einen so
komplizierten Standard umsetzen!
Noch dazu, wenn er von einem Gremium stammt,
in welchem sie selbst Mitglied sind...
http://www.w3.org/Consortium/Member/List

Die Workarounds sind schmutzig, aber solange
man sie mit Conditional Comments (*) verpackt,
kriegt man damit auch valides HTML+CSS hin:
http://www.svendtofte.com/code/max_width_in_ie/
http://www.bestviewed.de/css/bsp/maxwidth/

Gruesse,

Thomas

(*) Conditional Comments:
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
http://www.drweb.de/html/conditional_comments.shtml
http://www.devmag.net/html/conditional_comments.htm

[Elya]

Hallo fRuNK,

aber jetzt wo das Ding online ist, scheint der Browser die .css nicht zu finden, bzw. zu verarbeiten. Sie liegt im gleichen Verzeichnis wie die .HTMLs...

<!--
body { background-color:#FFFFFF;
       color:#000080;
       font-family:Comic Sans MS, Helvetica,Arial,sans-serif; }
[...]
u {color:#FFFFFF; )

-->

was willst Du denn mit den HTML-Kommentaren im Stylesheet erreichen?

Gruß aus Köln-Ehrenfeld,

Elya

[fRuNK]

Hallo Elya!

was willst Du denn mit den HTML-Kommentaren im Stylesheet erreichen?

Das Grundgerüst hatte ich so im SelfHTML-Kompendium als Beispiel gefunden. Ich habe die Kommentartags entfernt und nochmals upgeloaded, aber das Ergebnis bleibt das gleiche: MSIE super, aber im Opera keine Tabelle & alles, was zwischen <u> und </u> steht ist sichtbar (sollte aber eigentlich in der gleiche Farbe wie der Hintergrund haben).

Sorry, wenn ich mich ein wenig doof anstelle, aber ich weiß erst seit gestern von CSS und die Sache mit der externen Datei ist nicht besonders gut erklärt...

mfG

fRuNK

[CarstenP]

Hallo Elya,

was willst Du denn mit den HTML-Kommentaren im Stylesheet erreichen?

Was man damit erreichen will, ist mir auch schleierhaft, aber das ändert nichts an der Tatsache, daß sie erlaubt sind. Der Grund dafür ist eigentlich ganz einfach:

Man nehme folgende Konstruktion innerhalb des head-Bereiches einer HTML-Seite:

<style type="text/css">
<!--

/* Diverse Style-Angaben */

-->
</style>

_Alles_ innerhalb von <style> </style> gehört zum Stylesheet und muß innerhalb der entsprechenden Spezifikation definiert werden. Die HTML-Kommentare am Anfang und Ende eines Stylesheets gehören also ganz zwangsläufig mit zur CSS-Spezifikation. Und da die CSS-Spezifikation keinen Unterschied zwischen einem externen CSS und lokalem CSS macht, sind die Kommentare auch im externen Stylesheet völlig legal. Weder die Browser noch der CSS-Validator stören sich daran. Erst wenn im externen CSS zusätzlich noch ein <style> </style> (oder ähnliches) ins Spiel kommt, wird's ein Fall für die Fehlerroutine des IE... ;-)

Viele Grüße
Carsten

[Elya]

Hallo Carsten,

das ändert nichts an der Tatsache, daß sie erlaubt sind. Der Grund dafür ist eigentlich ganz einfach:

_Alles_ innerhalb von <style> </style> gehört zum Stylesheet und muß innerhalb der entsprechenden Spezifikation definiert werden. Die HTML-Kommentare am Anfang und Ende eines Stylesheets gehören also ganz zwangsläufig mit zur CSS-Spezifikation. Und da die CSS-Spezifikation keinen Unterschied zwischen einem externen CSS und lokalem CSS macht, sind die Kommentare auch im externen Stylesheet völlig legal.

hm. zumindest scheinen sie nicht verboten zu sein. http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap04.html#heading-4.1.9�. Was das W3C hier mit "an einigen Stellen" meint, finde ich etwas unklar. Ich habe das aber wohl in der Tat mit der verbotenen Verwendung von <style> in einen Topf geworfen. Wieder was gelernt... ;-)

Gruß aus Köln-Ehrenfeld,

Elya

[MudGuard]

Hi,

hm. zumindest scheinen sie nicht verboten zu sein. http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap04.html#heading-4.1.9�. Was das W3C hier mit "an einigen Stellen" meint,

steht im folgenden Satz:

Sie sind erlaubt, damit Formatierungsregeln, die in einem HTML-Quelldokument (im STYLE-Element) enthalten sind, vor Benutzerprogrammen, die älter als HTML 3.2 sind, verborgen werden können.

In einem reinen CSS-Dokument haben sie NICHTS verloren.

cu,
Andreas

[Elya]

Hallo Matthias,

Sie sind erlaubt, damit Formatierungsregeln, die in einem HTML-Quelldokument (im STYLE-Element) enthalten sind, vor Benutzerprogrammen, die älter als HTML 3.2 sind, verborgen werden können.

In einem reinen CSS-Dokument haben sie NICHTS verloren.

Ist _mir_ klar. Es hatte mich allerdings irritiert, daß sie angeblich dort nicht explizit verboten sind und auch keine Fehlermeldungen im Validator erzeugen. Das geht m. E. aus der Stelle in den Specs auch nicht hervor.

Beim Blick auf das Ausgangsproblem ging bei mir eben der Reflex "alles klar, die Kommentarzeichen" an, und ich hab mir den Rest gar nicht angeschaut. Wären die Kommentarzeichen hingegen an dieser Stelle zwar unpassend und unnötig, aber nicht einflußnehmend oder verboten, -- wüßte ich das eben gerne, um meine Reflexe zu trainieren ;-)

Gruß aus Köln-Ehrenfeld,

Elya

[MudGuard]

Hi,

was willst Du denn mit den HTML-Kommentaren im Stylesheet erreichen?

Was man damit erreichen will, ist mir auch schleierhaft, aber das ändert nichts an der Tatsache, daß sie erlaubt sind.

Sie sind im HTML-Dokument im Style-Element erlaubt.
Sie sind NICHT erlaubt im CSS-File.

cu,
Andreas

[CarstenP]

Hallo Andreas,

Sie sind im HTML-Dokument im Style-Element erlaubt.
Sie sind NICHT erlaubt im CSS-File.

Kannst Du mir sagen, warum das folgende externe Stylesheet problemlos validiert wird?

<!--
p {
  font-family:Verdana,sans-serif;
}
-->

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.carsten-protsch.de%2Ftemp%2Fcomment.css&warning=1&profile=css2&usermedium=all

Laut http://www.w3.org/TR/CSS2/syndata.html besteht ein Stylesheet aus den folgenden Teilen:

stylesheet  : [ CDO | CDC | S | statement ]*;

CDO = <!--
CDC = -->
S   = [ \t\r\n\f]+
statement = ruleset | at-rule

Eine Stelle in der Spezifikation, die das CDO und CDC explizit auf Style-Blocks innerhalb eines HTML-Files beschränkt, habe ich nicht gefunden. Aus dem von Dir in [pref:t=72136&m=415554] zitiertem Satz lese ich nur die Begründung heraus, weshalb HTML-Kommentare überhaupt vorkommen dürfen, nicht aber, daß sie tatsächlich nur auf Style-Blocks in HTML beschränkt sind. Falls dieses tatsächlich die relevante Stelle sein sollte, dann hat der Validator einen Bug...

Viele Grüße
Carsten

[CarstenP]

Hallo,

kleiner Nachtrag:

wenn ich http://www.w3.org/TR/CSS2/grammar.html#q1 richtig lese, dann ist sogar sowas erlaubt:

@import url("style.css");
<!--
/* ruleset */
-->

Viele Grüße
Carsten

PS: Bitte nicht falsch verstehen, ich halte das Ganze auch für sinnlos und würde sowas niemals in meinen eigenen Stylesheets unterbringen. Mir geht es nur darum, ob ich die Spezifikation richtig verstehe...

[Ingo Turski]

Hi,

Falls dieses tatsächlich die relevante Stelle sein sollte, dann hat der Validator einen Bug...

Enweder der oder die Browser, die die nachfolgene Anweisung ignorieren. Aber interessant...

freundliche Grüße
Ingo