Responsive Gestaltungsprobleme

html.de-Forum HTML, XHTML & CSS
41

Guten Morgen Daniel,
mir scheint, die Erklärung für das übergroße Logo habe ich gefunden:

[CODE=css] img.logo {
max-width: 100%;
height: auto;
object-fit: contain;
}

    @media (max-width: 1920px) {
        img.logo {
            max-width: 576px;
        }
    }

[/CODE]Ist der Viewport breiter als 1920px greift [ICODE]max-width: 100%;[/ICODE] so dass das Logo die volle Breite des Browserfensters einnimmt. Ich konnte das nicht reproduzieren weil
[ol]
[li]mein Monitor nicht so breit ist[/li][li]ich das Logo aus einem Screenshot von dir erzeugt habe, so dass es viel kleiner war[/li][/ol]

42

Hallo,
aha, danke!

Ich habe demnach einfach @media erweitert:
@media (max-width: 3840px) {
img.logo {
max-width: 576px;
}
}

Das scheint (bisher) zu funktionieren.

43

Jetzt fehlt noch die Korrektur der Position der content-box, die ja noch zu tief sitzt.

44

Ja, ich habe leider noch nicht die Zeit gefunden. Wahrscheinlich heute im Laufe des Abends.

45

Ui, toll! Freut mich, dass Du das für mich tun willst. Morgen reicht auch - danke!
Ich habe noch ein Anliegen:

Wenn ich einen Textlink in einem der Content-Boxen einsetze, öffnet er den Link in einem neuen Fenster - so soll es sein. Leider, wenn man mit der Maus über den Textlink zeigt, wird unten angezeigt, wohin der Textlink führt, inklusive der vollständigen Linkstrecke. Kann man das unterbinden? Viellecht könnte man, als zusätzlichen Hover-Effekt, eine Meldung zeigen, wie der Titel-Link lautet (zB. „Google“, ohne Linkstrecke). Also so eine Art Textblase, die nur auftaucht, wenn man mit der Maus auf den Textlink zeigt. Diese Nachricht könnte man auch designen, Text, Box, Border und die Nachricht verschwinden lassen, wenn man mit der Maus den Textlink verlässt?

Also, das seh ich so in meinem Kopfkino des, möglicherweise, zu kleinen Hirns - nun ja.

46

Das ist eine Eigenschaft des Browsers und lässt sich nicht ändern.

47

Oh, danke für die Info.

48

Ich bin jetzt mit den Änderungen fertig. Weil der Code für das Posten sowieso zu groß ist, ebenfalls als Codepen:
https://codepen.io/Sempervivum/pen/gONOKMP

Auf die Berechnungen der Höhen mit Javascript konnte ich weitgehend verzichten, nur nicht bei der Höhe des Content, weil sich diese nicht nach „auto“ animieren lässt. [ICODE]flex-grow[/ICODE] lässt sich jedoch animieren.

Auf das automatische Scrollen habe ich jetzt verzichtet weil durch das Schrumpfen des Headers der Content jetzt sichtbar wird und der Benutzer scrollen kann, falls er nicht vollständig in das Browserfenster passt.

Die Parameter für die Animation von Header und Content habe ich als CSS-Variablen an den Anfang des CSS gestellt, damit man sie nicht mühsam aufsuchen muss.

Dann viel Spaß beim Ausprobieren und einen schönen Abend!

49

Guten Tag,
das sieht sehr gut aus! Ich bin gerade erst wieder hier, schaue mir das jetzt an - dankeschön!

50

Super! Das Logo passt sich jetzt gut an alle Monitorgrößen an! Die content-boxen liegen jetzt genau richtig - klasse! Das Kontaktformular passt sich leider nur von der Größe der content-box an, nicht das Formular selbst. Bei kleinen Monitoren lässt sich das Formular nicht scrollen, so, dass mann das Formular nicht vollständig sehen kann.
Kannst Du bitte erneut schauen? Passiert das jetzt bei allen conttent-boxen, mit langem Inhalt?

51

Das Formular lässt sich nicht scrollen, wohl aber die ganze Seite, jedenfalls mit meiner Testdatei:
[ATTACH alt=„1720523124422.png“]6193[/ATTACH]
Man kann natürlich auch das Formular scrollbar machen, aber wenn man die ganze Seite scrollen kann, hat das Vorteile:
[ul]
[li]Weil der Header nach oben verschwindet, wird in der Höhe das vollständige Browserfenster für die Anzeige des Formulars ausgenutzt.[/li][li]Es ist das Verhalten was am gebräuchlichsten ist und die Benutzer sind daran gewöhnt.[/li][/ul]
Wenn Du jedoch Wert darauf legst, dass der Header immer sichtbar ist, müsste das Formular für sich scrollbar sein.

52

Ich hatte dieses Problem in meinem Browser (Firefox), denn dort sehe ich keinen Scrollbalken, auch hat sich das Formular über die Überschrift gelegt…

53

Dann muss ich das mit Firefox mal testen, anscheinend verhält sich der anders als meiner, Opera.

54

… und auch bei größeren Monitoren lässt sich nicht der gesamte Inhalt einsehen…

55

Hm, ich kann machen was ich will, ich kann immer scrollen. Auch wenn ich die Handy-Simulation im Browser einschalte, sowohl im FF als auch Opera.
Hast Du am Scrollverhalten etwas verändert, [ICODE]overflow: …[/ICODE]?

56

Nein, ist „hidden“ gesetzt.

57

„hidden“ bedeutet, dass Inhalt, der sich außerhalb des Elementes befindet abgeschnitten wird, das würde erklären, was Du beobachtest. Du musst „overflow-y“ auf „scroll“ setzen:

[CODE] /* Allgemeine Stile */
body,
html {
margin: 0;
padding: 0;
font-family: ‚Big Shoulders Display‘, sans-serif;
background-color: #2b2b2b;
color: #FFDC29;
}

    html {
        height: 100%;
        overflow-y: scroll; /* <-- Scrollen einschalten */
        scroll-behavior: smooth;
    }

    body {
        min-height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

[/CODE]So sieht es in meiner Testdatei aus.

58

Gott, ich Dummerle!

Das war die Nadel im CSS-Dschungel! Habs geändert - es funktioniert!!

59

Können wir es jetzt so lassen oder willst Du lieber das Formular für sich scrollbar haben? Wie schon geschrieben, ich sehe Vorteile, wenn die ganze Seite scrollbar ist.

60

Um Gottes Willen… lassen! Du hast doch recht, dass die Seite scrollbar ist. Man… Du bist so gut, so perfekt… Du siehst, wo es hapert, wo der Fehlerteufel steckt… und ich… nun ja… eben ein Dummerle.

Dankeschön, jetzt hast Du mir zum 2. Mal geholfen. Danke!!