Ankündigung

Einklappen
Keine Ankündigung bisher.

Linktext im DIV mit flächigem Hover

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Linktext im DIV mit flächigem Hover

    Hallo,

    ich arbeite an einer eigenen responsiven Site auf der Beipspiel-Grundlage zweier Templates, die ich zum Teil nachbaue und ergänze.
    Aber ich bin nun an einem Punkt,von dem aus ich nicht weiterkomme:

    www.sensibel-heilen.de/testtemplate.htm

    Im Template-Original gab es Pseudo-Link-Navigationselemente, die als Liste ausgeführt waren. Ich hatte zunächst als "Quasi-Linktext" dort Navigation eingefügt. Für die Listen-Einträge war auch seitenweit ein Hover definiert. Das sah und sieht natürlich super aus, fährt man mit dem Maus über den "Button", ist überall der Hover aktiv. Wenn ich das Ganze aber als Link ausführen möchte, hat es natürlich keine Funktion.
    Wenn ich zum Link einen Linktext haben möchte, der für Google wichtig ist, muss ich auf die Schrift selber klicken (und da eventuell einen auf die Schrift reduztierten Hover in Kauf nehmen).
    (siehe erster Link zu "Seite 2") Gibt es (ohne Java Script) andere Möglichkeiten ? Ich habe Gefallen an dem flächigen Hover gefunden. Klar kann ich das Ganze als aktive Grafik gestalten, aber da fehlt dann der Linktext.

    Hat jemand eine Idee ?

    Viele Grüße Bernhard

  • #2
    ...nach umstellender Arbeit: Listenzeugs ist aus der Navigation raus und durch DIVs ersetzt (ich bekam den Unterstrich nicht anders weg).
    Das, worum es mir geht, ist aber noch in den beiden unteren "Link-Buttons" zu sehen...

    Gruß Bernhard

    Kommentar


    • #3
      Hi,
      Du brauchst keine DIVs und Pseudolinks, sondern musst nur A passend formatieren: text-decoration:none; display:block und ggf. noch width setzen.

      Gruß
      Ingo
      Ingo Webdesign

      Kommentar


      • #4
        Hi Bernhard,
        du kannst so etwas realisieren indem du die Links in eine Liste packst und beim Hovern das einzelne Listenelement selektierst via Pseudeo-Klasse. Folgender Code realisiert dies:
        HTML-Code:
        <html>
          <head>
          </head>
          <body>
            <div id="Bereich/Element">
              <ul>
                <li><a href="ziel">Home</a></li>
                <li><a href="ziel">Über mich</a></li>
                <li><a href="ziel">Kontakt</a></li>
                <li><a href="ziel">Impressum</a></li>
              </ul>
            </div>
          </body>
        </html>
        Code:
        ul {
          list-style-type: none;
        }
        ul li {padding: 20px 30px; background-color: navy;}
        ul li a {color: #fff;}
        ul li:hover { background-color: gray;}
        ul li:hover > a {color: #000;}
        Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.
        Albert Einstein

        Kommentar


        • #5
          Hallo,

          erstmal Danke für Eure Tipps.

          Zunächst nochmal: ich bin ziemlicher Anfänger und gezwungen, in kurzer Zeit - aus geschäftliche Gründen - ein gutes responsives Design zusammenzubauen. Das schafft natürlich ein ziemliches Spannungsfeld.

          Vom ersten Template hatte ich folgendes übernommen:

          CSS.


          .menu ul {
          list-style-type: none;
          margin-top: 50px;
          padding: 0;
          }

          .menu li {
          height: 50px;
          padding-top: 30px;
          padding-left: 20px;
          padding-bottom: 0px;
          margin-bottom: 15px;
          background-color: #1F4634;
          box-shadow: 0 3px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.5);
          }

          HTML:

          <div id="sidebar_links">

          <div class="menu">

          <span class="weiss_3">
          <ul>
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
          <li>Navigation 4</li>
          </ul>
          </span>
          </div>
          </div>

          Im CSS ist Dein list-style-type: none drin, aber ich habe die Unterstreichungen nicht weg bekommen. Deswegen (@Localfu) bin ich mit der Liste skeptisch. Ich habe an der Seite weiter gebaut:, aktueller Stand: www. sensibel-heilen.de/ testtemplate.htm. Und ich brauche horizontale Navi-Buttons im unteren Seitenbereich, da müsste ich die Liste auf "horizntal" umstellen.
          Nun hatte ich das Ganze jetzt auf DIVs im Button-Style umgestellt habe.Ist für die Feineinstellungen für 4 Viewports sehr nützlich.:

          div class="link60"><a href="seite_2.htm" class="navi_oben">Unterricht</a></div>

          <div class="link60"><a href="seite_3.htm" class="navi_oben">Ich &uuml;ber mich</a></div>

          wo class eine Schriftklasseist. Da bleibt mein Problem, dass nur der Linktext gehovert werden kann, bestehen.
          Laut Webrechereche müsste ich die Reihenfolge umkehren und im HTML-Bereich mit dem Ankertest anfangen, etwa so:

          <a href="seite_2.htm" class="button_oben">Unterricht</a>

          Heißt, ich müsste satt der DIVs Button-Klassen inclusive Design- und Schriftformatierung (oder geht auch Schriftklasse innerhalb der Button-Klasse?) erstellen, wo dann endlich der ganze Button incl. Text gehovert würde. Vor allem ist aber das Problem, dass ich vom HTML-Text aus je nach Viewport verschiedene Button-Versionen vorhalten müsste, etwa so ?

          <a href="seite_2.htm" class="button_oben x1 x2 x3 x4">Unterricht</a>, wo sich dann per Quereis der Browser das Passende aussucht...

          Geht das auch einfacher ? Kann ich meine Divs vielleicht verwenden (war richtig Arbeit) ?


          Viele Grüße Bernhard

          Kommentar


          • #6
            Hi,
            Zitat von Bernhard Beitrag anzeigen
            <span class="weiss_3">
            <ul>
            das ist fehlerhaft.

            Zitat von Bernhard Beitrag anzeigen
            <div class="link60"><a href="seite_3.htm" class="navi_oben">Ich &uuml;ber mich</a></div>
            das DIV ist semantisch nutzlos und Entities für Umlaute brauchst Du auch nicht.

            Nimm besser die Listenformatierung und setze für A display:block und mache entsprechende Angaben zur Höhe und Breite.

            Gruß
            Ingo
            Ingo Webdesign

            Kommentar


            • #7
              Zitat von Bernhard Beitrag anzeigen
              Hallo,

              erstmal Danke für Eure Tipps.

              Zunächst nochmal: ich bin ziemlicher Anfänger und gezwungen, in kurzer Zeit - aus geschäftliche Gründen - ein gutes responsives Design zusammenzubauen.
              Was ist denn der Zwang es selbst zu machen?
              Anfänger und gutes Design ist oft nicht so einfach zu vereinbaren.
              Denk daran es muss nicht nur dir gefallen sondern auch deinen Kunden.
              https://arnego2.com <Webseiten ab €50 und einiges mehr>

              Kommentar

              homepage-forum.de - Hilfe für Webmaster! Statistiken

              Einklappen

              Themen: 56.399   Beiträge: 428.170   Mitglieder: 27.768   Aktive Mitglieder: 91
              Willkommen an unser neuestes Mitglied, auralivecasino.

              Online-Benutzer

              Einklappen

              229 Benutzer sind jetzt online. Registrierte Benutzer: 1, Gäste: 228.

              Mit 1.625 Benutzern waren am 17.03.2018 um 18:52 die meisten Benutzer gleichzeitig online.

              Die neuesten Themen

              Einklappen

              Kostenlose Homepage bei Jimdo!

              Einklappen

              Jimdo

              Die neuesten Beiträge

              Einklappen

              Lädt...
              X