Ingo Siemon: Erste CSS Versuche

Beitrag lesen

Lieber Cheatah ... weiter gehts :)

OK, das habe ich nun gemacht:
OK, den habe ich nun auch eingebaut:
Ist auch erledigt:

ich kann Dir versprechen, dass Du in diesem Forum auf sehr geduldige Helfer stoßen wirst, wenn die Hilfe bei Dir weiter so gut ankommt :-)

OK, das freut mich wirklich SEHR zu hören.
Das macht echt auch riesigen Spass, hier bei Euch wieder zur Schule zu gehen :)

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

Die Fußnote habe ich übrigens vergessen:
[1] Ja, es gibt Gründe, einem <body> eine Klasse zu geben.

Meinst Du damit, dass ich das <body>-Element direkt in der Datei referenzieren soll?
Also so: <body style="background-color:#235f70;>

Nein, von Inline-Styles ist abzuraten. Ich meine, dass Du als CSS-Selektor direkt den Elementnamen verwenden kannst.

OK, jetzt komme ich langsam dahinter, was gemeint ist (hoffe ich zumindest).
Du meinst, ich soll einfach direkt in die css-Datei folgendes schreiben:

body { background-color : #235f70; } ... richtig?
Ich werde auf meinen Seiten aber 2 unterschiedliche
Hintergrundfarben verwenden
(auf den meisten hellblau und auf einigen dunkelblau).
Darum hatte ich das so gemacht:
body { background-color : #235f70; }
.hintergrund-2 { background-color : #004559; }
<body class="hintergrund-1"> bzw <body class="hintergrund-1">
Ist es denn hier eigentlich sinnvoller eine ID oder eine KLasse zu verwenden?

Sehr gerne, wenn Du mir verrätst, was Dir unklar geblieben ist.

Ich komme später darauf zurück.

Das ist nicht schlimm. CSS ist keine triviale Technik, schon die notwendigen Grundlagen sind nicht ganz ohne. Ich bin aber zuversichtlich ...

Ich werde es aber weiter versuchen, dass Du sie schnell erlernen wirst. Wenn Dir spezifische Punkte unklar sind, frage bitte nach.

Klaro, das mach ich glatt :)

Wie sieht es denn aus? :-)

Willst Du damit sagen, dass es eher blöd oder eher gut aussieht?

Ich würde allerdings vermeiden, die Schrift zu klein zu machen. 85% sind IMHO harte Untergrenze. (Auch zu groß ist übrigens nicht besonders empfehlenswert.)

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

Bedenke, dass Deine Angaben innerhalb der Kaskade auch z.B. 180% von 85% bedeuten können.

Ja, das hatte ich schon verstanden.
Aber bisher "benutze" ich ja noch keine Kaskadenm sozusagen.
Soll aber noch kommen.

Nun aber nochmal eine generelle Frage zu den Schriftgrößen.
Bisher hatte ich die immer mit pt festgesetzt,
so dass sie im IE auich nicht mehr vom User zu ändern war.
Klar, bei meiner Auflöung hier an meinen PC sieht das gut aus.
Aber bei einem Freund, der so ne Riesden-Auflöung fährt (1600 x 1200 oder sowas),
wirds natürlich arg winzig :)
Was würdest Du denn denken, wie die User (die den Browser einfach so in der Standardeonstellung belassen),
dass z.B im IE eingestellt haben?
... klein, mittel, größer ...?
Bzw. wie ist denn die Standardeinstellung vom IE direkt nach der Installation?
Ich denke, dass sollte man doch bei der Wahl der zu verwendenen
Schriftgröße beim Seitendesign berücksichtigen ... oder?
Im Firefox gibts unter "Ansicht" eine so schöne "normal"-Option,
auf der sicherlich bei vielen der Browser eingestellt ist, denke ich.

Ich denke, dass die User, welche eben auch mit der Schriftgrößen-Einstellung
ihres Browsers "herumspielen" bzw. diese halt eben ab-und-zu benutzen,
sich das ja im Großen und Ganzen selber einstellen werden.
Aber die nicht so versierten User, die vielleicht nicht mal wissen,
dass man da am Browser was einstellen kann,
denen muss man doch ne gute Grundeinstellung der Seite "liefern",
die dann eben auf standard-konfigurierten Browsern gut ausschaut.

Das alles mal ganz abgesehen, von den Minitoren und Auflösungen der User :))

Ich selber bin mit 1280 x 1024 Pixeln im maximieren IE6 unterwegs.
Und da habe ich den Schriftgrad im Browser auf "klein" stehen.
Das klappt eigentlich wunderbar.
Aber manchmal sehe ich Seiten, das ist dann die Schrift so winzig klein,
dass da auf gar keinen Fall auch nur irgedwas zu erkenne ist.
Da muss ich dann bis auf "Größer" hochdrehen.

Nun denn, lange Rede, kurzer Sinn ...
Kannst Du mir einfach mal einen guten Rat geben,
welche 3 Schriftgrößen ich da am ehesten verwenden sollte?
Bei mir gibt es halt die beiden (gelben) Überschriften
und den normalen weissen Text.
Schau nochmal hier auf meine bisherige Seite, mit den
fest eingestellten Schriftgrößen: http://www.SPACEart.de
Da fand ich das Verhältnis der drei Schriftgrößen zueiander imm er prima.

Sieht gut aus, wobei ich in dem Code auf alle Klassen und IDs verzichten würde.

Hab ich schon erledigt.
Auf die einfachsten Dinge kommt man manchmal nicht :)
Ganz unten in diesem Posting ist nun nochmal der aktuelle Stand.

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

Warum?
Ich maskiere Umlaute in meinen Texten immer.
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?

<h2 id="kasten-2">Star Wars : AT-AT (Einzelstück)</h2>
<p id="kasten-3">[...] Exemplar !</p>

Die Leerzeichen vor dem Doppelpunkt und vor dem Ausrufezeichen widersprechen den Regeln der deutschen Sprache.

HJa, ich weiss.
Aber ich finds eigemtlich ganz schick so.
Mal gucken, ob ich das so lasse oder ob ich das in Zukunft auc ändere.
Ein bisschen künstlerische freihet muss schon drin sein?

Du machst riesengroße Schritte.

Danke für die Blumen.

XHTML
-------------------------------------------------------------------
<!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>Neuheiten</h1>

<h2>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>
-------------------------------------------------------------------

CSS
-------------------------------------------------------------------
body {
     background-color : #235f70;
}

.hintergrund-2 {
     background-color : #004559;
}

h1 {
     background-color : #004559;
     width : 508px;
     padding : 5px;
     margin : 0;
     border : 1px solid #ffffff;
     font-family : Arial, Verdana, Helvetica, sans-serif;
     font-size : 180%;
     color : #fff000;
     font-weight : bold;
}

h2 {
     background-color : #004559;
     width : 508px;
     padding : 5px;
     margin-top : 10px;
     border : 1px solid #ffffff;
     font-family : Arial, Verdana, Helvetica, sans-serif;
     font-size : 110%;
     color : #fff000;
     font-weight : bold;
}

#kasten-3 {
     background-color : #004559;
     width : 508px;
     padding : 5px;
     margin-top : 10px;
     border : 1px solid #ffffff;
     font-family : Arial, Verdana, Helvetica, sans-serif;
     font-size : 85%;
     color : #ffffff;
     text-align : justify;
}
-------------------------------------------------------------------

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