nicht angemeldet
Scrollbars obwohl genug Platz
TS
Gunnar Bittersmann
Tabellenkalk
Matthias Apsel
marctrix
Camping_RIDERHallo,
der folgende einfache HTML-Code erzeugt eine vertikale Scrollbar.
Aber warum? Platz genug ist vorhanden.
Seltsamerweise lässt sich das verhindern, sobald overflow: auto; im html/Body CSS steht. Was interpretieren die Browser denn falsch bzw. was ist falsch an meiner Auszeichnung?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<title>Scrollbars</title>
<style>
html, body {
border: 0;margin: 0;padding: 0;
width:100%;height:100%;
font-family: Arial;
background-color: #008080;
}
table{
width:90%;
margin: auto;
min-height:30%;
}
td{
height:100%;
vertical-align: middle;
text-align: center;
font-size: 70px;
font-weight: bold;
}
h1{
text-align: center;
font-size: 100%;
color: #E3F1D0;
}
h3{
text-align: center;
font-size: 4vw;
color:#E3F1D0;
margin:5px auto;
}
</style>
</head>
<body>
<h1>start page</h1>
<h3>info bla bla bla</h3>
<table>
<tr>
<td>xxx</td><td>xxx;</td><td>###</td>
<td>xxx</td><td>###</td><td>###</td>
</tr>
</table>
<h3>End of page</h3>
</body>
</html>
wie gesagt, so geht's, die Leiste verschwindet bis sie wirklich gebraucht wird:
html, body {
border: 0;margin: 0;padding: 0;
width:100%;height:100%;
font-family: Arial;
background-color: #008080;
Overflow:auto;
}
*Getestet mit IE11 und Chrome
Gruss Henry
-
Dein
<h1>hat einmargin-topund das wird mit demmargin-topvon deinem<body>verschmolzen. Dadurch erstreckt sich der Inhalt über ingesamt mehr als 100% der verfügbaren Höhe. Nennt sichcollapsing margins. Mitbody { overflow: auto }deaktivierst du dieses seltsame Verhalten, deshalb verschwindet die Scrollbar.-
Hallo
Genau richtig. Hier noch mal ein paar Hintergrundinformationen dazu:
https://wiki.selfhtml.org/wiki/CSS/Box-Modell
oder
http://www.peterkropff.de/site/css/collapsing.htm
Gruss
MrMurphy
-
Hallo,
danke, "collapsing margins" kannte ich noch nicht. Habe mir jetzt auch Infos dazu angeschaut. Gibt es einen logischen Hintergrund für dieses gewollte Verhalten von "collapsing margins"?
Gruss Henry
-
Hallo
Weil die Addition der Außenabstände meist zu viel zu großen und damit unschönen Abständen führt. Speziell bei Texten, also den oberen und unteren Abständen zwischen Überschriften, Absätzen, li-Elementen und wo weiter.
Gruss
MrMurphy
-
-
-
Hello,
Seltsamerweise lässt sich das verhindern, sobald overflow: auto; im html/Body CSS steht. Was interpretieren die Browser denn falsch bzw. was ist falsch an meiner Auszeichnung?
das
height: 100%;würde ich mal vermuten.Liebe Grüße
Tom S.--
Es gibt nichts Gutes, außer man tut es
Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
-
@@Henry
der folgende einfache HTML-Code
Das nächste Mal: Online-Beispiel, bitte.
erzeugt eine vertikale Scrollbar. Aber warum? Platz genug ist vorhanden.
marginvonh1ist es.was ist falsch an meiner Auszeichnung?
<h1>start page</h1> <h3>info bla bla bla</h3>h3ist falsch; du darfst keine Überschriftsebenen überspringen.Außerdem solltest du in
<html>nicht die Angabe der Sprache des Inhalts vergessen, wenn denn Inhalt da ist.
<table> <tr> <td>xxx</td><td>xxx;</td><td>###</td> <td>xxx</td><td>###</td><td>###</td> </tr> </table>Und was wird das? Eine Layouttabelle?
font-family: Arial;Ernsthaft? Warum sollte ich deinen Text in Arial zu sehen bekommen? Ich hab Helvetica auf meinem System. Nicht, dass das nun eine besonders gut geeignete Schriftart wäre.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo,
Das nächste Mal: Online-Beispiel, bitte.
Ja, kann ich nachvollziehen und sehe ich grundsätzlich auch so, allerdings hält mich und bestimmt einige andere auch der Verlust der Anonymität davon ab. Lässt sich zwar umständlich durch Freespace oder sowas wieder kompensieren, aber ist auch nicht unbedingt Verlass drauf auf Dauer. Ich finde z.B. toll, dass man hier mittlerweile Bilder hochladen kann und somit nicht extern verweisen muss, daher mal als Anregung: Wäre es nicht möglich hier so was wie einen Dateiupload für HTML-Dateien oder besser noch mit Editorfunktion(wie z.B. https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_headers) zu integrieren?
h3ist falsch; du darfst keine Überschriftsebenen überspringen.Ja, semantisch... Ist ja nur zum Testen, aber bevor Anfänger sich hier was falsches abschauen.... verstehe deinen Einwand. Ist halt nur so, dass ich zum Testen oft auf alle Attribute und Styles verzichte und dennoch möchte, dass es im Browser in etwa wie gewünscht aussieht, also Macht der Gewohnheit ;-)
<table> <tr> <td>xxx</td><td>xxx;</td><td>###</td> <td>xxx</td><td>###</td><td>###</td> </tr> </table>Und was wird das? Eine Layouttabelle?
Nein, und will jetzt hier auch keine Diskussion über table vs. Div vom Zaun brechen.
font-family: Arial;Ernsthaft? Warum sollte ich deinen Text in Arial zu sehen bekommen? Ich hab Helvetica auf meinem System. Nicht, dass das nun eine besonders gut geeignete Schriftart wäre.
Wie gesagt, nur Test. Wenn du keine Arial hast, wird doch helvetica angezeigt? Warum ist helvetica nicht gut geeignet?
Gruss Henry
-
Hallo,
Nein, und will jetzt hier auch keine Diskussion über table vs. Div vom Zaun brechen.
Wer als Alternative zu
tablenurdivkennt, hat HTML nicht verstanden.Gruß
Kalk-
Nein, und will jetzt hier auch keine Diskussion über table vs. Div vom Zaun brechen.
Wer als Alternative zu
tablenurdivkennt, hat HTML nicht verstanden.Was soll das?
Ich liebe es Erbsen zu zählen? oder Ich bin so toll und muss unbedingt unsachlich beleidigen um mich selbst zu erhöhen?
table vs. div ist nicht nur wörtlich zu nehmen, sondern mittlerweile auch sinnbildlich. Und jedem der genau diese Floskel gebraucht, ein Verständnis zu HTML abzusprechen, ist sowohl anmaßend als auch überheblich. Denn genau diese Floskel nutzen genügend Autoren, von denen du sicherlich einigen nicht mal das Wasser reichen kannst. Also bitte... immer schön auf dem Teppich bleiben.
-
Hallo,
Wer als Alternative zu
tablenurdivkennt, hat HTML nicht verstanden.Was soll das?
Was das soll? Das darf als Anregung zum Nachdenken verstanden werden.
Ich liebe es Erbsen zu zählen?
Da tue ich auch gern, ist in diesem Fall aber eher nicht der Fall.
Ich bin so toll und muss unbedingt unsachlich beleidigen um mich selbst zu erhöhen?
Wenn hier irgendwo eine unsachliche Beleidigung im Spiel wäre, hätte es kein + gegeben, sondern erst hätte es - gehagelt und dann wäre wohl gelöscht worden.
table vs. div ist nicht nur wörtlich zu nehmen, sondern mittlerweile auch sinnbildlich.
Aha?
Und jedem der genau diese Floskel gebraucht, ein Verständnis zu HTML abzusprechen, ist sowohl anmaßend als auch überheblich. Denn genau diese Floskel nutzen genügend Autoren, von denen du sicherlich einigen nicht mal das Wasser reichen kannst.
Jeder der nur Table oder div benutzt, um Webseiten zu schreiben, hat HTML nicht verinnerlicht. Wer mit Floskeln versucht, seine Unkenntnis zu verschleiern, dem kann ich locker das Wasser reichen. Ich bin zertifiziert Wasserträger!
Gruß
Kalk-
@@Tabellenkalk
Jeder der nur Table oder div benutzt, um Webseiten zu schreiben, hat HTML nicht verinnerlicht.
Ja.
Wer mit Floskeln versucht, seine Unkenntnis zu verschleiern,
Bevor das weiter eskaliert: Henry hat gesagt „war ja nur ein Beispiel“ und dann aber auch eingesehen, dass auch Beispiele einem Anspruch genügen müssen, eben weil sich andere daran ein Beispiel nehmen.
Also einfach mal tief durchatmen – beide.
dem kann ich locker das Wasser reichen. Ich bin zertifiziert Wasserträger!
:-)
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
-
-
-
-
Hallo Henry,
font-family: Arial;Wenn du keine Arial hast, wird doch helvetica angezeigt?
Nein. Wahrscheinlich wird eine Serifenschrift angezeigt. Es fehlt die Angabe einer generischen Schriftfamilie.
Bis demnächst
Matthias--
Rosen sind rot. -
@@Henry
Das nächste Mal: Online-Beispiel, bitte.
Ja, kann ich nachvollziehen und sehe ich grundsätzlich auch so, allerdings hält mich und bestimmt einige andere auch der Verlust der Anonymität davon ab.
Sowohl bei CodePen als auch bei Dabblet kann man auch anonym Beispiele erstellen. Gerade für euch getestet: Pen, Gist.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hej Gunnar,
@@Henry
Das nächste Mal: Online-Beispiel, bitte.
Ja, kann ich nachvollziehen und sehe ich grundsätzlich auch so, allerdings hält mich und bestimmt einige andere auch der Verlust der Anonymität davon ab.
Sowohl bei CodePen als auch bei Dabblet kann man auch anonym Beispiele erstellen.
Wo immer das nicht geht, erstellt man halt einen Account für Regina Schauklug oder Dackel Waldi…
Marc
-
Hallo Gunnar,
Sowohl bei CodePen als auch bei Dabblet kann man auch anonym Beispiele erstellen. Gerade für euch getestet: Pen, Gist.
ja, an so etwas dachte ich. Einziger Wermutstropfen dabei, was wenn dort die vielen Beispiele irgendwann nicht mehr zur Verfügung stehen? Deshalb dachte ich, wäre doch schön, wenn Selfhtml auch so was hätte.
Aber grundsätzlich... solange man einen möglichen Ausfall im Hinterkopf behält und dem entsprechend die Fragen so formuliert, dass sie notfalls auch ohne Beispielcode verständlich bleiben...OK
Werde es also beherzigen und nutzen 😉
Gruss Henry
-
Hallo Henry,
ja, an so etwas dachte ich. Einziger Wermutstropfen dabei, was wenn dort die vielen Beispiele irgendwann nicht mehr zur Verfügung stehen? Deshalb dachte ich, wäre doch schön, wenn Selfhtml auch so was hätte.
Klar wär das schön. Muss aber auch jemand bauen und pflegen. Und da das hier ein allgemeinnütziger Verein ohne Einnahmequelle ist, ist Manpower immer das, was am dringensten fehlt.
LG,
CK-
Hallo Christian,
....Und da das hier ein allgemeinnütziger Verein ohne Einnahmequelle ist....
Interessantes Thema. Das wundert mich schon lange, warum diese, mit Fachleuten gespickte, Community nicht längst ein paar Einnahmequellen generiert hat. Natürlich gibt es die Möglichkeit der Spenden, aber leider ist das nun mal in Deutschland nicht so ergiebig, wie in anderen Ländern. Es ist schon ein Wunder für mich, dass dies im deutschsprachlichen Bereich bei Wikipedia funktioniert.
Klar ist das hier gemeinnützig, dennoch hat fast jeder Verein dieser Art auch die Möglichkeit eine finanzielle Zufriedenheit seiner Mitarbeiter/Helfer zu gewährleisten und somit zu wachsen. Dabei denke ich jetzt nicht an Werbeeinblendungen oder ähnliche Dinge.
Ich möchte das Thema jetzt auch gar nicht ausweiten, nur würde ich gerne mal wissen ob es die Möglichkeit gibt, dieses mal persönlicher zu erörtern. Gibt es irgendwann wieder mal ein SelfHtml-Treffen?
Gruss Henry
-
Aloha ;)
Klar ist das hier gemeinnützig, dennoch hat fast jeder Verein dieser Art auch die Möglichkeit eine finanzielle Zufriedenheit seiner Mitarbeiter/Helfer zu gewährleisten und somit zu wachsen. Dabei denke ich jetzt nicht an Werbeeinblendungen oder ähnliche Dinge.
Unsere Gemeinnützigkeit bedingt, dass wir keine Einnahmen generieren dürfen, die über unsere (zum Glück niedrigen) Ausgaben hinausgehen.
Zusätzlich dazu legt unsere Satzung enge Grenzen fest was die Bezahlung von Mitgliedern angeht. Unsere Satzung wiederum ist Grundlage für die Anerkennung der Gemeinnützigkeit.
Ja, es gibt in gewissen Grenzen Möglichkeiten. Die müssen aber sehr genau abgewogen werden und im Zweifel durch die Mitgliederversammlung beschlossen werden, weil auch gerade die Abgrenzung zwischen Arbeitsleistungen, die bezahlt werden und denen, die nicht bezahlt werden, sehr diffizil ist.
Wir sind egal wie darauf angewiesen, dass das Gros der Arbeitsleistung ehrenamtlich getragen wird. Bei jeder Arbeitsleistung, die durch den Verein bezahlt wird, muss sehr genau abgewogen werden, ob das der ehrenamtlich eingebrachten Arbeitsleistung, auf die wir angewiesen sind, auch gerecht wird. Wenn wir wahllos beginnen, bestimmte Leistungen zu bezahlen und andere nicht kommen auf uns (zurecht!) große Probleme beim Thema Gerechtigkeit zu. Das muss also sehr (!) genau abgewogen werden.
Ich möchte das Thema jetzt auch gar nicht ausweiten, nur würde ich gerne mal wissen ob es die Möglichkeit gibt, dieses mal persönlicher zu erörtern. Gibt es irgendwann wieder mal ein SelfHtml-Treffen?
Die Mitgliederversammlungen des Vereins, zu denen auch immer ein informelles Self-Treffen gehört, finden einmal jährlich statt. Der Termin für 2017 ist noch nicht gesetzt, wird aber wie die letzten Jahre auch wohl an einem Wochenende zwischen September und November stattfinden - der Ort wechselt jährlich. Für Mitglieder können Reisekosten durch den Verein getragen werden. Eine Ankündigung erfolgt rechtzeitig auf allen Kanälen, unter anderem hier im Forum.
Wir freuen uns immer über Teilnehmer an den Selftreffen - und noch mehr über Menschen, die sich gerne als Mitglied im Verein einbringen würden. Anwesenheit an der Mitgliederversammlung genügt, um einen Antrag um Aufnahme zu stellen.
Es wäre schön, dich da zu treffen 😉
Grüße,
RIDER
-
Hallo Henry,
Ich möchte das Thema jetzt auch gar nicht ausweiten, nur würde ich gerne mal wissen ob es die Möglichkeit gibt, dieses mal persönlicher zu erörtern. Gibt es irgendwann wieder mal ein SelfHtml-Treffen?
Ja, auch wenn wir noch keinen Termin ins Auge gefasst haben.
Bis demnächst
Matthias--
Rosen sind rot. -
@@Henry
Gibt es irgendwann wieder mal ein SelfHtml-Treffen?
Ich hab gehört, das nächste wäre in Berlin.
Könnte sich mal jemand in die Spur machen und das organisieren. Oh, wait!
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo Gunnar Bittersmann,
Gibt es irgendwann wieder mal ein SelfHtml-Treffen?
Ich hab gehört, das nächtse wäre in Berlin.
Du hast richtig gehört.
Könnte sich mal jemand in die Spur machen und das organisieren. Oh, wait!
😂
Bis demnächst
Matthias--
Rosen sind rot.
-
-
-
Hallo nochmal,
ja, an so etwas dachte ich. Einziger Wermutstropfen dabei, was wenn dort die vielen Beispiele irgendwann nicht mehr zur Verfügung stehen? Deshalb dachte ich, wäre doch schön, wenn Selfhtml auch so was hätte.
Klar wär das schön. Muss aber auch jemand bauen und pflegen. Und da das hier ein allgemeinnütziger Verein ohne Einnahmequelle ist, ist Manpower immer das, was am dringensten fehlt.
mir ist da gerade etwas eingefallen, wie es simple ohne Manpower zu bewältigen wäre. Es muss ja nicht wirklich ein Editor sein, sondern nur eine Hilfe zum Anschauen, denn wer hier hat schon dauernd Lust Code per copy&paste zu übertragen um Hilfe zu leisten. Aber da viele ja doch den Code posten, warum diesen nicht einfach durch Button ausführbar machen, z.B. per document.write in ein neues Fenster einfügen?
Wäre zwar kein Editor aber dafür schnell erledigt und enorm hilfreich. Noch ein Zusatzgedanke... da Quellcode sehr lang sein kann, diesen optisch kürzen und nur wahlweise per klick komplett anzeigen oder eben anderer Klick und "neue Seite ausführen".
Gruss
Henry
-
-
@@Henry
Einziger Wermutstropfen dabei, was wenn dort die vielen Beispiele irgendwann nicht mehr zur Verfügung stehen?
Das Problem besteht bei sämtlichen Inhalten, die man irgendwo anders veröffentlicht: Artikel auf Medium, Vortragsfolien auf Speakerdeck oder Slideshare, Tweets auf Twitter, Postings auf Facebook, Fotos auf Flickr oder Instagram, …
Deshalb dachte ich, wäre doch schön, wenn Selfhtml auch so was hätte.
… dann bestünde das Problem auch. Wenn SELFHTML dicht macht, sind deine Codebeispiele weg.
Und wenn SELFHTML auch so was entwickeln würde, dann müsste das mindestens genauso gut sein wie CodePen, ansonsten gäbe es ja keinen Grund, es zu benutzen. Das dürfte schwer werden …
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo,
Deshalb dachte ich, wäre doch schön, wenn Selfhtml auch so was hätte.
… dann bestünde das Problem auch. Wenn SELFHTML dicht macht, sind deine Codebeispiele weg.
Nicht das gleiche Problem. Wäre ja egal, weil dann das Forum und Beispiel zusammengehören und wenn das Forum weg wäre, wärs egal mit den Codebeispielen, umgekehrt nicht.
Und wenn SELFHTML auch so was entwickeln würde, dann müsste das mindestens genauso gut sein wie CodePen, ansonsten gäbe es ja keinen Grund, es zu benutzen. Das dürfte schwer werden …
Nein, so simple wie möglich, fände ich sogar besser. Die scriptüberladene CodePen finde ich jetzt sogar schon mühselig auf älteren Rechnern.
Gruss Henry
-
@@Henry
Nein, so simple wie möglich, fände ich sogar besser. Die scriptüberladene CodePen finde ich jetzt sogar schon mühselig auf älteren Rechnern.
Simpel für wen? Für den Browser? Oder für den Nutzer?
Im Zweifel für den Nutzer, würd ich sagen.
Simpel für den Nutzer heißt: Änderungen am Code wirken gleich auf die Anzeige, ohne dass man noch auf „Aktualisieren“ clicken müsste. Eben wie bei CodePen.
(Bei JSfiddle ist das nicht so. Deshalb werde ich ja nicht müde zu betonen, dass ich diese Plattform für HTML/CSS-Beispiele ungeeignet halte.)
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo Gunnar,
(Bei JSfiddle ist das nicht so. Deshalb werde ich ja nicht müde zu betonen, dass ich diese Plattform für HTML/CSS-Beispiele ungeeignet halte.)
Ja, bei JSFiddle kann ich in Ruhe zuende tippen und werde nicht von automagischen Refresh-Algorithmen genervt. Deshalb werde ich nicht müde zu betonen, dass JSFiddle viel besser geeignet ist.
😉
LG,
CK-
Hallo,
Ja, bei JSFiddle kann ich in Ruhe zuende tippen und werde nicht von automagischen Refresh-Algorithmen genervt. Deshalb werde ich nicht müde zu betonen, dass JSFiddle viel besser geeignet ist.
das sehe ich auch so. Auto-Refresh ist nervig. Leider sind Kopfdaten bei JSFiddle aber auch nicht möglich.
@Gunnar Für Browser und Nutzer ;-) Allein die Trackingtools(insbesondere Google, Facebook, etc.) sind auf den meisten Webseiten schon eine lähmende Angelegenheit und dann gerade auf Codepen läuft soviel im Hintergrund ab, dass ich immer froh bin, wieder dort weg zu sein.
Gruss Henry
-
-
-
-
@@Gunnar Bittersmann
Das Problem besteht bei sämtlichen Inhalten, die man irgendwo anders veröffentlicht: Artikel auf Medium
Siehe diesen Thread.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
-
-
Hallo,
kleiner Nachtrag, Dabblet erlaubt nur Bodyauszeichnungen und wäre damit ungeeignet oder mache ich da was falsch?
Gruss Henry
-
Hallo Henry,
Du musst
background: #f06; background: linear-gradient(45deg, #f06, yellow); min-height: 100%;löschen und kannst dann dein eigenes CSS (einschließlich der Selektoren 😉) hinzufügen.
Bis demnächst
Matthias--
Rosen sind rot.-
Hallo Matthias,
hmm, also nur die Styles keine komplette Seite?
wie: https://forum.selfhtml.org/meta/2017/jun/5/selfhtml-wiki-google-fonts/1696083#m1696083
Gruss Henry
-
-
-
-
-
@@Henry
Wie gesagt, nur Test. Wenn du keine Arial hast, wird doch helvetica angezeigt?
Nö, wenn du
font-family: fooangibst und Foo auf einem System nicht verfügbar ist, ist keine Angabe vorhanden, der Browser fällt auf seine Grundeinstellung zurück. Diese dürfte in den meisten Fällen Serifenschrift sein: Times New Roman.Wenn du Helvetica/Arial willst:
font-family: Helvetica Neue, Helvetica, Arial, sans-serifWarum ist helvetica nicht gut geeignet?
“[Rhythm, contrast] – Helvetica hasn’t got any of that.” —Erik Spiekermann, Helvetica documentary clip
Was Helvetica bzw. Arial als Textschrift u.a. nicht so gut lesbar macht, ist die Geschlossenheit der Glyphen. Zum Vergleich das kleine e in Helvetica und Fira Sans:
Viele Nutzer sind aber an Helvetica bzw. Arial gewöhnt, und Lesbarkeit hat auch was mit Gewöhnung zu tun.
Aber man kann sich auch mit Schrift aus der grauen Masse abheben. Und in den letzten Jahren haben mit den C-Schriften ja auch recht gute Schriften Einzug in Microsoft Windows gehalten.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
-
-
