mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 06:40 Benutzername: Passwort: Auto-Login

Thema: grafische Buttons mit dynamischer Größe vom 23.05.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> grafische Buttons mit dynamischer Größe
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

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Mac

Dabei seit: 26.08.2005
Ort: Köln
Alter: 62
Geschlecht: Männlich
Verfasst Mi 23.05.2007 09:31
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
speedy13
Threadersteller

Dabei seit: 23.05.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 23.05.2007 13:35
Titel

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden
Mac

Dabei seit: 26.08.2005
Ort: Köln
Alter: 62
Geschlecht: Männlich
Verfasst Mi 23.05.2007 13:51
Titel

Antworten mit Zitat Zum Seitenanfang

na, fast Lächel

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
speedy13
Threadersteller

Dabei seit: 23.05.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 23.05.2007 15:20
Titel

Antworten mit Zitat Zum Seitenanfang

Erstmal danke für die raschen antworten! Lächel

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?!
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.