nicht angemeldet
Div-Container
0 
marctrix
0 
Rolf B
Div-Container
Gunnar BittersmannHallo zusammen,
ich habe diesen CSS-Code:
.kopfzeile {
background-color: #FE2E2E;
padding: 10px 10px;
position: fixed;
top: 0;
right: 0;
left: 0;
}
.seite {
background-color: #F3F781;
padding: 0px 50px;
border-right-width: 300px;
border-right-style: solid;
border-right-color: #FFFFFF;
border-left-width: 300px;
border-left-style: solid;
border-left-color: #FFFFFF;
}
zu diesem HTML-Code:
<body>
<div class="kopfzeile" position="fixed">
<div class="l1"></div>
<center><h1><font size="8">HK-Erdung</font></h1></center>
<div class="l2"></div><br></br>
<center>
<table class="tablemenu">
<tr>
<th width="10%"><a href="Startseite.html">Home</a></th>
<th width="10%"><a href="Systeminfo.html">Das System</a></th>
<th width="10%"><a href="Produkte.html">Produkte</a></th>
<th width="10%"><a href="Kontakt.html">Kontakt</a></th>
</tr>
</table>
</center><br></br>
</div>
<div class="seite">
<br></br><br></br><br></br><br></br><br></br><br></br>
<center><h2><u><font size="6">Das System</font></u></h2></center><br>
<h2><u>Inhalt</u></h2>
<ul style="list-style-type:none">
<li><a href="#einsatzgebiet">Einsatzgebiet</a></li>
<li><a href="#das-neue-system">Das neue System</a></li>
<li><a href="#vorteile">Vorteile</a></li>
<li><a href="#ausfuehrungsbeispiel-1">Ausführungsbeispiel 1 <font size="2">(Kabletrommel als Sternpunkt)</font></a></li>
<li><a href="#ausfuehrungsbeispiel-2">Ausführungsbeispiel 2 <font size="2">(Erdungsspieß als Sternpunkt)</font></a></li>
<li><a href="#gebrauchsanweisung"><b>Wichtig! - Gebrauchsanweisung</b></a></li>
<li><a href="#das-alte-system">Das alte System</a></li>
<li><a href="#nachteile">Nachteile des alten Systems</a></li>
<li><a href="#erdungssatz">Der Erdungssatz komplett</a></li>
</ul><br>
und wenn ich die Verlinkungen innerhalb der Seite anklicke, springt er nicht an die richtige Stelle. wie kann ich das fixen ohne das position: fixed; ... weglassen zu müssen?
MfG Simon
-
Hej Simon,
nach dem hier geposteten Code zu urteilen, müsste das Springen funktionieren.
Falls ich nichts übersehe. Sehr unübersichtlich dein Post.
Es gibt aber weitere Probleme. Möchtest du mehr darüber erfahren?
Marc
-
Hallo Simon,
ein ähnliches Problem hatten wir vor einiger Zeit schonmal; ich finde es nur nicht wieder. Das Problem ist, das position:fixed das Element aus dem normalen Layout-Fluss herausnimmt, d.h. dein div.seite beginnt genau wie dein div.kopfzeile am oberen Rand des Body.
Wenn Du nun auf irgendeinen Anker auf der Seite verlinkst, dann wird dieser Anker hinter den Kopf positioniert. Und deswegen scheint die Positionierung falsch. Aber sie ist genau da, wo sie hin muss.
Du kannst das lösen, indem Du dem Zielelement ein Anhängsel verpasst, dass genausoweit nach oben verschoben ist wie der Header hoch ist. Nachteil: Du musst Dich auf eine Headerhöhe festlegen. Aber wenn Deine Ziele alle Überschriften mit ID sind, oder a mit id, kannst Du im CSS sowas tun (angenommen, deine Kopfzeile ist 3em hoch):
a[id]::before { content:"*"; display:block; width: 0; position:relative; top:-3em;Und nun zur üblichen Predigt...
Dein div.kopfzeile möchte eigentlich ein <header> Element sein, dein div.seite ein <main> Element und dass es ein position-Attribut von HTML Elementen gibt (was etwas anderes ist als eine position-Eigenschaft in den Styles), davon habe ich noch nichts gehört.
Weiter: Dein <center> Element möchte ein text-align:center Style an der Überschrift sein, dein Tabellen-Layout für das Menü möchte eine Liste sein und Konstrukte wie diese hier:
<div class="l2"></div><br></br>schreien nach CSS Ersatz (Margin). Sowas legt man nicht ins HTML. Spätestens dann, wenn Du dein Layout von der Mobilansicht auf die Desktopansicht überträgst, fällt Dir das auf die Füße. Achso, du hast mit der Desktopansicht angefangen und bekommst nachher die Mobilansicht nicht hin? Das geht vielen so. Deswegen „mobile first“.Und so weiter und so weiter; das ist eine Lernkurve für "modernes HTML", über die wir alle mussten und müssen.
Rolf
--
sumpsi - posui - clusi-
Hej Rolf,
Wenn Du nun auf irgendeinen Anker auf der Seite verlinkst, dann wird dieser Anker hinter den Kopf positioniert. Und deswegen scheint die Positionierung falsch. Aber sie ist genau da, wo sie hin muss.
Jetzt verstehe ich das Problem erst: das angesprungene Elemente beginnt dort, wo die Navi steht und weil die Navi näher zum Betrachter gestapelt wird, ist der Beginn des Angesprungenen Elementes (in der Regel eine Überschrift) nicht zu sehen?!?
Ja, das ist ein Problem. Habe da jetzt auch keine Lösung für. Man könnte mittels :Target Abstände hinzufügen, aber wie groß sollen die denn sein. Eine Magic number wird wie üblich nicht weiterhelfen…
Marc
-
Hallo marctrix,
die richtige Lösung ist, auf position:fixed zu verzichten und ein Fullscreen-Layout mittels Flexbox zu erzeugen. Bei zusätzlicher vertikaler Gliederung (Holy Grail & Co) natürlich eher so oder mit Grid.
<body> <header>...</header> <main>...</main> <footer>...</footer> </body>body { display:flex; flex-direction:column; margin:0; height: 100vh; } header, footer { flex: 0 0 auto; } main { flex: 1 0 1em; overflow-y:scroll; }Bei diesem Verfahren scrollt nur der main Teil und das Problem ist weg. Wichtig ist nur, dass main eine definite Flexbasis bekommt, sonst funktioniert die 100vh Höhe des Body nicht. Keine Ahnung wieso.
https://jsfiddle.net/f5g1ax6o/1/
Rolf
--
sumpsi - posui - clusi-
Hej Rolf,
die richtige Lösung ist, auf position:fixed zu verzichten und ein Fullscreen-Layout mittels Flexbox zu erzeugen.
[… so] scrollt nur der main Teil und das Problem ist weg.
Weil ich gerade nur am Handy schaue ist jsfiddle o.ä. Ätzend. Daher die Frage: da hat man dann am Main aber doch zwei scrollbalken (den vom browserviewport mitgezählt)?!?
Marc
-
Hallo Marc,
der Body darf kein Margin haben, und (kein Padding oder box-sizing:border-box). Oder du musst es mit calc() herausrechnen. Dann hat nur der Main-Bereich den Scrollbar.
Rolf
--
sumpsi - posui - clusi
-
-
-
-
@@Rolf B
Du kannst das lösen, indem Du dem Zielelement ein Anhängsel verpasst, dass genausoweit nach oben verschoben ist wie der Header hoch ist. Nachteil: Du musst Dich auf eine Headerhöhe festlegen.
Und was passiert, wenn die Inhaltedes Headers mehr Platz brauchen? Vertikales Scrollen des Headerbereichs? Horizontales Scrollen?
Eine feste Höhe anzugeben ist wohl eher ein No-go denn ein Nachteil.
Man kann den Header so hoch werden lassen wie er muss und die vom Header eingenommene Höhe mit JavaScript auslesen und um diesen Betrag (plus etwas Luft) nach unten scrollen.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Hallo Gunnar,
es ist ein Workaround, der keinen Neubau der Seite erfordert. Wenn eine feste Header-Höhe ein No-Go ist, dann trägt der Workaround nicht.
Die bessere Lösung steht hier
Rolf
--
sumpsi - posui - clusi-
@@Rolf B
es ist ein Workaround, der keinen Neubau der Seite erfordert. Wenn eine feste Header-Höhe ein No-Go ist, dann trägt der Workaround nicht.
Der Workaround mit JavaScript aber.
Die bessere Lösung steht hier
Ja, sicher.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
-