Beiträge von Sempervivum

Normaler Weise müsste es so funktionieren, wie webkriecher es angegeben hat. Keine Ahnung, warum der Reader es nicht anzeigt.

AFAIK ist ein Semikolon hinter dem inline-block nicht zwingend erforderlich, aber zur Sicherheit versuche es dennoch damit:

<span style="background-color: rgb(219, 218, 211); display: inline-block;">

Ich finde da Validatoren für ePub, z. B. hier:

https://www.ebookit.com/tools/bp/Bo/eBookIt/epub-validator

Versuche mal, ob das Ergebnis dir weiter hilft.

Oder gibt es bei dem Reader irgend welche Diagnosemöglichkeiten so wie die Entwicklerwerkzeuge im Browser?

Zitat

Warum um Himmels Willen rutscht die jetzt mit nach unten, die befindet sich ja außerhalb des DIV.

Das ist eines der Mysterien von CSS und läuft unter dem Begriff "collapsing margins" bzw. "zusammenfallende Außenabstände", hier wird es erklärt:
https://developer.mozilla.org/de/docs/Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern

Setze ich jetzt das margin-top für das div.banner auf 0 so verschwindet der obere Abstand aber dann wird sich das Problem stellen, dass dieses div.banner unter die Nav rutscht. Normaler Weise könnte man das leicht lösen, indem man die Nav auf position:sticky setzt aber hier macht einem Bootstrap einen Strich durch die Rechnung weil die Klasse zwar "sticky" heißt aber position:fixed gesetzt wird, wahrscheinlich aus Gründen der Kompatibilität mit alten Browsern. Ein Grund mehr, warum ich kein Freund von Bootstrap bin.

Ich sehe da ein generelles Problem: Du hast die Breite des Textcontainers auf 66.66% eingestellt und die des Bildes auf 33.33%. Wenn man das Bild jetzt so einrichtet, dass es im Container bleibt und sich nicht nach rechts ausdehnt, wird es relativ klein und der Textcontainer ist viel höher. Ich habe das mal im HTML-Inspektor demonstriert:

div-img-width.png

Macht man das Bild größer, z. B. 50% 50% für die beiden Container, wird es nicht besser, denn dann haben die Texte weniger Platz und nehmen noch mehr Höhe in Anspruch - die Katze beißt sich in den Schwanz. Auch wenn man die Abstände, die Du mit <br> eingestellt hast, verkleinern würde, würde es nicht viel besser.

Immerhin positiv, dass Du in Eigeninitiative eine Lösung gefunden hast

Allerdings ist dieses Verfahren nicht besonders elegant und vor allem nicht änderungsfreundlich, denn jedes Mal, wenn Du im horizontalen Menü etwas hinzu fügst, musst Du auch eine weitere Funktion hinzu fügen und die vorhandenen ändern.

Besser nur eine Funktion verwenden und die Menüpunkte in einer Schleife abarbeiten:

So brauchst Du nur das HTML zu ändern, das Javascript ist universell.

Ich habe mir noch deinen Header und die Screenshots in Posting #6 angesehen und eine Lösung ausgearbeitet, die mit absoluter Positionierung arbeitet. Etwas, wovon man i. allg. abrät, weil es häufig die Ursache von Problem ist. Der Grund ist, dass es dann einfach ist, das Seitenverhältnis des Bildes beim Skalieren beizubehalten.

Den Container .ueberschrift habe ich auf die volle Höhe gesetzt und die Texte mit Flex vertikal mittig ausgerichtet. Dann mit zwei Mediaqueries die Schriftgröße angepasst, so dass die Text immer gut hinein passen.

Zitat

kann ich statt hover muss ich dann JavaScript touch nehmen, richtig?

Ja, mit Javascript eine Klasse, z. B. "visi" toggeln und auf Grund dieser Klasse dann im CSS das Menü sichtbar machen.

Du öffnest das Menü durch hover, das gibt es auf einem Smartphone nicht. Viele Browserhersteller haben jedoch einen Workaround gemacht, in dem Sinne, dass die hover-Aktion durch Touch ausgelöst wird, deshalb funktioniert es im Chrome. Aber es spricht dann einiges dafür, dass das beim Safari nicht der Fall ist. Du wirst dann das Menü durch Javascript öffnen müssen.

Leider besitze ich kein iPhone und leider beschreibst Du nicht, was genau dort das Problem ist.

Es könnte sein, dass das kein Problem vom Safari ist sondern einfach der Darstellung auf einem schmalen Bildschirm.

Generell kann es eine Quelle von Problemen sein, wenn mit float gearbeitet wird statt mit Flex oder Grid.

... und die drei Blöcke im Impressum kannst Du ganz leicht nebeneinander anordnen, indem Du dem umgebenden Container ein display: flex; gibst:

Zitat

Wie kann ich texte z.B. Adresse in Footer nebeneinander schreiben ohne zusätzlich Spalten zu machen?

Da warst Du mit template-areas schon auf einem guten Wege: Du kannst Spalten verbinden, indem Du dort mehrmals die selbe Area angibst:

Dann erstreckt sich der Footer über die ganze Breite.

PS: Aber ohne das HTML tappt man da immer noch weitgehend im Dunkeln.

Oh, auch ohne das HTML sieht man schon, dass da einiges durcheinander geht:

Du verwendest float und grid gemischt, verzichte auf float und versuche, das Layout konsequent mit grid umzusetzen.

Das war jetzt wiederum ein bisschen sehr wenig Code. Poste doch wenigstens die Container, die Inhalte kannst Du ja weg lassen.

Ja, ohne Code wird man deine Frage nicht beantworten können. Versuche, diesen auf das wesentliche zu reduzieren, z. B. wenn es viele Zeilen sind, dann nur wenige posten, die das Problem genau so zeigen. Oder hast Du die Seite online? Dann poste die URL.

Jetzt haben sich unsere Postings gekreuzt. In dem Fall geht es also nicht mit "order" und ich würde die zweite Lösung empfehlen, die ist dann auch flexibler, wenn Du später die Seite erweitern willst. Näheres dazu hier:

https://wiki.selfhtml.org/wiki…ien_mit_include_nachladen

Das kannst Du dann sehr leicht erreichen, wenn Du deine Anordnung auf Flexlayout umstellst. Dann kannst Du über "order" die Reihenfolge der Elemente ganz einfach umschalten. Informiere dich z. B. hier:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Und das Triggern der Umschaltung kannst Du über die Pseudoklasse :focus machen:

https://wiki.selfhtml.org/wiki…asse/hover,_active,_focus

aber nur, wenn Du eine Einschränkung in Kauf nimmst: Sobald man wieder irgend wo anders auf der Seite klickt, stellt sich wieder der alte Zustand ein.

Eine ganz andere Lösung wäre, die einzelnen Bestandteile der Seite in einzelne Dateien auszulagern und mit PHP-include einzubinden. Dann hättest Du zwei Seiten, aber für die einzelnen Inhalte jeweils nur eine Datei, die Du ändern müsstest.

Mal sehen, ob ich das richtig verstehe: Die News, die man jetzt rechts sieht, sind nur ein kleiner Ausschnitt und Du möchtest, wenn man in der Nav auf "Alle News" klickt, die vollständigen, ausführlichen News in der Mitte anzeigen? Wobei sich der Rest der Seite nicht ändert? Oder möchtest Du nur einfach Mitte und rechts vertauschen beim Klick auf "News"?

Da es sich um nur drei Registrierungsformulare handelt, könntest Du sie auch gleich alle im HTML anlegen, zunächst unsichtbar machen und dann, wenn der Benutzer die Schulform auswählt, das passende sichtbar machen.

Da hat er wieder genau Recht: Oben im colgroup-Tag hast Du 2 Spalten definiert aber diese beiden Zeilen haben jeweils nur eine. Also entweder jeweils eine weitere Spalte hinzu fügen oder mit colspan dafür sorgen, dass das ein <td> 2 Spalten belegt. Oder Submit und Reset in einer Zeile zusammen fassen.

Nein, so sind es wieder drei Spalten. Entweder so:

oder so:

Beide Male definierst Du zwei Spalten.

BTW: Was verwendest Du überhaupt für einen Doctype? Selfhtml schreibt:

Zitat

Sowohl absolute also auch relative Breitenangaben durch width-Attribute sind in HTML5 nicht mehr möglich. Verwenden Sie entsprechende CSS-Eigenschaften.

Ebenso würde ich erwarten, dass der Validator das <i>-Tag beanstandet.