Powl: Design

Beitrag lesen

Hallo,

Hättest du da ein paar Tipps zu?

Im Moment nicht viel, da ich den Quelltext nicht gelesen habe. Was mir aber auffällt ist, daß bei großer Schriftskalierung die gesamte Seite aus dem viewport haut. Das könntest Du vermeiden, wenn Du für die großen Bereiche Breiten in % angibst. Das richtet sich dann nach dem viewport, also dem Browserfenster und erzwingt dann keine horizontalen Scollbars, die immer unschön sind. Versuche doch mal der "Seite" z. B. 80% Breite zu geben und dann margin: x 10%; zuzuweisen.
Für Browser kannst du mit min-width verhindern, daß dein Headerbild zusammengedrückt wird, so Du es als Hintergundbild einbindest. Wenn Du es als <img></img> einbindest, gibst Du ja (hoffentlich) auch height und width an, dadurch ist dann die Mindestbreite quasi schon vorgegeben.
Probier doch beides ruhig mal aus.
Innerhalb dieses äußeren Seiten divs kannst Du dann Deine Elemente arrangieren, Menüleiste und so. Blockelemente haben dann automatisch die Breite der gesamten inneren Seite. Laß die Elemente einfach frei umbrechen. In der Menüleiste mußt Du nur aufpassen, daß sich die Höhe automatisch anpaßt, wenn durch den Umbruch der Links mehr Spalten nötig werden.
Die Höhe des Inhaltsbereiches kannst Du erstmal vernachlässigen. Eigentlich sollten die Inhalte so umfangreich sein, daß sich die Höhe dann schon ergibt.
Ansonsten kann man für den IE einfach eine height: festlegen. Benötigt der Inhalt mehr Höhe, wird der Bereich angepasst. IE behandelt height also wie min-height.
Diesen Befehl mußt Du nur vor Browsern verbergen, dort muß eine min-height Angabe hin.
Also z. B.
* html #inhalt {height:10em;}
body > #inhalt {min-height:10em;}

Hilfreich kann sein
* {border:1px solid red;}
Damit umrahmst Du alle Elemente und bekommst einen guten Eindruck wie diese sich anordnen. Manchmal kann man mit diesem Trick einiges besser Überblicken.

Ich gehe eigentlich so vor, daß ich mir grob überlege wie das Layout aussehen soll und dann gehe ich systematisch vor. Ein Bereich nach dem anderen. Immer in kleinen Schritten, parallel immer in IE und Browser überprüfen und anpassen wenn nötig. Nicht zu viele Änderungen  auf einmal. Bevor man sattelfest vorhersehen kann wie sich z. B. Positionierungen auswirken werden, einfach mal experimentieren. Eine Anweisung ändern und gleich den Effekt beobachten.
So bekommt man gleich ein Gespür dafür, was man bewirkt. Ist zwar langsam aber zu Anfang mMn ein gangbarer Weg um CSS beherschen zu lernen.

Und wenn's an einer konkreten Stelle mal richtig hakt, hat's hier mit Sicherheit einen guten Rat.

Gute N8t
^da Powl

0 61

Mit em arbeiten

Phil
  • css
  1. 0
    Cheatah
    1. 0
      Phil
      1. 0
        MudGuard
        1. 0
          Phil
          1. 1
            Cheatah
            1. 0
              Phil
              1. 2
                Philipp
                1. 0
                  Phil
                  1. 8

                    Design

                    Powl
                    1. 0
                      Phil
                      1. 0
                        Wilhelm Turtschan
                        1. 0
                          Phil
                      2. 0
                        Gunnar Bittersmann
                      3. 2
                        Powl
                        1. 0
                          Phil
                          1. 0
                            Phil
                            1. 0
                              Powl
                              1. 0
                                Phil
                              2. 0
                                at
                                1. 0
                                  Ashura
                                  1. 0
                                    at
                            2. 0
                              Jens Holzkämper
          2. 0
            Philipp
      2. 0
        Philipp
        1. 0
          Phil
          1. 0
            MudGuard
          2. 0
            Philipp
      3. 1
        Cheatah
        1. 0
          Phil
          1. 0
            Der Martin
          2. 2
            MudGuard
            1. 0
              Phil
              1. 0
                MudGuard
                1. 0
                  Phil
                  1. 0
                    Ingo Turski
                  2. 0
                    Gunnar Bittersmann
              2. 0
                D.R.
              3. 1
                Klawischnigg
                1. 0
                  MudGuard
                  1. 1
                    Klawischnigg
                2. 0
                  at
    2. 6
      Christoph Schnauß
      1. 0
        Ashura
        1. 0
          Wilhelm Turtschan
          1. 0
            Christoph Schnauß
          2. 0
            Ashura
            1. 0
              Christoph Schnauß
      2. 0
        Der Martin
        1. 1
          Christoph Schnauß
          1. 0
            Ingo Turski
            1. 1
              Wilhelm Turtschan
              1. 2
                Ashura
                1. 0
                  Wilhelm Turtschan
                  1. 1
                    Ashura
                    1. 0
                      Wilhelm Turtschan
                      1. 0
                        Auge
                        1. 0

                          Internal Server Error

                          Wilhelm Turtschan
                      2. 0
                        at
                    2. 0
                      Ingo Turski
            2. 0
              Christoph Schnauß