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

hemorieder · 13.03.10 19:11

du hast post

Maik · 13.03.10 19:26

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

ok super vielen dank !

***hela*** · 13.03.10 21:05

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

HTML-Code:

<!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.03.10 21:10

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

Zitat von Maik

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 22:41

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

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