Ingo Siemon: Erste CSS Versuche

Beitrag lesen

Lieber Woodfighter

Ich werde auf meinen Seiten aber 2 unterschiedliche
Hintergrundfarben verwenden [...]
<body class="hintergrund-1"> bzw <body class="hintergrund-1">
Ist es denn hier eigentlich sinnvoller eine ID oder eine KLasse zu verwenden?

Ich würde eher zur Klasse greifen, die ich aber sicher anders nennen würde. Was veranlaßt dich denn dazu bei einigen Seiten die Hintergrundfarbe zu ändern? Es ist doch sicher um Unterschiede zwischen den Inhalten anzudeuten, und da wäre es sinnvoller Klassen wie "Produkt", "Allgemeines", "Technisches" zu verwenden, dann ergeben sie nämlich immer noch sinn, falls du später mal die CSS Datei änderst und die Seiten nicht mehr an der Hintergrundfarbe unterschieden werden sondern z.B. durch einen farbigen Rahmen um die Seite. Klassen sollten also eher einen klassifizierenden Charakter haben als einen darstellerischen.

OK, das leuchtet ein.
Bisher habe ich den dunklen Huntergrund in der Navi
und den hellen Hintergrund im Rest verwendet.
Dann werde ich die Klassen für den <body>-Tag nun also
"Navi" und "Inhalt" nennen.

Was empielst Du denn für 3 Schriftgrößen für mein Beispiel:
http://www.spaceart.de/_WC3_Test.shtml

Ich verwende im aktuellen Projekt z.B. body{font-size:1em;} h1{font-size:1.5em;} body{font-size:1.3em;}

Hast Du Dich da nun vertan?
Weil Du zweimal "body{font-size:" schreibst.

Deswegen muß man relative Schriftgrößen verwenden, die sich auf die Einstellungen des Users in seinem Browser beziehen.

Yep, genau das habe ich bei meiner neuen Seite vor.

Die Standardeinstellung im IE ist mittel.

OK, Danke.

Möglicherweise ist ISO-8859-15 noch eher der Zeichensatz Deiner Wahl.

Was ist denn der genaue Unterschied zwischen ISO-8859-15 und iso-8859-1?
Ist es wirklich so wichtig, welchen ich da einstelle?

Ich maskiere Umlaute in meinen Texten immer.

Warum? Du kannst sie doch direkt reinschreiben.

Naja, mein Text-HTML-Editor (Phase5) habe ich so eingestellt,
dass er beim speichern die Umlaute automatisch maskiert.
Ist das nicht ratsam?

Wie ist das denn eigentlich auf amerikanischen Computern
(die haben doch da keine Umlaute)?
Wie shen die denn maskierte und unmaskierte Umlaute auf Ihren Bildschirmen?

Die sehen gleich aus, die Maskierung ist nur für Zeichen nötig, die im Zeichensatz nicht enthalten sind.

Ich dachete das immer flgendermassen:
Ein User kauftz sich im USA (oder eben da, wo es keine Umlaute gibt)
einen Rechner und geht damit dann ins Internet.
Hat der denn dann sozusagen in seinem PC auch unsere Umlaute?
Hört sich etwas doof an die Frage, ich weis :)
Was ich meine ist, wenn er dann z.B. eine Word Datei mit Umlauten
von mir bekommt ... sieht er die denn  dann auch.
Und wenn er sich z.B. meine Webseite anschaut ... sieht er auch da die Umlaute?
Oder werden die dann da bei ihm irgendwie duch kleine Kästchen oder so ersetzt?

[http://de.wikipedia.org/wiki/Plenk@title=Plenken] ist schrecklich.
Das ist keine künstlerische Freiheit, sondern du verschlechterst das Lesebild deiner Seiten.

OK, dann werde ich das auch auf meiner neuen Seite unterlassen.

<title>SPACEart</title>

Wähle einen besser bechreibenden Titel, z.B. "Star Wars: AT-AT -SPACEart"

Ja, das ist klar. Dieses war ja nur ein Test-Title.
Später werde ich natürlich individuelle <Titel vergeben.

<p id="kasten-3">

id="Beschreibung" klingt sinnvoller.

Stimmt, auch eine gute Idee ... Danke.

Statt einige Angaben mehrmals zu definieren (z.B. die Schriftart), definiere sie nur für body und lasse sie vererben.

Weil das <bod>-Element das Elternelement von z.B. h1, h2, p usw ist ... richtig.
Wenn dem so ist, komme ich ja anscheinend sogar langsam hinter diese Vererbungs-Geschichte :)

Demnach müsste meine css-datei also so aussehen:
--------------------------------------------------------------------
body.inhalt{
     background-color : #235f70;
     font-family : Arial, Verdana, Helvetica, sans-serif;
}

.navi {
     background-color : #004559;
     font-family : Arial, Verdana, Helvetica, sans-serif;
}

h1 {
     background-color : #004559;
     width : 508px;
     padding : 5px;
     margin : 0;
     border : 1px solid #ffffff;
     font-size : 1,8em;
     color : #fff000;
     font-weight : bold;
}

h2 {
     background-color : #004559;
     width : 508px;
     padding : 5px;
     margin-top : 10px;
     border : 1px solid #ffffff;
     font-size : 1.5em;
     color : #fff000;
     font-weight : bold;
}

p {
     background-color : #004559;
     width : 508px;
     padding : 5px;
     margin-top : 10px;
     border : 1px solid #ffffff;
     font-size : 1em;
     color : #ffffff;
     text-align : justify;
}
--------------------------------------------------------------------
Ist das korrekt?

h1 {
     width : 508px;
     font-size : 180%;
}

Hier verwendest du eine relative Schriftgröße, aber eine feste Breite für das Element. Das ist schlecht, da du ja nicht weißt, wie breit die Überschrift denn nun ist.

Ja, das ist mir auch schon aufgefallen :)
Da wirds aber nun etwas schwierig.
Wenn Du Dir mal meine bisherige Seite anschaust ( http://www.SPACaet.de )
und da dann einfach mal auf eines der Modelle klickst,
siehst Du ja dieses Layout in dieser Breite.
Im Grunde möchte ich das auch mit CSS usw. wieder so umsetzen.
Wobei mir schon klar ist, dass eine feste Seitenbreite auch fragwürdig ist.
ABer die Bilder haben nun mal eine bestimmte Größe (508 x 300 Pixel)
und die sehen so untereinander einfach gut aus, finde ich.

Fällt Dir vielleicht eine gute Idee ein,
wie ich das "unter einen Hut" bekomme?

Über weitere Hilfe von Dir würde ich mich auch sehr freuen.
Gruß
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