Hvordan få bilder til å overlappe en tabell i HTML

Hvordan få bilder til å overlappe en tabell i HTML


Sette design ideer til en faktisk, fungerende nettside kan noen ganger være vanskelig. Du må kanskje gi avkall på grunn av begrensningene Hypertext Markup Language (HTML) og Cascading Style Sheets (CSS). For eksempel kan du bruke CSS til å tvinge et bilde for å overlappe en HTML-tabell, men bildet kan ikke være en del av tabellen. Du kan plassere bordet innenfor en "<div>" som er bredere og høyere enn bordet og bruke bildet som "<div>" bakgrunnsbilde. Hvis tabellen bakgrunnsfargen attributt er satt til "gjennomsiktig", bildet vil vise gjennom og overlapper bordet.

Bruksanvisning

1 Klikk på "Start" -knappen, "Alle programmer" og "Tilbehør". Klikk på "Notisblokk" eller navnet på en annen tekst editor.

2 Skriv inn følgende kode i tekstredigeringsprogram, erstatte "yourimage.jpg" med plasseringen og navnet på bildet du ønsker å vise gjennom og rundt bordet.

<Html>
<Body>

<Div style = "width: 450 piksler, høyde: 350 piksler; background-image: url (yourimage.jpg);">

<Table width = 350 border = 1 style = "background-color: transparent">
<Tr>
<Td width = "50%"> Første Rad Kolonne 1 </ td>
<Td width = "50%"> Første Rad Kolonne 2 </ td>
</ Tr>
<Tr>
<Td> Second Row Kolonne 1 </ td>
<Td> Second Row Kolonne 2 </ td>
</ Tr>
</ Table>
</ Div>

</ Body>
</ Html>

3 Klikk "Fil" og "Lagre". Lagre under filnavnet "test.html."

4 Klikk på "Start" -knappen, "Alle programmer" og "Internet Explorer" eller navnet på en annen nettleser. Klikk "Fil" og "Åpne fil".

5 Finn filen "test.html" som du opprettet, velger du den og klikker på "Åpne".

Hint

  • Bruk CSS absolutt posisjonering for å plassere et bilde under et bord. Plasser bildet og bord slik at man overlapper den andre. Gi bildet en z-indeks på -99 og bordet en z-indeks over 1. Dette sikrer at tabellen vil alltid vises på toppen av bildet.
  • Selv moderne nettlesere holder seg til standarder nærmere i dag enn noen gang før, kan webdesign fremdeles vise forskjellig avhengig av merke av nettleseren de besøkende bruker. Hvis design er avhengig av den nøyaktige plasseringen av elementene på nettsiden, bør du teste din design på så mange forskjellige nettlesere og nettleserversjoner som mulig.