3-Spalten-Layout mit überbreiter Tabelle

ForestGump · #1 (**permalink**) 29.04.2010, 15:05

Hallo zusammen,

ich habe ein komplexes 3-Spalten-Layout mit Header und Footer auf Basis von CSS. Nun sollen im Content-Bereich sehr breite Bilder dargestellt werden.

Gewünscht wird, dass die rechte Spalte ganz rechts neben dem Content steht.
Bei mir wird die rechte Spalte jedoch nur an den rechten Bildschirmrand geschoben. Der body-Bereich und damit das übergeordnete Element ist jedoch breiter.

Im folgenden Beispiel "Test-Ueberbreite-Tabelle" , das in dieser Form leider nur im Firefox funktioniert, habe ich versucht das Problem auf das wesentliche zu reduzieren. Anstatt eines breiten Bildes habe ich eine breite Tabelle eingefügt. Beachtet bitte den unteren Scroll-Balken.

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Test-Uebergroße-Tabelle</title>
  <style type="text/css">
* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  background-color: red;
  height: 100%; 
}

#left {
  float:left;
  background-color: #ccc;
  height: 100%;
  width:200px;
}

#right {
  float:right;
  background-color: #ccc;
  height: 100%;
  width:200px;
}

#content {
  background-color: #ddddff;
/*  height: 100%;*/

  margin: 0 205px 0 205px;
/*  overflow: auto;*/
}

.clearfix:after {
	content: ".";
	display: block;
	height: .1px;
	clear: both;
	visibility: hidden;
	font-size: 0;
	overflow: hidden;
}

.clearfix {
	zoom: 1;
}
  
#centerTable {
  border: 3px solid blue;
  background-color: green;
  color: white;
  height: 300px;
  width: 2000px;
}  
  </style>

</head>
<body>

  <div id="left"> 
    <h2>Linke Seite</h2>
  </div> <!--left-->

  <div id="right"> 
   <h2>Rechte Seite</h2>
  </div> <!--right-->


  <div id="content" class="clearfix">
    <h2>Das hier ist der Content-Bereich:</h2>
    <p>Im Content-Bereich liegt eine sehr breite Tabelle, oder ein sehr breites Bild.</p>
    <table id="centerTable">
      <tr>
        <td>
          <h1>Übergroße Tabelle oder Grafik</h1>
        </td>
      </tr>
      <tr>
        <td>
          <h2>
            Diese grüne Tabelle sollte komplett zwischen der grauen linken und grauen rechten Seite liegen. 
            Dummerweise wird die rechte Seite am rechten sichtbaren Bildschirmrand ausgerichtet, 
            und schiebt sich nicht ans Ende von 'body'.
          </h2>
        </td>
      </tr>
      <tr>
        <td>
          <h2>
            Wenn man im #content {overflow: auto;} hinzufügt, bleibt der Content-Bereich zwar zwischen den grauen Flächen, 
            und man erhält sogar einen Scrollbalken, doch lässt sich damit nur der Content-Bereich scrollen. 
            Ich würde mir wünschen, dass sich die komplette Site bewegen lässt, und der Bereich 'Rechte Seite' 
            hinter der Tabelle angezeigt wird.
            
          </h2>
        </td>
      </tr>
    </table>
  </div> <!--center-->
  
</body>
</html>

Wäre echt Klasse wenn sich hier eine Lösung für das Problem finden lässt.
Bin mir mittlerweile auch nicht mehr sicher, ob das Layout mit floats so etwas überhaupt hergibt.

Vielen Dank schon einmal im voraus
ForestGump

fricca · #2 (**permalink**) 29.04.2010, 15:45

Sowas ist eher ein Fall für die Darstellungseigenschaften von Tabellenelementen.
IE <= 7 zeigt ein solches Verhalten im Quirksmodus, wenn man Inline-block-Darstellung für die Spalten wählt.

Ich bin mir aber sehr unsicher, ob sowas wirklich wünschenswert ist. Zeig doch mal ein richtiges Beispiel für das, was es werden soll, also mit richtigen Inhalten und andeutungsweise richtigem Layout. Bitte als Link.

Warum hast du diesen Thread im HTML-Bereich eröffnet? Willst du nicht eher über CSS reden?

ForestGump · #3 (**permalink**) 29.04.2010, 16:15

Ooops,

bin neu hier, und hab wohl den falschen Bereich erwischt.

@Moderator: Bitte denn Thread in den CSS-Bereich verschieben...

Da es sich um eine interne Firmenseite handelt, kann ich leider keinen Link und auch keine komplette Seite schicken.
Sinn macht es. Das müsst ihr mir einfach mal glauben...

fricca · #4 (**permalink**) 29.04.2010, 16:22

Zitat:

Zitat von ForestGump

@Moderator: Bitte denn Thread in den CSS-Bereich verschieben...

Es gibt hier keine Moderatoren, nur einen Administrator. Schreib ihm einfach eine PN.

Zitat:

Da es sich um eine interne Firmenseite handelt, kann ich leider keinen Link und auch keine komplette Seite schicken.
Sinn macht es. Das müsst ihr mir einfach mal glauben...

Ich kann so nicht mehr dazu sagen; es ist einfach zu wenig Information. Bei solchen Dingen muss man wissen, wie alles zusammenspielen soll. Da reicht so ein Dummy nicht (mir zumindest nicht).
Kannst meinen Vorschlag ja mal testen und das Ergebnis dann hier vorstellen.

ForestGump · #5 (**permalink**) 29.04.2010, 17:43

Da die Originalseite sehr umfangreich ist, bin ich froh das Problem in einer überschaubaren Form darstellt zu können.

Hier habe ich einmal einen Link auf den obigen Quelltext: Test-Uebergroesse-Tabelle. Ich denke das sollte die Betrachtung des Problems vereinfachen.

Hinweis: Das Beispiel funktioniert in dieser Form nicht im IE.

ForestGump · #6 (**permalink**) 03.05.2010, 11:20

Hat hier keiner eine Idee wie oder ob das mit CSS-Mitteln machbar ist?

Bräuchte wirklich eine Lösung...

EvT · #7 (**permalink**) 03.05.2010, 14:12

Offen gesagt, ich verstehe die Problembeschreibung nicht. Du hast 3 Spalten: linke Spalte mit 200px, mittlere Spalte 2000px und rechte Spalte ebenfalls mit 200px. Was soll nun mit der rechten Spalte auf Bildschirmen mit einer horizontalen Auflösung kleiner als 200+2000+200px passieren? Soll in diesem Fall diese rechte Spalte unter die beiden anderen flutschen? Oder sollen alle drei Spalten nebeneinander stehen bleiben und ein horizontaler Scrollbalken erscheinen? Oder... ?

ForestGump · #8 (**permalink**) 03.05.2010, 14:20

Zitat:

Oder sollen alle drei Spalten nebeneinander stehen bleiben und ein horizontaler Scrollbalken erscheinen?

Genau das!
Der Horizontale Scrollbalken soll dabei aber unter allen drei Spalten stehen. also nicht nur den Inhalt der mittleren Spalte verschieben, wie ich es mit Overflow:auto erreichen würde.

EvT · #9 (**permalink**) 03.05.2010, 15:12

Schau dir doch mal dieses Layout an, denn ich vermute, dass du so etwas suchst. Der Code dieses Beispiels ist direkt auf der Seite gut dokumentiert und kommentiert und lässt sich daher auch recht einfach anpassen.

The Imposter :: Sidewinder

ForestGump · #10 (**permalink**) 04.05.2010, 11:00

@Evt: Danke für den Link, ist aber leider nicht das was ich benötige.
Mit overflow:auto oder overflow:scroll kann ich leider nur den Content-Bereich scrollen.

Zum besseren Verständniss habe ich eine Seite mit Bild erstellt,
die verdeutlichen soll wie es aussehen sollte: So ist's richtig

Danke schon einmal für die Hilfe.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
2 Spalten Layout INKL. 1 Spalten Layout	miedsegadse	CSS	20	14.04.2011 01:02
Layout: 2 Spalten gleich langer Höhe	Boof	CSS	1	05.03.2010 11:50
3 Spalten fixed width css layout	sharepointkb	CSS	9	28.02.2010 21:00
3 Spalten Layout, mal anders	Sushimeister	CSS	2	05.03.2007 12:15
Layout: Tabelle -> CSS \| ohne Schönheitsfehler?	Knickedi	CSS	20	05.08.2006 03:18