nicht angemeldet
Matthias Scharwies
Gunnar Bittersmann
Gunnar Bittersmann
Rolf B
Gunnar Bittersmann
Gunnar Bittersmann
Hallo Leute,
ich bastele mir wieder eine Homepage und merke, wie eingeschränkt meine Kenntnisse zum responsiven Design sind.
Folgender Code:
<div style="opacity: 0.7;margin-top:5%;background-color:grey;width:100%;">
funktioniert wie erwartet, nur auf meinem kleinen Smartphone müsste man bei "margin-top" anstelle von 5% 10% angeben. Gibt es eine einfache Möglichkeit das umzusetzen, vielleicht auch ohne Javascript?
Danke und viele Grüße!
Servus!
Hallo Leute,
ich bastele mir wieder eine Homepage und merke, wie eingeschränkt meine Kenntnisse zum responsiven Design sind.
Folgender Code:
<div style="opacity: 0.7;margin-top:5%;background-color:grey;width:100%;">funktioniert wie erwartet, nur auf meinem kleinen Smartphone müsste man bei "margin-top" anstelle von 5% 10% angeben. Gibt es eine einfache Möglichkeit das umzusetzen, vielleicht auch ohne Javascript?
Ja, natürlich!
Optimalerweise packst Du die Stilangaben in ein style-Element. Dort kannst du dann eine media query integrieren.
div {
opacity: 0.7;
margin-top: 10%;
background-color:grey;
width:100%; /* ist bei div-Elementen sowieso 100% */
}
@media (min-width: 30em) {
div {
margin-top: 5%;
}
}
Herzliche Grüße
Matthias Scharwies
Hallo,
besten Dank, das war genau der richtige Hinweis :)
Gruß Hans
@@Hans
besten Dank, das war genau der richtige Hinweis :)
Nein.
(Kann man hier eigentlich auch halbe Minuspunkte vergeben? 🤔)
🖖 Живіть довго і процвітайте
@@Matthias Scharwies
Optimalerweise packst Du die Stilangaben in ein style-Element. Dort kannst du dann eine media query integrieren.
Es ist womöglich gar nicht die beste Idee, eine media query zu integrieren.
Man will einen Mindestwert für den Abstand angeben, d.h. der Abstand soll 5% sein, aber bspw. 2rem nicht unterschreiten:
div { margin-top: max(5%, 2rem) }
Einfacherer, besser wartbarer Code.
Und der würde auch als Inline-Style gehen. Was nicht heißen soll, dass man das tun sollte.
🖖 Живіть довго і процвітайте
danke auch dafür. Was sind dem "rem"?
achso, ich vermute mal, dass das nicht funktionieren wird:
Es gibt eine Navigationsleiste mit mehreren Links, die nur auf mobilen Endgeräten umgebrochen wird. Wenn das passiert, lässt sich der oberste Text in dem Div nicht mehr lesen. Gibt es nicht eine "margin-top"-Angabe, die sich nur relativ auf das nächste Element darüber bezieht und nicht auf den Seitenanfang? Hatte mal mit dem "z-index" herumprobiert, jedoch ohne Erfolg. Das wäre vermutlich das Einfachste.
@@Hans
Es gibt eine Navigationsleiste mit mehreren Links …
Link zur fraglichen Seite?
🖖 Живіть довго і процвітайте
Hi, habe den Link oben gepostet.
Hallo Hans,
hm, das ist ein sticky header der ggf. umbricht - da hilft nur JavaScript. Oder eine Restrukturierung der Seite in ein 100% Grid, d.h. den Body auf 100vh Höhe setzen (margins entfernen) und als Grid unterteilen. Bleistiftsweise so:
body {
margin: 0;
height: 100vh;
display: grid;
grid-template-columns: auto 1fr auto;
}
header {
font-size: 1.5rem;
grid-row: 1 / 2;
}
main {
grid-row: 2 / 3;
background-color: #808080b2; // Grey mit 70% Transparenz
overflow-y: scroll;
}
footer {
grid-row: 3 / 4;
border-top: medium solid #666;
padding-bottom: 1em;
}
mit diesem Markup:
<body>
<header>Dein Menübereich</header>
<main>Dein Inhalt</main>
<footer>Dein Footer</footer>
</body>
Header und Footer sind damit ständig sichtbar und nur der main-Bereich scrollt vertikal.
Außenabstände macht man mit Margin, Innenabstände mit Padding. Niemals mit <br> - das ist nur sinnvoll, wenn man gezielt Zeilenumbrüche im Fließtext braucht und mit <p> Elementen, ggf. <span> Elementen sowie der CSS Eigenschaft white-space nicht hinkommt. Also selten bis nie.
Rolf
@@Hans
Hi, habe den Link oben gepostet.
Da kommen wir der Sache schon näher. Du willst verhindern, das der Anfang des Hauptinhalts unter den fixen Header rutscht (beim Laden der Seite).
margin-top in % ist dazu der völlig falsche Weg. Du weißt nicht, in welchem Verhältnis die Headerhöhe zur Viewporthöhe steht.
Und du weißt auch nicht, bei welcher Vieportbreite das Menü im Header zweizeilig wird. (Du weißt es auf deinem System; aber nicht, wie es bei anderen ist, wo möglicherweise der Text in einer anderen Schriftart/-größe dargestellt wird.) Deshalb ist auch media query hier der völlig falsche Weg.
Die gute Nachricht aber ist: Du brauchst (fürs erste) gar kein margin-top, um der Anfang des Hauptinhalts nicht unter den fixen Header rutschen zu lassen. Setze den Header nicht auf position: fixed, sondern auf position: sticky – fertig …
… fast. Wenn ein Link auf Seitenabschnitt angesprungen wird, soll dessen Anfang (dessen Überschrift) auch nicht unter den Header rutschen – wie in diesem Beispiel.
Und dann muss man doch die (unbekannte) Höhe des Headers verwenden und der CSS-Eigenschaft scroll-padding-top zuweisen. Um nicht direkt mit JavaScript im CSS rumzupfuschen per custom property:
html { scroll-padding-top: var(--header-height) }
Die Ermittlung der aktuellen(!) Headerhöhe per ResizeObserver und Übergabe an die custom property wie unlängst gezeigt:
const resizeObserver = new ResizeObserver(entries => {
document.documentElement.style.setProperty(
'--header-height', `${entries[0].target.offsetHeight}px`
);
});
resizeObserver.observe(document.querySelector('.w3-top'));
wie in diesem Beispiel.
Bei dir ist .w3-top das zu überwachende Element. Das sollte aber kein div, sondern ein header sein, vermutlich mit nav drin (oder gleich nav ohne header.
Das andere div wäre gern ein main-Element, siehe Seitenstrukturierung.
Eine andere Möglichkeit wäre, gar nicht den ganzen Viewport scrollen zu lassen, sondern nur den Hauptbereich, so wie hier.
🖖 Живіть довго і процвітайте
Hallo Gunnar und Rolf,
danke für die ausführlichen Tipps. Ich probiere das aus und melde mich nochmal.
Schöne Ostern!
@@Hans
Hallo Gunnar und Rolf,
danke für die ausführlichen Tipps. Ich probiere das aus und melde mich nochmal.
Wobei das von Rolf Gesagte dem entspricht, was ich zuletzt unterm Strich sagte. Dass er das mit Grid gemacht hat und ich im verlinkten Codepen mit Flexbox, ist in diesem Fall eine Nebensächlichkeit. (Ich müsste sehr lange nachdenken, ob eins davon in diesem Fall besser geeignet wäre als das andere. Zunächst fällt mir nur ein: beides gleichwertig.)
🖖 Живіть довго і процвітайте
Hallo Leute,
die Änderung auf "sticky" war der richtige Hinweis. Ich bin begeistert. So einfach! Habe wieder Lust, mich mit der Materie zu beschäftigen :)
Danke und Beste Grüße! Hans
achso, eine Sache noch:
Kann ich nicht das "Ankerproblem" elegant vermeiden, in dem ich den Ankerpunkt einfach etwas höher setze? Dann würde die Überschrift elegant an die richtige Stelle gleiten.-
Gruß Hans
@@Hans
Kann ich nicht das "Ankerproblem" elegant vermeiden, in dem ich den Ankerpunkt einfach etwas höher setze?
Genau das tut ja die CSS-Eigenschaft scroll-padding-top.
Das Problem dabei ist, dass du nicht wissen kannst, wieviel „etwas“ ist. Das ist von Gegebenheiten beim Nutzer wie verwendete Schriftart und -größe (die du nicht wissen kannst) abhängig und kann sich auch noch dynamisch ändern (z.B. bei Änderung der Viewportgröße ). Deshalb das JavaScript, das ermittelt, wie groß „etwas“ denn nun aktuell ist.
🖖 Живіть довго і процвітайте
@@Hans
Was sind dem "rem"?
root em.
Siehe MDN
🖖 Живіть довго і процвітайте