Avatar billede camp Nybegynder
09. juni 2005 - 12:44 Der er 2 kommentarer

Placering af layer?

Jeg har et "tungt" billede som jeg har været nødt til at slice, og det er nu placeret centreret på min side med en tabel.
(Hver celle er en slice).

Jeg vil gerne have noget tekst til at løbe pænt over billedet,
men hele tabellen forskydes, hvis jeg placerer layer div i en tabelcelle hvor der i forvejen er et image tag.

Så fandt jeg på at lave en ekstra row, og lægge layer i den,
men det rykker hele tabellen nedad.
Det ser derimod ud til at virke for mig, hvis jeg laver min
row i bunden, og angiver minus værdier for positionering.

Det virker ret bøvlet. 
Kan jeg gøre det anderledes?


(Det er naturligvis vigtigt at baggrundsbilledet er
centreret på siden, og tekstlaget skal passe over i
alle skærmopløsninger)


<table align="center" width="775" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/test_01.jpg" width="155" height="119"></td>
<td><img src="images/test_02.jpg" width="155" height="119"></td>
<td><img src="images/test_03.jpg" width="155" height="119"></td>
<td><img src="images/test_04.jpg" width="155" height="119"></td>
<td><img src="images/test_05.jpg" width="155" height="119"></td>
</tr>
<tr>
<td><img src="images/test_06.jpg" width="155" height="119"></td>
<td><img src="images/test_07.jpg" width="155" height="119"></td>
<td><img src="images/test_08.jpg" width="155" height="119"></td>
<td><img src="images/test_09.jpg" width="155" height="119"></td>
<td><img src="images/test_10.jpg" width="155" height="119"></td>
</tr>
<tr>
<td><img src="images/test_11.jpg" width="155" height="118"></td>
<td><img src="images/test_12.jpg" width="155" height="118"></td>
<td><img src="images/test_13.jpg" width="155" height="118"></td>
<td><img src="images/test_14.jpg" width="155" height="118"></td>
<td><img src="images/test_15.jpg" width="155" height="118"></td>
</tr>
<tr>
<td><img src="images/test_16.jpg" width="155" height="119"></td>
<td><img src="images/test_17.jpg" width="155" height="119"></td>
<td><img src="images/test_18.jpg" width="155" height="119"></td>
<td><img src="images/test_19.jpg" width="155" height="119"></td>
<td><img src="images/test_20.jpg" width="155" height="119"></td>
</tr>
<tr>
<td colspan="5">
<div style="visibility: visible; position: relative; z-index: 1; top: -300px; left: 20px; width: 600px; height: 200px">
Dette er s&aring; et lag
<p>Som str&aelig;kker sig over det meste af baggrundsbilledet</p>
</div>
</td>
</tr>
</table>
Avatar billede roenving Novice
09. juni 2005 - 14:00 #1
Hvadfor er det nødvendigt at slice billedet, kan du ikke bare lægge det som baggrund for hele tabellen ?-)

-- men tricket med at overlejre noget gør du med position, hvor absolute vil forholde sig til nærmest omkransende positionerede, og hvis du angiver det til relative, vil det ikke flytte sig i forhold til uden !-)

Eksempel:

<div style="width:775px;margin:0 auto;position:relative">
  <img src="images/test.jpg" style="width:775px;height:475px;">
  <div style="position:absolute;width:600px;height:200px;padding:175px 0 0 20px;">
    Dette er s&aring; et lag
    <p>Som str&aelig;kker sig over det meste af baggrundsbilledet</p>
  </div>
</div>

-- og dette trick er ikke begrænset til at du med divs, for du kan sagtens i dit eget eksempel bare sætte position:relative; på table-tagget, og så give den div, du allerede har de samme properties, som jeg har givet den !o]
Avatar billede roenving Novice
09. juni 2005 - 14:19 #2
-- nåja, sikkert margin i stedet for padding ...
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