FrankMe: Aufruf eines Ankers

SELF-Forum

Aufruf eines Ankers

FrankMe Homepage des Autors
+1 Informationen zu den Bewertungsregeln

problematische Seite

Hallo,

ich nutze in einem Dropdown-Menü "Künstler" Aufrufe von Anker-Links. Weiterhin habe ich ein Menü am oberen Bildschirmrand. Wenn der Ankerlink aufgerufen wird scrollt die Webseite zu den AnkerLink, so dass die Position de Ankers ganz oben ist, aber damit auch hinter dem Menü. Dadurch fehlt jeweils etwas von Text (die Überschrift / der Name).

Wie kann ich zu einem AnkerLink scrollen, so dass dieser unter dem Menü zum stehen kommt?

Danke für Hilfe. Frank

Beitrag melden
+1
Informationen zu den Bewertungsregeln

  1. Aufruf eines Ankers

    Matthias Apsel Homepage des Autors (Versionen)
    +1 Informationen zu den Bewertungsregeln

    problematische Seite

    Hallo FrankMe,

    Wie kann ich zu einem AnkerLink scrollen, so dass dieser unter dem Menü zum stehen kommt?

    • Passendes Padding und margin ist die Kurzform. Gegebenenfalls in Kombination mit der target-Pseudoklasse.

    • Mit JS scrollen, wenn du innerhalb der Seite bleibst

    • http://molily.de/css-position-fixed/ ist schon etwas älter, beschreibt aber das Grundprinzip

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Aufruf eines Ankers

      FrankMe Homepage des Autors
      – Informationen zu den Bewertungsregeln

      problematische Seite

      Hallo Matthias,

      ich habe das Dokument nun durchgearbeitet und viel ausprobiert. Mit padding und margin habe ich auch schon zuvor probiert, aber kein positives Ergebnis erhalten. Auch mit padding und margin wird direkt der Anker am obersten Rand hinter dem Menü angezeigt. :(

      Frank

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Aufruf eines Ankers

        Matthias Apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        problematische Seite

        Hallo FrankMe,

        ich habe das Dokument nun durchgearbeitet und viel ausprobiert.

        Offensichtlich nicht gut genug ;-)

        a-Elemente als Anker zu verwenden, ist obsolet. Du kannst auch jedes Element mit ID anspringen. Siehe https://wiki.selfhtml.org/wiki/HTML/Regeln/Seiteninterne_Verweise Zu deiner Ehrenrettung sei gesagt, dass auch molilys Dokument noch mit a-Elementen arbeitet.

        Mit padding und margin habe ich auch schon zuvor probiert, aber kein positives Ergebnis erhalten. Auch mit padding und margin wird direkt der Anker am obersten Rand hinter dem Menü angezeigt. :(

        was daran liegt, dass für ein inline-Element die Angaben zu margin-top keine Wirkung haben.

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Aufruf eines Ankers

          FrankMe Homepage des Autors
          – Informationen zu den Bewertungsregeln

          problematische Seite

          Ich bedanke mich für die Hilfe und Tipps. Das Problem habe ich nun gelöst indem ich statt "<a href=..." "id" plus ein padding eingesetzt habe. Also statt: <a href="#ziel1"></a> <h2>Ziel 1</h2>

          benutze ich nun: <h2 class="ank" id="ziel1">Ziel 1</h2>

          Den Aufruf belasse ich wie er war. <a href="kuenstler.php#ziel1">Ziel 1</a>

          Im css lege ich die Klasse ank an: .ank {margin-top: -50px; padding-top: 50px;}

          Herzliche Grüße, von Frank

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

      2. Aufruf eines Ankers

        MrMurphy1
        – Informationen zu den Bewertungsregeln

        problematische Seite

        Hallo

        Ich verwende zusätzliche Elemente (hr oder span) für die Ankerpunkte. Zum Beispiel

              <article>
         <span id="obst"></span>
         <h1>Obst</h1>
         <p>Ein Teaser-Text.</p>
         <span id="banane"></span>
         <h2>Banane</h2>
         <p>Pediram-me que escrevesse um "Blindtext".</p>
         ...
         <span id="kirsche"></span>
         <h2>Kirsche</h2>
         <p>Bom, agora imagin</p>
         ...

        Die werden unsichtbar dargestellt (nicht komplett ausgeblendet) und können so angesprungen werden. Der Abstand zum oberen Fensterrand wird durch top bestimmt

                 position: relative;
         display: block;
         width: 0;
         height: 0;
         line-height: 0;
         visibility: hidden;
         top: -10rem;

        So entstehen auch keine störenden Abstände im Inhaltsbereich. top muss nun nur noch mittels Media Queries den unterschiedlichen Höhen des Menüs angepasst werden, falls dies erforderlich ist. Zusätzlich muss nur noch jeweils der erste obere margin der Menühöhe angepasst werden.

        Nachfolgend der Quelltext für eine Testseite, der zum Ausprobieren einfach komplett übernommen werden kann:

        <!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>One Page Navigation</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         margin: 0;
      }
      h1 {
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0 0 0;
      }
      h2, h3, h4, h5, h6 {
         font-size: 1rem;
         margin: 0.5rem 0 0 0;
      }
      p, li, dl, dt, address {
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0 0 0;
      }
      a {
         color: blue;
         text-decoration: none;
         outline: none;
         margin: 0;
      }
   }

   /*Spezielle Einstellungen*/
   @media all {
      nav {
         background-color: silver;
         position: fixed;
         top: 0;
         width: 100%;
         margin: 0;
      }
      nav a {
         background-color: white;
         text-align: center;
         display: inline-block;
         padding: 0.3rem 0.5rem;
         border-radius: 0.4rem;
         margin: 0.3rem 2%;
      }
      nav a:nth-child(1) {
         width: calc(96% - 1rem - 5px);
      }
      nav a:nth-child(1n+2) {
         width: calc(46% - 1rem - 5px);
      }
      main {
         max-width: 1000px;
         margin: 0 auto;
         margin-top: 10.5rem;
      }
      span {
         position: relative;
         display: block;
         width: 0;
         height: 0;
         line-height: 0;
         visibility: hidden;
         top: -10rem;
      }
   }
   @media only screen and (min-width: 600px) {
      nav a:nth-child(1n+2) {
         width: calc(29.3% - 1rem - 5px);
      }
      main {
         margin-top: 7.5rem;
      }
      span {
         top: -7.5rem;
      }
   }
   @media only screen and (min-width: 1000px) {
      nav a:nth-child(1n+2) {
         width: calc(12.66% - 1rem - 5px);
      }
      main {
         margin-top: 5rem;
      }
      span {
         top: -5rem;
      }
   }
   @media only screen and (min-width: 1200px) {
      nav a:nth-child(1n+1) {
         width: calc(10.27% - 1rem - 5px);
      }
      main {
         margin-top: 3rem;
      }
      span {
         top: -2.5rem;
      }
   }

   /*Flexbox für IE*/
         /*-ms-flex-preferred-size: calc(50% - 1rem);*/
   /*Vorlage für das gesamte CSS*/
   @media all {
   }
   /*Vorlage zum Kopieren für Media Queries - Mobile first*/
   @media only screen and (min-width: 0px) {
   }
   /*Vorlage zum Kopieren für Media Queries - Desktop first*/
   @media only screen and (max-width: 0px) {
   }

   </style>

</head>
<body>
   <nav>
      <a href="#obst">Obst</a>
      <a href="#banane">Banane</a>
      <a href="#kirsche">Kirsche</a>
      <a href="#birne">Birne</a>
      <a href="#erdbeere">Erdbeere</a>
      <a href="#kiwi">Kiwi</a>
      <a href="#mandarine">Mandarine</a>
   </nav>
   <main>
      <article>
         <span id="obst"></span>
         <h1>Obst</h1>
         <p>Ein Teaser-Text.</p>
         <span id="banane"></span>
         <h2>Banane</h2>
         <p>Pediram-me que escrevesse um "Blindtext".</p>
         <p>Em português seria algo como o texto para cegos ou texto cego.</p>
         <p>No Brasil também chamado de Nononono (eu sempre me pergunto se tanta energia negativa não acaba influenciando o cliente).</p>
         <p>É aquele que vai nos layouts simulando o texto final.</p>
         <p>Ou seja, não é para ser lido.</p>
         <p>Serve apenas como decoração, não vale nada, muito menos o que está escrito.</p>
         <p>Bom, então vale tudo: errar, escrever palavrões (cu, ah, ah), bobagens, falar mal de quem você quer, sacanagens, usar várias vezes a letra zzzzzzz, contar piadas como aquela: uma índia norte-americana que engravida durante uma temporada num college e, depois de comunicar ao pai-cacique, volta para a tribo.</p>
         <p>Ao cumprimentar o pai, diz: "How", ao que o pai replica: "How I know, I want to know who", falar bem de mim mesmo (que cara legal!); enfim, ninguém vai ler este texto mesmo, muito menos em português.</p>
         <span id="kirsche"></span>
         <h2>Kirsche</h2>
         <p>Bom, agora imagine se no meio de uma aprensentação, digamos de uma campanha da Mercedes (ou da Lada) em Hamburgo (ou em Bogotá), alguém na reunião, por acaso, fale essa língua que ninguém fala.</p>
         <p>Parta do princípio que esse alguém está olhando esse layout que decoro, olha para foto, e tomara que o diretor de arte não escolha uma foto tão boa, assim esse cara vai reclamar e vai pegar esse anúncio para ver de perto.</p>
         <p>E vai ver o que em primeiro lugar? Aquele cu que coloquci lá em cima.</p>
         <p>Todo mundo vê um cu no meio de um texto, não dá para passar por cima.</p>
         <p>Bom, se ele for brasileiro, vai rir muito e perguntar que cu é esse no anúncio dele, quem foi o sacana que fez isso.</p>
         <p>Rir-se-á muito (gostaram? Tanto faz se está certo ou não, todo Blindtext que se preza devc ter um monte de hífens.) e o anúncio será aprovado apesar daquela foto de merda.</p>
         <span id="birne"></span>
         <h2>Birne</h2>
         <p>Mas se o infeliz for português? Corremos o risco do cara não entender a piada ("que piada nada, é só uma simulação de texto, esse cu não vale nada, é um cu virtuale", argumenta a agência.).</p>
         <p>Irredutível, ele vai recusar essc anúncio porque o texto é escatológico.</p>
         <p>Mas se o anúncio for recusado por causa do texto, logo este texto que não valia nada poderá valer alguma coisa, poderá ser o diferencial que definirá o successo ou fracasso de uma campanha, uma concorrência, milhões e milhões de dólares, marcos, pesetas, Cabeças rolarão por causa de um cuzinho no meio de um layout.</p>
         <p>A teoria do caos na propaganda.</p>
         <p>E se uma bobagem dessa pode causar uma catástrofe, ela deixa de ser uma bobagem.</p>
         <span id="erdbeere"></span>
         <h2>Erdbeere</h2>
         <p>Sendo assim, a partir desse ponto este texto passa a ter um cunho mais sério, os conceitos aqui apresentados serão de vital importância, pois estes, uma vez assimilados, contribuirão de forma decisiva e determinante para o sucesso de vendas do produto para o qual este anúncio foi produzido.</p>
         <p>Portanto, caro anunciante, no caso de estar fixando seus olhos em mim, preste bem atenção: confira o meu tamanho.</p>
         <p>Se estiver num corpo menor que 9, reclame.</p>
         <p>Não é possível a compreensão da mensagem quando o consumidor está com os olhos quase cerrados na tentativa de ler.</p>
         <p>Outra coisa que você deve levar em conta é se o copy está em itálico ou em caixa alta.</p>
         <span id="kiwi"></span>
         <h2>Kiwi</h2>
         <p>Não deixe, é incômodo ao leitor.</p>
         <p>Agora vamos ao layout: infelizmente daqui de dentro não dá para avaliá-lo, mas posso ajudar assim mesmo.</p>
         <p>Se o título do anúncio for muito bom e o visual servir apenas como suporte, este não deverá ser paqueno e sim enorme, em letras garrafais.</p>
         <p>Se for ao contrário, deixe a imagem contar a história.</p>
         <p>Enfim, algum elemento deve mandar no anúncio (além de você que está pagando, é lógico), seja ele a foto, o texto (se for esse aqui, mais tempo passaremos juntos), a tipografia, o produto.</p>
         <p>Se tudo tiver o mesmo peso ficará chato.</p>
         <p>Agora a foto: está boa? Está impactante ou apenas parece que fugju de uma daquelas páginas da Vogue? Se ela é "Trendy", ou vendida a você como tal, desconfie.</p>
         <span id="mandarine"></span>
         <h2>Mandarine</h2>
         <p>Ela será déjà vu, passé (linguagem Vogue), enfim requentada.</p>
         <p>A Wired, a The Face da Cibernética, também já virou clichê.</p>
         <p>Assim como as campanhas de Guess, Calvin Klein ou Armani são completamente intercambiáveis.</p>
         <p>Bom, cheque essas coisas todas, mas seja justo com eles, devem ter virado a noite trabalhando, estão agora olhando para você ansiosos com seus egos sonolentos, esperando que você diga sim a este anúncio que poderá ser o marco da virada de suas vidas e não apenas mais um na revista.</p>
         <p>E para terminar, gostaria de dizer, com todo respeito, apenas mais uma palavrinha que está presa na minha garganta a pelo menos dois parágrafos: cu.</p>
      </article>
   </main>
</body>
</html>

        Gruss

        MrMurphy

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Aufruf eines Ankers

          Matthias Apsel Homepage des Autors
          – Informationen zu den Bewertungsregeln

          problematische Seite

          Hallo MrMurphy1,

          Ich verwende zusätzliche Elemente (hr oder span) für die Ankerpunkte. Zum Beispiel

          Das ist nicht notwendig. Pseudoelemente existieren.

          Bis demnächst
          Matthias

          --
          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln