tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/15835-verwendung-header-navigation-berdeckt-ankersprungzielRockSolid Themes: Discussion 2021-06-16T14:22:34Ztag:help.rocksolidthemes.com,2012-07-23:Comment/398216522016-05-08T12:09:54Z2016-05-08T12:09:54ZVerwendung: Header Navigation überdeckt Ankersprungziel<div><p>Produkt: Tao Contao<br>
Contao-Version: 3.5.12<br>
Browser und Browserversionen: FF 46x</p>
<p>Wenn man z. B. einem Textelement eine CSS-ID gibt, kann man die
als Sprungziel eines Ankers verwenden. Nur leider wird durch die
Headernavigation bereits der oberste Teil des Sprungziels verdeckt,
weil der Browser immer an den Anfang der Seite ganz oben springt.
Wie lässt sich dieser Versatz etwas nach unten verschieben,
bzw. erreichen dass das Element erst etwas später
anfängt.<br>
Im Contao-Forum ist die Lösung mit dem html5-section Element
(Link: <a href="https://community.contao.org/de/showthread.php?62358-Verweis-zu-einem-Anker-innerhalb-einer-anderen-Datei&p=407749&viewfull=1#post407749">
https://community.contao.org/de/showthread.php?62358-Verweis-zu-ein...</a>)
beschrieben, nur wie lassen sich section's in Tao
einfügen?<br>
Vielen Dank</p></div>Reinhardtag:help.rocksolidthemes.com,2012-07-23:Comment/398216522016-05-09T08:10:45Z2016-05-09T08:10:45ZVerwendung: Header Navigation überdeckt Ankersprungziel<div><p>Vielen Dank für Ihre Frage.</p>
<p>Die verlinkte Problemlösung sollte mit den meisten
Elementen funktionieren, eine HTML5-Section ist dafür nicht
nötig.</p>
<p>Sie können den beschriebenen CSS-Code über die ID des
Text-Elements zuweisen, z. B.:</p>
<pre>
<code>#id-des-text-elements {
margin-top: -100px;
padding-top: 100px;
}</code>
</pre></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/398216522016-05-09T20:06:06Z2016-05-09T20:06:07ZVerwendung: Header Navigation überdeckt Ankersprungziel<div><p>mit Textelement getestet; funktioniert - besten Dank.</p></div>Reinhardtag:help.rocksolidthemes.com,2012-07-23:Comment/398216522020-03-06T23:26:36Z2021-06-16T13:25:18ZVerwendung: Header Navigation überdeckt Ankersprungziel<div><p>Danke für den Lösungsansatz! Ich habe das konkret so umgesetzt:</p>
<p>1) Mit "Überschreiben" alle Elemente, zu denen gesprungen wird, mit der Klasse "anchor" gekennzeichnet.<br>
In der custom.css mit einem mediaquery (tritt ja nur in der Desktop-Version auf):</p>
<pre>
<code>@media screen and (min-width: 899px) {
.anchor {
margin-top: -45px;
padding-top: 45px;
}
}</code>
</pre>
<p>2) Individuelle Ankernamen in das ID-Feld eingetragen als Sprungmarken.</p>
<p>3) Als erstes Element eine Navigationsbox erstellt, in dem alle Links als Liste stehen:</p>
<p>CSS. Linkbeispiel:<br>
<code><a href="{{env::request}}#anchorname">Element Title</a></code></p>
<pre>
<code>.anchornavi {
clear: none;
float: right;
max-width: 20em;
padding: 1em;
margin: 1em;
border: solid 1px #ddd;
list-style-type: square;
}</code>
</pre>
<p>Liebe Grüße, Michael</p></div>michael