[HTML/CSS] Afbeelding op voorgrond van tabel plaatsen - Softwareontwikkeling

maandag 22 mei 2006 13:06

Acties:

Topicstarter

Daarnet was ik bezig met een soort profiel pagina, de huidige situatie is zichtbaar op:
deze site. Zie de broncode en de CSS voor meer informatie over de layout van de tabel. De complete pagina, incl. CSS en plaatjes is te downloaden op deze lokatie.

Alles werkt correct, behalve de avatar, als je goed kijkt dan zie je dat ik heb tijdelijk als background heb ingesteld voor de tabel cell rechtsboven. De bedoeling van de avatar was om deze zo weer te geven:

Afbeeldingslocatie: http://test.upsal.nl/imgproblem/img/bedoeling.jpg

Afbeeldingslocatie: http://test.upsal.nl/imgproblem/img/bedoeling.jpg

Ik heb al wat gezocht op google, en gok dat het te maken heeft met <div>-tags en z-index's.
Het kan ook met een extra <td> tag, maar dit zou betekenen dat ook de profielen zonder avatar een gereserveerde ruimte kregen. Dit is niet de bedoeling.
Aangezien ik hier nog weinig ervaring mee heb, vroeg ik me af of iemand me richting de oplossing kon helpen.

maandag 22 mei 2006 13:09

Acties:

NitroX infinity

Misschien heb je hier wat aan?

Cascading Stylesheet:

IMG.avatar {
position: relative;
right: 0px;
top: 0px;
z-index: 5; }

En dan plaats je de HTML code voor de desbetreffende afbeelding in de DIV.

Graphene; a material that can do everything, except leave the lab. - Asianometry

maandag 22 mei 2006 13:35

Acties:

mosymuis

Moet die position niet absolute zijn?

maandag 22 mei 2006 13:40

Acties:

Upsal

Topicstarter

Ik heb zojuist wat geprobeerd met NitroX infinity's code, maar kreeg t niet voor mekaar met deze code:

HTML:

      <tr>
        <td width="150" class="bgcolor1">NickName:</td>
        <td width="300" class="bgcolor1">Upsal <div style="position: relative; right: 0px; top: 0px; z-index: 5;">[img]"img/angel.jpg"[/img]</div></td>
      </tr>

'absolute' zal ook niet werken, omdat de tabel gecentered staat, en de breedte van de tabel kan veranderen.
Ik heb nu eens geprobeerd met 'float', met deze html:

HTML:

      <tr>
        <td width="150" class="bgcolor1">NickName:</td>
        <td width="300" class="bgcolor1">Upsal [img]"img/angel.jpg"[/img]</td>
      </tr>

Nu krijg ik dit, nu hoeft alleen nog het <img> element op de voorgrond te komen ipv de uitrekking van de <td> cell.

[ Voor 80% gewijzigd door Upsal op 22-05-2006 13:52 ]

maandag 22 mei 2006 13:47

Acties:

NitroX infinity

Hmm, maak eens een aparte div aan, geef die een hoge z-index, positioneer 'm op de correcte plaats en gooi de HTML code voor de afbeelding daar in.

Overigens moet je de code voor de afbeelding niet in een TD plaatsen maar in de DIV zelf, dus _direct_ na de <DIV> tag of _direct_ voor de </DIV> tag.

En een aparte DIV zet je natuurlijk ook niet in een TD.

[ Voor 54% gewijzigd door NitroX infinity op 22-05-2006 13:53 ]

Graphene; a material that can do everything, except leave the lab. - Asianometry

maandag 22 mei 2006 13:58

Acties:

Blue-eagle

Zoiets had ik tijden geleden al gemaakt, is redelijk simpel. Hier is een testcase:

http://www.mobdb.com/got/center_table_div_over.html

Speel wat met margins en paddings en je komt er wel

maandag 22 mei 2006 14:11

Acties:

Upsal

Topicstarter

Blue-eagle schreef op maandag 22 mei 2006 @ 13:58:
Zoiets had ik tijden geleden al gemaakt, is redelijk simpel. Hier is een testcase:

http://www.mobdb.com/got/center_table_div_over.html

Speel wat met margins en paddings en je komt er wel

Ik heb het geprobeerd, maar aangezien de tabellen steeds een andere breedte kunnen hebben, zal het plaatje soms op helemaal andere plaatsen komen staan, omdat je in <div> steeds afmetingen geeft die voor de <body> gelden en niet direct voor de <table>.

[ Voor 3% gewijzigd door Upsal op 22-05-2006 14:12 ]

maandag 22 mei 2006 14:20

Acties:

NitroX infinity

Upsal, het is toch gewoon zo simpel:

HTML:

<DIV CLASS="dit is het divje waar al je zooi instaat">
 [img]"http://blablabla">
[/img]
  <TR>
   <TD>bla</TD>
  </TR>
  <TR>
   <TD>bla</TD>
  </TR>
  <TR>
   <TD>bla</TD>
  </TR>
 </TABLE>
</DIV>

Cascading Stylesheet:

IMG.avatar {
position: relative;
right: 0px;
top: 0px;
width: ??px;
height: ??px;
z-index: 2; }

[ Voor 23% gewijzigd door NitroX infinity op 22-05-2006 14:20 ]

Graphene; a material that can do everything, except leave the lab. - Asianometry