• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Responsive Gestaltungsprobleme

Dein HTML ist zum Teil veraltet und zum Teil fehlerhaft:
Veraltet: <center> und <font> gibt es nicht mehr, außerdem wendest Du <font> vollkommen falsch an.
Fehlerhaft: Das <font> würde ein schließendes </font> brauchen. Dadurch gerät die ganze Struktur durcheinander.

Das font-Tag benutzt Du anscheinend, um die Schriftfarbe beim Hover zu ändern. Dafür brauchst Du weder Javascript noch das font-Tag sondern Du kannst es mit wenigen Zeilen CSS machen:
Code: 
section a {
    color: #FFDC29;
}
section a:hover {
    color: #ffffff;
}

Was das <center> betrifft: Du möchtest für einzelne Abschnitte die Ausrichtung ändern, links oder zentriert. Das kannst Du entweder mit text-align erreichen oder indem Du Flexlayout einsetzt: Die Elemente mit flex-direction unter einander anordnen und mit align-items die allgemeine Ausrichtung fest legen und dann bei den abweichenden Elementen mit align-self die abweichende.
css-tricks.com

A Complete Guide To Flexbox | CSS-Tricks

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser...
css-tricks.com css-tricks.com
Das ist ein wenig umfangreich, konzentriere dich auf die Stichworte, die ich angeführt habe. Und wenn Du nicht zum Ziel kommst, melde dich wieder.

Noch eine allgemeine Empfehlung, ich weiß nicht ob das schon zur Sprache gekommen ist: Installiere dir Visual Studio Code, dieser Editor zeigt dir gleich beim Editieren Fehler im HTML, CSS und Javascript an, z. B. wenn ein Tag nicht geschlossen wird. Beschleunigt die Arbeit ungemein.

Offtopic: Coole Aktivitäten, die Du da beschreibst, jetzt wird auch der Zusammenhang mit deinem früheren Projekt, dem Audioplayer klar.
 
Oh, danke! Werde mich mal versuchen.

Ja, genau.. für diesen Audioplayer hatte ich Deine erste Hilfe benötigt. Er ist sehr nice geworden!
 
Hallo,
nun ja... ich habe es probiert, nach Deiner Linkempfehlung.

Text wird nun mittig in allen content-boxen angezeigt, allerdings klappt es nicht mit der vollständigen Sichtbarkeit. Die Boxen scheinen eine feste Größe zu haben, so dass nicht der gesamte Text zu sehen ist. Schlimm sieht es nun im Kontaktformular aus .... *seufz*

Offenbar hat sich auch die Position von Logo und Menü leicht nach oben verschoben.... herrjeh..

https://codepen.io/CGNDaniel/pen/NWZPmKo?editors=1000

Nachtrag:
Ich habe unter .content-box die display: flex; entfernt. Nun ist die content-box größer und man kann alles sehen. Leider trifft das nicht auf das Kontaktformular zu. Dort sehe ich nicht alles und ein Scrollen hilft auch nicht, weil die Box noch immer zu klein ist.

Nachtrag 2:
Irgendwie, und ich weiß nicht wie, habe ich es doch hinbekommen, dass man das Kontaktformular vollständig sehen kann. Ich habe angefangen, Content2 "HÖREN" mit Inhalt zu füllen, leider steht der 1. Link "Hörprobe" auf einmal links, die darunter liegenden Videolinks richtig, schön zentriert in der Mitte. Keine Ahnung, was ich da wieder verstellt habe.
"KONTAKT" und "IMPRESSUM" lassen sich plötzlich nicht mehr öffnen. Was habe ich denn nun wieder angestellt? Man kann dabei richtig verzweifeln, ich bekomme Blutdruck:

https://codepen.io/CGNDaniel/pen/NWZPmKo?editors=1000
 
Zuletzt bearbeitet:
Nachtrag:
Ich habe unter .content-box die display: flex; entfernt. Nun ist die content-box größer und man kann alles sehen.
Zum Vergrößern anklicken....
So weit war ich auch heute Nachmittag aber musste dann abbrechen weil ich einen Termin hatte. Irgend wie nicht plausibel, dass das scrollHeight ein falsches Ergebnis liefert, wenn dieser Container display: flex; hat. Müsste man mal bei Stackoverflow zur Diskussion stellen.
 
PS: Der Code, den Du zuletzt in #64 gepostet hast, funktioniert bei mir einwandfrei, alle Menü-Buttons öffnen die Container. Allerdings kann ich unter "Hören" das was Du zuletzt beschreibst ("Hörprobe") nicht finden.
 
Guten Morgen Daniel,
ich habe das Problem jetzt so gelöst, dass ich zunächst die Höhen der content-Elemente auf "auto" gesetzt habe, dann im onload die Höhen mit scrollHeight ermittelt und in data-Attribute eingetragen. Soll ein Container sichtbar gemacht werden, kann ich sie von dort auslesen.
In dem "Über mich" liegt jetzt mal eine nützliche Anwendung für collapsing margins vor. Durch display: flex; wird diese unwirksam und die Abstände zwischen der Absätzen ziemlich groß. Deshalb habe ich die Margins der Absätze umgeändert und nur noch oben einen Abstand definiert.
Zu Demo habe ich, ebenfalls in "Über mich" zwei Absätze eingefügt, einer zentriert und einer rechtsbündig. Das kann man sehr schön mit "align-self" einstellen.
 
Hallo,
vielen Dank, das passt jetzt!

Ein leichtes Unwohlsein besteht noch, ein leichtes.

Das Kontaktformular ruckelt oder wackelt etwas in kleinster Bildschrirmgröße. Bemerkbar wird dies bei der Bestätigung der Datenschutzerklärung, damit das Formular abgesendet werden kann. Wenn man darüber, auf eines der Eingabefelder klickt, verschiebt sich leicht der Text zur Datenschutzerklärung und das angeklickte Eingabefeld scheint etwas zu ruckeln.

Habe ich da wohl beim Einfügen der Inhalte in "Hören" irgendetwas verstellt? Und mir ist aufgefallen, dass in "Hören" der Audioplayer leicht zu hoch gesetzt ist. Eigentlich sollte er so gesetzt werden, dass er etwas tiefer liegt zum Text "Hörproben". So dass der Text auf Höhe des halben Kreises positioniert liegt. Verstehst Du, was ich meine?

https://codepen.io/CGNDaniel/pen/RwzPKyV?editors=1000
 
dass in "Hören" der Audioplayer leicht zu hoch gesetzt ist. Eigentlich sollte er so gesetzt werden, dass er etwas tiefer liegt zum Text "Hörproben". So dass der Text auf Höhe des halben Kreises positioniert liegt.
Zum Vergrößern anklicken....
Das liegt daran, dass das p-Element ein margin-top hat, der Button jedoch nicht. Mache ich das gleiche beim Button, sieht es gut aus. Und einen kleinen Abstand links, damit der Button nicht so am Text klebt.
Code: 
.audio-button {
    width: 25px;
    height: 25px;
    margin: 1em 0 0 0.5em;
}
 
Wenn man darüber, auf eines der Eingabefelder klickt, verschiebt sich leicht der Text zur Datenschutzerklärung und das angeklickte Eingabefeld scheint etwas zu ruckeln.
Zum Vergrößern anklicken....
Das liegt daran, dass sich die Breite der Eingabefelder ändert, wenn sie aktiv werden. Und die Breite des Containers für die Datenschutzerklärung folgt dem. Man kann das beheben, indem man den .inputs_container zwingt, die volle Breite des Formulars einzunehmen:
Code: 
@media (max-width: 650px) {
    .inputs_container {
        margin: 80px;
        width: 100%;
    }
}
 
Ja, so hatte ich es mir vorgestellt! Jetzt ruckelt nichts mehr, oder verschiebt sich! Du bist nicht von dieser Welt! Man versucht zwar selbst im Netz zu recherchieren, das führt dann doch zu komplizierten Erklärungen, die man als Anfänger kaum versteht.

Du siehst keine Probleme, nur Lösungen! Auch wenn es sich manchmal als schwierig erweist - Du bastelst, findest Alternativen! Dankeschön!!

Ich bin nun gespannt, ob es jetzt einfacher wird, weitere Inhalte einfzufügen. Mein Impressum wird noch eine Herausforderung, da man seine eigene Adresse und E-Mail Adresse angeben muss. Wie man dann verhindert, das diese Daten nicht kopiert, bzw. abgefischt werden können, das wird noch spannenend!

Trotzdem, danke, für Deine Unterstützung!!
 
Immer gern!
Eine wichtige Rolle bei der Problemlösung spielt das richtige Werkzeug. In diesem Fall ist es der Seiteninspektor, mit dem man sich ganz leicht ein Bild verschaffen kann über die Größe und Anordnung der Elemente.
 
Den nutze ich auch, gerade wenn man etwas auprobieren, Abstände zu anderen Objekten prüfen möchte. Auch Visual Studio Code habe ich, nur muss ich verstehen, was er da an Fehlern markiert.
 
Hallo Daniel,
Kern der Sache ist hier das bottom: 270px; das rückt den inneren Container nach oben und der obere Teil verschwindet. Außerdem reicht es vollkommen wenn der äußere Container fixed positioniert ist, für den inneren ist das nicht nötig.
Code: 
.cookie-popup {
    /* position: fixed; */
    /* bottom: 270px; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    width: 80%;
    max-width: 600px;
    background-color: #3d3d3d;
    color: #FFDC29;
    padding: 20px;
    border: 2px solid #FFDC29;
    border-radius: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
 
Hallo,
kann die Welt so einfach sein?
Gott, jetzt passt es - danke Dir!

Mir fällt gerade auf, dass im Javascript der Button "reject-cookies" nicht angegeben ist. Stattdessen werden die "Notwendige Cookies akzeptieren" genutzt. Ist dann falsch, weil der Besucher sie ablehnen will.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben