Avatar billede krukken Mester
06. juli 2005 - 20:33 Der er 7 kommentarer og
1 løsning

Skrive ovenpå billeder

Hej,

Jeg er ved at lave em hjemmeside i XHTML 1.1. I den forbindelse har jeg brug for at placere en tekst oven på et billede. Ligenu gør jeg det på følgende måde:
<td class="welcome">
<img src="images/apperticerMainArea.gif" alt="">
En lille appetitvækker</img>
</td>

Dette virker ikke - og er heller ikke lovligt i XHTML - hvordan kan man gøre det istedet for?
Avatar billede cool_casper Nybegynder
06. juli 2005 - 20:38 #1
Kan du ikke putte billede på baggrunden og så bare skrive teksten?
<td style="background: url(images/apperticerMainArea.gif); width:200px; height:100px;">Teksten skulle gerne stå oven på billedet</td>
Avatar billede busschou Praktikant
06. juli 2005 - 20:43 #2
Ellers kan du jo benytte z-index faktoren til at placere teksten i en div med en højere z-index værdi end billedet.
Derved vil teksten komme oven på billedet
http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_zindex2
Avatar billede krukken Mester
06. juli 2005 - 20:45 #3
busschou > div er det lovligt i XHTML?
Avatar billede krukken Mester
06. juli 2005 - 20:46 #4
cool_casper > Dit for slag virker:-) Nu bliver jeg nok besværligt - man kan det ikke gøres pænere og mere simpelt?
Avatar billede busschou Praktikant
06. juli 2005 - 20:53 #5
Øhh jo div er da så ganske vist lovligt , hvorfor skulle det ikke være det?
Avatar billede busschou Praktikant
06. juli 2005 - 20:59 #6
<div> definerere jo en gruppering af elementer fuldstændig som <span> og <table> definerer en anden måde at gruppere på :o) Så jo det er lovligt i xhtml
Det er muligt at der i strict er nogle ting der skal tages højde for, men det er vist mere i <table> at der skal styles en del

I cool_caspers eksempel er billedet baggrund i cellen, det gør blandt andet at du skal style om billedet skal vises en eller flere gange eller strækkes når en bruger gør skærmen større og mindre. Teksten vil også stå som normalt i tabel cellen, dvs i toppen af billedet som udgangspunkt
Hvis du laver en <div style="z-index=2">DIN TEKST</div> Så kan du style den til at sætte sig oven på billedet præcis som du ønsker det, i midten, baglæns, eller andet, og du behøves ikke sætte billedet som baggrunds billede :o)

Men valget er selvfølgelig dit :o)
Avatar billede roenving Novice
07. juli 2005 - 00:56 #7
Men hvis man bruger flere elementer er det jo uanset z-index jo nødvendigt at specificere, at disse elementer skal optage (/ikke beslagglægge plads for andre elementer, hvorfor det er nødvendigt at positionere mindst et af dem absolut, f.eks.

<div style="position:relative;">
  <img src="ditBillede.jpg" style="width:400px;height:300px; />
  <div style="position:absolute;top:15px;left:55px;color:white;font-weight:900;font-family:verdana,sans-serif;font-size:large;">
    Tekst ovenpå billedet !-)</div>
</div>
Avatar billede krukken Mester
07. juli 2005 - 21:34 #8
Jeg brugte cool_caspers løsninger. Tak for indlægende!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester