jk: Button css - nach links öffen

Hallo,
wie schafft man es, dass ein button sich nach links öffnet?(CSS)
Also ich stelle mir das so vor:
--Man hat ein Bild, indem 2 Buttons gespeichert sind
--der eine Button ist länger als der andere
Das ganze soll ungefähr wie folgt aussehen:

---Button|
bei "hover"
   ---Button---|

hoffe jemand weiß um rat

  1. Hallo jk.

    wie schafft man es, dass ein button sich nach links öffnet?(CSS)

    […]

    ---Button|
    bei "hover"
       ---Button---|

    Trotz deiner Beschreibung kann ich mir nicht vorstellen, was du erreichen möchtest. Könntest du es (wenn nötig mit einer Grafik) näher beschreiben?

    Möchtest du beim Hovern evtl. padding-right vergrößern? So würde ich deine Skizze interpretieren.

    Einen schönen Montag noch.

    Gruß, Ashura

    --
    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
    [HTML Design Constraints: Logical Markup]
    1. Ja ich habe mir das so vrgestellt, dass der button nach sich nach links verlängert..

      ein beispiel http://www.zonta-essen1.de/button.png
      In dem Bild würde der rechte Button dann beim "hover" durch den rechten ersetzt, der damit länger wäre.

      In umgekehrter Richtung gelingt mir das. nur eben nicht nach links..

      1. Hallo jk.

        Ja ich habe mir das so vrgestellt, dass der button nach sich nach links verlängert..

        ein beispiel http://www.zonta-essen1.de/button.png

        Wie schon gesagt, genügt hier bereits padding-right.
        Sollen die abgerundeten Grafiken mit einbezogen werden?

        Einen schönen Montag noch.

        Gruß, Ashura

        --
        sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
        „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
        [HTML Design Constraints: Logical Markup]
        1. Wie schon gesagt, genügt hier bereits padding-right.
          Sollen die abgerundeten Grafiken mit einbezogen werden?

          ich steh glaube ich gerade auf dem schlauch. mit padding-right:xx px
          erreich ich irgendwie nix.
          hab das bild nochh mal aktualisiert..

          http://www.zonta-essen1.de/button.png

          gruß jk

          1. Hallo jk.

            ich steh glaube ich gerade auf dem schlauch. mit padding-right:xx px
            erreich ich irgendwie nix.

            Natürlich nicht, da das Leerzeichen zwischen Wert und Maßeinheit fehl am Platze ist und dazu führt, dass die gesamte Regel ignoriert werden muss.

            hab das bild nochh mal aktualisiert..

            http://www.zonta-essen1.de/button.png

            Brauchbarer wäre jetzt aber der HTML+CSS-Code, so dass man den Fehler finden kann.

            Einen schönen Montag noch.

            Gruß, Ashura

            --
            sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
            „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
            [HTML Design Constraints: Logical Markup]
            1. also auf www.zonta-essen1.de/test.html hab ich das mal so gemacht dass sich das ganze nach rechts öffnet..

              was muss geändert werden damit es nach links geöffnet wird.(zuerst bild wieder drehen, das ist klar)

              gruß jk

              1. Hallo jk.

                also auf http://www.zonta-essen1.de/test.html hab ich das mal so gemacht dass sich das ganze nach rechts öffnet..

                Da dein Vorhaben aus meiner Sicht nicht gerade trivial ist, habe ich einmal ein Beispiel erstellt.
                Einziger Nachteil: dadurch, dass ich die Grafik in drei Teile aufgeteilt habe, entsteht ein unansehnlicher Übergang zwischen diesen Teilen. Eine bessere Lösung fällt mir aber momentan aber auch nicht ein.

                Einen schönen Montag noch.

                Gruß, Ashura

                --
                sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
                „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
                [HTML Design Constraints: Logical Markup]
                1. Einziger Nachteil: dadurch, dass ich die Grafik in drei Teile aufgeteilt habe, entsteht ein unansehnlicher Übergang zwischen diesen Teilen. Eine bessere Lösung fällt mir aber momentan aber auch nicht ein.

                  Also erst einmal vielen dank für die Hilfe.

                  Ja so, oder so ähnlich könnte man das lösen. Mit den Übergängen müsste man wirklich noch verändern.. nur wie?
                  Ist komisch, dass es man es nach links öffnen lassen kann, aber umgekehrt nicht.. hmm

                  trotzdem danke!

                  wenn noch Jemand einen Vorschlag hat, kann er den hier ja noch mal vorstellen.

                  gruß jk

                  1. Hallo jk.

                    Ja so, oder so ähnlich könnte man das lösen. Mit den Übergängen müsste man wirklich noch verändern.. nur wie?

                    Gäbe es keinen IE, so könnte man die abgerundeten Teile per ::before und ::after vor und hinter die Links setzen.

                    Zudem soll es ab CSS Level 3 möglich sein, mehrere Hintergrundbilder pro Element zu setzen. Aber ehe dies wirklich praxistauglich wird, haben wir den IE 10 …

                    Einen schönen Montag noch.

                    Gruß, Ashura

                    --
                    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
                    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
                    [HTML Design Constraints: Logical Markup]
                2. Hallo Ashura,

                  Einziger Nachteil: dadurch, dass ich die Grafik in drei Teile aufgeteilt habe, entsteht ein unansehnlicher Übergang zwischen diesen Teilen.

                  das kann man aber selbstverständlich in den Griff bekommen. Man muss die Grafiken so zurechtschneiden, dass die Texturen nahtlos ineinander übergehen. Das heißt natürlich auch, dass man den Betrag der Verlängerung an die Periodizität des Musters anpassen muss.
                  Wie praktisch, wenn man einen gleichförmig eingefärbten Hintergrund nimmt ...

                  So long,
                   Martin

                  --
                  Der Bäcker schlägt die Fliegen tot
                  Und macht daraus Rosinenbrot.
                  1. Hallo Martin.

                    das kann man aber selbstverständlich in den Griff bekommen. Man muss die Grafiken so zurechtschneiden, dass die Texturen nahtlos ineinander übergehen.

                    Und was passiert bei der Veränderung der Schriftgröße?

                    Das heißt natürlich auch, dass man den Betrag der Verlängerung an die Periodizität des Musters anpassen muss.

                    Habe ich bedacht und versucht.

                    Einen schönen Montag noch.

                    Gruß, Ashura

                    --
                    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
                    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
                    [HTML Design Constraints: Logical Markup]
                  2. Hallo Martin

                    Das heißt natürlich auch, dass man den Betrag der Verlängerung an die Periodizität des Musters anpassen muss.

                    Wie unflexibel.

                    Es dürfte auch so passen.

                    Wenn es allerdings nennenswerte Schriftgrößenänderungen verkraften soll, dann
                    würde es sich zu einer waren Elementeschlacht ausweiten.

                    Auf Wiederlesen
                    Detlef

                    --
                    - Wissen ist gut
                    - Können ist besser
                    - aber das Beste und Interessanteste ist der Weg dahin!
              2. Das wär der quelltext:

                ---------------------------------

                <html>
                <head>
                <title>TEST</title>
                <meta name="author" content="jk">

                <style type="text/css">
                <!--

                #navigation a {
                        margin: 0;
                        height: 50px;
                        width: 135px;
                        display: block;
                        text-decoration: none;
                        background-color: transparent;

                }
                #navigation a:hover {
                        width: 195px;
                        background-position:  195px;

                }
                body > * #btnHome a {
                        background-image: url(http://www.zonta-essen1.de/button.png);
                }

                -->
                </style>
                </head>
                <body>

                <div id="navigation">

                <ul>

                <li id="btnHome"><a href="#" title="Home"></a></li>

                </ul>

                </div>

                </body>
                </html>

                ---------------------------------