• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Dreispaltiges Layout mit fixer Mitte und flexiblen Seiten

mbuchegg

mbuchegg

Neues Mitglied
Ich bekomm es einfach nicht hin...

Ich möchte ein Layout, das mal auf die komplette Seite gültig ist.
Das besteht dann aus drei Spalten wobei die mittlere genau 1000 pixel hat und die Seitenspalten je nach Bildschirmauflösung flexibel sind.

In die mittlere Spalte soll der Inhalt left, top angezeigt werden und in den Seitenspalten middle, center.

Aber es funktioniert einfach nicht...

Hat da jemand ne css für mich mit der das funktioniert?

mein Html wäre so...
Hab eine Grafik angehängt um klar zu machen wie das aussehen soll ;)

HTML: 
<body>
<div id="container_gesamt">
    <div id="left">LINKS</div>
    <div id="right">RECHTS</div>
    <div id="middle">MITTE</div>
</div>
</body>
 

Anhänge

  • layoutbeispiel.jpg
    layoutbeispiel.jpg
    4,2 KB · Aufrufe: 7
Sorry klar....
Hab nur so viel rumprobiert, dass ich keine Ahnung mehr hatte was ich jetzt genau posten soll...

Also das wäre mein Ansatz gewesen:

HTML: 
div#container_gesamt {
    clear: both;
    min-height: 100%;
    min-width: 100%;
    background-color: aqua;
    padding: 0px;
    margin: 0px;
}
div#left {
    float: left;
    width: auto;
    background-color: red;
    min-height: 100%;
    margin: auto;
}
div#right {
    float: right;
    width: auto;
    background-color: green;
    min-height: 100%;
    margin: auto;
}
div#middle {
    padding: 0px;
    margin: 0px;
    background-color: silver;
    width: 1000px;
    min-height: 100%;
}

Die Farben sind für mich grad nur da um deutlich zu sehen was mit den Containern passiert...

Aktuell ist rechts uns links ja mal gut, aber die mittlere Spalte wird nicht richtig zentriert, die spalten sind auch nicht über die komplette höhe und rechts und links sind nicht flexibel... Der Inhalt ist natürlich noch nicht positioniert, weil ich dazu ja auch noch keine Angaben gemacht habe. Aber würde jetzt eh nichts nutzen, weil ja nur jeweils der Text als Container angezeigt wird und keine Fläche.

Ich sende nen Screen mit...
 

Anhänge

  • test.jpg
    test.jpg
    35,2 KB · Aufrufe: 2
Danke, aber das ist aktuell im Original so gelöst...
Da ist der mittlere Container zwar super mittig, aber wie bekomme ich die Seitencontainer hin. Und wie werden die Container jetzt überhaupt auf die ganze Seitenhöhe fixiert?...
 
Ich bin echt dankbar für Hilfe... aber das hilft nicht.

Ich versuche nochmal zu erklären was ich will.
Die Spalte in der Mitte ist FIX! Nicht Flexibel.
Rechts und links sollen die Spalten FLEXIBEL sein. Der jeweilige Inhalt dort soll middle, center dargestellt werden.

Das ist alles was ich will - und nichts von den Beispielen hilft hier weiter. Vielleicht bin ich auch zu blöd, alles möglich. Aber alles geht davon aus, dass links und rechts fix ist aber die mitte flexibel... Wenn ich das umdrehe funktioniert aber nichts.... Das ist mein Problem. Und ich hab auch einen anderen Thread gefunden, der sich mit dem Problem beschäftigt, da konnte auch keiner eine wirkliche Lösung geben.

Ganz offensichtlich ist das nicht so einfach wie man sich das vorstellt... Und ich verstehe nicht warum das nicht leicht umzusetzen ist.
 
Ich glaube nicht das du zu blöd bist, aber ich sehe das eher als schwer an, wenn das Problem vielleicht gar nicht die Lösung ist. Du möchtest ja ein CSS Layout, hättest du YAML wäre dieses Problem nach 12 Sekunden behoben weil sich viele damit auskennen und es einfach ist. Ich könnte dir einen Code bereitstellen doch der Aufwand ist wahrscheinlich zu gross. Schau dir dochmal CSS Frameworks an und lass dir so helfen, du musst nicht das Rad neu erfinden, wenn es bereits jemand gibt mit diesem Problem. Suche einfach nach CSS Frameworks, solche sind eigentlich sehr leicht zu lernen und du wirst schnell zum Ziel kommen. Wenn das jedoch nichts für dich ist dann wirst du dich halt mit: Vertikaler Zentrierung (Googlesuche) auseinandersetzen müssen. Ich hoffe ich habe dir weitergeholfen. PS: Google ist dein Freund :)
 
Ich hab zum Glück eine Lösung gefunden. Die funktioniert jetzt auch bis auf die vertikale Zentrierung von Inhalt in dem DIV...
Das fehlt noch. mit valign funktioniert es nicht. Und table-cell nimmt chrome nicht. aber das bekomme ich auch noch hin. außer du hast nen tipp für mich.
 
valign gibt es nicht mehr.

Hier wäre ein Workaround in JavaScript:
Code: 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <style type="text/css">
      #gesamt {
          width: 100%;
          height: 500px;
          background: #666;
      }
      #links, #mitte, #rechts {
          height: 300px;
          float: left;
      }
      #rechts {
          background: green;
      }
      #links {
          background: red;
      }
      #mitte {
          background: blue;
          width: 500px;
      }
    </style>
</head>
<body>
    <div id="gesamt">
        <div id="links"></div>
        <div id="mitte"></div>
        <div id="rechts"></div>
  </div>
  <script type="text/javascript">

      $('#links, #rechts').css({
          width: ($('body').width() - 501) / 2
      });

      $(window).on('resize', function() {
          $('#links, #rechts').css({
              width: ($('body').width() - 501) / 2
          });
      })
  </script>
</body>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben