3 Spalten - Mittlere mit fester Breite und zentriert @ tutorials.de: Tutorials, Forum & Hilfe

hemorieder · 13.03.10 16:16

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

http://polifka-bonn.de/css.jpg

Der css code sieht so aus bis jetzt:

HTML-Code:

<!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.03.10 16:20

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.03.10 16:30

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

hemorieder · 13.03.10 16:32

@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.03.10 16:43

Zitat von hemorieder

@Maik

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

Dann ist doch alles bestens

HTML-Code:

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

Code 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

hemorieder · 13.03.10 17:11

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.03.10 17:15

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-Code:

<!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.03.10 17:18

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.03.10 17:34

Zitat von hemorieder

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 ?

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.

Code css:

1	background-repeat:repeat-x repeat-y;

Da heißt es dann einfach:

Code css:

1	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:

Code css:

1	background-repeat:repeat-x;

oder

Code css:

1	background-repeat:repeat-y;

mfg Maik

hemorieder · 13.03.10 17:41

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.03.10 17:58

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.03.10 18:02

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.03.10 18:04

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.03.10 18:08

Zitat von Marschal

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.03.10 18:36

stimmt

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

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Dreispaltiges Layout mit relativer Breite für mittlere Spalte

Frameset mit fester Größe zentriert auf Seite setzen?

div mit fester und variabler Breite

Webseite mit 3 Spalten, mittlere zum scrollen

Tabelle mit 3 Spalten, mittlere soll immer auf 100%

E-Mail:

Abonnieren Abbestellen