Beiträge von Sempervivum

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.

            header {
                grid-area: header;
                position: relative;
            }

            #header-pic {
                width: 100%;
                height: auto;
                vertical-align: top;
            }

            .logo {
                position: absolute;
                left: 10px;
                top: 10px;
            }

            .ueberschrift {
                height: 100%;
                position: absolute;
                top: 0;
                left: 45%;
                transform: translateX(-50%);
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            #logo-pic {
                width: 6em;
                height: auto;
            }

            #headline {
                font-family: 'Josefin Sans', sans-serif;
                font-size: 5em;
            }

            #subline {
                font-family: 'Josefin Sans', sans-serif;
                font-size: 3em;
                margin-left: 1em;
            }

            @media (max-width: 70em) {
                #headline {
                    font-size: 4em;
                }

                #subline {
                    font-size: 2em;
                    margin-left: 50px;
                }
            }

            @media (max-width: 60em) {
                #headline {
                    font-size: 3em;
                }

                #subline {
                    font-size: 1.5em;
                    margin-left: 50px;
                }
            }

        <header>
            <img id="header-pic" src="images/headerbild.png">
            <div class="ueberschrift">
                <div id="headline">Vispra</div>
                <div id="subline"><b>Vis</b>uelle <b>Spra</b>che für alle</div>
            </div>
            <div class="logo">
                <a href="./Home.html"><img id="logo-pic" src="images/logo2.png"></a>
            </div>
        </header>

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:

div.foot {
    display: flex;
}

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:

            .container {
                width: 100%;
                display: grid;
                grid-template-rows: auto auto auto auto;
                grid-template-columns: 15% 70% 15%;
                grid-template-areas:
                    "logo überschrift header-pic"
                    "leer navigator search"
                    "leer inhalt buttons"
                    "footer footer footer"
            }

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/PHP/Tutor…clude_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/CSS/Selek…,_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:

<colgroup>
   <col class="first-col">
   <col class="second-col">
</colgroup>

oder so:

<colgroup>
   <col span="2">
</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.

Mit colgroup definierst Du die Spalten deiner Tabelle vorab. Da die Tabelle zwei Spalten hat und Du kein span definierst, musst Du hier auch zwei Spalten definieren.

Genau anders herum: Mit <th colspan="2">Steckbrief</th> erzeugst Du schon zwei Spallten. Fügst Du noch eine hinzu, sind es drei, d. h. eine zuviel. Du musst die dritte Spalte weg lassen:

<tr>
 <th colspan="2">Steckbrief</th>
</tr>

Oder meinst Du diesen Effekt:

html-seminar.de/woltlab/attachment/2796/

Das kannst Du ganz leicht beheben durch align-items: flex-start;, dann rutscht das Untermenü auch nach oben.

Du kannst das Margin auch auf die erste Stufe der Navigation beschränken:

        ul {
            display: flex;
            list-style-type: disc;
        }

        ul.submenu {
            margin: 2px;
            padding: 2px;
        }

Außerdem hast Du da immer noch floats drin, lösche diese besser. Flex setzt sich zwar durch, aber die floats sind verwirrend.