| Autor |
 Html: Scrollbare Bilderliste variabler Höhe |
|
viertel
Senior 
Dabei seit: 04.03.2003
Mitteilungen: 21551
Aus: Hessen
 |      Themenstart: 2012-08-06 21:46
|
Hallo,
ich hätte da auch gerne mal ein Problem.
Es soll eine HTML-Seite von dieser Gestalt werden:
Die linke Leiste ist eine Liste mit Vorschaubildchen, die natürlich scrollbar sein soll. Nicht die ganze Seite soll scrollen, denn dann verschwindet ja das große Bild. Die Liste darf natürlich nur maximal bis zum unteren Rand des Browserfensters gehen, sonst pappt der ja eine Scrollleiste an den rechten Rand. Eine fixe Höhe der Scrollliste ist natürlich keine Option, denn sie ist entweder zu kurz (wie im Bild), oder zu lang.
Gibt es eine Möglichkeit, das Ding von der Höhe selbstanpassend (an das Browserfenster) zu gestalten?
Frames sind keine Option, denn oben die Titelleiste kann variable Höhe haben.
Momentan ist es mit einer table realisiert.
Wenn es mit mit entsprechend positionierten div's geht, ist es mir auch recht.
Ich scheitere halt an der variablen Höhe.
Gruß vom ¼
-----------------
[ Nachricht wurde editiert von viertel am 06.08.2012 21:47:37 ]
|
 Profil
 Quote
 Link |
Otis
Senior 
Dabei seit: 06.10.2007
Mitteilungen: 891
Aus: Stralsund
 |  Beitrag No.1, eingetragen 2012-08-06 21:58
|
Hi,
ich glaube du suchst so etwas: www.cssplay.co.uk/layouts/body.html. Hier ist der scrollbare Bereich nur rechts :)
mfg Otis
-----------------
A bus station is where busses stop.
A train station is where trains stop.
On my desk there is a workstation...
Never argue with an idiot. They bring you down to their level and beat you with experience.
[ Nachricht wurde editiert von Otis am 06.08.2012 21:59:00 ]
|
Profil
Quote
Link |
matph
Senior
Dabei seit: 20.11.2006
Mitteilungen: 3799
Aus: A
 | Beitrag No.2, eingetragen 2012-08-06 23:01
|
Hallo,
Die einzige Möglichkeit die mir ad hoc einfällt, funktioniert mit Javascript: Via innerHeight kann die Höhe abgefragt werden, für ältere Versionen des IE benötigt man clientHeight (oder generell in jQuery mittles height).
Alternativ, auf Tabellen verzichten, und das div direkt unter dem darüberliegenden Element body zu deklarieren, und sowohl html als auch body mit height: 100%; zu versehen 
--
mfg
matph
-----------------
Wir müssen wissen, wir werden wissen. Hilbert
Das Buch der Natur ist in der Sprache der Mathematik geschrieben. Galilei
[ Nachricht wurde editiert von matph am 06.08.2012 23:02:36 ]
|
Profil
Quote
Link |
viertel
Senior
Dabei seit: 04.03.2003
Mitteilungen: 21551
Aus: Hessen
| Beitrag No.3, vom Themenstarter, eingetragen 2012-08-07 01:17
|
Danke für die Hinweise.
Aber ich krieg es nicht gebacken 
Wie sieht der Code für diese 3-Felder-Layout aus:
Kopf
• ganze Breite
• variable Höhe
linke Scrollliste
• feste Breite
• Höhe maximal Rest unterhalb Kopf
• ggf. Scrollbalken
rechter Block
• ganze Breite
• dem großen Bild angepaßte Höhe
• ggf. Scrollbalken in beide Richtungen innerhalb des Bereiches
Bei Frames muß ich leider die Kopfhöhe fest angeben.
Mit einer Tabelle krieg ich das Layout hin, bleibt aber das Problem der linken Scrollliste. Und Divs machen, was sie wollen, nicht was ich will 
|
Profil
Quote
Link |
matph
Senior
Dabei seit: 20.11.2006
Mitteilungen: 3799
Aus: A
| Beitrag No.4, eingetragen 2012-08-07 03:09
|
Hallo,
Hier ein kleines Beispiel mit exakt dem von dir beschriebenen Verhalten:
1 <html>
2 <head>
3 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
4 <script type="text/javascript">
5 function mkWH(){
6 var h = $(window).height()-$("#up").height();
7 $("#left").height(h);
8 $("#right").height(h).width($(window).width()-$("#left").width());}
9 $(window).resize(mkWH);
10 $(window).ready(mkWH);
11 </script>
12 </head>
13 <body style="height: 100%; margin: 0px; overflow: hidden;">
14 <div id="up">Oben</div>
15 <div id="left" style="background-color: #cccccc; overflow-x: hidden; overflow-y: auto; position: absolute; width:250px;">Links</div>
16 <div id="right" style="background-color: #aaaaaa; overflow: auto; position: absolute; left: 250px;">Rechts</div>
17 </body>
18 </html>
--
mfg
matph
-----------------
Wir müssen wissen, wir werden wissen. Hilbert
Das Buch der Natur ist in der Sprache der Mathematik geschrieben. Galilei
[ Nachricht wurde editiert von matph am 07.08.2012 03:22:32 ]
|
Profil
Quote
Link |
viertel
Senior
Dabei seit: 04.03.2003
Mitteilungen: 21551
Aus: Hessen
| Beitrag No.5, vom Themenstarter, eingetragen 2012-08-07 15:26
|
Danke für die Unterstützung (mit JavaScript hatte ich bis jetzt noch nix am Hut).
Ich habe jetzt stundenlang experimentiert — nix. Da scrollt nix, weil kein Balken erscheint. Außer: s.u.
Also so sieht das bei mir jetzt aus:HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <title>TG Weilbach - Bildergalerie anzeigen </title> <link rel="stylesheet" type="text/css" href="css/default.css"> html { /* max-height:100%;*/ } body { height:100%; margin:0; overflow:hidden; border:2px solid cyan; font-size:150%; } #up { border:2px solid green; } #left { position:absolute; width:220px; /* height:500px;*/ /* hiermit gibt es einen Balken */ overflow-x:hidden; overflow-y:auto; background-color:#dd8; border:2px solid yellow; } #right { position:absolute; left:220px; overflow:auto; padding:1em; border:2px solid blue; } <script type="text/javascript"> document.all.kopf.innerHTML = "Ein anderer Kopf"; function mkWH(){ var h = $(window).height()-$("#up").height(); // h = 500; $("#left").height(h); $("#right").height(h).width($(window).width()-$("#left").width()); $('#kopf').innerHTML = "Anderer Kopf"; document.all.kopf.innerHTML = "Anderer Kopf, von mkWH"; } $(window).resize(mkWH); $(window).ready(mkWH); <h1 id='kopf'>Der Kopf </h1> <p>Und noch etwas Text. </p> <p><img src="images/bild_radtour.jpg" /></p> <p><img src="images/bild_radtour.jpg" /></p> <p><img src="images/bild_radtour.jpg" /></p> <p><img src="images/bild_radtour.jpg" /></p> <p><img src="images/bild_radtour.jpg" /></p> <p><img src="images/bild_radtour.jpg" /></p> <p><img src="images/bild_radtour.jpg" /></p> <p><img src="images/bild_radtour.jpg" /></p> <script type="text/javascript">document.write(" <p>Script geht. </p>"); </script> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ac ante sed ante imperdiet auctor. Fusce dignissim, magna eu feugiat tincidunt, nibh metus tincidunt augue, quis ullamcorper lorem pede a ante. Proin congue nisl a arcu. Donec et elit. Etiam ac eros nec metus molestie aliquam. Nullam vestibulum molestie magna. In varius quam in nulla luctus tristique. Nam et eros. Sed vitae sem a velit mattis dapibus. Sed blandit, sapien auctor adipiscing viverra, purus urna fermentum wisi, id luctus tortor augue et ligula. In quis libero. Sed urna arcu, malesuada in, adipiscing vitae, vehicula vitae, magna. Phasellus sit amet nisl at erat aliquet eleifend. Quisque malesuada porta elit. Nulla nec orci ac leo posuere eleifend. Aliquam ultrices vulputate velit. Vestibulum vitae ipsum. Vestibulum pede erat, cursus nec, porttitor ac, accumsan ut, neque. <script type="text/javascript"> document.all.kopf.innerHTML = "Ganz anderer Kopf"; // $(window).resize(mkWH); // $(window).ready(mkWH); document.all.kopf.innerHTML = "Ganz anderer Kopf, aber geändert";
|
Die Zeilen 48/49 bzw. 86/87 produzieren einen Fehler, denn das, was danach steht, wird nicht ausgeführt.
Uncaught exception: ReferenceError: Undefined variable: $
Der Sinn der Function mkWH ist mir klar, nur passiert bei mir nicht das Gewünschte.
Wozu ist die Zeile 3 in deinem Code gut?
Was bewirkt das $(...)?
Oder ist $ etwa eine Funktion, die in dem google-Script definiert ist (ich konnte da aber nix finden)?
Sollte das $ tatsächlich dort definiert sein, dann wüßte ich gerne, wie ich ohne das auskomme. Denn auf solche Fremdreferenzen verlasse ich mich nicht gerne.
Mit aktivierter Zeile 25 habe ich einen Scrollbalken, aber halt keine dynamische Höhe.
Eiiiiigentlich...
... hätte ich es ja gerne sauber mit CSS, denn das soll ja die Lösung aller Formatierungsprobleme sein. Aber anscheinend erst in der übernächsten Browser-Generation
|
Profil
Quote
Link |
matph
Senior
Dabei seit: 20.11.2006
Mitteilungen: 3799
Aus: A
| Beitrag No.6, eingetragen 2012-08-07 16:15
|
Hallo,
Du benötigst die in Beitrag No.2 erwähnte Bibliothek jquery.
Diese kannst du natürlich auf deinem Server speichern, und musst dafür nicht auf eine externe Seite (wie z.B. google oder MS) verweisen. Ich habe dies im Beispiel der Einfachheit gemacht, damit man nicht, um dieses an zu sehen, jquery separat herunterladen muss.
Übernimm doch mal exakt den Code aus meinem Beispiel, dann siehst du auch wie es sich richtigerweise verhalten sollte.
Browserübergreifend gibt es leider derzeit keine Lösung rein mit css, falls die Zeile Oben tatsächlich eine variable Höhe besitzt.
--
mfg
matph
-----------------
Wir müssen wissen, wir werden wissen. Hilbert
Das Buch der Natur ist in der Sprache der Mathematik geschrieben. Galilei
|
Profil
Quote
Link |
Bernhard
Senior
Dabei seit: 01.10.2005
Mitteilungen: 4381
Aus: Merzhausen, Deutschland
 | Beitrag No.7, eingetragen 2012-08-07 18:07
|
Hallo Viertel!
Du mußt das "overflow:auto" in dasselbe Div stecken, wie die Bilder auch, nämlich in die linke Spalte ("div left").
So wie ich das sehe, bedient das jetzt den ganzen body.
Viele Grüße, Bernhard
-----------------
"Wichtig ist, daß man nie aufhört zu fragen"
"Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuches, sie zu erwerben"
Albert Einstein
|
Profil
Quote
Link |
viertel
Senior
Dabei seit: 04.03.2003
Mitteilungen: 21551
Aus: Hessen
| Beitrag No.8, vom Themenstarter, eingetragen 2012-08-07 21:41
|
Bernhard
Da hast du nicht richtig hingeschaut.
In Zeile 26 (bezogen auf Post #5) steht das passende overflow, Zeile 14 unterdrückt den Hauptscrollbalken.
Da ich eine Aversion gegen Fremdbibliotheken habe dachte ich mir, was die können, muß auch ohne gehen. Und, siehe da, es geht:HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <title>Scrollbare Bilderliste variabler Höhe </title> <link rel="stylesheet" type="text/css" href="css/default.css"> body { height:100%; margin:0; overflow:hidden; /*border:2px solid cyan;*/ font-size:150%; background-color:#ffa; } #up { /* ohne border funktioniert offsetHeight nicht */ border:1px dotted #800; background-color:#ee9; } #left { position:absolute; width:220px; overflow-x:hidden; overflow-y:auto; background-color:#dd8; /*border:2px solid yellow;*/ } #right { position:absolute; left:220px; overflow:auto; padding:1em; /*border:2px solid blue;*/ background-color:#cc7; } <script type="text/javascript"> function computeLeftHeight() { winHeight = window.innerHeight; //upHeight = document.getElementById("up").clientHeight; upHeight = document.getElementById("up").offsetHeight; //upHeight = document.getElementById("up").style.height; leftHeight = winHeight - upHeight - 0; return leftHeight; } window.onresize = function () { leftHeight = computeLeftHeight(); document.getElementById("left").style.height = leftHeight+"px"; } <h1 id='kopf'>Der Kopf </h1> <p>Und noch etwas Text. </p> <script type="text/javascript"> leftHeight = computeLeftHeight() document.write(" <div id='left' style='height:"+leftHeight+"px;'>"); <p><img src="images/Scrollbare_Bilderliste_variabler_Hoehe_A_171576.png" onclick='document.images["LargeImage"].src= "images/Scrollbare_Bilderliste_variabler_Hoehe_A1_171576.png"' /></p> <p><img src="images/Scrollbare_Bilderliste_variabler_Hoehe_B_171576.png" onclick='document.images["LargeImage"].src= "images/Scrollbare_Bilderliste_variabler_Hoehe_B1_171576.png"' /></p> <p><img src="images/Scrollbare_Bilderliste_variabler_Hoehe_C_171576.png" onclick='document.images["LargeImage"].src= "images/Scrollbare_Bilderliste_variabler_Hoehe_C1_171576.png"' /></p> <p><img src="images/Scrollbare_Bilderliste_variabler_Hoehe_A_171576.png" onclick='document.images["LargeImage"].src= "images/Scrollbare_Bilderliste_variabler_Hoehe_A1_171576.png"' /></p> <p><img src="images/Scrollbare_Bilderliste_variabler_Hoehe_B_171576.png" onclick='document.images["LargeImage"].src= "images/Scrollbare_Bilderliste_variabler_Hoehe_B1_171576.png"' /></p> <p><img src="images/Scrollbare_Bilderliste_variabler_Hoehe_C_171576.png" onclick='document.images["LargeImage"].src= "images/Scrollbare_Bilderliste_variabler_Hoehe_C1_171576.png"' /></p> <p><img id="LargeImage" src="images/Scrollbare_Bilderliste_variabler_Hoehe_A1_171576.png" /></p>
|
Ist sogar noch einer draufgesetzt:
Wenn das Brwoserfenster verändert wird, paßt sich der Scrollbalken an.
Ein Punkt, der mir unverständlich geblieben ist:
Wenn ich Zeile 17 (jetzt bezogen auf den Code hier) entferne (auskommentiere), dann funktioniert die Berechnung nicht, weil das offsetHeight (Zeile 39) nicht definiert ist. Auch die Varianten in Zeile 38 oder 40 funktionieren nicht.
Die spinnen, die Browserhersteller
Wer mal ausprobieren und mir seine Erfahrung mitteilen möchte (ich habe z.B. keinen Firefox):
Guckst du hier
Es sind drei verschiedene Bilder, 2× untereinander, zum anklicken.
Eine Macke ist drin, und ich schiebe das mal Opera in die Schuhe:
Die Bilder 2, 3, 5, 6 können nur einmal angeklickt werden, danach ist der Link zum Bild anscheinend futsch. Wieso auch immer
|
Profil
Quote
Link |
intrigus
Junior
Dabei seit: 01.08.2012
Mitteilungen: 20
Aus:
 | Beitrag No.9, eingetragen 2012-08-07 21:59
|
Der Vorteil von JQuery und vielen anderen Fremdbibliotheken ist, dass sie in (fast) allen Browsern funktionieren.
Ich bin nicht sicher ob dein Beispiel auch mit älteren Internet Explorer Versionen funktioniert, die verwenden statt upHeight/leftHeight eine andere Funktion.
|
Profil
Quote
Link |
Bernhard
Senior
Dabei seit: 01.10.2005
Mitteilungen: 4381
Aus: Merzhausen, Deutschland
| Beitrag No.10, eingetragen 2012-08-07 22:12
|
Hallo Viertel!
Ich habe das mal durch das Validierungstool von Firefox laufen lassen (Erweiterung Web Developper).
Der sagt:
1. FehlerCSS 24 #left Die Eigenschaft overflow-x existiert nicht in CSS level 2.1, aber in [css3] : hidden |
2. FehlerCSS 25 #left Die Eigenschaft overflow-y existiert nicht in CSS level 2.1, aber in [css3] : auto |
Es wird folgender Lösungsvorschlag angeboten:CSS body {
height : 100%;
margin : 0;
overflow : hidden;
font-size : 150%;
background-color : #ffa;
}
#up {
border : #800 dotted 1px;
background-color : #ee9;
}
#left {
position : absolute;
width : 220px;
background-color : #dd8;
}
#right {
position : absolute;
left : 220px;
overflow : auto;
padding : 1em;
background-color : #cc7;
} |
Du kannst es ja mal damit versuchen.
Viele Grüße, Bernhard
-----------------
"Wichtig ist, daß man nie aufhört zu fragen"
"Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuches, sie zu erwerben"
Albert Einstein
[ Nachricht wurde editiert von Bernhard am 07.08.2012 22:13:14 ]
|
Profil
Quote
Link |
matph
Senior
Dabei seit: 20.11.2006
Mitteilungen: 3799
Aus: A
| Beitrag No.11, eingetragen 2012-08-07 22:22
|
Hallo viertel,
Im FF funktioniert es soweit
Allerdings besitzt das Element right mit diesem Code nicht die Maximale Breite und Höhe, was bei mehr Inhalt zu unerwünschtem Verhalten (man kann den Inhalt dann nicht scrollen) führen kann.
--
mfg
matph
-----------------
Wir müssen wissen, wir werden wissen. Hilbert
Das Buch der Natur ist in der Sprache der Mathematik geschrieben. Galilei
[ Nachricht wurde editiert von matph am 07.08.2012 22:24:43 ]
|
Profil
Quote
Link |
viertel
Senior
Dabei seit: 04.03.2003
Mitteilungen: 21551
Aus: Hessen
| Beitrag No.12, vom Themenstarter, eingetragen 2012-08-08 00:33
|
2012-08-07 22:22 - matph in Beitrag No. 11 schreibt:
Allerdings besitzt das Element right mit diesem Code nicht die Maximale Breite und Höhe, was bei mehr Inhalt zu unerwünschtem Verhalten (man kann den Inhalt dann nicht scrollen) führen kann. Danke.
Der Fehler ist jetzt behoben.
Ich spare es mir, den Code hier zu posten. Er ist auf der verlinkten Seite einsehbar.
Was mich allerdings ziemlich stört ist Opera mit seinem Verhalten, nach dem ersten Anklicken die Bilder 2 und 3 zu „vergessen“
Hat dazu noch jemand eine Idee?
[ Nachricht wurde editiert von viertel am 08.08.2012 00:43:15 ]
|
Profil
Quote
Link |
matph
Senior
Dabei seit: 20.11.2006
Mitteilungen: 3799
Aus: A
| Beitrag No.13, eingetragen 2012-08-08 01:10
|
Hallo,
Ich habe leider diesen Webbrowser hier nicht installiert, daher nur eine Vermutung, doch genau genommen wird via images["LargeImage"] eigentlich das Bild bei dem das Attribut name den Wert LargeImage besitzt, angesprochen, und nicht mit dem Attribut id. Vielleicht stößt sich der Browser daran...
--
mfg
matph
-----------------
Wir müssen wissen, wir werden wissen. Hilbert
Das Buch der Natur ist in der Sprache der Mathematik geschrieben. Galilei
|
Profil
Quote
Link |
viertel
Senior
Dabei seit: 04.03.2003
Mitteilungen: 21551
Aus: Hessen
| Beitrag No.14, vom Themenstarter, eingetragen 2012-08-08 02:18
|
Ok, das war's leider nicht. Habe jetzt id und name auf LargeImage gesetzt, der Effekt bleibt: 1× können Bild 2 und 3 (und ebenso die identischen 5 und 6) aufgerufen werden, ab dem zweiten Mal kommt nur der Platzhalter für ein nicht vorhandenes Bild. Wobei der Abruf von Bild 2 auch gleich Bild 5 „vernichtet“ (und auch umgekehrt), dto. für 3 und 6.
Seltsamerweise sind Bild 1 und 4 davon nicht betroffen.
Rufe ich beim Erstaufruf der Seite statt A1 das Bild B1 als LargeImage auf, dann kann dieses Initialbild immer wieder aufgerufen werden, die anderen beiden aber nicht.
Nach einem Refresh (F5) beginnt das Spielchen von vorne.
Sehr seltsam.
Die anderen beiden Browser (IE9 und Chrome) benehmen sich wie gewünscht.
|
Profil
Quote
Link |
Bernhard
Senior
Dabei seit: 01.10.2005
Mitteilungen: 4381
Aus: Merzhausen, Deutschland
| Beitrag No.15, eingetragen 2012-08-08 02:28
|
Hallo Dietmar!
Ich habe mir das nochmals angesehen.
Im FF funktioniert es einwandfrei und ich kann auch - jedenfalls mit dem Tool - keine weiteren Fehler finden, als die, die ich Dir bereits in Post #10 geschrieben habe. Da Du was hinzugefügt hast, liegen sie nun in den Zeilen 28 und 29.
Der empfohlene validierte Code ist aber weiterhin derselbe.
Ich würde Dir raten, selbst wenn es jetzt tut, wie vorgeschlagen zu verändern.
Viele Grüße, Bernhard
PS.: Der HTML-Code ist übrigens einwandfrei!
-----------------
"Wichtig ist, daß man nie aufhört zu fragen"
"Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuches, sie zu erwerben"
Albert Einstein
[Die Antwort wurde nach Beitrag No.13 begonnen.]
|
Profil
Quote
Link |
viertel
Senior
Dabei seit: 04.03.2003
Mitteilungen: 21551
Aus: Hessen
| Beitrag No.16, vom Themenstarter, eingetragen 2012-08-08 02:53
|
Ok, da der x-overflow irrelevant ist, da keines der Bilder je breiter als der linke Streifen sein wird, habe ich die beiden Zeilen durch ein gemeinsames overflow:auto; ersetzt (und wieder hochgeladen).
Ich hatte die beanstandete Version aus dem Vorschlag in Beitrag #4 übernommen.
2012-08-08 02:28 - Bernhard in Beitrag No. 15 schreibt:
PS.: Der HTML-Code ist übrigens einwandfrei! Ist ja auch nicht viel drin, was man falsch machen könnte 
|
Profil
Quote
Link |
rlk
Senior
Dabei seit: 16.03.2007
Mitteilungen: 7166
Aus: Wien
| Beitrag No.17, eingetragen 2012-08-08 11:39
|
Hallo Dietmar,
mit Safari Version 5.1.7 (6534.57.2) wird die Seite so dargestellt, wie Du sie beschrieben hast.
Der HTML-Validator von W3C liefert aber 10 Fehler und 10 Warnungen.
Viele Grüße aus Wien,
Roland
|
Profil
Quote
Link |
viertel
Senior
Dabei seit: 04.03.2003
Mitteilungen: 21551
Aus: Hessen
| Beitrag No.18, vom Themenstarter, eingetragen 2012-08-08 12:15
|
Danke, Roland, für den Hinweis.
Die Fehler waren im Prinzip unkritisch, sind aber jetzt bis auf zwei beseitigt.
Und das sind keine wirklichen Fehler.
Die fehlenden <div>'s zu den vorhandenen </div> werden per Script erzeugt, der Browser „sieht“ also korrektes HTML.
Bleibt nur noch die oben beschriebene Opera-Macke.
[ Nachricht wurde editiert von viertel am 08.08.2012 12:18:29 ]
|
Profil
Quote
Link |
Bernhard
Senior
Dabei seit: 01.10.2005
Mitteilungen: 4381
Aus: Merzhausen, Deutschland
| Beitrag No.19, eingetragen 2012-08-08 13:13
|
Hallo Roland!
Als ich gestern abend noch geprüft hatte (derselbe Validator, auf XHTML strickt), wurde kein Fehler angegeben.
Unter HTML 4.01 zeigt er mir sie (die zwei übriggebliebenen Div's) aber jetzt auch an.
→ hier
Ich hatte bisher gedacht, die Prüfung auf XHTML strickt sei eher weniger tolerant.
Viele Grüße, Bernhard
-----------------
"Wichtig ist, daß man nie aufhört zu fragen"
"Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuches, sie zu erwerben"
Albert Einstein
|
Profil
Quote
Link |
Bernhard
Senior
Dabei seit: 01.10.2005
Mitteilungen: 4381
Aus: Merzhausen, Deutschland
| Beitrag No.20, eingetragen 2012-08-08 13:36
|
Hallo Dietmar!
Ich habe in einem anderen Online-Validitor nochmal auf XHTML 1.0 geprüft und folgenden Kommentar gefunden. Viellecht kann der Dir weiterhelfen.
Hinweise:Dieses XHTML 1.0-Dokument wurde mit dem MIME-Type text/html ausgeliefert, der jedoch
nicht verwendet werden sollte, wenn das Dokument nicht den Richtlinien zur Kompatibilität
mit HTML entspricht.In diesem XHTML-Dokument wurde keine Angabe zu einer Zeichenkodierung gefunden.
Allerdings wurde ein Meta-Element mit der Angabe zu einer Zeichenkodierung gefunden (iso-8859-1).
Diese Art der Kodierungsangabe wird bei XHTML-Dokumenten nicht verarbeitet und sollte
nur zwecks Abwärtskompatiblität zu HTML vorhanden sein.
Fügen Sie entweder eine XML-Deklaration mit einer Angabe einer Zeichenkodierung am Anfang
des Dokumentes ein (z. B. <;?xml version="1.0" encoding="iso-8859-1"?>,
oder veranlassen Sie Ihren Server das Senden eines entsprechenden HTTP-Header
(bei PHP mit header('Content-Type: text/html; charset=iso-8859-1');).
Da keine gültige Kodierungsabgabe vorhanden ist,
wurde dieses Dokument per Fallback mit UTF-8 verarbeitet. |
und weiter heißt es:
Schwerer Fehler!Im Dokument befindet sich in Zeile 6 und Spalte 43 ein ungültiges Zeichen.
Dieses Zeichen ist in der verwendeten Zeichenkodierung (utf-8) nicht erlaubt. |
Du kannst das hier selber studieren und dabei die verschiedenen HTML-Standards (HTML 2.x-4.01, XHTML 1.0-1.1, transitional, strickt usw.) durchprobieren.
Viele Grüße, Bernhard
-----------------
"Wichtig ist, daß man nie aufhört zu fragen"
"Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuches, sie zu erwerben"
Albert Einstein
[ Nachricht wurde editiert von Bernhard am 08.08.2012 13:52:41 ]
|
Profil
Quote
Link |
Otis
Senior
Dabei seit: 06.10.2007
Mitteilungen: 891
Aus: Stralsund
| Beitrag No.21, eingetragen 2012-08-08 14:30
|
2012-08-08 12:15 - viertel in Beitrag No. 18 schreibt:
Bleibt nur noch die oben beschriebene Opera-Macke.
Bei meinem Opera
Version 12.01
Build 1532
Plattform x64
Betriebssystem Windows 7
kann ich die Bilder so oft anklicken, wie ich will und sie werden auch immer brav auf der rechten Seite angezeigt.
mfg Otis
-----------------
A bus station is where busses stop.
A train station is where trains stop.
On my desk there is a workstation...
Never argue with an idiot. They bring you down to their level and beat you with experience.
|
Profil
Quote
Link |
matph
Senior
Dabei seit: 20.11.2006
Mitteilungen: 3799
Aus: A
| Beitrag No.22, eingetragen 2012-08-08 14:40
|
Hallo,
Hm...
Diese "Fehler" von denen hier teilweise gesprochen wird, sind sicherlich nicht für dieses Verhalten verantwortlich
Jeder kann ja mal für sich schätzen, wie viele "Fehler" der MP aufweist, z.B. die Seite MP Forum Übersicht...
Der w3 Validator sagt, es sind 1003 Fehler und 135 Warnungen
--
mfg
matph
-----------------
Wir müssen wissen, wir werden wissen. Hilbert
Das Buch der Natur ist in der Sprache der Mathematik geschrieben. Galilei
[Die Antwort wurde nach Beitrag No.20 begonnen.]
|
Profil
Quote
Link |
viertel
Senior
Dabei seit: 04.03.2003
Mitteilungen: 21551
Aus: Hessen
| Beitrag No.23, vom Themenstarter, eingetragen 2012-08-08 15:15
|
Kraß 
Bis eben hatte ich noch Opera 12.00
Jetzt mit 12.01 ist der Fehler weg.
@matph
Daß der Matheplanet jenseits jeglicher Validierung ist ist ein alter Hut.
2012-08-08 14:40 - matph in Beitrag No. 22 schreibt:
Hm...
Diese "Fehler" von denen hier teilweise gesprochen wird, sind sicherlich nicht für dieses Verhalten verantwortlich Hätte ich auch nicht erwartet.
Und nun wissen wir ja (s.o.): es war eine Opera-Macke.
[Die Antwort wurde nach Beitrag No.21 begonnen.]
|
Profil
Quote
Link |
TheBear
Senior
Dabei seit: 31.01.2006
Mitteilungen: 1219
Aus:
| Beitrag No.24, eingetragen 2012-08-10 00:11
|
Hi Viertel und alle anderen,
hier noch eine Lösung, die nur CSS benötigt (gefunden hier, gebt dem Mann Upvotes für seine Antwort!).
Getestet im Chrome 18.0.1025.168, FF 14.0.1 und Opera 11.61, nicht im Internet-Explorer. Ich schätze aber mal, dass das ziemlich weitläufig funktioniert, da eigentlich nur gut unterstützte CSS-Regeln genutzt werden.
HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scrollbar mit CSS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
body {
margin: 0;
}
.autoMaxHeight {
position: fixed;
height: auto;
top: 0;
bottom: 0;
}
.autoMaxWidth {
position: fixed;
width: auto;
left: 0;
right: 0;
}
#head {
position: fixed;
top: 0;
background-color: red;
height: 200px;
}
#left, #right {
margin-top: 200px;
overflow: auto;
}
#left {
background-color: green;
width: 180px;
padding: 20px;
}
#right {
background-color: blue;
margin-left: 220px;
padding: 20px;
}
.content {
border: solid yellow 1px;
}
#content-left {
height: 10000px;
}
#content-right {
height: 600px;
}
</style>
</head>
<body>
<div id="head" class="autoMaxWidth">
Kopf
</div>
<div id="left" class="autoMaxHeight">
<p id="content-left" class="content">
Links
</p>
</div>
<div id="right" class="autoMaxHeight autoMaxWidth">
<p id="content-right" class="content">
Rechts
</p>
</div>
</body>
</html> |
Der Trick ist in den beiden Klassen "autoMaxHeight" und "autoMaxWidth".
Bei autoMaxHeight wird einem Element z.B. gesagt, seine Oberkante (= obere Kante des top-margins) soll 0 Pixel vom oberen Rand des Viewports entfernt sein, und seine untere Kante (= untere Kante des bottom-margins) soll 0 Pixel vom unteren Rand des Viewports entfernt sein.
Da bleibt dem Element nur noch, sich auf 100% Höhe auszubreiten, und zwar 100% äusserer(!) Höhe.
Das ganze funktioniert natürlich auch mit position: relative/absolute und anderen Bezugselementen als dem Viewport.
Gruß TheBear
-----------------
Die “Arbeit” ist ihrem Wesen nach die unfreie, unmenschliche, ungesellschaftliche Tätigkeit.
|
Profil
Quote
Link |
Bernhard
Senior
Dabei seit: 01.10.2005
Mitteilungen: 4381
Aus: Merzhausen, Deutschland
| Beitrag No.25, eingetragen 2012-08-10 00:20
|
Hallo TheBear!
Das klingt gut, das muß ich mir merken.
ich nehme an, daß man diese Eigenschaft auch auf die meisten anderen Elemente verwenden kann (außer Graphiken).
Vielen Dank für den Hinweis!
@matph:
Auf was für einen Standard hast Du geprüft?
Ich bekomme bei der Prüfung auf HTML 4.01 Transitional einen Fehler mehr (1004) und ebenfalls 135 Warnungen.
Dazu 22 Fehler für CSS 2.1
Mit der Startseite (Index) ist der Validator übrigens vollkommen zufrieden. Hier checkt er (automatisch) auf HTML 4.01 Frameset.
Bernhard
-----------------
"Wichtig ist, daß man nie aufhört zu fragen"
"Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuches, sie zu erwerben"
Albert Einstein
[ Nachricht wurde editiert von Bernhard am 10.08.2012 00:42:52 ]
|
Profil
Quote
Link |
viertel
Senior
Dabei seit: 04.03.2003
Mitteilungen: 21551
Aus: Hessen
| Beitrag No.26, vom Themenstarter, eingetragen 2012-08-10 01:16
|
Bearenstark 
Allerdings werde den Versuch, es in meine Seite einzubauen, zeitlich etwas hinausschieben. Denn die echte Seite, für die ich das brauche, ist noch etwas komplizierter als meine Musterseite (siehe Link in Beitrag #8). Und die läuft jetzt erst mal…
|
Profil
Quote
Link |
matph
Senior
Dabei seit: 20.11.2006
Mitteilungen: 3799
Aus: A
|  Beitrag No.27, eingetragen 2012-08-10 02:36
|
Hallo,
2012-08-07 01:17 - viertel in Beitrag No. 3 schreibt:
Kopf
• ganze Breite
• variable Höhe
2012-08-07 01:17 - viertel in Beitrag No. 3 schreibt:
Bei Frames muß ich leider die Kopfhöhe fest angeben.
2012-08-07 16:15 - matph in Beitrag No. 6 schreibt:
Browserübergreifend gibt es leider derzeit keine Lösung rein mit css, falls die Zeile Oben tatsächlich eine variable Höhe besitzt.
Der Code aus Beitrag No.24 besitzt eine fixe Höhe, und ohne diese scheint es auch nicht zu funktionieren
--
mfg
matph
-----------------
Wir müssen wissen, wir werden wissen. Hilbert
Das Buch der Natur ist in der Sprache der Mathematik geschrieben. Galilei
|
Profil
Quote
Link |
viertel
Senior
Dabei seit: 04.03.2003
Mitteilungen: 21551
Aus: Hessen
| Beitrag No.28, vom Themenstarter, eingetragen 2012-08-10 02:52
|
Da sitzen die Browser-Fuzzies jahrelang und brüten über HTML- und CSS-Standards.
Und dann ist so ein simples Formatierproblem nicht umzusetzen
Schändlich!
Und was die einzelnen Browser dann draus machen ist ja noch mal ein Abenteuer. Da wird (falsch) ruminterpretiert oder auch ganz ignoriert (MS) oder einständig erweitert (wer schon wieder: MS).
Ein Bekannter hat seinem Ärger über etwas mal in der Form Luft gemacht:
„Das könnte man echt senkrecht die Wand hochsch….“
Wie auch immer das weiter helfen mag 
@matph
Danke jedenfalls für den Hinweis.
Ich hatte TheBears Vorschlag noch nicht ausprobiert.
|
Profil
Quote
Link |
FamilyGuy
Senior 
Dabei seit: 27.06.2005
Mitteilungen: 1125
Aus:
 | Beitrag No.29, eingetragen 2012-08-10 19:28
|
Hallo,
die Gefühle kenn ich, schlag mich mit dem Elend fast täglich rum.
Derselbe Code, interpretiert von FireFox, Opera und Chrome/Safari:
-----------------
Shit happens when you party naked.
-T-Shirt, Bad Santa-
|
Profil
Quote
Link |
viertel
Senior
Dabei seit: 04.03.2003
Mitteilungen: 21551
Aus: Hessen
| Beitrag No.30, vom Themenstarter, eingetragen 2012-08-10 19:36
|
Es kommt noch schlimmer
Die ganze Arbeit war für die Katz.
Mir ist jetzt ein Rechner mit WinXP und IE7 unter die Finger gekommen.
Der interessiert sich für die ganze CSS overflow-Geschichte nicht. Da gibt es rechts einen Scrollbalken und fertig. Was natürlich völlig sinnlos ist.
Also werde ich doch wieder auf Frames gehen, auf die separate Kopfzeile verzichten und den Kopf-Text in die rechte Area integrieren.
|
Profil
Quote
Link |
TheBear
Senior
Dabei seit: 31.01.2006
Mitteilungen: 1219
Aus:
| Beitrag No.31, eingetragen 2012-08-10 19:55
|
Bevor du das tust, probier mal einen ordentlichen (strict)-Doctype zu setzen. Zumindestens IE6-8 kennen zwei Modi, einmal einen Kompatibilitätsmodus (Quirks-Mode, falls du googeln willst), und einen deutlich besseren, eher standardkonformen Modus.
[ Nachricht wurde editiert von TheBear am 10.08.2012 19:56:51 ]
|
Profil
Quote
Link |
viertel
Senior
Dabei seit: 04.03.2003
Mitteilungen: 21551
Aus: Hessen
| Beitrag No.32, vom Themenstarter, eingetragen 2012-08-10 21:07
|
Schade
strict bringt auch nix.
|
Profil
Quote
Link |
Bernhard
Senior
Dabei seit: 01.10.2005
Mitteilungen: 4381
Aus: Merzhausen, Deutschland
| Beitrag No.33, eingetragen 2012-08-10 23:24
|
Hallo Dietmar!
Auf der HTML/CSS-Hilfeseite SELFHTML (mit Forum übrigens, kennst Du die schon?) steht unter Stichwort "overflow":
"Beachten Sie:
Netscape 4.x beherrscht nur overflow:hidden korrekt. Der Internet Explorer bis Version 6 vergrößert bei visible das Element so weit, bis der Inhalt vollständig sichtbar ist. Opera bis Version 6 stellt auto wie visible und scroll wie hidden dar. Konqueror beherrscht die verschiedenen Angaben erst ab Version 3.4 korrekt."
Weiteres siehe hier
Es geht also drunter und drüber bei den Browsern. 
2012-08-10 01:16 - viertel in Beitrag No. 26 schreibt:
Denn die echte Seite, für die ich das brauche, ist noch etwas komplizierter als meine Musterseite (siehe Link in Beitrag #8). Falls die noch komplizierter werden könnte oder Du Dir zumindest die Option zur Erweiterung halten willst, würde ich Dir raten, die CSS-Formatierungen ganz aus dem HTML-Gerüst zu lösen und als eigenes Stylesheet zu speichern. Da würde sich auch die Möglichkeit bieten, für Browser, insbesondere IE, separte Patches anzufertigen.
Viele Grüße, Bernhard
PS.: Welche Bearbeitungssoftware verwendest Du eigentlich zum Editieren Deiner Website bzw. deren Codes?
-----------------
"Wichtig ist, daß man nie aufhört zu fragen"
"Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuches, sie zu erwerben"
Albert Einstein
[ Nachricht wurde editiert von Bernhard am 10.08.2012 23:45:27 ]
|
Profil
Quote
Link |
viertel
Senior
Dabei seit: 04.03.2003
Mitteilungen: 21551
Aus: Hessen
| Beitrag No.34, vom Themenstarter, eingetragen 2012-08-11 02:02
|
• Natürlich kenne ich SelfHTML.
• Daß die Browser-Hersteller die Vorgaben nur als Vorschlag ansehen ist auch bekannt.
• Natürlich werden die Styles letztendlich ausgelagert.
• Und programmieren tu ich die Seiten mit UltraEdit, also alles Handarbeit. Wer mal von MS-Software (Frontpage, Word) erzeugte „HTML“-Seiten gesehen hat braucht ne Weile, um sich von dem Schock zu erholen.
Ich habe jetzt auf Frames umgerüstet. Hat aber auch seine Tücken.
[ Nachricht wurde editiert von viertel am 11.08.2012 02:02:47 ]
|
Profil
Quote
Link |
matph
Senior
Dabei seit: 20.11.2006
Mitteilungen: 3799
Aus: A
| Beitrag No.35, eingetragen 2012-08-11 15:57
|
Hallo,
2012-08-10 19:36 - viertel in Beitrag No. 30 schreibt:
Mir ist jetzt ein Rechner mit WinXP und IE7 unter die Finger gekommen.
Der interessiert sich für die ganze CSS overflow-Geschichte nicht.
Grundsätzlich funktioniert die CSS overflow-Geschichte im IE7. Allerdings ist durchaus bekannt, das einzelne Versionen einige Bugs besitzen (wobei sich die meisten umgehen lassen sollten).
2012-08-10 19:36 - viertel in Beitrag No. 30 schreibt:
Da gibt es rechts einen Scrollbalken und fertig. Was natürlich völlig sinnlos ist. Die Angaben bezüglich overflow sollten sich für den IE7 zusätzlich auf das Element html beziehen, da er dieses für body ignoriert.
Seit 2009 ist allerdings der IE8 der aktuelle Browser für XP, daher sollte dies keine Rolle spielen (auch wenn dieser z.B. bei Acid3 nicht gerade glänzt).
Es stellt sich damit die Frage, in wie weit man auf veraltete Browser tatsächlich heute noch bei normalen Seiten Rücksicht nehmen sollte...
--
mfg
matph
-----------------
Wir müssen wissen, wir werden wissen. Hilbert
Das Buch der Natur ist in der Sprache der Mathematik geschrieben. Galilei
|
Profil
Quote
Link |
chryso
Senior
Dabei seit: 07.02.2009
Mitteilungen: 9535
Aus: Österreich
 | Beitrag No.36, eingetragen 2012-08-11 18:13
|
Ich habe nicht die allerneueste Version von Opera, trotzdem funktioniert deine Bildseite tadellos.
Version 11.61
Build 1250
Plattform Win32
Betriebssystem Windows 7
-----------------
Die deutsche Rechtschreibung ist Freeware, sprich, du kannst sie kostenlos nutzen.
Allerdings ist sie nicht Open Source, d.h. du darfst sie nicht verändern oder in veränderter Form veröffentlichen.
|
Profil
Quote
Link |
Wie unterstütze ich den Matheplaneten mit Geld?
[Neues Thema]