3 Spalten - Mittlere mit fester Breite und zentriert

H

hemorieder

Mitglied
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 ;)

css.jpg



Der css code sieht so aus bis jetzt:

HTML: 
<!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
 
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.
 
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.

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
 
@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
 
Zuletzt bearbeitet:
hemorieder hat gesagt.:
@Maik

sie übernehmen eigentlich nur gestalterische aufgaben, beide kriegen eine hintergrundgrafik zugewiesen
Zum Vergrößern anklicken....
Dann ist doch alles bestens :)

HTML: 
<div id="links"></div>
<div id="rechts"></div>
<div id="mitte"></div>
CSS: 
* {
              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
 
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 ?
 
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.

HTML: 
<!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
 
Ich verstehe nicht ganz was du mir damit erklären möchtest ? ;)

Und bezüglich meines Problems mit den Hintergründen ne Idee ?
 
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;

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

Was kann ich dagegen machen ?
Zum Vergrößern anklicken....
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.
CSS: 
background-repeat:repeat-x repeat-y;

Da heißt es dann einfach:
CSS: 
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:
CSS: 
background-repeat:repeat-x;
oder
CSS: 
background-repeat:repeat-y;


mfg Maik
 
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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück