Tekst på jpg menu knapper

Du kan lave en class, fx. sådan her:

.knap {
    float:left;
    width: 119px;
    height: 24px;
    border: 0px;
    padding-top:4px;
    margin-bottom: 6px;
    margin-left: 5px;
    text-align: center;
    color:    #ffffff;
    font-family:         Tahoma,Arial;
    font-size:             13pt;
    background-image: url('fortryd.png');
    cursor:pointer;
}

<button name="Fortryd" value="1" type="submit" class="knap">Fortryd</button>

Det er CSS style background-image der får "nemlig" eksempel til at virke. Du sætter dine jpg billeder som background i stedet for et img tag. Ellers kan du f.eks lave et nyt <div> tag, hvor teksten er i, og positionere dette hen over billederne, ved hjælp af CSS: position: absolute eller relative, sætte top / bottom / left / right.

Jeg gik efter php løsningen da jeg ikke kender noget til CSS og jeg kan ikke få ovenstående til at virke, jeg får blot en standard form knap med teksten fortryd på.

Jeg har fundet ud af at sætte tekst på et billede med GD men jeg kan kun bruge billedet hvis jeg gemmer det først, jeg mangler at finde ud af hvordan jeg blot sender billedet til browseren.

Men hvis en kan give et komplet eks. med en ovenstående CSS løsning så er det også fint.

Takker.

Nå, så fil jeg ovenstående CSS løsning til næsten at virke, eneste problem er at jeg ikke kan få teksten til at stå øverst på billedet, teksten er flyttet 7-8 pixel ned.

Du kan styre placeringen med padding-top.
Prøv at lege lidt med værdierne, så du kan se, hvad der sker.

Ja den ser sådan ud nu men alligevel er teksten flyttet ned:

.knap {
    float:left;
    width: 161px;
    height: 30px;
    border: 0px;
    padding-top: 0px;
    margin-top: 0px;
        margin-bottom: 0px;
    margin-left: 0px;
    text-align: center;
        color: black;
    font-family: Tahoma,Arial;
    font-size: 13pt;
        font-weight: bold;
    background-image: url('img/blankbutton.jpg');
    cursor:pointer;
}

Jeg er lidt usikker, men hvad sker der, hvis du skriver:

padding-top: -5px

eller

margin-top: -5px

padding-top: -5px ændre ikke på noget, margin-top: -5px gør kun at jeg mister 5px øverst af billedet.

Jeg fik den ide at skrive <div... i stedet for <button...
og den gjorde at teksten kom op i toppen

Jeg takker, smider du et svar.

Super, at det kører for dig.