nicht angemeldet
DIV Layout
Hi,
ich habe eine Tabelle, die ich gerne in zwei zerteilen wuerde, damit ein Bereich fix bleiben kann, waehrend der andere gescrollt werden kann. In der ersten fixen Tabelle steht die Identifikation der jeweiligen Zeile, so hat man immer den Ueberblick wo man gerade steht (das scrollen muss ich in y-Richtung mit Javascript anstossen, dass beide synchron sind).
Dazu habe ich folgendes vereinfachtes Layout.
<div id="container">
<div id="table_container_fix" style="width:20%">
<table></table>
</div>
<div id="resize_handle" style="width:1%; height:100%">
X
</div>
<div id="table_container_data" style="width:70%">
<table></table>
</div>
</div>
Mein Problem ist nun:
1. der resize handle wird nicht angezeigt, wenn er leer ist (daher das pseudo-X)
2. der resize handle wird leider nie auf 100% des containers gestreckt. Ich weiss, die 100% hier funktionieren nur, wenn ich beim container auch eine height angebe, das will ich aber nur ungern, da die Tabellen natuerlich dynamisch aus der DB geladen werden, und daher von mal zu mal verschiedene Hoehen haben koennen.
Die "table_container_*" sind im uebrigen deswegen da, weil ich die Tabellen breiten-beschraeken (daher auch dyn. resize durch User) moechte, und daher sind sie nochmals in divs eingelagert. Ich koennte das evtl. auch mit max-width bei der Tabelle selber machen, aber das kann IE6 leider noch nicht, daher hab ich diesen work-around gemacht.
Kann man diese Probleme loesen?
Vielen Dank!
-
Grüße,
Mein Problem ist nun:
- der resize handle wird nicht angezeigt, wenn er leer ist (daher das pseudo-X)
?
- der resize handle wird leider nie auf 100% des containers gestreckt. Ich weiss, die 100% hier funktionieren nur, wenn ich beim container auch eine height angebe, das will ich aber nur ungern, da die Tabellen natuerlich dynamisch aus der DB geladen werden, und daher von mal zu mal verschiedene Hoehen haben koennen.
welchem zweck genau dient der container?
MFG
bleicher--
__________________________-
Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
Lieber bereuen gesündigt zu haben, als nicht sündigen und es später trotzdem bereuen.
Boccaccio-
Danke!
1. Jaja, mit dem hast natuerlich recht, aber krieg ich's auch irgendwie angezeigt wenn's leer ist? (is nicht so wichtig, eher aus Interesse)
2. Welchen container meinst du nun. Der auesserste container ist da, da die Tabellen ja eine logisch Einheit bilden. Auf den koennte ich ggf. verzichten, macht aber die Positionierung leichter, und is fuer mich logischer.
Die Container um die Tabellen herum erlauben es mir, diese auf eine beliebige Breite zu beschraenken. Ich habe zuerst vergessen anzumerken, dass die auf overflow:scroll sind.
Somit ist der fixe Bereich immer 20% breit, der Rest der Tabelle 70%. I.d.R. passen die ganzen Tabellen da nicht rein, daher das div aussen rum, um den Inhalt der divs (die Tabellen) scrollen zu koennen, mit der Gewissheit, dass sie nie breiter als 100% sind.Wie bereits erwaehnt koennte ich auch direkt bei den Tabellen ein max-width angeben, zumindest wenn ich auf IE6 pfeife. Das kann ich mir aber leider nicht leisten, daher bekommen die Tabellen noch ein Dach uebern Kopf.
Verstanden, oder mach ich hier Unsinn?
-
Grüße,
jein - betrachten wir mal das was du gebaut hast:
(screenshotausschnitt :)
ich habe dein code mit etwas css ergäntzt:
div#table_container_fix {
border: solid red;
}div#resize_handle{
border:solid green;
}div#table_container_data {
border: solid yellow;
}also 1)er werden wie auch zu erwarten war alle divs angezeigt
was genau du amchst ist mir immernoch ein rätsel.
kann man es irgendwo im netz sehen? hast du es hochgeladen?
MFG
bleicher--
__________________________-
Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
Lieber bereuen gesündigt zu haben, als nicht sündigen und es später trotzdem bereuen.
Boccaccio-
Hi,
webspace hab ich leider keinen ...
Is aber echt kein Ding, so kompliziert is es echt nicht :)
Die Tatsache dass dein Beispiel nicht so aussieht wie ich meine liegt daran, dass ich natuerlich noch etwas mehr CSS drin habe, dachte nur dass es leichter zu verstehen sei als es offensichtlich ist.
Also hier mal ein Beispiel:
Es zeigt die Tabelle, die in 2 Teile geteilt ist (links, mitte). Ausserdem ist rechts noch ein Bereich der fuer was anderes gebraucht wird.
Die Idee ist, dass der mittlere Teil IMMER zu sehen ist, auch wenn links in der Tabelle oder recht in dem div (scrollt im Beispiel nicht), da dort die ID und der Name des jeweiligen Tabellen Eintrag zu lesen ist. Somit behaelt man immer den Ueberblick, auch wenn man schon 3km in der ersten Tabelle gescrollt hat.Mein Problem ist nun lediglich, dass die gelben divs (resizer) nicht 100% gross sind, im Bezug auf den Container. Das haette ich gerne, am besten auch ohne das drin (was mir aber eher wurscht is).
Danke fuer die Hilfe!
Hier nun der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style>
tr
{
white-space:nowrap;
overflow:hidden;
height:20px;
}th, td
{
white-space:nowrap;
overflow:hidden;
border:solid 1px black;
}
</style>
</head>
<body>
<div style="border: dashed 1px darkblue;">
<div class="scrollDiv" style="overflow:auto; float:left; width:15%;">
<table style="table-layout:fixed; margin-bottom:10px;">
<thead>
<tr>
<th>
Col1DATA
</th>
<th >
Col2DATA
</th>
<th >
Col3DATA
</th>
</tr>
</thead>
<tfoot>
<tr>
<th>
Col1DATA
</th>
<th>
Col2DATA
</th>
<th>
Col3DATA
</th>
</tr>
</tfoot>
<tbody style="overflow:scroll; max-height:350px;">
<tr>
<td>
Col1DATAData Col1DATAData Col1DATAData Col1DATAData Col1DATAData Col1DATAData
</td>
<td>
Col2DATAData Col2DATAData Col2DATAData Col2DATAData Col2DATAData Col2DATAData
</td>
<td>
Col3DATAData Col3DATAData Col3DATAData Col3DATAData Col3DATAData Col3DATAData
</td>
</tr>
<tr>
<td>
Col1DATAData Col1DATAData Col1DATAData Col1DATAData Col1DATAData Col1DATAData
</td>
<td>
Col2DATAData Col2DATAData Col2DATAData Col2DATAData Col2DATAData Col2DATAData
</td>
<td>
Col3DATAData Col3DATAData Col3DATAData Col3DATAData Col3DATAData Col3DATAData
</td>
</tr>
<tr>
<td>
Col1DATAData Col1DATAData Col1DATAData Col1DATAData Col1DATAData Col1DATAData
</td>
<td>
Col2DATAData Col2DATAData Col2DATAData Col2DATAData Col2DATAData Col2DATAData
</td>
<td>
Col3DATAData Col3DATAData Col3DATAData Col3DATAData Col3DATAData Col3DATAData
</td>
</tr>
</tbody>
</table>
</div>
<div class="resize" style="background:yellow; width:0.5%; float:left;">
</div>
<div class="scrollDiv" style="overflow:scroll; overflow-y:hidden; float:left; width:25%;">
<table style="table-layout:fixed; margin-bottom:10px;">
<thead>
<tr>
<th style="width:250px;">
Col1FIX
</th>
<th style="width:100px;">
Col2FIX
</th>
<th style="width:100px;">
Col3FIX
</th>
</tr>
</thead>
<tfoot>
<tr>
<th style="width:250px;">
Col1FIX
</th>
<th>
Col2FIX
</th>
<th style="width:250px;">
Col3FIX
</th>
</tr>
</tfoot>
<tbody style="overflow:scroll; max-height:350px;">
<tr>
<td>
IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION
</td>
<td>
NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
</td>
<td>
REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ
</td>
</tr>
<tr>
<td>
IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION
</td>
<td>
NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
</td>
<td>
REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ
</td>
</tr>
<tr>
<td>
IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION
</td>
<td>
NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
</td>
<td>
REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ
</td>
</tr>
</tbody>
</table>
</div>
<div class="resize" style="background:yellow; width:0.5%; float:left;">
</div>
<div class="scrollDiv" style="overflow:scroll; overflow-y:hidden; float:left; width:58%;">
ANOTHER DIV
<br>
ANOTHER DIV
<br>
ANOTHER DIV
<br>
ANOTHER DIV
<br>
ANOTHER DIV
<br>
ANOTHER DIV
<br>
ANOTHER DIV
<br>
ANOTHER DIV
<br>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>-
Grüße,
so freundlich das ganze zu durchlesen bin ich auch nicht - lads doch auf ein free-web-space hoch und gut ist.
registrier dich am besten bei einem US-freehoster mit falscher adresse. sicherheitshalber^^
MFG
bleicher--
__________________________-
Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
Lieber bereuen gesündigt zu haben, als nicht sündigen und es später trotzdem bereuen.
Boccaccio-
Hi,
ohne aufdringlich erscheinen zu wollen, aber copy & paste in eine lokale Datei bei dir sollte kein Problem sein, oder?
Das ganze CSS is lokal dabei ...
Durchlesen musst das alles nicht, wenn du's mal siehst, is es hoffentlich einleuchtend.
Das is der Versuch eine Funktionalitaet von EXCEL u.ae. nachzubilden, in denen Tabellenspalten fixiert werden koennen, so dass sie beim scrollen stehen bleiben.
Mit thead und tfoot geht das ja bei den kopf und Fusszeilen mittels einfachem HTML, aber das Spalten fixbleiben, da muss man halt dann sowas betreiben ... oder evtl. gehts auch leichter ...
Schau's dir mal an, wenn es keine zu grossen Umstaende bereitet.
Dank dir!
-
Grüße,
ok habs lockel - wenn du jetzt noch dein genaues problem nennen würdest (das mit haben wir ja schon^^)?
MFG
bleicher--
__________________________-
Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
Lieber bereuen gesündigt zu haben, als nicht sündigen und es später trotzdem bereuen.
Boccaccio-
Hi,
Danke!
Ohne das geht's nicht? Nein, ich habe keine Befuerchtung dass es den Traffic erhoeht, mich wuerds nur interessieren ob das auch irgendwie ohne content aufgespannt werden kann ... mal von width und height abgesehen ...
Das 2. Problem stand auch oben im 1. Post, hier nochmal
"
[...]
2. der resize handle wird leider nie auf 100% des containers gestreckt. Ich weiss, die 100% hier funktionieren nur, wenn ich beim container auch eine height angebe, das will ich aber nur ungern, da die Tabellen natuerlich dynamisch aus der DB geladen werden, und daher von mal zu mal verschiedene Hoehen haben koennen.
[...]
"Nochmals, vielen Dank fuer deine Hilfe!
-
Grüße,
1)der div mit class="resize" wird auch angezeigt wenn nichts drin ist, nicht mal leerzeichen. aber um die zu sehen musst du kei hintergrund sondern rand färben.2)das mit "resize" divs wird komplexer - ich sehe 2 möglichkeiten
1)sehr große high angabe mit overflow:hidden des umrandenden containers.
2)absolute angabe der containerbreiten und die "resize" werden durch 2 pixel auf dem background ersetzt.du hast bisher nciht erwähnt welchen zweck die erfüllen? einfahc nur abgrenzung oder wird da was drin stehen? wen naj hast du gleich merh spielraum - aber du woltles tdie ja leer zu sehen bekommen?
MFG
bleicher--
__________________________-
Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
Lieber bereuen gesündigt zu haben, als nicht sündigen und es später trotzdem bereuen.
Boccaccio-
P.S: oder, falls du die zeilenanzahl kennst, em-höhenangabe
MFG
bleicher--
__________________________-
Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
Lieber bereuen gesündigt zu haben, als nicht sündigen und es später trotzdem bereuen.
Boccaccio-
Hi,
tja, die Zeilenzahl koennte ich ggf. vorher ermitteln, aber das wird alles ueber einen Generator erzeugt, dann muesste ich von meinem Datenobjekt das alles bis zur Anzeige durchschleifen, sowas is nie schoen.
Der Sinn dieses resizers ist, wie der Name schon sagt, die Darstellung ein Handles zum Vergroessern/Verkleinern der Container, sodass der User die Ansichten dynamisch anpassen kann ... funktioniert auch schon ganz fein ... leider aber nur bei Klick auf den kleinen gelben Bereich, was laesstig wird wenn die Tabelle mal 100 * x Zeilen hat. Ein durchgehender Balken waere da besser.
Is aber alles nicht SOOOO wichtig, vorallem bin ich schon beruhigt wenn du sagst es is komplex, hehe ... notfalls lass ich mir einen work-around einfallen, ich dachte halt nur, dass ich was vergessen hab ... bei den zik CSS Angaben und den Cross-Browser-Geschichten verlier ich ab und an einfach den Ueberblick.
Wenn dir oder jemand anderen noch was einfaellt wuerds mich freuen.
Derweil vielen Dank fuer deine ausfuehrliche Hilfe!
-
Grüße,
tja, die Zeilenzahl koennte ich ggf. vorher ermitteln, aber das wird alles ueber einen Generator erzeugt, dann muesste ich von meinem Datenobjekt das alles bis zur Anzeige durchschleifen, sowas is nie schoen.
PHP? das sind dann 2 zusatzzeilen im code.
nebenbei - die handler könntest du einfahc mal mit absolten angaben größer machen - bequemer iwrds dann auf jeden fall.
MFG
bleicher--
__________________________-
Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
Lieber bereuen gesündigt zu haben, als nicht sündigen und es später trotzdem bereuen.
Boccaccio-
Hi,
PHP? das sind dann 2 zusatzzeilen im code.
Ja, PHP, aber keine einfache Homepage, sondern eine Applikation. Es is mir klar, dass ich das machen kann, und es geht mir da nicht um den Mehraufwand, nur moecht ich es vermeiden meiner Anzeige-Klasse irgendwas von der Datenstruktur mitzuteilen, ausser der Daten die sie anzuzeigen hat.
Soll heissen, wenn es ohne Extra-Aufwand ginge dass das handle-div auf volle hoehe gestreckt wird, so dass es einfach immer funktioniert, so waere mir das am liebsten. Den das handle-div hat rein logisch rein garnix mit den Daten zu tun. WARUM soll dass aus PROGRAMMIERSICHT wissen sollen wieviel Zeilen die Tabelle neben ihm hat, bzw. wieviel Zeilen die Datenstruktur hat?
Trotzdem geht es so wohl aber leider nicht, d.h. ich lass mir was anderes einfallen ... entweder noch mehr div-Suppe oder wirklich alles durchschleifen.
Danke sehr!
-
-
-
-
-
-
-
-
-
-
-