Autor |
Nachricht |
speedy13
Threadersteller
Dabei seit: 23.05.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 23.05.2007 08:48
Titel grafische Buttons mit dynamischer Größe |
|
|
Hallo!
Ich würde auf meiner Webseite gerne Buttons verwenden, denen ich einen grafischen Hintergrund geben kann UND bei dem sich die Größe (eigentlich nur die Breite) dynamisch an den Text im Button anpasst.
Der Button soll wie folgt aussehen: www.prego.at/upload/b0fe5cbdf94ff3bfb3d6bfdc5803d99a.gif
Das Ganze mit fixer Größe des Buttons wäre ja nicht so ein Problem, doch wie schaffe ich es ohne die Breite für dein Button angeben zu müssen?? Ob CSS, JS, etc. egal...
Hätte bitte jemand ein paar Tipps für mich parat?
Mfg
Bernhard
[edit]
Verschoben von Programmierung nach Allgemeines - Nonprint.
Zuletzt bearbeitet von Mac am Mi 23.05.2007 09:32, insgesamt 1-mal bearbeitet
|
|
|
|
|
Mac
Dabei seit: 26.08.2005
Ort: Köln
Alter: 62
Geschlecht:
|
Verfasst Mi 23.05.2007 09:31
Titel
|
|
|
Kann man prima mit CSS machen.
Die rote Fläche ist ein DIV mit rotem Hintergrund
Die Fläche bekommt rechts und unten einen Rand (border-right border-bottom)
Der Text ist Text und dem wird ein Hintergrundbild zugewiesen (background-image)
der Text muss dann links eingerückt werden, damit er das Bild nicht verdeckt. (padding-left)
Alles nachzulesen bei
www.css4you.de
|
|
|
|
|
Anzeige
|
|
|
speedy13
Threadersteller
Dabei seit: 23.05.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 23.05.2007 13:35
Titel
|
|
|
Sollte das dann so in der Richtung aussehen?
div#testbutton
{
background: #9f191a;
border-right: 1px solid #d1d1d1;
border-bottom: 1px solid #d1d1d1;
background-image: url(css/pix/pfeil_rotweiss.png);
padding-left: 30px;
}
Aber da habe ich leider 2 Probleme:
1. backround-image wird so über die ganze Bildschirmbreite angezeigt, mit der Eigenschaft "no-repeat" gar nicht.
2. um die Breite zu definieren bräuchte ich ein "width". Jedoch kann sich der Button dann nicht mehr an den Text anpassen.
Wie könnte ich das lösen?
|
|
|
|
|
Mac
Dabei seit: 26.08.2005
Ort: Köln
Alter: 62
Geschlecht:
|
Verfasst Mi 23.05.2007 13:51
Titel
|
|
|
na, fast
Code: |
#testbutton
{
background: #9f191a;
border-right: 1px solid #d1d1d1;
border-bottom: 1px solid #d1d1d1;
width: auto;
}
#testbutton p {
background-image: url(css/pix/pfeil_rotweiss.png) no-repeat;
padding-left: 30px;
}
|
Dein button sollte da so etewa aussehen:
Code: |
<div id="testbutton">
<p>warenkorb</p>
<!-- oder <a href="#">Warenkorb</a>
</div>
|
Jetzt musst du dir nur noch einfallen lassen, wie du den Link behandelst, das wäre dann sowas wie
Code: |
#div a:link,
#div a:visited {
text-decoration: none;
}
#div a:hover {
text-decoration: underline;
}
|
Zuletzt bearbeitet von Mac am Mi 23.05.2007 13:54, insgesamt 1-mal bearbeitet
|
|
|
|
|
speedy13
Threadersteller
Dabei seit: 23.05.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 23.05.2007 15:20
Titel
|
|
|
Erstmal danke für die raschen antworten!
Ich hab das Ganze jetzt so eingebaut:
Code: |
#testbutton
{
background: #9f191a;
border-right: 1px solid #d1d1d1;
border-bottom: 1px solid #d1d1d1;
width: auto;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
}
#testbutton p {
background: url(css/pix/pfeil_rotweiss.png) no-repeat;
padding-left: 30px;
}
#testbutton a:link,
#testbutton a:visited {
text-decoration: none;
background-image: url(css/pix/pfeil_rotweiss.png) no-repeat;
color: #FFFFFF;
}
#testbutton a:hover {
text-decoration: underline;
color: #FFFFFF;
}
|
Code: |
<div id="testbutton">
<p>WARENKORB</p>
</div>
<br/> <br/>
<div id="testbutton">
<a href="#">WARENKORB</a>
</div>
|
das sieht dann im Browser so aus: www.prego.at/upload/efd1c8f10f17193eadcea4fea0e99b30.png
Leider noch nicht so wirklich zufriedenstellend.
Anscheindend komm ich hier nicht drum rum, irgendwo mit width die Breite anzugeben, oder?! Aber das muss doch irgendwie anders funktionieren?! Dass ich eine Standard-Buttonklasse habe, die ich beliebig oft aufrufen kann, mit unterschiedlichen Texten und die Breite passt sich den Texten an?!
|
|
|
|
|
|
|
|
Ähnliche Themen |
Grafische Aufpeppung
Grafische Ausgabe von Formularen
[PHP] grafische darstellung von Statistiken
Größe eines SWF´s auf Div-Größe beschränken
dynamischer div-tag...
dynamischer Kalender
|
|