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


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

                Kommentar

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

                Einklappen

                Themen: 56.415   Beiträge: 428.251   Mitglieder: 27.807   Aktive Mitglieder: 71
                Willkommen an unser neuestes Mitglied, avabrooks.

                Online-Benutzer

                Einklappen

                576 Benutzer sind jetzt online. Registrierte Benutzer: 4, Gäste: 572.

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

                Die neuesten Themen

                Einklappen

                • daniel5959
                  Antwort auf Googleplatzierung
                  Hallo,

                  ob wirklich Hilfe gesucht wird oder nur der Link untergebracht werden soll, das lasse ich mal offen.

                  Wenn es um die Platzierung bei Google geht, sprich um SEO (Suchmaschinenoptimierung), dann sollte das bei einem Shop auf jeden Fall einem Profi überlassen werden - gute...
                  Heute, 06:41
                • Haris
                  Googleplatzierung
                  Hallo,

                  ich habe einen Onlineshop, der aktuell etwas schwächelt. Auf https://www.urv-online.de/index.php/...rbeagentur.php habe ich gelesen, dass es sinnvoll sein kann, wenn man die Seite optimieren lässt. Nun ist meine Frage, ob man das selbst machen kann,...
                  Heute, 00:58
                • föni
                  Antwort auf Zusätzliche fusszeile
                  mir ist nicht bewusst, was ich anders gemacht habe, aber es scheint nun zu passen.

                  Ich danke Dir für die Hilfe.
                  Gestern, 16:40
                • seoNaster
                  Antwort auf Suche Filehoster
                  Ich kenne filealpremium.net Der ist auch kostenlos und bietet dir normale Geschwindigkeit an auch ohne Premium Konto, lediglich eine Anmeldung ist notwendig. Ich meine auch es gibt keine Einschränkungen und auch keine Werbung die einen normalerweise bei kostenlosen Accounts stört.
                  Gestern, 10:53
                • Rauch17
                  Antwort auf Fliesen im Wohnzimmer
                  Fliesen im Wohnzimmer ist nicht so gute Idee. Ich empfehle nur Holzfußboden, besonders wenn man im Sommer barfuß gerne läuft....
                  20.05.2019, 19:07

                Kostenlose Homepage bei Jimdo!

                Einklappen

                Jimdo

                Die neuesten Beiträge

                Einklappen

                • Haris
                  Googleplatzierung
                  Hallo,

                  ich habe einen Onlineshop, der aktuell etwas schwächelt. Auf https://www.urv-online.de/index.php/...rbeagentur.php habe ich gelesen, dass es sinnvoll sein kann, wenn man die Seite optimieren lässt. Nun ist meine Frage, ob man das selbst machen kann,...
                  Heute, 00:58
                • daniel5959
                  Antwort auf Googleplatzierung
                  Hallo,

                  ob wirklich Hilfe gesucht wird oder nur der Link untergebracht werden soll, das lasse ich mal offen.

                  Wenn es um die Platzierung bei Google geht, sprich um SEO (Suchmaschinenoptimierung), dann sollte das bei einem Shop auf jeden Fall einem Profi überlassen werden - gute...
                  Heute, 06:41
                • föni
                  Zusätzliche fusszeile
                  Hallo Leute

                  Ich hab eine html Seite am laufen mit folgendem Code:

                  HTML-Code:
                   <!DOCTYPE HTML>
                  <html lang="de">
                  <head>
                      <link rel="icon" href="bim/favicon.ico" type="image/x-icon" />
                  <title>x.ch</title>
                  ...
                  17.05.2019, 22:00
                • föni
                  Antwort auf Zusätzliche fusszeile
                  mir ist nicht bewusst, was ich anders gemacht habe, aber es scheint nun zu passen.

                  Ich danke Dir für die Hilfe.
                  Gestern, 16:40
                • andi656
                  Suche Filehoster
                  hallo,

                  welche Anbieter gibt es momentan die günstig oder sogar kostenlos ihren Dienst anbieten?
                  Ich bin da noch etwas ratlos, da ich sowas noch nie genutzt habe und bin daher über jeden Ratschlag dankbar....
                  19.05.2019, 10:34
                • seoNaster
                  Antwort auf Suche Filehoster
                  Ich kenne filealpremium.net Der ist auch kostenlos und bietet dir normale Geschwindigkeit an auch ohne Premium Konto, lediglich eine Anmeldung ist notwendig. Ich meine auch es gibt keine Einschränkungen und auch keine Werbung die einen normalerweise bei kostenlosen Accounts stört.
                  Gestern, 10:53
                • Rauch17
                  Antwort auf Fliesen im Wohnzimmer
                  Fliesen im Wohnzimmer ist nicht so gute Idee. Ich empfehle nur Holzfußboden, besonders wenn man im Sommer barfuß gerne läuft....
                  20.05.2019, 19:07
                • Rauch17
                  Antwort auf Geschenk fur Chefin?
                  Letztes Mal habe ich meiner Chefin eine Orchidee mit Lindt Schokolade geschenkt. Sie war sehr froh.
                  20.05.2019, 19:05
                • Rehnat
                  Antwort auf Geschenk fur Chefin?
                  Sind ja wirklich so einige gute Ideen zusammengekommen, hoffe, sie haben dir dann auch helfen können?
                  Aber, ich finde, dass deine Idee auch toll war... Kann mich meinem Vorschreiber auf jeden Fall anschließen, denn ich finde auch, das es nicht immer so einfach ist ein passendes Geschenk zu finden....
                  20.05.2019, 12:48
                • Mr.Kennedy
                  Antwort auf Webseite Domain Namen ändern?
                  Sehr hilfreich. Ich konnte meine Domain zu kennedy-translations.com ändern. Danke
                  20.05.2019, 12:32
                Lädt...
                X