Knap med 3 billeder

Afhængig af hvad du helt precist vil lave er der flere forskellige metoder ved brug af CSS. Metode vil afhænge af nedenstående spørgsmål og vil gøre brug af mere eller mindre css:
1. Skal midterstykket være af variabel eller fast længde?
2. Skal tekst tilføjes dynamisk eller har du færdige midter-billeder med tekst?
3. Skal teksten være i grafikken eller i din html?

Hvad er din primære grund til at dele billedet op i 3?
Benytter du dig af serverside scripts, som asp eller php?

1. Skal midterstykket være af variabel eller fast længde? variabel (IKKE variabel højde)

2. Skal tekst tilføjes dynamisk eller har du færdige midter-billeder med tekst? dynamisk tekst

3. Skal teksten være i grafikken eller i din html? INGEN grafik ren tekst


Hvad er din primære grund til at dele billedet op i 3? for at lave en knap som er runde i begge ender..

Benytter du dig af serverside scripts, som asp eller php? PHP

knappen skal så opdeles i 3 dele.. det klare jeg selv..

Du kan evt prøve med noget i denne stil:
(Der skal nok rettes lidt til)

CSS:
div.button {height:32px;}
div.button a {text-decoration:none;}
div.button span {display:inline;height:32px;}
div.button span.left {width:16px;background:url(button_left.gif);}
div.button span.middle {background:url(button_background.gif);}
div.button span.right {width:16px;background:url(button_right.gif);}

(X)HTML:
<div class="button">
<a href="#">
  <span class="left"/>
  <span class="middle" style="width:<?php echo $img_width; ?>px"><?php echo $img_tekst; ?></span>
  <span class="right"/>
</a>
</div>

Jeg han ikke få det til at spille.. måske fordi det skal køre under HTML 4.01 standard

så jeg laver det bare med et billede og en dynamisk tekst over..

smid et svar..

Svar!
Personligt foretrækker jeg også at have ét billede for hver knap (ikke medregnet billeder for diverse events som mouseover og den slags).
Jeg er blevet et stort fan af sprites, der efter mange år i skyggen har fundet stort potentiale mht. webgrafik. Følgende er et link til en hurtig indførsel i sprites-teknologien i CSS:
http://www.alistapart.com/articles/sprites/

Av.. Ja det ser skide smart ud.. og så virker det sq i Internet Explorer 6.0, Mozilla Firefox 1.5 og Netscape 8.1

sådan fik jeg bixet min knapper sammen :D

/* CSS */
div.cssbutton {
  background-image: url("./image/css_button.gif");
}
div.cssbuttongrey {
  background-image: url("./image/css_button_grey.gif");
}
.cssbutton, .cssbuttongrey {
  width: 100px;
  height: 20px;
  margin: 0px;
  padding: 0px;
  text-align: center;
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
}
.cssbutton a:link, .cssbutton a:hover, .cssbutton a:active, .cssbutton a:visited, .cssbuttongrey span {
  left: 0px;
  top: 3px;
  width: 100px;
  height: 20px;
  color: black;
  font-size: 8pt;
  text-align: center;
  font-family: Tahoma;
  font-weight: bold;
  text-decoration: none;position: absolute;
}
.cssbuttongrey span {
  cursor: default;
  color: #959595;
}
/* CSS */

<!-- HTML -->
<div class="cssbutton"><a href="#" title="CSS Test 1">CSS Test 1</a></div>
<div class="cssbuttongrey"><span>CSS Test 2</span></div>
<!-- HTML -->

Tak for hjælpen.

Det var så lidt.
Dejligt at kunne dyrke lidt exorcisme og vende folk mod lyset ;-)
Tag et kig på følgende projekt:
http://csszengarden.com/
Hvis du kigger eksemplerne igennem vil du se, at den eneste forskel, der er på alle siderne er css-layoutet. Med andre ord kan det sagtens lade sig gøre at adskille indhold og layout og dermed lade css tage sig af all presentationen af indholdet.