zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3-Spalten-Layout mit überbreiter Tabelle

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.04.2010, 15:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.04.2010
Beiträge: 10
ForestGump befindet sich auf einem aufstrebenden Ast
Standard 3-Spalten-Layout mit überbreiter Tabelle

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

Geändert von ForestGump (30.04.2010 um 09:14 Uhr) Grund: Link auf Beispielseite eingefügt
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.04.2010, 15:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.04.2010, 16:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.04.2010
Beiträge: 10
ForestGump befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #4 (permalink)  
Alt 29.04.2010, 16:22
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von ForestGump Beitrag anzeigen
@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.
Mit Zitat antworten
  #5 (permalink)  
Alt 29.04.2010, 17:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.04.2010
Beiträge: 10
ForestGump befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 03.05.2010, 11:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.04.2010
Beiträge: 10
ForestGump befindet sich auf einem aufstrebenden Ast
Standard

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

Bräuchte wirklich eine Lösung...
Mit Zitat antworten
  #7 (permalink)  
Alt 03.05.2010, 14:12
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

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... ?
Mit Zitat antworten
  #8 (permalink)  
Alt 03.05.2010, 14:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.04.2010
Beiträge: 10
ForestGump befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 03.05.2010, 15:12
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 04.05.2010, 11:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.04.2010
Beiträge: 10
ForestGump befindet sich auf einem aufstrebenden Ast
Standard

@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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:21 Uhr.