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;}
        PS: Wenn euch mein Post gefallen hat, dann lasst mir ein "Daumen hoch" da!

        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, Umbau ab €80 und einiges mehr>

              Kommentar


              • #8
                ...hallo, ich wollte den Thread hier beenden. Das Problem ist gelöst.
                Gruß Bernhard

                Kommentar

                UNTERSTÜTZT UNS!

                Einklappen


                Für alle Amazon-Käufe, die ihr über diese Suchmaske tätigt, bekommen wir eine kleine Umsatzbeteiligung. Euch kostet es nichts mehr und wir können von den Einnahmen einen Teil unserer Kosten abdecken!

                Vielen Dank für eure Unterstützung!

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

                Einklappen

                Themen: 56.656   Beiträge: 428.499   Mitglieder: 28.278   Aktive Mitglieder: 64
                Willkommen an unser neuestes Mitglied, ErikJSchulze29.

                Online-Benutzer

                Einklappen

                326 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 323.

                Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                Die neuesten Themen

                Einklappen

                • daniel5959
                  Antwort auf Wix Filterfunktion
                  Hallo,

                  ob WIX oder nicht - wenn der Baukasten nicht kann, dann könnte man einfach eine Seite mit den ganzen Wörtern erstellen und diese Wörter zu Unterseiten verlinken, auf denen dann die jeweiligen Behandlungen aufgeführt sind. Soviele Wörter werden es wohl nicht sein.

                  ...
                  Gestern, 23:10
                • arnego2
                  Antwort auf Wix Filterfunktion
                  Wix als Geschäftsseite?
                  Meine Güte was glaubst du werden deine Kunden davon halten. selbst wenn du für die Seite bezahlt hast WIX ist für billige Leute sehr bekannt. Scripts bei WIX kannst du wahrscheinlich vergessen den den Zugang bei WIX bekommt man nicht. Auch Umziehen wird nur über Umbau...
                  Gestern, 19:30
                • elenaelli
                  Wix Filterfunktion
                  Hallo liebe Webmaster,

                  ich habe einen Webmaster für meine Geschäftswebsite. Er hat die Website mit Wix erstellt.
                  Nun habe ich ihn gefragt, ob es möglich ist, eine Art Filter hinzuzufügen.

                  Ich habe eine Seite mit Gesichtsbehandlungen die ich anbiete. Hier fände...
                  Gestern, 18:31
                • arnego2
                  Antwort auf Corona - die Folgen
                  Oder es hinter sich bringen.
                  Gestern, 14:42
                • daniel5959
                  Antwort auf Corona - die Folgen
                  Hallo,

                  Infos zu möglichen Impfstoffen:



                  Also sollten wir uns auf eine jahrelange, möglicherweise jahrzehntelange Situation ohne Impfstoff einstellen.

                  Mit etwas Glück bekommen wir Medikamente, um den Virus an der weiteren Vermehrung zu hindern....
                  30.05.2020, 23:58

                Die neuesten Beiträge

                Einklappen

                • elenaelli
                  Wix Filterfunktion
                  Hallo liebe Webmaster,

                  ich habe einen Webmaster für meine Geschäftswebsite. Er hat die Website mit Wix erstellt.
                  Nun habe ich ihn gefragt, ob es möglich ist, eine Art Filter hinzuzufügen.

                  Ich habe eine Seite mit Gesichtsbehandlungen die ich anbiete. Hier fände...
                  Gestern, 18:31
                • daniel5959
                  Antwort auf Wix Filterfunktion
                  Hallo,

                  ob WIX oder nicht - wenn der Baukasten nicht kann, dann könnte man einfach eine Seite mit den ganzen Wörtern erstellen und diese Wörter zu Unterseiten verlinken, auf denen dann die jeweiligen Behandlungen aufgeführt sind. Soviele Wörter werden es wohl nicht sein.

                  ...
                  Gestern, 23:10
                • arnego2
                  Antwort auf Wix Filterfunktion
                  Wix als Geschäftsseite?
                  Meine Güte was glaubst du werden deine Kunden davon halten. selbst wenn du für die Seite bezahlt hast WIX ist für billige Leute sehr bekannt. Scripts bei WIX kannst du wahrscheinlich vergessen den den Zugang bei WIX bekommt man nicht. Auch Umziehen wird nur über Umbau...
                  Gestern, 19:30
                • arnego2
                  Antwort auf Corona - die Folgen
                  Oder es hinter sich bringen.
                  Gestern, 14:42
                • daniel5959
                  Antwort auf Corona - die Folgen
                  Hallo,

                  Infos zu möglichen Impfstoffen:



                  Also sollten wir uns auf eine jahrelange, möglicherweise jahrzehntelange Situation ohne Impfstoff einstellen.

                  Mit etwas Glück bekommen wir Medikamente, um den Virus an der weiteren Vermehrung zu hindern....
                  30.05.2020, 23:58
                • zubami
                  neues Hobby, Inspiration
                  Hallo in die Runde,

                  also ich hab eigentlich ein echt cooles Hobby (Bogenschießen), allerdings hoffe ich immer auf gutes Wetter und muss abwägen, ob es sich lohnt, meine Sachen zu packen oder nicht. Ich schieße nicht gern in der Halle, das macht einfach weniger Spaß. Naja, jetzt war...
                  29.05.2020, 14:35
                • arnego2
                  Antwort auf neues Hobby, Inspiration
                  Typischer Linkleger. Smalltalk Sektion unschuldige Frage plus neuer User.
                  29.05.2020, 18:37
                • ST747
                  Antwort auf neues Hobby, Inspiration
                  hallo, ich würde sagen, den bogen überspannt.
                  gerhard...
                  29.05.2020, 17:58
                • daniel5959
                  Antwort auf neues Hobby, Inspiration
                  Hallo,,

                  wenn man wüsste dass der Betreiber etwas davon versteht und es nicht bloß ein Pseudo-Ratgeber mit Amazon-Werbelinks wäre.

                  Der Betreiber hat neben dem Bogenschießen-Ratgeber auch einen Expositharz-Ratgeber und Webseiten zum Thema Wohnraum-Unikate und Haustier-Welt,...
                  29.05.2020, 17:25
                • daniel5959
                  Antwort auf Eure Lieblingsweine!?
                  Hallo,

                  soll das jetzt eine große Linkplatzierung für diesen Olav B... werden - neben Gartenmöbel jetzt allerlei rund ums Kochen?

                  Die anderen Projekte / Webseiten von Olav B... wie Partystrip, DJ und Künstleragentur sind ja wohl im Sande verlaufen sind.

                  daniel5959...
                  29.05.2020, 16:47
                Lädt...
                X