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:

    HTML
    1. <ul class=vertical">
    2. <li><a href="#erste" onclick="showHorizontal('erste')">first</a></li>
    3. <li><a href="#zweite" onclick="showHorizontal('zweite')">second</a></li>
    4. <li><a href="#dritte" onclick="showHorizontal('dritte')">third</a></li>
    5. </ul>
    JavaScript
    1. const horizontals = document.querySelectorAll('.horizontal');
    2. function showHorizontal(id) {
    3. horizontals.forEach(item => {
    4. if (item.id == id) {
    5. item.style.display = 'block';
    6. } else {
    7. item.style.display = 'none';
    8. }
    9. });
    10. }

    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.

    Code
    1. <header>
    2. <img id="header-pic" src="images/headerbild.png">
    3. <div class="ueberschrift">
    4. <div id="headline">Vispra</div>
    5. <div id="subline"><b>Vis</b>uelle <b>Spra</b>che für alle</div>
    6. </div>
    7. <div class="logo">
    8. <a href="./Home.html"><img id="logo-pic" src="images/logo2.png"></a>
    9. </div>
    10. </header>

    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.

    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.

    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.

    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 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:

    Code
    1. <colgroup>
    2. <col class="first-col">
    3. <col class="second-col">
    4. </colgroup>

    oder so:

    Code
    1. <colgroup>
    2. <col span="2">
    3. </colgroup>

    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.