# 3 Spalten - Mittlere mit fester Breite und zentriert



## hemorieder (13. März 2010)

Hey,

ich habe folgendes Problem:

Ich will drei Div Container nebeneiander machen. Der Mittlere soll eine feste Breite von 700px haben.

Jeweils der Linke und der Rechte Container sollen sich dynamisch der Breite des Bildschirms anpassen. Allerdings sollen diese jeweils eine andere Hintergrundfarbe haben.

*Die Variante mit nur einer Box mit "margin:0 auto" fällt damit weg.*

Ich brauche wirklich drei Boxen.

Ich habe das mal versucht etwas anschaulicher zu machen 








Der css code sieht so aus bis jetzt:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
        
        <style type="text/css">
              #links {
	                 height:100px;
	                 background-color:red;
	                 width:100%;
                         float:right;
                       }

             #mitte {
	                 height:100px;
	                 background-color:#030303;
	                 margin:0 auto;
	                 width:700px;
                         float:right;

                        }

             #rechts {
	                  height:100px;
	                  background-color:blue;
	                  width:100%;
	                  }
</style>
</head>
<body>


<div id="links"></div>
<div id="mitte"></div>
<div id="rechts"></div>


</body>
</html>
```

Aber leider macht das nur völligen Mist.

Wisst ihr wie ich das anstelle ?

Lg


----------



## Marschal (13. März 2010)

Was soll den in den linken und rechten Spallte gezeigt werden? Auch Content oder, soll in denen nur Beispielsweise der Hintergrung dynamisch fortgesezt werden.

Bei ersterem hier ein Zitat von Maik's Signatur:
Layout mit 3 Spalten

Zweiteres, dan brauchst du nur eine Spallte, mit fester breite und diese dan zentriert.


----------



## Maik (13. März 2010)

Hi,

ein schwieriges Unterfangen, drei Blöcke nebeneinander auszurichten, wobei der mittlere eine fixe, und die beiden äußeren Blöcke eine relative Breite erhalten sollen.


CSS Layout: A collection of 224 Grid and CSS Layouts
Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!
 haben solch ein Konzept auch nicht im Angebot.

Sollen die äußeren Spaltenblöcken auch Inhalt in sich aufnehmen, oder übernehmen sie hier lediglich gestalterische Aufgaben?

mfg Maik


----------



## hemorieder (13. März 2010)

@Marschal:
die spalten links und rechts erhalten jeweiles eine andere hintergrundgrafik

daher fällt die variante mit nur einer box zentriert weg

der link den du angefügt hast, trifft bei mir leider nicht zu, die beiden äußeren container sollen den gesamten bildschirm links bzw recht aufüllen, an dem mittleren mir 700 px soll nie was geändert werden.

sie meine grafik    http://polifka-bonn.de/css.jpg

@Maik

sie übernehmen eigentlich nur gestalterische aufgaben, beide kriegen eine hintergrundgrafik zugewiesen


----------



## Maik (13. März 2010)

hemorieder hat gesagt.:


> @Maik
> 
> sie übernehmen eigentlich nur gestalterische aufgaben, beide kriegen eine hintergrundgrafik zugewiesen


Dann ist doch alles bestens 


```
<div id="links"></div>
<div id="rechts"></div>
<div id="mitte"></div>
```


```
* {
              margin:0;
              padding:0;
}
#links {
              height:100px;
              background-color:red;
              position:absolute;
              top:0;
              left:0;
              width:50%;
}

#mitte {
              height:100px;
              background-color:#030303;
              margin:0 auto;
              width:700px;
              position:relative;
              z-index:2;
}

#rechts {
              height:100px;
              background-color:blue;
              position:absolute;
              top:0;
              right:0;
              width:50%;
}
```


Und vernachlässige bitte in deinen weiteren Beiträgen nicht unsere Netiquette bzgl. der erwünschten Groß- und Kleinschreibung, wie du sie ein deinem Eingangspost angewendet hast - vielen Dank.

mfg Maik


----------



## hemorieder (13. März 2010)

Ah super vielen Dank !

Aber sobald ich die Hintergrundfarbe beim mittleren durch eine Grafik ersetze, also z.B.:

background-image:url(bilder/no.png);
background-repeat:repeat-x repeat-y;

überlappen die beiden äußeren in die Mitte ?!

Was kann ich dagegen machen ?


----------



## Maik (13. März 2010)

Zeit für eine Ausbaustufe 

Hier hab ich mal den Anwendungsfall umgesetzt, dass die beiden seitlichen Hintergründe den Viewport in seiner vollständigen Höhe ausfüllen, aber darin auch fixiert sein sollen, wenn ein größerer Inhaltsumfang im Fenster gescrollt wird.


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-03-13" />

<title>tutorials.de</title>

<style type="text/css">
/* <![CDATA[ */
* {
              margin:0;
              padding:0;
}
html,body {
              height:100%;
}
#links {
              background:#C1D6F5;
              position:fixed;
              top:0;
              bottom:0;
              left:0;
              width:50%;
}
#mitte {
              min-height:100%;
              background:#D7B7B8;
              margin:0 auto;
              width:700px;
              position:relative;
              z-index:2;
              color:#fff;
}
#mitte p {
              margin:5px 0;
}
#rechts {
              background:#C7E3CA;
              position:fixed;
              top:0;
              right:0;
              bottom:0;
              width:50%;
              text-align:right;
}
/* ]]> */
</style>

<!-- Für IE6 -->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE7.js"></script>
<![endif]-->
<!-- / Für IE6 -->

</head>
<body>

      <div id="links">
           <p>Ich halte hier die Stellung,</p>
           <p>wenn der Inhalt gescrollt wird.</p>
      </div>
      <div id="rechts">
           <p>Ich halte hier die Stellung,</p>
           <p>wenn der Inhalt gescrollt wird.</p>
      </div>
      <div id="mitte">
           <h1>Test-Content</h1>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
           <p>$foobar</p>
     </div>

</body>
</html>
```


mfg Maik


----------



## hemorieder (13. März 2010)

Ich verstehe nicht ganz was du mir damit erklären möchtest ? 

Und bezüglich meines Problems mit den Hintergründen ne Idee ?


----------



## Maik (13. März 2010)

hemorieder hat gesagt.:


> Aber sobald ich die Hintergrundfarbe beim mittleren durch eine Grafik ersetze, also z.B.:
> 
> background-image:url(bilder/no.png);
> background-repeat:repeat-x repeat-y;
> ...


Redest du hier von einem (halb)transparenten Hintergrundbild, durch das die seitlichen Hintergründe durchscheinen?

In meinem technischen Lösungsansatz, der den mittleren Block mit der Schichtposition z-index:2 über zwei   absolut oder fixiert positionierte Blöcke relativ positioniert, die sich darunter die verfügbare Fensterbreite teilen (width:50%)  könntest du lediglich an dieser Breitenangabe feilen, damit sie schmäler werden.

Deine Wertzuweisung zur Hintergrundbildwiederholung in der X- und Y-Achse gibt es in dieser Form überhaupt nicht.

```
background-repeat:repeat-x repeat-y;
```

Da heißt es dann einfach:

```
background-repeat:repeat;
```

Deine beiden Werte kommen getrennt voneinander zum Einsatz, wenn der Hintergrund nur in einer der beiden möglichen Richtungen wiederholt werden soll - also:

```
background-repeat:repeat-x;
```
oder

```
background-repeat:repeat-y;
```


mfg Maik


----------



## hemorieder (13. März 2010)

Ja also um genauer zu sein geht es darum:

Dieses Gesamte Gebilde wird über eine bestehende Konstruktion drüber gelegt. Das hat genau das zur Folge was du schon angesprochen hast, "links" und "rechts" kriegen eine Höhe von 495px und einen Halbtransparenten Hintergrund zugewiesen, "mitte" bekommt einen 100% Transparenten Hintergrund auch bei einer Höhe von 495px.

Nur leider veschiebt sich dann alles komplett, sobald die background-color rausnehme, wie du ja auch beschrieben hast.

Wie kann ich das Problem denn lösen ?


background-repeat hab ich geändert, sorry


----------



## Maik (13. März 2010)

Auf Anhieb hab ich da keine Lösung parat.

Wie ich hier in meinem ersten Beitrag auch nicht grundlos antwortete, ist  es ein schweres (unmögliches) Unterfangen, dein Seitenkonzept in die Praxis umzusetzen.

Typisch ist der entgegengesetzte Spaltenaufbau, also außen fix, und der mittlere Bereich ist variabel, was sich dann problemlos mit einem horizontalen Außenabstand für den mittleren Block realisieren lässt, der der Breite der äußeren Spaltenblöcke entspricht, die jeweils mit float:left und float:left aus dem normalen Textfluß genommen werden.

Nur wie willst du diese Technik in dein erkorenes Konzept portieren? Ich wüßte da keinen Weg.

mfg Maik


----------



## Marschal (13. März 2010)

Mal als denk anregung:
Liese sich den ein dynamischer linker sowie rechter Block nicht mit Hilfe eines Java-Skriptes bestimmen?

Dh, dass man im Prinzip immer die gesammte Breite des Browsers-700px rechnet, und dann durch 2 teilt, so erhällt man ja die fixe Breite für die jeweiligen Blöcke links und rechts.

Ist nur eine theorie, ich weis nicht ob sich auch css und Java kombinieren lassen.


----------



## Maik (13. März 2010)

Kannst du mir mal  eine Beispielseite inklusive der einzelnen Hintergrundbilder zur Verfügung stellen, gerne auch per PN und Download-Link, damit ich mal im genauen Bilde bin.

Vielleicht fällt mir ja so noch was dazu ein.

mfg Maik


----------



## Maik (13. März 2010)

Marschal hat gesagt.:


> Liese sich den ein dynamischer linker sowie rechter Block nicht mit Hilfe eines Java-Skriptes bestimmen?


Theoretisch sicherlich, aber wehe, ein Seitenbesucher kommt mit einem "beschnittenen" Browser zu Besuch, in dem aus Sicherheitsgründen oder wegen administrativer Direktiven der Javascript-Hahn abgedreht wurde 

JS sollte als Sahnehäubchen zum Einsatz kommen, um zusätzliche Features bereitzustellen, ohne die Funktionalität der Seite zu beeinträchtigen, wenn es im User-Agent deaktiviert ist.

mfg Maik


----------



## Marschal (13. März 2010)

stimmt da hab ich als für gewöhnlich "unbeschnittener" User nicht dran gedacht


----------



## hemorieder (13. März 2010)

du hast post


----------



## Maik (13. März 2010)

... die ich schon vor einer Stunde direkt nach dem Empfang gelesen hab ;-)

Sollte mir was einfallen, werde ich hier vernehmbar mit den Fingern schnippen 

mfg Maik


----------



## hemorieder (13. März 2010)

ok super vielen dank !


----------



## hela (13. März 2010)

Hallo,
ich muss zugeben, dass ich bei den ständig wechselnden Bedingungen nicht alles verstanden habe, aber ich habe ähnliches bisher so realisiert:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Test-Layout</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      height: 100%;
      overflow: hidden;
    }
    #links {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      background-color: #cdf;
    }
    #rechts {
      position: absolute;
      top: 0;
      right: 0;
      width: 50%;
      height: 100%;
      background-color: #cec;
    }
    #wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
    }
    #mitte {
      position: relative;
      width: 700px;
      height: auto !important;
      min-height: 100%;
      height: 100%;
      margin: 0 auto;
      background-color: #dbb;
    }
  </style>
</head>
<body>

  <div id="links"></div>
  <div id="rechts"></div>
  <div id="wrapper">
    <div id="mitte">
      <p>Lorem ipsum usw. usf.</p>
    </div>
  </div>

</body>
</html>
```
Der WRAPPER ist der Scroll-Block und wird einfach über die beiden "Halb"-Blöcke gelegt.


----------



## Maik (13. März 2010)

Was sich dann  mit meinem Vorschlag deckt, der mir aber wegen der (semi)transparenten Fläche, unter der die Blöcke *#links* und *#rechts* zum Vorschein kommen, nicht  begeistert aus den Händen gerissen wurde 

Aber steter Tropfen höhlt den Stein ;-)



Maik hat gesagt.:


> Zeit für eine Ausbaustufe
> 
> Hier hab ich mal den Anwendungsfall umgesetzt, dass die beiden seitlichen Hintergründe den Viewport in seiner vollständigen Höhe ausfüllen, aber darin auch fixiert sein sollen, wenn ein größerer Inhaltsumfang im Fenster gescrollt wird.
> 
> ...



mfg Maik


----------



## hemorieder (13. März 2010)

also wohl keine variante die ich verwenden kann... schade


----------

