[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
  • AmicaNoctis
    antwortet
    Zitat von Kropff Beitrag anzeigen
    Aber nicht im IE6 angucken .
    So, lieber Peter. Ich hab mir deine Kritik mal zu Herzen genommen und einen Weg gefunden, das ganze auch ohne JS im IE >= 5.5 umzusetzen: MultiColumn

    Bist du jetzt zufrieden?

    Anja

    Einen Kommentar schreiben:

  • jbay
    antwortet
    Manchmal steh ich aber echt so was von auf dem Schlauch.

    Vielen Dank euch beiden.

    Einen Kommentar schreiben:

  • AmicaNoctis
    antwortet
    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.

    Einen Kommentar schreiben:

  • Kropff
    antwortet
    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

    Einen Kommentar schreiben:

  • jbay
    antwortet
    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?

    Einen Kommentar schreiben:

  • AmicaNoctis
    antwortet
    Zitat von Kropff Beitrag anzeigen
    Aber nicht im IE6 angucken .
    Mit dem besagten JS geht es auch dort.

    Einen Kommentar schreiben:

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

    Peter

    Einen Kommentar schreiben:

  • AmicaNoctis
    antwortet
    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

    Einen Kommentar schreiben:

  • Kropff
    antwortet
    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

    Einen Kommentar schreiben:

  • AmicaNoctis
    antwortet
    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

    Einen Kommentar schreiben:

  • Kropff
    antwortet
    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

    Einen Kommentar schreiben:

  • AmicaNoctis
    antwortet
    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.

    Einen Kommentar schreiben:

  • jbay
    antwortet
    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.

    Einen Kommentar schreiben:

  • Kropff
    antwortet
    Und damit kommt auch der IE6 klar? Das musst du mir zeigen.

    Peter

    Einen Kommentar schreiben:

  • AmicaNoctis
    antwortet
    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, 14:03.

    Einen Kommentar schreiben:

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