Notifikationer

Markér alle som læst Log ud

Slettet bruger

08. september 2005 - 19:33 Der er 12 kommentarer og
1 løsning

Tekst på billede ?

Hej

Hvordan skriver jeg en tekst oven på et billede, det skal både virke i FF og IE.

Fx. hvis jeg har lavet hele designet i adobe photoshop, og så jeg vil til at kode det i HTML.

Når jeg så vil skrive en tekst ind på et billede hvad gør jeg så?

Synes godt om

softspot Forsker

08. september 2005 - 19:54 #1

Typisk vil du klippe de enkelte elementer af designet ud i mindre stumper grafik, da det oftest skal fungere i mindre enheder på skærmen (menuer skifter, billeder skifter alt hvilken side man er på osv.).

Når det så er sagt, så kan du sætte et billede ind som baggrund i et element og dermed have mulighed for at skrive ovenpå billedet. Dette gøres typisk med en style, nogenlunde således:

<div style="background-image:url(billedet.jpg); background-repeat:no-repeat;">Her ligger der et billede under...</div>

og hvis der er tale om mange styles eller mange elementer der skal udstyres med baggrundsbillede, så bør det nok ligge i et stylesheet.

Synes godt om

venchil Nybegynder

08. september 2005 - 19:57 #2

Du kunne jo lægge en div ovenpå

<img src="ditbillede.jpg" alt="ditbillede">
<div position="relative" z-index="2">Din tekst her</div>

Du bør også ændre placeringen af din div, hvis dit billede er placeret et bestemt sted, eller du vil skrive på forskellige steder på billedet.

Synes godt om

venchil Nybegynder

08. september 2005 - 19:58 #3

giv softspot point... hans metode er bedre, min er måske lidt enklere, hvis du ikke er så god til HTML/CSS...

Synes godt om

udvikler Nybegynder

08. september 2005 - 19:59 #4

<div style="margin-left: 200px; margin-right: 200px;">DIN TEKST</div>

Du skal bare ændre 200px og 200px til der hvor dit billede er på siden. Hvis du forstår ?

Hvis dit billede er helt oppe i venstre hjørne skal der stå 0px i hver af dem.. forstår du nu ? :)

Synes godt om

roenving Novice

08. september 2005 - 22:10 #5

Noget ovenpå noget andet ser typisk således ud:

<div style="position:relative;">
<img src="ditBillede.jpg">
<div style="position:absolute;left:0;top:0;width:400px;color:white;font-weight:900;text-align:center;">
Denne tekst står over billedet</div>
</div>

Synes godt om

Slettet bruger

09. september 2005 - 23:43 #6

Jeg har lavet designet i Photoshop, og jeg har sliced det så der er flere billeder. så har jeg lavet en billede hvor jeg vil have noget skriv ovenpå. har ikke fået nogle af jeres forslag til at virke endnu

Synes godt om

softspot Forsker

09. september 2005 - 23:46 #7

Hvad har du gjort? Kan du ikke vise en konkret eksempel på det kode du ikke kan få til at fungere, det er lidt nemmere at arbejde videre med...

Synes godt om

Slettet bruger

09. september 2005 - 23:52 #8

Her er hvad jeg har:

<html>

<head>

<title>Index for ssk</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<center>

<br>
<br>
<br>
<br>


<table id="Table_01" width="600" height="251" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9">
<img src="images/Index2_01.gif" width="600" height="9" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/Index2_02.gif" width="40" height="26" alt=""></td>
<td>
<a href="index.html"><img src="images/Index2_03.gif" width="53" height="26" alt="" border="0"></a></td>
<td>
<a href="kampe.html"><img src="images/Index2_04.gif" width="51" height="26" alt="" border="0"></td>
<td>
<a href="spillertrup.html"><img src="images/Index2_05.gif" width="69" height="26" alt="" border="0"></td>
<td>
<a href="billeder.html"><img src="images/Index2_06.gif" width="57" height="26" alt="" border="0"></td>
<td>
<a href="links.html"><img src="images/Index2_07.gif" width="43" height="26" alt="" border="0"></a></td>
<td colspan="2">
<img src="images/Index2_08.gif" width="287" height="26" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/Index2_09.gif" width="12" height="215" alt=""></td>
<td colspan="7">
<img src="images/Index2_10.gif" width="567" height="202" alt=""></td>
<td rowspan="2">
<img src="images/Index2_11.gif" width="21" height="215" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/Index2_12.gif" width="567" height="13" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="12" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="28" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="53" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="51" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="69" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="57" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="43" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="266" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
</tr>
</table>

<br>
<br>
<br>
<br>
<br>
<br>
<hr color="d4d4d4" width="100px">
<font color="d4d4d4" size="2" face="Arial">Hylde Design</font><br><br>

</center>

</body>

</html>

Oven på image 10 vil jeg kunne skrive en tekst.

Synes godt om

softspot Forsker

10. september 2005 - 00:00 #9

Prøv at ændre denne stump kode

<td colspan="7">
<img src="images/Index2_10.gif" width="567" height="202" alt=""></td>

til

<td colspan="7" style="background:url(images/index2_10.gif) no-repeat;" width="567" height="202">
Den tekst der skal skrives ovenpå billedet...</td>

Denne teknik kræver at billedet er klippet i de rigtige dimensioner, dvs. at det passer ind i den ramme man putter det i (her tabelcellens størrelse).
Det er i øvrigt muligt at du skal have en spacer ind i tabelcellen for at den holde størrelsen... men prøve lige ovenstående først.

Synes godt om

Slettet bruger

10. september 2005 - 00:07 #10

Mange tak nu virker det, hvor skal jeg nu trykke for at give dig point?

Synes godt om

softspot Forsker

10. september 2005 - 00:10 #11

Velbekomme :)

Ude til venstre skal du vælge mit navn i listen og trykke på accepter (tror jeg nok - har ikke givet så mange point væk :))...

Synes godt om

Slettet bruger

10. september 2005 - 00:12 #12

Tak igen, nu har du fået dem

Synes godt om

softspot Forsker

10. september 2005 - 00:13 #13

Ja, det er rigtig fint - tak for point :)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS