nicht angemeldet
MudGuard
Gunnar Bittersmann
MudGuard
basti1012
Matthias Apsel
Gunnar Bittersmann
marctrix
Robert B.
Hallo,
seit vielen Jahren habe ich eine Homepage, die den einzigen Zweck hat, verschiedene kleine Programme von mir zum Download anzubieten. Anlässlich der neuen Situation mit der Datenschutzerklärung habe ich mich entschlossen, die ganze Homepage neu zu gestalten. War eigentlich ein Klacks und im Wesentlichen funktioniert alles so, wie ich es mir vorgestellt habe, bis auf einen kleinen "Schönheitsfehler".
Von den sieben Auswahlmöglichkeiten mit je einer eigenen Seite verhalten sich, was die Breite der Anzeige betrifft nicht alle gleich. Ausgehend von der Startseite haben noch zwei andere die selbe Breite bzw. Anzeigeposition. Bei den anderen vier wird die gesamte Anzeige, also der links befindliche Block mit den Schaltflächen und der rechte Informationsteil, um etwa einen halben Zentimeter nach links verschoben.
Alle sieben Seiten haben einen identischen Aufbau und unterscheiden sich eigentlich nur, was den Infobereich betrifft. Ich habe daher für eine der vier "Problemseiten" den gesamten Inhalt des Infobereichs herausgenommen und siehe da, sie verhielt sich so wie die Startseite. Dann fing ich an, Bereich für Bereich eine "Problemseite" in der "Testseite" zu übernehmen, in der Hoffnung, damit die Ursache des Problems zu finden.
Was dann aber kam, überraschte mich dann doch schon sehr. Wenn der Inhalt eines Absatzes um ein Zeichen größer wurde, trat das Problem auf. Entfernte ich ein Zeichen, war es wieder da. Hier der gesamte main-Block:
<main><article>
<br />
<h1>Kodelas Str8ts</h1>
<p> Hier sehen Sie die Hauptseite von KODELAs Sudoku. </p>
<figure><img src="img/sudoku_5.png" alt="Sudoku-Anwendung" height="628" hspace="10" vspace="5" width="836" /></figure>
<h3>Kurzbeschreibung</h3>
<p><b>KODELAs Sudoku</b> ab der Version 5 ist eine Weiterentwicklung meiner Sudoku-Excel-Anwendung.
Es ist nun ein eigenständiges Programm, geschrieben in Java und damit plattformunabhängig.
Es kann natürlich Sudokus lösen, bietet aber darüber hinaus noch eine Me
</p>
<br />
</article></main>
Wenn ich im letzten Absatz an das angefangene Wort "Menge" noch ein "n" hinzufüge, tritt das Problem auf. Lasse ich "Men" stehen, muss ich an anderer Stelle 10 Zeichen entfernen, bis das Problem nicht mehr auftritt.
Was ist hier los? Ich würde mich freuen, wenn mir jemand helfen könnte. sollten weitere Informationen nötig sein, liefere is sie natürlich.
MfG, kodela
PS: Da ich bei der Beitragserstellung die URL meiner Hompage angegeben habe, sie jetzt aber nirgend wo sehe, ist sie hier im Nachtrag: kodela.w4f.eu
Hi,
Ausgehend von der Startseite haben noch zwei andere die selbe Breite bzw. Anzeigeposition. Bei den anderen vier wird die gesamte Anzeige, also der links befindliche Block mit den Schaltflächen und der rechte Informationsteil, um etwa einen halben Zentimeter nach links verschoben.
Meinst Du etwa: wenn ein vertikaler Scrollbar nötig ist, verschiebt sich der Inhalt aufgrund seiner Zentrierung um die halbe Scrollbarbreite nach links.
Kann aber eigentlich nicht sein, denn das ist normal und kein Problem.
cu,
Andreas a/k/a MudGuard
Hallo Andreas,
Asche auf mein Haupt!
Danke, das war es. Bei meiner vorhergehenden Hompage war der Scrollbalken von Anfang an vorhanden und deshalb habe ich wohl keine Sekunde an diesen gedacht. Sollte nicht passieren, ist es aber.
MfG, kodela
@@MudGuard
Meinst Du etwa: wenn ein vertikaler Scrollbar nötig ist, verschiebt sich der Inhalt aufgrund seiner Zentrierung um die halbe Scrollbarbreite nach links.
Kann aber eigentlich nicht sein, denn das ist normal und kein Problem.
Aber schön ist es auch nicht. Und es ist nicht so, dass man dagegen nichts machen könnte.
Wenn man für Bereiche wie bspw. Header und Footer farbigen Hintergrund über die volle Seitenbreite haben möchte, geht die Zentrierung mit body { max-width: 42rem; margin: auto } nicht. Also mit Santa hat selector zentriert:
body > *
{
padding: 1rem;
}
@media (min-width: 44em)
{
body > *
{
padding-left: calc((100vw - 42rem)/2);
padding-right: calc((100vw - 42rem)/2);
}
}
(Die rot hervorgehobenen Klammern sind nicht mein Fehler, sondern der des kaputten Syntax-Highlighters.)
Die Regeln gehen davon aus, dass als Kinder von body nur Strukturelemente wie <header>, <main> und <footer> vorkommen. Man könnte statt body > * natürlich auch header, main, footer selektieren.
Der Breakpoint 44em im Media-Query ist die Summe aus der maximalen Breite 42rem und dem Padding links und rechts jeweils 1rem. Wenn man maximale Breite/Padding ändert, muss man das an mehreren Stellen anpassen – unschön. (Bei Verwendung eines CSS-Präprozessors wird man Variablen verwenden und den Breakpoint daraus berechnen.)
Damit der Seitennhalt nun mit und ohne Scrollbar horizontal gleich plaziert ist, zieht man rechts beim Padding die Breite der Scrollbar ab. Dazu fügt man als progressive enhancement im Media-Query noch eine Deklaration hinzu:
@media (min-width: 44em)
{
body > *
{
padding-left: calc((100vw - 42rem)/2);
padding-right: calc((100vw - 42rem)/2);
padding-right: calc((100vw - 40rem)/2 - var(--scrollbar-width, 0px));
}
}
Die Breite der Scrollbar – d.h. den Wert der custom property – berechnet man mit einer JavaScript-Funktion (eine CSS-Lösung wollte mir nicht einfallen)
function adjustCenteredContent()
{
document.documentElement.style.setProperty(
'--scrollbar-width',
`${window.innerWidth - document.documentElement.clientWidth}px`
);
}
die man initial aufruft, bei Änderungen der Viewportgröße und ggfs. auch bei dynamischem Hinzufügen/Entfernen von Seiteninhalten.
Was noch zu tun ist: Den ES6-Code mit Template-Strings durch feature detection in alten Browsern nicht laden, damit kein JS-Fehler auftritt. Da diese Browser mit custom properties nichts anfangen können, brauchen sie den Code sowieso nicht.
Man könnte sicherlich auch (window.innerWidth - document.documentElement.clientWidth) + 'px' schreiben und den Wert nicht per custom property an CSS übergeben, sondern das Padding gleich mit JavaScript jeweils für document.querySelector('body > header'), document.querySelector('body > main') und document.querySelector('body > footer') setzen; das wäre aber Aufwand und in Zukunft wartungsintensiv. Hey, progressive enhancement!
LLAP 🖖
Hi,
Kann aber eigentlich nicht sein, denn das ist normal und kein Problem.
Aber schön ist es auch nicht. Und es ist nicht so, dass man dagegen nichts machen könnte.
statt Deines Codes mit Javascript plus CSS:
wäre ein overflow-y: scroll; am body nicht die einfachere Variante?
cu,
Andreas a/k/a MudGuard
@@MudGuard
wäre ein
overflow-y: scroll;am body nicht die einfachere Variante?
Ein zu nichts gutes UI-Element möchte man nicht haben.
LLAP 🖖
Danke für Eure interessanten Hinweise, mit denen ich aber im Augenblick überfordert bin. Wenn ich etwas mehr Luft habe, werde ich mich aber damit befassen, denn ehrlich gesagt, dieses "Geruckle" wenn die Scrollleiste eingeblendet werden muss, stört mich scchon ein wenig.
Gruß, kodela
Was soll das den für ein Problem sein ? Ich kann da jetzt keins sehen. Vieleicht solltest du das mal posten mit den Problem und den Fehler vorher nicht wegmachen. Man kann jetzt nur raten was für ein Fehler das wahr.
Hallo Basti,
wie aus meinen anderen Antworten zu ersehen, saß mein Problem vor dem Computer. Auch Dir danke für Deine Antwort.
MfG, kodela
Hallo kodela,
Da ich bei der Beitragserstellung die URL meiner Hompage angegeben habe, sie jetzt aber nirgend wo sehe, ist sie hier im Nachtrag: kodela.w4f.eu
„Problematische Seite“ sollte eine Seite zeigen, auf der das Problem …
Wenn ich im letzten Absatz an das angefangene Wort "Menge" noch ein "n" hinzufüge, tritt das Problem auf. Lasse ich "Men" stehen, muss ich an anderer Stelle 10 Zeichen entfernen, bis das Problem nicht mehr auftritt.
… auftritt.
Der Link neben deinem Nicknamen führt auf die von dir angegebene Homepage. In deinem Fall sind beide Seiten identisch. Und auch auf http://kodela.w4f.eu/sudoku.html kann ich das beschriebene Problem nicht nachvollziehen.
Bis demnächst
Matthias
@@Matthias Apsel
Da ich bei der Beitragserstellung die URL meiner Hompage angegeben habe, sie jetzt aber nirgend wo sehe, ist sie hier im Nachtrag: kodela.w4f.eu
„Problematische Seite“ sollte eine Seite zeigen, auf der das Problem …
Die Verlinkung habe ich gemacht, ebenso den Eintrag als problematische Seite.
Und auch die Formatierung des Codeblocks. (War Inline-Code.)
Warum schaffen die Leute das immer wieder, Code falsch zu formatieren? Die Logik in der Forumsoftware ist wohl noch nicht ausgefeilt genug.
LLAP 🖖
Hallo Mathias,
danke für Deine ordnende Hand. Ich habe hier erstmals Hilfe gesucht und bin mit den Besonderheiten dieses Forums noch nicht so recht vertraut. Der Code war formatiert, wurde dann aber vom Editor gepackt. Das gefiel mir zwar nicht, aber ich wehrte mich auch nicht dagegen. Jetzt bin ich aber schlauer.
MfG, kodela
Hej kodela,
danke für Deine ordnende Hand. Ich habe hier erstmals Hilfe gesucht und bin mit den Besonderheiten dieses Forums noch nicht so recht vertraut. Der Code war formatiert, wurde dann aber vom Editor gepackt. Das gefiel mir zwar nicht, aber ich wehrte mich auch nicht dagegen. Jetzt bin ich aber schlauer.
Ich habe @Gunnar Bittersmann so verstanden, dass wir an der GUI arbeiten müssen, damit sie intuitiver wird.
Wenn etwas nicht klappt wie gewünscht, ist nicht der Benutzer schuld (jedenfalls normalerweise).
In diesem Sinne: herzlich willkommen, @kodela!
Marc
hallo
Bei unerklärlichem Verhalten lohnt sich manchmal auch das:
https://validator.w3.org/nu/?doc=http%3A%2F%2Fkodela.w4f.eu%2Fsudoku.html
Hallo beatovich,
danke für diesen Hinweis. Die von Dir verlinkte Seite ist mir bekannt und wurde von mir auch schon genutzt.
Gruß, kodela
Hallo kodela,
apropos „Schönheitsfehler:
<main><article> <br /> <h1>Kodelas Str8ts</h1> <p> Hier sehen Sie die Hauptseite von KODELAs Sudoku. </p> <figure><img src="img/sudoku_5.png" alt="Sudoku-Anwendung" height="628" hspace="10" vspace="5" width="836" /></figure> <h3>Kurzbeschreibung</h3> <p><b>KODELAs Sudoku</b> ab der Version 5 ist eine Weiterentwicklung meiner Sudoku-Excel-Anwendung. Es ist nun ein eigenständiges Programm, geschrieben in Java und damit plattformunabhängig. Es kann natürlich Sudokus lösen, bietet aber darüber hinaus noch eine Me </p> <br /> </article></main>
<br/> dort? Sollte das nicht eher mit margin gelöst werden?h3 auf h1?Viele Grüße
Robert
Hallo Robert,
danke für Deine berechtigten Fragen, die ja eigentlich "Nasenstupser" sind. Ich bin aber sehr froh, dass solche Denkanstöße kommen, denn ich weiß, dass bei mir die Hompage ein Schattendasein führt und ziemlich vernachlässigt wird, ist ja nur das Mittel zum Zweck. Ich habe mich in der Vergangenheit nur so viel um die Hompage gekümmert, wie es unbedingt sein musste. Na ja, und da war es eben einfacher, zumindest vertikale Abstände über br-Tags zu realisieren.
Das mit den Überschriften ist auch so eine Sache, wie man es sicher nicht machen sollte. Ich habe h2 für eine Überschrift mit den selben Eigenschaften wie h1 verwendet, nur in Rot.
Ich werde Deine Anregungen auf jeden Fall nutzen und sage noch einmal danke dafür.
Aus LL grüßt Dich kodela