Jens Holzkämper: Erste CSS Versuche

Beitrag lesen

Tach,

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.

das klingt ganz schrecklich nach Frames, Frames sind aber böse[TM]. Wenn du schon am neuerstellen bist, dann am besten gleich komplett.

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

ja es sollte h2{font-size:1.3em;} heißen.

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

Du mußt den einstellen, den das Dokument wirklich hat. Der Unterschied zwischen ISO-8859-15 und -1 ist für dich am ehesten das € Zeichen.

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

Es ist nicht nötig, aber da der Editor es für dich tut auch kein zusätzlicher Aufwand.

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?

Wenn es in der verwendeten Schrift, auf dem PC des Besuchers, das Zeichen gibt, wird es angezeigt. Gibt es das Zeichen nicht wird es ersetzt durch Fragezeichen oder Kästchen, dabei ist es egal, ob du &auml; oder ä schreibst.

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.

Genau.

Wenn dem so ist, komme ich ja anscheinend sogar langsam hinter diese Vererbungs-Geschichte :)

Du lernst erstaunlich schnell.

body.inhalt{
     background-color : #235f70;
     font-family : Arial, Verdana, Helvetica, sans-serif;
}

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

Da halte ich folgendes für sinnvoller:

  
body{  
  font-family: Arial, Verdana, Helvetica, sans-serif;  
  background-color: #235f70;  
  font-size:1em; /* Für den IE solltest du die Schriftgröße per CSS-Hack auf 101% festlegen*/  
}  
  
.navi{  
  background-color : #004559;  
}  

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;
}

Hier solltest du einiges zusammenfassen:

  
h1, h2, p{  
  background-color: #004559;  
  padding: 5px;  
  border: 1px solid #ffffff;  
  margin-top: 10px;  
  width: 508px;  /*siehe unten*/  
}  
h1,h2{  
  font-weight: bold;  
  color: #fff000;  
}  
h1{  
  font-size:1.5em;  
}  
h2{  
  font-size:1.3em;  
}  

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.

Du benutzt nur etwa 50 Prozent des dir zur Verfügung stehenden Platzes in meinem Browser-Fenster. Das ist für mich unschön, wozu habe ich mir das große Teil denn angeschafft?

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.

Ja, Bilder sind in einem fließenden Design immer etwas problematisch unterzubringen.

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

Das Erstellen von Designs ist sicherlich meine größte Schwäche in diesem Bereich, aber da kann dir sicher einer, der hier herumlaufenden, Kreativen helfen.

Über weitere Hilfe von Dir würde ich mich auch sehr freuen.

Gerne doch. Wenn wir fertig sind nehme ich dann gerne ein Bath'let als Geschenk ;-)

mfg
Woodfighter

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