Button css - nach links öffen

[jk]

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

[Ashura]

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

[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
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..

[Ashura]

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

[jk]

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

[Ashura]

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

[jk]

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

[Ashura]

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

[jk]

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

[Ashura]

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

[Der Martin]

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

[Ashura]

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

[Detlef G.]

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

[jk]

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>

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