/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
tekst oven på billeder?
Fra : Henrik Hejbøl Jensen


Dato : 07-11-01 07:33

Hej NG

Forholder det sig sådan at man med HTML og / eller CSS kan lægge noget tekst
ovenpå et billede?

\Henrik



 
 
Knud Gert Ellentoft (07-11-2001)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 07-11-01 08:11

Wed, 7 Nov 2001 07:33:01 +0100, skrev "Henrik Hejbøl Jensen"
<henrik@hejboel.dk>:

>Forholder det sig sådan at man med HTML og /
>eller CSS kan lægge noget tekst
>ovenpå et billede?

Ja, man bruger css, z-index, hvor 0 er bagerst og et højere tal
er foran.

Jeg har lagt et lille eksempel op på
<http://home13.inet.tele.dk/smedpark/test/zindex.htm>.
--
med venlig hilsen
Knud
http://home13.inet.tele.dk/smedpark/

"Jesper =F8rch=22= (08-11-2001)
Kommentar
Fra : "Jesper =F8rch=22=


Dato : 08-11-01 02:20

In article <Cz4G7.8796$Ip2.574758@news010.worldonline.dk>, "Henrik Hejbøl
Jensen" <henrik@hejboel.dk> wrote:

> Hej NG
>
> Forholder det sig sådan at man med HTML og / eller CSS kan lægge noget
> tekst ovenpå et billede?
>
> \Henrik

Hej Henrik

Du kan f.eks. i et stylesheet have noget lignende:


..image {
   background-image: url(back.gif);
   border-style: outset;
   padding: 0.5em;
   margin: 0.2em 2em;
}

stående.
Det giver lidt luft omkring, et baggrundsbillede (back.gif) og en 3-d
effekt i f.eks:

<p class="image" title="Her er teksten ovenp&aring; et billede">
Din tekst st&aring; her
</p>

eller

<div class="image" title="tekst p&aring; grafik">
Her er lidt tekst med noget grafik under
</div>

Håber du blev lidt klogere af dette :c)

Mvh. Jesper

Knud Gert Ellentoft (08-11-2001)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 08-11-01 03:25

Thu, 08 Nov 2001 01:19:42 +0000, skrev "Jesper
=?ISO-8859-1?q?M=F8rch=22= <john.vaughan4@ntlworld.com>:

><div class="image" title="tekst p&aring; grafik">
> Her er lidt tekst med noget grafik under
></div>
>
>Håber du blev lidt klogere af dette :c)

Hvis man så vil se billedet i dets rigtige størrelse, så skal man
huske at sætte width og height på f.eks. div

div   {width: 396px; height: 129px}

Ellers vil baggrundsbilledet blot blive vist på det sted, hvor
der står tekst og vil derfor ofte være mindre.

Og for at forhindre gentagelse af baggrundsbilledet, bør det være
background: url(back.gif) no-repeat fixed;
men det virker kun helt tilfredsstillende i IE.

Og så virker er width og height på <div> m.v. ikke understøttet i
Netscape 4.

Det forekommer mig at være bedre at bruge z-index i stadet for et
baggrundsbillede.

Det er nemmere at styre og man risikerer ikke at ikke hele
billedet bliver vist eller gentaget.
--
med venlig hilsen
Knud
http://home13.inet.tele.dk/smedpark/

"Jesper =F8rch=22= (08-11-2001)
Kommentar
Fra : "Jesper =F8rch=22=


Dato : 08-11-01 17:39

In article <9cqjut89vvcmltcldu8fi8fjppofjdur9t@news.tele.dk>, "Knud Gert
Ellentoft" <knudgert@mail.tele.dk> wrote:

[snip]

> Hvis man så vil se billedet i dets rigtige størrelse, så skal man huske
> at sætte width og height på f.eks. div
>
> div   {width: 396px; height: 129px}
>
> Ellers vil baggrundsbilledet blot blive vist på det sted, hvor der står
> tekst og vil derfor ofte være mindre.
>

Det er jeg nu ikke ude for med Mozilla 0.94 (NS 6.1) og Konqueror - De
viser det ganske tilfredsstillende - NS / IE 4 understøtter kun CSS og
styles delvist, så naturligvis fortolker de ældre browsere koden
dårligere end fuldt kompatible nye browsere gør det.

> Og for at forhindre gentagelse af baggrundsbilledet, bør det være
> background: url(back.gif) no-repeat fixed; men det virker kun helt
> tilfredsstillende i IE.
>

Var det ikke kun et mindre område der skulle vises tekst ovenpå et
billede? Noget i stil med en <div> e.lign.
- Her er styles / class jo ideel til netop det.

> Og så virker er width og height på <div> m.v. ikke understøttet i
> Netscape 4.
>

Nej, for NS4 undertøtter ikke CSS fuldt ud (men det gør NS 6.1/IE6 nu
heller ikke)

> Det forekommer mig at være bedre at bruge z-index i stadet for et
> baggrundsbillede.
>

Er <layer> og z-index overhovedet understøttet af IE, Opera m.fl.? - Det
ligner mest af alt en Netscape-opfindelse som ikke følger W3C's
retningslinjer for XHTML 1 / HTML 4, men jeg kan da tage fejl

> Det er nemmere at styre og man risikerer ikke at ikke hele billedet
> bliver vist eller gentaget.

Hvis det nu er en 'texture' man vil have lagt som baggrund i f.eks. en
knap til en <form> er det da glimrende...

/ Jesper

Knud Gert Ellentoft (08-11-2001)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 08-11-01 19:02

Thu, 08 Nov 2001 16:39:27 +0000, skrev "Jesper
=?ISO-8859-1?q?M=F8rch=22= <john.vaughan4@ntlworld.com>:

>Er <layer> og z-index overhovedet understøttet af IE, Opera m.fl.? - Det
>ligner mest af alt en Netscape-opfindelse som ikke følger W3C's
>retningslinjer for XHTML 1 / HTML 4, men jeg kan da tage fejl

Jeg har ikke snakket om, at bruge <layer>, men z-index.
layer er en Netscape 4 only ting, mens z-index er en del af
cssstandarden.

Jeg svarede jo også på spørgsmålet og uploadede et eksempel med
det på <http://home13.inet.tele.dk/smedpark/test/zindex.htm> og
det virker i alle ver. 4 browsere (også Netscape 4.x) og nyere.
--
med venlig hilsen
Knud
http://home13.inet.tele.dk/smedpark/

Søg
Reklame
Statistik
Spørgsmål : 177557
Tips : 31968
Nyheder : 719565
Indlæg : 6408879
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste