• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem beim letter-spacing

J

Johannes11

Neues Mitglied
Hallo zusammen. Ich sitze gerade an einem Menü mit mehreren Punkten, was ich mit p style="padding-left: .. schräg gesetzt habe (das ganze Menü ist also in einem Winkel angelegt. Der oberste Punkt ragt rechts raus und die anderen Punkte verjüngen sich nach links). Ich möchte beim drüberscollen der einzelnen Punkte ein letter-spacing haben, was sich nur nach links ausübt, also der letzte Buchstabe bleibt fix und die Buchstaben verschieben sich nur nach links raus. Weiss jemand wie ich das definieren kann?

Schöne Grüße

Johannes
 
Besser du zeigst uns mal den code in HTML und CSS, weil so ist es etwas schwer nachzuvollziehen.

p style="padding-left: .. schräg gesetzt habe (das ganze Menü ist also in einem Winkel angelegt.
Zum Vergrößern anklicken....
Das schräg gesetzt im Zusammenhang mit padding left macht hier keinen Sinn.

@mermshaus
Hast du verstanden was er will? Ich bin wohl zu unintelligent dafür.
 
Das Menü hab ich als ul definiert. Vielleicht gibt es eine elegantere Lösung (die ich nicht kenne) das Menü schräg zu machen als mit padding-left (hab da jeden Menüpunkt einzeln im HTML-Dokument definiert).

HTML:

<li><p style="padding-left:144px;"><a href="1">1</a></p></li>
<li><p style="padding-left:137px;"><a href="2">2</a></p></li>
<li><p style="padding-left:112px;"><a href="3.html">3</a></p></li>
<li><p style="padding-left:75px;"><a href="4.html">4</a></p></li>
<li><p style="padding-left:51px;"><a href="5.html">5</a></p></li>

(die Punkte wegdenken)

..........Menüpunkt1
.........Menüpunkt2
........Menüpunkt3
.......Menüpunkt4
......Menüpunkt5

und so soll es beim drüberscrollen aussehen, also dass es nur nach links "ausbricht"

..........Menüpunkt1
M e n ü p u n k t 2
........Menüpunkt3
.......Menüpunkt4
......Menüpunkt5


Grüße
 
Zuletzt bearbeitet:
HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
        <style>

            ul {
                text-align: right;
            }

            a:hover {
                letter-spacing: 0.25em;
            }

            li.link-1 {
                padding-right: 100px;
            }

            li.link-2 {
                padding-right: 120px;
            }

            li.link-3 {
                padding-right: 150px;
            }

            li.link-4 {
                padding-right: 190px;
            }

            li.link-5 {
                padding-right: 240px;
            }

        </style>
    </head>

    <body>

        <ul>
            <li class="link-1"><a href="./">Link</a></li>
            <li class="link-2"><a href="./">Link</a></li>
            <li class="link-3"><a href="./">Link</a></li>
            <li class="link-4"><a href="./">Link</a></li>
            <li class="link-5"><a href="./">Link</a></li>
        </ul>


    </body>

</html>

Wustersoss schrieb:
Hast du verstanden was er will?
Zum Vergrößern anklicken....

Glaube schon, ja.
 
Ah ok. Also rechtsbündig auslegen, dann mit padding-right versehen und das hover letter-spacing wird dann durch das align-right nach links hin ausgeübt ..

Vielen Dank
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben