[CSS] Layout - liquid/fixed/liquid

Einklappen
X
Einklappen
 
  • Seite von 2
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige 1 2 template Weiter
  • #1

    [CSS] Layout - liquid/fixed/liquid

    Hallo zusammen,

    ich habe ein kleineres Problem bei welchem ich nicht weiterkomme.

    Ich habe eine Webseite, die eine fixe Breite hat und zentriert ist (sagen wir mal 600px). Nun brauche ich Rechts und Links davon je eine Div, die mitwächst. Ziel ist, dass der Inhalt dieser Divs zentriert bleibt, also immer in der Mitte zwischen Ende des Mittelteils und dem Ende des Browserfensters.

    Hat jemand einen Ansatz mit dem man es versuchen könnte oder geht das gar nicht mit CSS? Muss man da mit JS reinquatschen?

    Bin um jede Hilfe dankbar.

    Mfg

    jonas
    Stichworte: -
  • #2
    Wenn sich der linke und rechte Bereich an das Browserfenster anpassen sollen, geht das imho nur mit Javascript. Oder du arbeitest bei allen drei Bereichen mit Prozentwerten.

    Ziel ist, dass der Inhalt dieser Divs zentriert bleibt, also immer in der Mitte zwischen Ende des Mittelteils und dem Ende des Browserfensters.
    kannst du mal anskizzieren?

    Peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar

    • #3
      Hallo,

      man kann das mit CSS machen. Man kann sogar beliebig viele Spalten beliebig mischen (fixiert und prozentual) und das jeweils in horizontaler, vertikaler oder in beide Richtungen. Dafür braucht man einen Container, der um die Summe der absoluten Größenangaben zu klein ist, aber overflow: visible. Dann arbeitet man sich von links nach rechts bzw. von oben nach unten mit 2 gedachten Zählvariablen durch. Abs wird um die Größe in px inkrementiert (kein JS, von Hand im CSS!), wenn ein absoluter Block gesetzt wurde und rel um die Größe in % wenn ein relativer gesetzt wurde. Der nächste Block wird dann jeweils mit left (bzw. top): {rel}%; margin-left (bzw. -top): {abs}px gesetzt.

      Gruß,

      Anja
      Zuletzt geändert von AmicaNoctis; 20.08.2009, 15:03.
      [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
      Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
      Super, danke!
      [/COLOR]

      Kommentar

      • #4
        Und damit kommt auch der IE6 klar? Das musst du mir zeigen.

        Peter
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar

        • #5
          Ich habs irgendwie befürchtet.

          Skizzieren, hm. Ok, das Problem ist, dass das eine bestehende Seite ist, die halt eine fixe Grösse hat und zentriert ist. Nun sollen links und Rechts Grafiken eingeblendet werden, die natürlich auch fixe Grössen haben.

          Das sieht dann irgendiwe so aus:
          Code:
          <body>
<div id="links">
<img><img>
</div>
<div id="rechts">
<img><img>
<div id="content">
Text
</div>
</body>
          Der relevante CSS-Ausschnitt:

          Code:
              .twoColFixLtHdr #container { 
    	width: 800px; 
    }

    .left{
    width: 150px;
    float: left;
    margin-top:100px;
    }
    
    .right{
    width: 150px;
    float: right;
    margin-top:100px;
    }
          Wenn man halt jetzt das Fenster aufzieht bleiben die Bilder am linken resp. am rechten Rand hängen, was natürlich äusserst unschön aussieht. Zentriert soll es sein, obs dann schöner ist, egal, das entscheide nicht ich.
          Eine aufwändige JS-Programmierung scheue ich eigentlich, müsste nicht unbedingt sein. Evtl. muss man nochmals neue Ideen entwerfen. Aber Danke schon mal für den Input.

          Kommentar

          • #6
            Bei meinen Tests kam damals (mit leichten Modifikationen) auch der 5.5er damit klar. Für diese Mods war dann abernatürlich ein JS notwendig, aber das war immer nur dieses eine Skript, was man immer einbindet, wenn man diese Form der absoluten Positionierung braucht.
            [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
            Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
            Super, danke!
            [/COLOR]

            Kommentar

            • #7
              PHP-Code:
              .twoColFixLtHdr #container { 
                                    width: 800px; 
                  }

                  .              left{
                                width: 150px;
                                float: left;
                                margin-top:100px;
                  }
                  
                  .              right{
                                width: 150px;
                                float: right;
                                margin-top:100px;
                  } 
              Du arbeitest hier mit festen(!) Breitenangaben. Einfach ein neues Div um alle herum setzen und dem eine Breite von 1100px geben. Das war's schon.

              Peter
              Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
              Meine Seite

              Kommentar

              • #8
                Dann ist es aber wieder nicht in der Mitte. Was ist mit margin-left: auto; margin-right: auto; http://webdesign.about.com/od/css/ht/htcsscenterfix.htm
                [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                Super, danke!
                [/COLOR]

                Kommentar

                • #9
                  Zitat von AmicaNoctis Beitrag anzeigen
                  Dann ist es aber wieder nicht in der Mitte. Was ist mit margin-left: auto; margin-right: auto; CSS Centering - How to Center a Fixed Width Layout Document with CSS
                  Stimm, margin hab ich vergessen.
                  @TS
                  Also zusätzlich margin: 0 auto.

                  Peter
                  Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                  Meine Seite

                  Kommentar

                  • #10
                    Wenn du in den Randbereichen zentrierte Bilder haben willst, brauchst du aber 7 Spalten:

                    dyn | fix:Bilder | dyn | fix:Inhalt | dyn | fix:Bilder | dyn

                    Ich hab mal das Tutorial hochgeladen, was ich damals geschrieben habe. Schau dir im Quelltext die Kommentare an, dann sollte das zu schaffen sein: Multi-Column-Layout

                    Gruß,

                    Anja
                    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                    Super, danke!
                    [/COLOR]

                    Kommentar

                    • #11
                      Zitat von AmicaNoctis Beitrag anzeigen
                      Ich hab mal das Tutorial hochgeladen, was ich damals geschrieben habe.
                      Aber nicht im IE6 angucken .

                      Peter
                      Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                      Meine Seite

                      Kommentar

                      • #12
                        Zitat von Kropff Beitrag anzeigen
                        Aber nicht im IE6 angucken .
                        Mit dem besagten JS geht es auch dort.
                        [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                        Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                        Super, danke!
                        [/COLOR]

                        Kommentar

                        • #13
                          Zitat von AmicaNoctis Beitrag anzeigen
                          Dann ist es aber wieder nicht in der Mitte. Was ist mit margin-left: auto; margin-right: auto; CSS Centering - How to Center a Fixed Width Layout Document with CSS
                          Da ich aber float: left resp. float:right habe geht das nicht, die Divs hängen dann einfach am linken resp. rechten Rand.

                          Betreffend MultiColumn-Tutorial habe ich noch Fragen.
                          Müssen da die relativen Werte zusammen 100% ergeben oder ist das egal?

                          Und wenn ich jetzt 3 absolute Divs habe mit einer Gesamtgrösse von 1150px, muss dann der Slotcontainer den Wert right: 1150px haben?

                          Kommentar

                          • #14
                            Wo ist denn das Problem, wenn du mit festen Breitenangaben arbeitest?
                            PHP-Code:
                              <div class="border">
                                <                            div class="left">
                                                              bla
                                                            </div>
                                <                            div class="middle">
                                                              blubb
                                                            </div>
                                <                            div class="right">
                                                              blubber
                                                            </div>
                              </                            div>
                              ...
                                                          div.border {
                                                            width: 900px;
                                                            margin: 0 auto;
                              }    
                                                          div.left {
                                                            width: 150px;
                                                            float: left;
                                                            background: #f00;
                                                          }
                                                          div.middle {
                                                            width: 600px;
                                                            float: left;
                                                            background: #ff0;
                                                          }
                                                          div.right {
                                                            width: 150px;
                                                            float: left;
                                                            background: #00f;
                                                          } 
                            Peter
                            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                            Meine Seite

                            Kommentar

                            • #15
                              Zitat von jbay Beitrag anzeigen
                              Betreffend MultiColumn-Tutorial habe ich noch Fragen.
                              Müssen da die relativen Werte zusammen 100% ergeben oder ist das egal?
                              Nein, das ist nicht ganz egal, du solltest schon auf 100% kommen. Wenn das aus mathematischen Gründen nicht geht, solltest du wenigstens 99.9% anstreben. Einzige Ausnahme: das letzte Div (relativ) hätte sowieso keinen Inhalt und wäre nur ein Platzhalter bis zum Rand. Dann kannst du es natürlich im HTML und im CSS weglassen und kommst dadurch nicht auf 100%.

                              Zitat von jbay Beitrag anzeigen
                              Und wenn ich jetzt 3 absolute Divs habe mit einer Gesamtgrösse von 1150px, muss dann der Slotcontainer den Wert right: 1150px haben?
                              Exakt.
                              [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                              Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                              Super, danke!
                              [/COLOR]

                              Kommentar

                              Vorherige 1 2 template Weiter
                              Lädt...
                              X