nicht angemeldet
CSS-bsierte Layouts
Gunnar BittersmannHallo,
in Selfhtml habe ich Beispiele gefunden für mehrspaltige Layouts, u.a. mit einer fixen Spalte und einer Spalte, die man scrollen kann.
Ich habe nach dem Muster eine Seite realisiert, was wunderbar funktionierte.
Jetzt habe ich aber in der fixen linken Spalte (Inhaltsverzeichnis) weitere Zeilen hinzugefügt - mit dem Erfolg, dass diese Zeilen jetzt nicht mehr sichtbar sind.
Hat jemand eine Idee oder noch besser ein Muster, wie ich die linke Spalte unabhängig von der rechten ebenfalls scrollen kann?
Es dankt Euch
Werner
-
Hallo,
Hi.
Poste mal bitte deinen Quellcode ;) bzw. deinen Link.
mfg
Phil
-
Hallo,
Poste mal bitte deinen Quellcode ;) bzw. deinen Link.
Quellcode zu umfangreich, werde versuchen, abzumagern, ohne dass der Effekt verschwindet. Melde mich wieder.
Gruß
Werner -
Poste mal bitte deinen Quellcode ;) bzw. deinen Link.
Voilà:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Titel</title> <style type="text/css"> #fixiert { position: absolute; top: 1em; left: 1em; width: 18em; /* overflow:scroll; */ } html>body #fixiert { position: fixed; /* overflow:scroll; */ } #Inhalt { margin-left: 20.3em; } </style> </head> <body> <div id="Scrollbereich"> <div id="Inhalt"> <h1 align="center">Seite 1</h1> <p align="center"> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> aaaaaaaaaaaaaaaaaaaaaa<br><br> </p> <div> </div> <div id="fixiert"> <body> <h2>Auswahl:</h2> <h3> <a href="aaaaaa.shtml">Seite 01</a><br><br> <a href="aaaaaa.shtml">Seite 02</a><br><br> <a href="aaaaaa.shtml">Seite 03</a><br><br> <a href="aaaaaa.shtml">Seite 04</a><br><br> <a href="aaaaaa.shtml">Seite 05</a><br><br> <a href="aaaaaa.shtml">Seite 06</a><br><br> <a href="aaaaaa.shtml">Seite 07</a><br><br> <a href="aaaaaa.shtml">Seite 08</a><br><br> <a href="aaaaaa.shtml">Seite 09</a><br><br> <a href="aaaaaa.shtml">Seite 10</a><br><br> <a href="aaaaaa.shtml">Seite 11</a><br><br> <a href="aaaaaa.shtml">Seite 12</a><br><br> <a href="aaaaaa.shtml">Seite 13</a><br><br> <a href="aaaaaa.shtml">Seite 14</a><br><br> <a href="aaaaaa.shtml">Seite 15</a><br><br> <a href="aaaaaa.shtml">Seite 16</a><br><br> <a href="aaaaaa.shtml">Seite 17</a><br><br> <a href="aaaaaa.shtml">Seite 18</a><br><br> <a href="aaaaaa.shtml">Seite 19</a><br><br> </h3> </div> </body> </html>-
hi,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
...
</head>
<body>
<div id="Scrollbereich">
</div>
<div id="fixiert">
<body>
...
</body>
</html>Mach dir bitte erst mal klar, dass zwei mal Body in einem Dokument absoluter Nonsense ist.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Mach dir bitte erst mal klar, dass zwei mal Body in einem Dokument absoluter Nonsense ist.
Mach Dir bitte erst mal klar, dass dieser 'Nonsens' nicht die Ursache für den geschilderten Effekt ist und dass dieser Nonsens vielleicht im Original nicht vorhanden ist, sondern durch die 'Verkleinerung' hereingerutscht ist.
Wenn Du nichts konstruktives beizutragen hast, ausser der Werbung für Deine Homepage, dann lass es lieber!-
hi,
Mach Dir bitte erst mal klar, dass dieser 'Nonsens' nicht die Ursache für den geschilderten Effekt ist
Mach du dir bitte klar, dass es vollkommen sinnfrei ist, sich auf die Suche nach der Ursache von Darstellungsfehlern zu begeben, solange noch kein fehlerfreier Code vorliegt.
und dass dieser Nonsens vielleicht im Original nicht vorhanden ist, sondern durch die 'Verkleinerung' hereingerutscht ist.
Dann gehe bitte mit mehr Sorgfalt vor, wenn du Beispielcode postest.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Ich erwarte von einem Ratgeber, dass er mir bei meinem Problem hilft und nicht Flüchtigkeitsfehler, die überhaupt nichts an dem Problem verändern, anmotzt.
Ich kenne dieses Benehme zu gut aus dem Berufsleben. Nichts zur Sache beitragen können aber dann, um sich wichtig zu machen, am Stil einer Ausarbeitung herumkritisieren.
Also los! Wo habe ich ein Satzzeichen falsch gesetzt?-
Hello out there!
Ich erwarte von einem Ratgeber, […]
Bloß gut, dass du nicht „ich fordere“ geschrieben hast.
[…] dass er mir bei meinem Problem hilft und nicht Flüchtigkeitsfehler, die überhaupt nichts an dem Problem verändern, anmotzt. […] Nichts zur Sache beitragen können aber dann, um sich wichtig zu machen, am Stil einer Ausarbeitung herumkritisieren.
Mich kotzen Leute wie du an, die mal eben hier im Forum auftauchen und Stammposter, die immer sinnvolle Antworten geben, anmotzen.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Mich kotzen Leute wie du an, die mal eben hier im Forum auftauchen und Stammposter, die immer sinnvolle Antworten geben, anmotzen.
Mich kotzen Leute wie du an, die sich mit noch blöderen Antworten als Wahsaga einmischen.
Was war sinvoll an der Aussage von Wahsaga?
Und Dein Englisch war auch schon besser.-
Hello out there!
Mich kotzen Leute wie du an, die sich mit noch blöderen Antworten als Wahsaga einmischen.
Was war sinvoll an der Aussage von Wahsaga?Fehlt es dir an Wissen, Intelligenz oder geistiger Reife, um die Qualität von Antworten richtig beurteilen zu können?
Und was heißt „einmischen“? Das Gespräch zwischen dir und wahsaga schien mir beendet; wahsaga verspürte offenbar keine Lust, sich weiter mit dir abzugeben – auch verständlichen Gründen.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
A...
und Ende! -
Lieber Gunnar,
ich habs an früherer Stelle schon einmal gesagt - und Deine Kommentare hier zu Werner bestätigen es:
Möglichst oft einen Beitrag schreiben, egal was, Hauptsache Deine Seite mit Werbung für Deine Musik wird bekannter.
Dabei möchte ich nicht verkennen, dass ab und zu auch mal ein hilfreicher Beitrag für mich dabei war.-
Hello out there!
ich habs an früherer Stelle schon einmal gesagt
Das muss ich dir wohl so glauben; nachvollziehen lässt es sich nicht, weil du nicht den Mumm hast, deine Meinung unter deinem sonst verwendeten Namen zu sagen.
Möglichst oft einen Beitrag schreiben, egal was,
Nein, ich halte es durchaus mit Dieter Nuhr: Wo ich keine Ahnung von habe, halte ich meine Fresse.
Hauptsache Deine Seite mit Werbung für Deine Musik wird bekannter.
Na so’n Quatsch. (Im Archiv taucht der Link nicht auf; die Forumshauptseite wird von SEs nicht gespidert. Was also ist dein Punkt?)
Dabei möchte ich nicht verkennen, dass ab und zu auch mal ein hilfreicher Beitrag für mich dabei war.
Gerngeschehen.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
-
-
-
-
-
-
-
-
-
-
-
-
Hallo,
Du müßtest dem Bereich eine passende overflow Eigenschaft zuweisen.
Das haut leider nicht hin, jetzt verschiebt sich die ganze linke Seite nach unten.
Gruß
Werner-
Hallo,
Das haut leider nicht hin, jetzt verschiebt sich die ganze linke Seite nach unten.
Dann ist "dem Bereich" wohl nicht die gesamte linke Seite. In diesem Fall müßtest Du "dem Bereich" eben genauer definieren, ggf. die "gesamte linke Seite" noch einmal unterteilen. Wenn es nur darum geht eine Navigationsliste links festzunageln, dann definiere diesen Bereich eben in der gewünschten Größe.
Dazu muß man vllt. gar nicht die "gesamte linke Seite" aus dem Textfluß nehmen.ul#navi {
position:fixed;
height:xx em;
width:yy em;
overflow:auto;
top: xxZZ;
left: yyZZ;
}
Entsprechenden workaround für den IE natürlich einarbeiten. Dem Rest der Seite einen padding-left geben, damit der Text nicht unter die navi flutscht und fertig.netten Tag
^da Powl
-
-
-
Hallo,
Jetzt habe ich aber in der fixen linken Spalte (Inhaltsverzeichnis) weitere Zeilen hinzugefügt - mit dem Erfolg, dass diese Zeilen jetzt nicht mehr sichtbar sind.
Je nach Browserfenstergröße, ja.
Hat jemand eine Idee oder noch besser ein Muster, wie ich die linke Spalte unabhängig von der rechten ebenfalls scrollen kann?
Ja, das geht:
http://danielrichter.da.funpic.de/Fixed.htmlmfg. Daniel
-
Hallo Daniel,
Ja, das geht:
http://danielrichter.da.funpic.de/Fixed.htmlDanke für die Hilfe. Die Seite ist sehr instruktiv.
Was mir jedoch aufgefallen ist:
In meinem neuen Opera 9.02 kann im Beispiel 3 die linke Seite nicht gescrollt werden.
Gruß
Werner-
Hallo,
Ja, das geht:
http://danielrichter.da.funpic.de/Fixed.htmlDanke für die Hilfe. Die Seite ist sehr instruktiv.
Was mir jedoch aufgefallen ist:
In meinem neuen Opera 9.02 kann im Beispiel 3 die linke Seite nicht gescrollt werden.Tatsächlich. Irgendwie war mir so, als ob es funktionierte…
Naja, werde mir das nochmal anschauen. Danke für den Bugreport!mfg. Daniel
-
Hallo,
In meinem neuen Opera 9.02 kann im Beispiel 3 die linke Seite nicht gescrollt werden.
Tatsächlich. Irgendwie war mir so, als ob es funktionierte…
Naja, werde mir das nochmal anschauen. Danke für den Bugreport!Das Problem ist jetzt behoben. Irgendwie kam Opera 9 an dieser Stelle nicht mit max-height klar. Da height in diesem Fall aber das Gleiche bewirkt, habe ich das jetzt durch height ersetzt.
mfg. Daniel
-
-
-