Ingo Siemon: Erste CSS Versuche

Beitrag lesen

Lieber Cheatah

Bei XHTML solltest Du das xmlns-Attribut hinzufügen.

OK, das habe ich nun gemacht:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
[...]
</head>

Das <title>-Element ist nicht freiwillig.

OK, den habe ich nun auch eingebaut:
<title>SPACEart</title>

Auch den verwendeten Zeichensatz solltest Du angeben.

Ist auch erledigt:
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />

<body class="hellblau">

Erstens kannst Du das <body>-Element in CSS auch ohne Klasse referenzieren[1]

Meinst Du damit, dass ich das <body>-Element direkt in der Datei referenzieren soll?
Also so: <body style="background-color:#235f70;>
Und das eben nicht über die "ausgelagerte" css-Datei machen soll?

und zweitens ist _jeder_ Klassen- oder ID-Bezeichner, der auf die derzeit gewünschte Darstellung schließen lässt, äußerstschlecht gewählt. Um genau zu sein: Weder Klassen noch IDs werden aufgrund von CSS-Bedürfnissen gesetzt. Sie dienen der Klassifizierung bzw. Identifizierung von Elementen.

#kasten-1 {
[...]
}
#kasten-2 {
[...]
}

Das verstehe ich noch nicht so ganz.
Hättest Du Lust, mir das nochmal mit anderen Worten zu erklären?

Du brauchst nicht jede CSS-Angabe zig mal durchzuführen - das macht man, bevor man begreift, dass Klassen nicht das CSS-Allheilmittel sind und dass es nicht nur Simple Selectors gibt. Gruppiere die Deklarationen bzw. nutze die Vererbungsstrategie von CSS (Kaskade).

OK, dazu habe ich mir das hier durchgelesen: http://www.bs-markup.de/archiv/2005/04/06/inheritance-vs-cascade-vererbung-und-kaskaden/
Aber so richtig 100%tog verstanden hab ichs noch nicht.
Ich werde es aber weiter versuchen.

font-size:9pt;

"pt" ist für Printmedien geeignet, nicht für den Bildschirm. Dort sind "em" und "%" für all das empfehlenswert, was von der Schrift abhängt, und "px" für alles, was pixelbasiert ist.

OK, ich hab nun folgendes gewählt:
font-size :  85%;  -  statt  -  font-size:9pt;
font-size : 110%;  -  statt  -  font-size:12pt;
font-size : 180%;  -  statt  -  font-size:18pt;
Ist das so richtig?
(Erstmal unabhängig vomm CSS-Vererbungsmechanismus)

Verwende zunächst den offiziellen Validator.

OK, ich werde einfach immer alle 3 verwenden:
http://validator.w3.org/
http://www.validome.org/lang/ge
http://jigsaw.w3.org/css-validator/
Laut allen dreien scheint der Quelltext (und die css-Datei)
ja nun valides "XHTML 1.0 Strict" zu sein:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.spaceart.de%2F_WC3_Test.shtml
http://www.validome.org/get/http://www.spaceart.de/_WC3_Test.shtml
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.spaceart.de%2Fcss-screen.css&warning=1&profile=css2&usermedium=all

Mir ist natürlich hier bei Euch schon klar geworden,
dass valider Code noch lange kein guter Code sein muss.
Daher würde ich mal um Beurteilungen für folgenden Code bitten:
--------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="css-screen.css" />

<title>SPACEart</title>

</head>

<body class="hintergrund-1">

<h1 id="kasten-1">Neuheiten</h1>

<h2 id="kasten-2">Star Wars : AT-AT (Einzelstück)</h2>

<p id="kasten-3">Es handelt sich um den Original Modell-Bausatz der Firma mpc/ERTL aus dem Jahr 1989. Die vorderen Beine und das Kontroll-Modul ("Kopf") sind beweglich. Die Base und der Snow Speeder sind nicht enthalten. -- ACHTUNG: wir haben nur ein einziges Exemplar !</p>

</body>
</html>
--------------------------------------------------------------------
Hier der Link zum Online-Betrachten: http://www.spaceart.de/_WC3_Test.shtml

Damit ich mir Fehler da gleich garnicht wieder angewöhne :)

Gute Wahl :-)

So, dann müsste ich der Sache doch wieder einen Schritt näher gekommen sein ... oder?

Gru0
Ingo

0 98

Erste CSS Versuche

Ingo Siemon
  • css
  1. 2
    Ashura
    • xml-derivat
    1. 0
      Ingo Siemon
      1. 0
        Der Martin
        1. 0
          Ingo Siemon
          1. 0
            Længlich
            1. 0
              Ingo Siemon
              1. 0
                Længlich
                1. 0
                  Ingo Siemon
                  1. 0
                    Struppi
                    1. 0
                      Ingo Siemon
                  2. 0
                    Længlich
                    1. 0
                      Ingo Turski
                      1. 0
                        Længlich
                    2. 0
                      Ingo Siemon
          2. 0
            Cheatah
            1. 0
              Ingo Siemon
              1. 0
                Cheatah
                1. 0
                  Ingo Siemon
        2. 0
          Ingo Siemon
    2. 0
      Ingo Siemon
      1. 0
        Ashura
        1. 0
          Ingo Siemon
  2. 2
    Eternius
    1. 0
      Ingo Siemon
  3. 2
    Gunnar Bittersmann
    1. 0
      Ingo Siemon
      1. 0
        Struppi
        1. 0
          Ingo Siemon
          1. 0
            Struppi
          2. 0
            Der Martin
            1. 0
              Ingo Siemon
              1. 0
                Der Martin
                1. 0
                  Ingo Siemon
                  1. 0
                    Struppi
                    1. 0
                      Ingo Siemon
                  2. 0
                    Auge
                    1. 0
                      Ingo Siemon
                      1. 0
                        Jens Holzkämper
                        1. 0
                          Ingo Siemon
                          1. 0
                            Jens Holzkämper
                            1. 0
                              Ingo Siemon
  4. 0
    Cheatah
    1. 0
      MudGuard
      1. 0
        Cheatah
    2. 0
      Ingo Siemon
      1. 0
        Cheatah
        1. 0
          Ingo Siemon
          1. 0
            Jens Holzkämper
            1. 0
              Ingo Siemon
              1. 0
                Gunnar Bittersmann
                1. 0
                  Ingo Siemon
                  1. 0
                    Gunnar Bittersmann
                2. 0
                  Gunnar Bittersmann
              2. 0
                Jens Holzkämper
                1. 0
                  Ingo Siemon
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Ingo Siemon
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          Ingo Siemon
                          1. 1
                            Gunnar Bittersmann
                            1. 0
                              Ingo Siemon
                              1. 0
                                Der Martin
                                1. 0
                                  Ingo Siemon
                              2. 0
                                Jens Holzkämper
                                1. 0
                                  Ingo Siemon
                          2. 0
                            Jens Holzkämper
                            1. 0
                              Ingo Siemon
                  2. 0
                    Jens Holzkämper
                    1. 0
                      Ingo Siemon
                      1. 0
                        Der Martin
                        1. 0
                          Ingo Siemon
                          1. 0
                            Der Martin
                            1. 0
                              Ingo Siemon
                              1. 0
                                Detlef G.
                                1. 0
                                  Ingo Siemon
                2. 0
                  Ingo Siemon
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Jens Holzkämper
                      1. 0
                        Ingo Siemon
                        1. 0
                          Gunnar Bittersmann
                          1. 0
                            Ingo Siemon
                            1. 0
                              Gunnar Bittersmann
                              1. 0
                                Ingo Siemon
                                1. 0
                                  Jens Holzkämper
                                  1. 0
                                    Ingo Siemon
                    2. 0
                      Ingo Siemon
              3. 0
                Jens Holzkämper
                1. 0
                  Ashura
                  1. 0
                    Jens Holzkämper
                    1. 0
                      Ashura
                    2. 0
                      Gunnar Bittersmann
                2. 0
                  Gunnar Bittersmann
                3. 0
                  Gunnar Bittersmann
                4. 0
                  Ingo Siemon
          2. 0
            Gunnar Bittersmann
            1. 0
              Ingo Siemon
              1. 0
                Gunnar Bittersmann