nicht angemeldet
Darstellung mit <div> transparent
0 0 
suit
Darstellung mit <div> transparent
Hallo an alle die mir helfen können,
ich habe zwei kleine Problemchens. Zunächst ersteinmal das erste:
Ich habe zwei Tabellen, die ich untereinander darstellen möchte, wobei die obere Tabelle fixiert sein soll, was ich mit <div> zu realisieren versuchte.
Die zweite Tabelle ist etwas höher, sodass ein Scrollbalken aktiviert wird.
Wenn man nun aber den Balken betätigt, um das Ende der 2. Tabelle zu sehen, scrollt die 2. Tabelle hinter die erste, was ich eigentlich nicht so gerne möchte. (siehe Quelltext)
---------------------------------------------------------------------------
<html>
<head>
<title>Testumgebung</title>
<style type="text/css">
#fixiert {
position: absolute;
top: 10px; left: 10px;
}
html>body #fixiert {
position: fixed;
}
#Inhalt {
position: absolute;
top: 50px; left: 10px;
}
</style>
</head>
<body>
<div id="fixiert">
<table border="1" style="table-layout:fixed">
<tr>
<td width="50"><center>Inhalt 1</center></td>
<td width="524"><center>Inhalt 2</center></td>
<td width="50"><center>Inhalt 3</center></td>
</tr>
</table>
</div>
<div id="Inhalt">
<table border="1" style="table-layout:fixed">
<tr>
<td width="50" height="900"><center>Inhalt 1</center></td>
<td width="100" height="900"><center>Inhalt 2</center></td>
<td width="100" height="900"><center>Inhalt 3</center></td>
<td width="100" height="900"><center>Inhalt 4</center></td>
<td width="100" height="900"><center>Inhalt 5</center></td>
<td width="100" height="900"><center>Inhalt 6</center></td>
<td width="50" height="900"><center>Inhalt 7</center></td>
</tr>
</table>
</div>
</body>
</html>
---------------------------------------------------------------------------
Am besten wäre es, wenn es wie mit einem Frame zwar schon hinter die 1. Tabelle scrollt, allerdings nicht sichtbar.
Wie kann ich das erreichen?
Vielen Dank für hilfreiche Tipps
-
Hallo Bastian,
Vielen Dank für hilfreiche Tipps
Ein paar Fragen:
1. Was hat das mit PHP zu tun?
2. Benutzt du die Tabelle zur Darstellung tabellarischer Daten?
3. Weißt du etwas mit den Begriff "Quirksmodus" in Verbindung mit Browsern anzufangen?Grüße
thebach--
selfcode: ie:% fl:( br:> va:) ls:& rl:( n4:~ ss:| de:> js:( ch:? mo:} zu:)
"Egal, ob ein Sandkorn oder ein Stein. Im Wasser sinken sie beide."-
Ein paar Fragen:
- Was hat das mit PHP zu tun?
Denn denk Dir da halt HTML hin...
- Benutzt du die Tabelle zur Darstellung tabellarischer Daten?
Sonst würde ich keine Tabelle nutzen...
- Weißt du etwas mit den Begriff "Quirksmodus" in Verbindung mit Browsern anzufangen?
Nein, kenne ich nicht / sagt mir nix...
-
Ein paar Fragen:
- Was hat das mit PHP zu tun?
Denn denk Dir da halt HTML hin...
Eher CSS
- Benutzt du die Tabelle zur Darstellung tabellarischer Daten?
Sonst würde ich keine Tabelle nutzen...
Ich frag lieber nach weil mit Tabellen allzuoft Schindluder getrieben wird.
- Weißt du etwas mit den Begriff "Quirksmodus" in Verbindung mit Browsern anzufangen?
Nein, kenne ich nicht / sagt mir nix...
Dann informiere dich. (Man sollte den standardkonformen Modus bevorzugen)
Zu deinen eigentlichen Problem: z-index sollte helfen den fixirten Teil vor die andere Tabelle zu bekommen.
Grüße
thebach--
selfcode: ie:% fl:( br:> va:) ls:& rl:( n4:~ ss:| de:> js:( ch:? mo:} zu:)
"Egal, ob ein Sandkorn oder ein Stein. Im Wasser sinken sie beide."-
mhh.. da habe ich mich wohl zu undeutlich ausgedrückt - sorry.
Es würde mir leider nichts bringen, wenn ich die 1. Tabelle ind en Vordergrund nehme, weil Sie ja dann immer noch übereinander fahren. Zwar bleibt die 1. Tabelle dabei im vordergrund, allerdings sieht es immer noch blöde aus, wenn die 2. Tabelle etwas später über der 1. Tabelle wieder auftaucht. Oder unglücklicherweise einen Pixel breiter ist als Tabelle 1.
Wie bereits erwähnt, wäre es schön, wenn sie komplett verschwinden würde, sobald sie höher als 50px vom Top kommt.
Gruß
-
Wie bereits erwähnt, wäre es schön, wenn sie komplett verschwinden würde, sobald sie höher als 50px vom Top kommt.
Gib den <div id="fixiert"> ein padding und eine Hintergrundfarbe. Dann positionierst du das div mit top: 0; und left: 0;. Der z-index muss natürlich höher sein, sonst ist die andere Tabelle ja immer drüber und verschwindet auch nicht.
thebach
--
selfcode: ie:% fl:( br:> va:) ls:& rl:( n4:~ ss:| de:> js:( ch:? mo:} zu:)
"Egal, ob ein Sandkorn oder ein Stein. Im Wasser sinken sie beide."-
Gib den <div id="fixiert"> ein padding und eine Hintergrundfarbe. Dann positionierst du das div mit top: 0; und left: 0;. Der z-index muss natürlich höher sein, sonst ist die andere Tabelle ja immer drüber und verschwindet auch nicht.
Ja, die Idee hatte ich auch schon, dachte nur, dass es da noch eine andere Lösung gibt, weil das ganze mit Position 0 ganz schön gedrückt ausschaut.
Naja, geht dann wohl nicht anders...
-
Ja, die Idee hatte ich auch schon, dachte nur, dass es da noch eine andere Lösung gibt, weil das ganze mit Position 0 ganz schön gedrückt ausschaut.
Weiß jetzt nicht, was du mit "gedrückt ausschaut" meinst. Ich kann irgendwie keine Unterschiede zwischen der von dir geposteten und der von mir vorgeschlagenen Darstellung erkennen (außer natürlich, dass die Tabelle beim scrollen verschwindet). Ich hoffe ich hab jetzt nix übersehen :-)
Naja, geht dann wohl nicht anders...
Eventuell ginge was mit JavaScript aber (a) würde ich dir davon abraten und (b) kenne ich mich damit nicht hinreichend aus.
Hilfreich wäre jetzt natürlich zu wissen was konkret dir an dieser Lösung missfällt und wie du es den gerne dargestellt hättest. Vielleicht findet dich dann doch eine andere Lösung.
thebach
--
selfcode: ie:% fl:( br:> va:) ls:& rl:( n4:~ ss:| de:> js:( ch:? mo:} zu:)
"Egal, ob ein Sandkorn oder ein Stein. Im Wasser sinken sie beide."-
Naja, es ist halt der Unterschied, ob die erste Tabelle nun:
"top: 10px" oder "top: 0px".Mit der "0" hängt die tabelle halt etwas höher, was das optische auf der Gesamtdarstellung... naja nicht ganz so hübsch macht.
Aber damit kann ich leben.
Der Tipp mit dem z-index war aber auch ganz nett - den kannte ich noch nicht.
Also, Danke und Gruß
Bastian
-
Naja, es ist halt der Unterschied, ob die erste Tabelle nun:
"top: 10px" oder "top: 0px".Mit der "0" hängt die tabelle halt etwas höher, was das optische auf der Gesamtdarstellung... naja nicht ganz so hübsch macht.
Ich hatte dir ja den Hinweis mit den padding gegeben, mit "padding-top: 10px;" sollte die Tabelle weiter runter rutschen ohne das man die andere Tabelle darunter sieht.
thebach
--
selfcode: ie:% fl:( br:> va:) ls:& rl:( n4:~ ss:| de:> js:( ch:? mo:} zu:)
"Egal, ob ein Sandkorn oder ein Stein. Im Wasser sinken sie beide."-
Ich hatte dir ja den Hinweis mit den padding gegeben, mit "padding-top: 10px;" sollte die Tabelle weiter runter rutschen ohne das man die andere Tabelle darunter sieht.
Ich glaube da raffe ich jetzt was nicht.
"top:10px" bewirkt:
etwas Abstand von oben, 1. Tabelle, etwas Freiraum, 2. Tabelle"padding-top:10px" bewirkt:
etwas mehr Abstand von oben, 1. Tabelle, KEIN Freiraum, 2. TablleBei beiden Beispielen taucht beim scrollen die die 2.Tabelle wieder über der ersten auf.
---------------------------------
<style type="text/css">
#fixiert {
position: absolute;
padding-top: 10px; left: 10px; z-index:1;
<--alternative top:10px; left: 10px; z-index:1;-->
}
html>body #fixiert {
position: fixed;
}
#Inhalt {
position: absolute;
top: 50px; left: 10px; z-index:0;
}
</style>
---------------------------------Ist das alles so, wie Du meinst?
-
Ist das alles so, wie Du meinst?
Du brauchst noch eine Hintergrundfarbe (Weiß). Und bedenke, dass html und body auch ein padding und margin besitzen können.
thebach
--
selfcode: ie:% fl:( br:> va:) ls:& rl:( n4:~ ss:| de:> js:( ch:? mo:} zu:)
"Egal, ob ein Sandkorn oder ein Stein. Im Wasser sinken sie beide."
-
-
Da habe ich gleich noch eine Frage, bei der Du mir vielleicht helfen kannst.
ich habe
http://de.selfhtml.org/css/layouts/fixbereiche.htm#definieren=hier
gelesen, dass diese "position:fixed"-GEschichte nur ab Version IE7 funzt.
Bei früheren Versionen wird folgendes Beispiel genannt:<!--[if lt IE 7]><style type="text/css">
@media screen {
html, body {
height: 100%; overflow-y: hidden;
}
#Scrollbereich {
height: 100%; width: 100%; overflow: auto;
}
#Inhalt {
position: static;
}
}
</style><![endif]-->Wenn ich dass jetzt richtig interpretiere, muss ich per if-Anweisung prüfen, um was für eine Explorer-Version es sich handelt, und dann mein aktuellen Script verwenden, oder halt den obigen.
Meine Frage ist jetzt, was schreibe ich genau in die if-Abfrage:
if (Explorer == "IE7") ?? so ja bestimmt nicht...Verstehst was ich meine...?
-
Yerf!
Meine Frage ist jetzt, was schreibe ich genau in die if-Abfrage:
if (Explorer == "IE7") ?? so ja bestimmt nicht...Ähm, die steht doch in dem Beispielcode schon drinn...
<!--[if lt IE 7]>...<![endif]-->
Nennt sich "Conditional Comment" und prüft in dem Fall auf eine IE-Version kleiner 7.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]--> -
Meine Frage ist jetzt, was schreibe ich genau in die if-Abfrage:
if (Explorer == "IE7") ?? so ja bestimmt nicht...HTML kennt keine IF-Anweisungen, weil es keine Daten verarbeitet. Die Konstruktion '<!--[if lt IE 7]>' ist ein Conditional Comment welcher nur vom IE verstanden wird.
Ich merke aber dass mein Vorschlag daher nicht so der optimale ist. suit's Vorschlag könnte besser sein. Allerdings solltest du dich dafür mit der korrekten Auzeichnung von Tabellen befassen.
thebach
--
selfcode: ie:% fl:( br:> va:) ls:& rl:( n4:~ ss:| de:> js:( ch:? mo:} zu:)
"Egal, ob ein Sandkorn oder ein Stein. Im Wasser sinken sie beide." -
Aha... das war dann wohl eher mal eine peinliche Frage...
...aber um gleich mal bei der Peinlichkeit zu bleiben:Ich habe ja bisher den Text:
<style type="text/css">
#fixiert {
position: absolute;
top: 10px; left:10px; z-index:1;
}
html>body #fixiert {
position: fixed;
}
#Inhalt {
position: absolute;
top: 50px; left: 10px; z-index:0;
}
</style>brauche ich jetzt nur den Teil dahinter hängen, damit auch die alten Browser das richtig machen?
<!--[if lt IE 7]><style type="text/css">
@media screen {
html, body {
height: 100%; overflow-y: hidden;
}
#Scrollbereich {
height: 100%; width: 100%; overflow: auto;
}
#Inhalt {
position: static;
}
}
</style><![endif]-->Oder muss nehme ich nur den Teil innerhal des <style> also so:
@media screen {
html, body {
height: 100%; overflow-y: hidden;
}
#Scrollbereich {
height: 100%; width: 100%; overflow: auto;
}
#Inhalt {
position: static;
}
}Oder halt noch anders - Ich kann das leider nicht testen, weil ich keinen alten Browser drauf habe.
-
-
Hallo,
Ich habe zwei Tabellen, die jeweils in einer Div-Box stehen. Die erste ist position:fixiert, weil Sie Überschriften enthält, die auch dann noch zu sehen sein soll, wenn man die 2. Tabelle (große Tabelle) herunterscrollt.
Mein Problem ist es jetzt, dass beide Tabellen auch noch zu breit sind. Die Darstellung geht also nach rechts und auch nach unten raus.
Wenn ich nun den Scrollbalken nach rechts ziehe, bleibt die ober Tabelle fixiert, was sie ni dem Moment ja nicht soll. Nach Links/Rechts darf sie schonscrollen, halt nur nicht nach Oben und unten.
Kann man das irgendwie einstellen - Wie?
folgend ein Beispiel zum besseren Verständnis:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Testumgebung</title>
<style type="text/css">
#fixiert {
position: absolute;
top: 10px; left:10px; z-index:1;
}
html>body #fixiert {
position: fixed;
}
#Inhalt {
position: absolute;
top: 50px; left: 10px; z-index:0;
}
</style>
</head>
<body>
<div id="fixiert">
<table border="1" style="table-layout:fixed" bgcolor="red">
<tr>
<td width="500"><center>Inhalt 1</center></td>
<td width="524"><center>Inhalt 2</center></td>
<td width="500"><center>Inhalt 3</center></td>
</tr>
</table>
</div>
<div id="Inhalt">
<table border="1" style="table-layout:fixed" bgcolor="green">
<tr>
<td width="500" height="900"><center>Inhalt 1</center></td>
<td width="100" height="900"><center>Inhalt 2</center></td>
<td width="100" height="900"><center>Inhalt 3</center></td>
<td width="100" height="900"><center>Inhalt 4</center></td>
<td width="100" height="900"><center>Inhalt 5</center></td>
<td width="100" height="900"><center>Inhalt 6</center></td>
<td width="500" height="900"><center>Inhalt 7</center></td>
</tr>
</table>
</div>
</body>
</html>-
Hallo Bastian,
Wenn ich nun den Scrollbalken nach rechts ziehe, bleibt die ober Tabelle fixiert, was sie ni dem Moment ja nicht soll. Nach Links/Rechts darf sie schonscrollen, halt nur nicht nach Oben und unten.
Kann man das irgendwie einstellen - Wie?
Daran sieht man den größten Nachteil der fixen Positionierung. Bitte entschuldige, dass ich dich nicht schon frühere darauf aufmerksam gemacht habe. Wie schon an anderer Stelle geschrieben, schein suit's Vorschlag geeigneter.
thebach
--
selfcode: ie:% fl:( br:> va:) ls:& rl:( n4:~ ss:| de:> js:( ch:? mo:} zu:)
"Egal, ob ein Sandkorn oder ein Stein. Im Wasser sinken sie beide."-
Hallo,
Kannst Du mir vielleicht nähere Infos zu <tbody> sagen, oder wovon Suit da spricht, ich bekomme leider keine näheren Details aus ihm raus.
Ein Link würde ja reichen...
Danke
-
Hallo,
Kannst Du mir vielleicht nähere Infos zu <tbody> sagen, oder wovon Suit da spricht, ich bekomme leider keine näheren Details aus ihm raus.
Ein Link würde ja reichen...
Hast du dir schon mal das SELHTML Kapitel zu Tabellen angeschaut?
Zusätzlich dürfte die CSS-Eigenschaft overflow interessant sein.
thebach
--
selfcode: ie:% fl:( br:> va:) ls:& rl:( n4:~ ss:| de:> js:( ch:? mo:} zu:)
"Egal, ob ein Sandkorn oder ein Stein. Im Wasser sinken sie beide."
-
-
-
-
-
-
-
-
-
- Was hat das mit PHP zu tun?
-
-
Am besten wäre es, wenn es wie mit einem Frame zwar schon hinter die 1. Tabelle scrollt, allerdings nicht sichtbar.
Am besten wäre es, wenn du den tbody der tabelle scrollbar machst - oder habe ich das jetzt falsch verstanden?
-
Am besten wäre es, wenn du den tbody der tabelle scrollbar machst - oder habe ich das jetzt falsch verstanden?
Magst mir da noch mehr Infos zu geben, oder ein Link, dass ich das ich mal mal reinlesen kann?
Danke
-
HALLO SUIT !
Kannst Du mir da noch nähere Infos geben?
Ein Lnk vielleicht?Danke
-