nicht angemeldet
dynamische Buttons + runde Ecken
Hallo zusammen,
ich hab folgendes Problem.
Ich versuche die Anzeige von Buttons dynamisch zu erstellen.
Das heisst die Höhe ist fest und die breite soll sich an Hand des Inhalts anpassen.
Funktioniert auch wunderbar mit viereckigen Buttons, da diese nur aus einer Grafik bestehen. (width:1px; overflow:visible)
Da ich jedoch Schaltflächen brauche, die links und rechts abgerundet sind, funktioniert das nicht, da am Ende jeweils das Runde abgeschnitten wird.
Wollte mit den Pseudoelementen :before, :after arbeiten, jedoch wird das vom IE nicht unterstützt und fällt auch raus.
Was geht ist, 3 div's für "davor", "inhalt", "dahinter", wobei "davor" und "dahinter" statisch sind und "inhalt" eine 1-Pixel breite Grafik mit repeat-x;
Das bedeutet allerdings, dass ich für jeden einzelnen Button die Klassen angeben muß und das ist mir zu mühsam.
Gibt's dafür eventuell nen anderen Ansatz?
Bin für jede Idee dankbar.
-
Hi,
du brauchst mindestens zwei divs, das reicht dann aber auch. Ein outer div und ein tatsächliches Inhalts-div.
Die Grafik muss dann so breit sein wie dein breitestmöglicher Button.
Das outer div bekommt dann die Grafik als Hintergrund, background-position: top left, das andere mit background-position: top right.
Um die Rundungen zur Geltung kommen zu lassen, musst du dann noch padding einführen, das genauso groß sein muss wie deine Rundung.Der Yeti
-
Grüße,| Hi,
du brauchst mindestens zwei divs, das reicht dann aber auch. Ein outer div und ein tatsächliches Inhalts-div.
Die Grafik muss dann so breit sein wie dein breitestmöglicher Button.
Das outer div bekommt dann die Grafik als Hintergrund, background-position: top left, das andere mit background-position: top right.
Um die Rundungen zur Geltung kommen zu lassen, musst du dann noch padding einführen, das genauso groß sein muss wie deine Rundung.Der Yeti
gabs da nicht die elegantere lösung mit unterelementen und/oder :before / :after ?
MFG
bleicher--
__________________________-
Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
Lieber bereuen gesündigt zu haben, als nicht sündigen und es später trotzdem bereuen.
Boccaccio
-
-
Hi
Gibt's dafür eventuell nen anderen Ansatz?
Solltest du einen einfarbigen Hintergrund haben, könntest du versuchen das Ganze mit einem JavaScript zu lösen.
Grüße
Ole
(8-)>--
Das Wort Vegetarier kommt aus dem Indianischen und bedeutet: Zu dumm zum Jagen. -
Das bedeutet allerdings, dass ich für jeden einzelnen Button die Klassen angeben muß und das ist mir zu mühsam.
Anders wirst du aber nicht zu deinem gewünschten Ergebnis kommen.
Wenn es sich um normale Links handelt, die als Buttons gestylt werden, brauchst du bei einer Konstuktion wie <a href="#">..</a> zumindest ein inneres Konstrukt, um alle Ecken rund zu bekommen, wenn sich der Button variabel verhalten soll, also etwa <a href="#"><span>..</span></a>. Soll auch die Höhe variabel sein, wird mindestens ein weiteres Konstrukt nötig.
Und damit diese Button-Dinger sich nicht mit normalen Links vermischen, ist eine Klasse sehr sinnvoll, also etwa <a class="button" href="#"><span>..</span></a>Handelt es sich um echte (Formular-)Buttons, würde ich wahrscheinlich darauf setzen, diese per JS gegen die oben beschriebenen Textlinks auszutauschen, denn voll durchgestylte Buttons sind in der Praxis kaum möglich. Safari zum Beispiel weigert sich strikt, die Buttonstyles dem Webautor zu überlassen.
Ohne Klasse geht's also auch in diesem Fall nicht: <input class="button" type="submit" value=".." />Viele Grüße!
_ds
-
Hallo zusammen,
ich hab folgendes Problem.
Ich versuche die Anzeige von Buttons dynamisch zu erstellen................................................................
Versuche es mal hier für Menus mit einem Level: http://www.alistapart.com/articles/slidingdoors/
Das ist dann der zweite Teil:
http://www.alistapart.com/articles/slidingdoors2/