Kann man das Ziel eines HTML Anchors um X Pixel nach unten verschieben?

Ich habe ein fixierte halb transparente Headerleiste. Wenn ich auf den Anchor Link klicke, erscheint der entsprechenden Textpunkt ganz oben im Browserfenster, wird aber von der Headerleiste verdeckt.

Da die Headerleiste halb transparent ist, kann ich den Inhalt nicht einfach nach unten verschieben, der muss ganz oben im Browserfenster beginnen. Ich kann auch den Textpunkten nicht soviel top padding geben, dass sie unter der Headerleiste erscheinen wuerden.

Hat jemand kreative Ideen?

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

Sarkophator

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

10.03.2016, 18:54

Du könntest das Anchor-Element mittels position relative um die Höhe des Headers nach oben verschieben, wenn ich dich richtig verstanden habe:

a.anchor {
  position: relative;
  top: -80px;
}

---

<h1>
  <a class="anchor" id="testanchor"></a>
  Testanchor
</h1>

Demo: https://jsfiddle.net/8z06d8r1/

TeeTier

10.03.2016, 19:17

Das ist zwar eine Lösung, aber mit Sicherheit eine sehr sehr unschöne. Semantisch gesehen absolut vermeidbar.

Steffile

Fragesteller

10.03.2016, 20:08

@TeeTier

Hast du eine bessere Idee?

fluffiknuffi

10.03.2016, 20:43

@TeeTier

TeeTier meinst du das a-Element statt einer ID? Oder wie oder was. :o

Steffile

Fragesteller

10.03.2016, 20:08

Danke fuer deine Muehe, aber das funktioniert nicht - auch bei dir verschwindet der < h1 > Text, wenn ich auf den Anchor klicke, hinter dem Header - ich brauche ihn unter dem Header :-(

Hey leute,

Ich arbeite gerade an einem Schulprojekt und muss dabei eine Website machen. Jetzt habe ich gerade das problem:

Ich habe Text eingefügt und unter den Text ein selbst skaliertes Bild reingemacht das genau auf die Größe der Box angepasst ist. Wenn ich jedoch nun padding-left: 15px; mache z.B. verschiebt sich der Text UND die Bilder nach links. Nun ist mein problem: Ich kann das Bild nach oben unten und rechts verschieben aber gott verdammt nochmal nicht nach links. Ich habe schon sau viel ausprobiert und alles gegoogelt erfolgslos... ich hoffe ihr könnt mir weiterhelfen damit ich die Bilder wieder reinbekomme und sie nicht ins aside rein klaffen.

Box width = 1085 padding-left: 15px; Bild format: 1100:250(ja ohne das padding passt es genau rein auch wenn es 1085 ist)

Lg Pascal

...zur Frage

Wie in HTML und CSS Texte und Bilder verschieben?

Hey! Ich habe angefangen mich mit dem erstellen von Websites zu beschäftigen. Ich bin noch ein sehr sehr blutiger Anfänger und Frage mich deshalb folgende Frage:

Wie in HTML & CSS Bilder & Texte verschieben?

Ich möchte nämlich einen Text & ein Bild von der oberen rechten Ecke, nach unten verschieben.

Ich habe das auch schon mit Padding-Top & Right probiert, jedoch verschiebt sich dann der Rest (NavBar & anderer Text) mit nach unten. Wie löse ich das problem?

Ich nutze Visual Studio Code.

...zur Frage

Schnell Geld mit Html und Css?

Hallo ich habe gute Html und css kenntnisse ich muss schnell an geld kommen was würdet ihr mir empfehlen ich rede nicht von tausenden euros sondern ein bisschen

...zur Frage

Dermal Anchor wächst er raus oder ist er nur entzündet?

Ich habe seit ca. 1Jahr Dermal Anchors am Bauch und seit einer Woche sitzt er schräg man sieht jedoch unten nichts dunkles wo es befestigt ist aber es ist ein wenig hügelig.. da ich meine Piercerin in den Ferien ist wollte ich euch fragen..

...zur Frage

Webseiten erstellen?

Hallo,ich bin 17 Jahre alt und will gerne das Webseiten erstellen und verkaufen lernen.Was wollen die Käufer reicht eine professionelle WordPress seite aus oder lieber eine HTML Webseite?Was verkauft sich besser und welche arten von Webseiten bauen empfehlt ihr für E- Commerce oder zum verkauf

...zur Frage

Erfahrung mit ElectronJS?

https://electronjs.org/

Hat damit hier jemand schon mal Erfahrungen gemacht? Ist das gut um Anwendungen mit hübschen UIs zu entwickeln? Ich will das ganze mit C# (oder evtl auch java falls möglich) im Backend verbinden aber habe keine Lust auf CSS zu verzichten.

Wenn ihr in der Kombination schon mal entwickelt hat gerne etwas genauer schildern. Kann man sich das gannze dann so in etwa vorstellen wie im Browser nur das der "Server" hier das C# Backend ist?

...zur Frage

Nav bar farb wechsel?

Hi ich möchte gerne das meine navbar die farbe wechselt wenn ich scrolle, was ich auch geschafft habe aber ich möchte gerne das sie erst die farbe wechselt wenn ich bis zu einer bestimmten höhe scrolle, also nicht direkt wenn ich anfange zu scrollen. Was muss ich da tun? :))) Hoffe man versteht was ich meine

<script>
 document.addEventListener('scroll',() => {
    const header =document.querySelector('header');
    
      if (window.scrollY >4) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  })
</script>

...zur Frage

Warum ist VS Code so beliebt bei Webdevelopern?

...zur Frage

Visual studio - padding funktioniert nicht (style)?

Hallo zusammen,

ich gehe momentan ein Tutorial durch, leider funktioniert das padding bei mir nicht:

<style>

.page-content

{ padding: 0px 100px;

}

</style>

Nach unten bzw. oben lässt sich der Inhalt verschieben, nur leider nicht nach rechts und links. Ich habe es wie im Tutorial gemacht, hat jmd. vlt. eine Idee wo das Problem sein könnte ?

...zur Frage

Webdesign Kaltakquise?

Wie macht man am besten Kaktakquise als Webdesigner. Habt ihr Tipps für mich und ist E-Mailakquise auch effektiv oder nur per Telefon

...zur Frage

Gimp Transparente Pixel entfernen?

Hallo ich wollte wissen ob es eine Möglichkeit gibt alle Pixel die zum teil Transparent sind (aber nicht komplett weg) zu entfernen oder komplett anzumalen also so das sie nicht mehr Transparent sind. Also jetzt nicht alle einzeln sondern alle leicht Transparenten auf einmal.

Frage 2 : Mein Radierer entfernt wenn ich ihn auf 1 Pixel gestellt habe den Pixel nicht ganz sondern macht ihn erst so halb transparent und dann beim 3. mal draufklicken ist der Pixel weg gibt es da eine Einstellung das der Radierer den Pixel direkt komplett weg macht ? ? ?

...zur Frage

Wie viel kostet eine Webseite?

Hallo,

ich bräuchte für meine Selbstständigkeit in der Kosmetik eine Webseite.

Kann man sowas ohne technisches Vorwissen alleine meistern oder nicht?

wenn ja, welche Apps, Programme oder Seiten nutzt man dafür und auf was muss ich achten?

Wenn nein, wie viel kostet eine professionelle Webseite?

...zur Frage

Bild verkleinern ohne die div kleiner zu machen?

Ich will ein Bild verkleinern ohne ein Div kleiner zu machen, wie geht das?:

    <div class="container-book1">
        <img class="book-image" src="48gesetze1.jpg">  
    </div>

.book-image {
    box-shadow: 10px 10px 10px rgb(14, 14, 14);
}

...zur Frage

Buttons in einem div in einem a-Tag ansprechen?

Ich habe das Problem das ich ein "div" habe, das in einem ist, also selber als Verlinkung dient. In diesem "div" habe ich jedoch noch drei Buttons, die dann nicht mehr ansprechbar sind, da das ganze "div" ja ein Hyperlink ist. Ich möchte also das ich wenn ich auf einen der Buttons klicke, eine separate Aktion erfolgt und wenn ich nur in das "div" klicke ohne einen Button zu betätigen eine andere Aktion erfolgt. Damit ihr es ein bisschen besser versteht hänge ich noch einen Screenshot von der Situation an, hoffe man versteht es einigermaßen.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen