3 Spalten - Mittlere mit fester Breite und zentriert

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
 
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.
 
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
 
Marschal hat gesagt.:
Liese sich den ein dynamischer linker sowie rechter Block nicht mit Hilfe eines Java-Skriptes bestimmen?
Zum Vergrößern anklicken....
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
 
... 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
 
Hallo,
ich muss zugeben, dass ich bei den ständig wechselnden Bedingungen nicht alles verstanden habe, aber ich habe ähnliches bisher so realisiert:
HTML: 
<!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.
 
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.

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
Zum Vergrößern anklicken....

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück