Tekst over plaatje in tabelcel - Softwareontwikkeling

maandag 22 oktober 2007 18:18

Acties:

Hopla!

Topicstarter

Zie de html/css hieronder. Ik wil een tabel maken, met in elke cel een plaatje. Over dit plaatje heen moet tekst komen. Het plaatje kan geen achtergrond-plaatje worden, omdat het dan lastig is om de cel even groot te maken als het plaatje (plaatjes verschillen van grootte). In de code hieronder komt de tekst onder het plaatje te staan ipv er doorheen / erboven. Wat doe ik verkeerd?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Test</title>
<style type="text/css" media="screen">
.layer1 {
  z-index: 0;
}

.layer2 {
  z-index: 1;
}
</style>
</head>

<body>
<table border="1">
  <tr>
    <td>
      <div class="layer1"><img src="http://www.google.nl/intl/nl_nl/images/logo.gif"><div>
      <div class="layer2">Dit is tekst</div>
    </td>
    <td>
      <div class="layer1"><img src="http://www.google.nl/intl/nl_nl/images/logo.gif"><div>
      <div class="layer2">Dit is ook tekst</div>
    </td>
  </tr>
</table>
</body>
</html>

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

maandag 22 oktober 2007 18:22

Acties:

BCC

zoek eens op css float

Na betaling van een licentievergoeding van €1.000 verkrijgen bedrijven het recht om deze post te gebruiken voor het trainen van artificiële intelligentiesystemen.

maandag 22 oktober 2007 18:23

Acties:

Geert.H

z-index is niet genoeg. Probeer eens te spelen met position:absolute, oid. Nu komt je tekst naast of onder de afbeelding te staan.

Verder is het zeker wel mogelijk om met achtergrond afbeeldingen te werken. Door id''s mee te geven aan je <td> kan je elke afzonderlijk een hoogte en een breedte meegeven.

Succes.

edit:
@boven: float zal niet helpen in dit geval.

[ Voor 7% gewijzigd door Geert.H op 22-10-2007 18:23 ]

maandag 22 oktober 2007 18:24

Acties:

BCC

Jawel, de tweede div floaten in de eerste div. @onder : Niet als je de image als background image in div 1 gooit.

[ Voor 42% gewijzigd door BCC op 22-10-2007 18:28 ]

Na betaling van een licentievergoeding van €1.000 verkrijgen bedrijven het recht om deze post te gebruiken voor het trainen van artificiële intelligentiesystemen.

maandag 22 oktober 2007 18:26

Acties:

--MeAngry--

aka Qonstrukt

BCC schreef op maandag 22 oktober 2007 @ 18:24:
Jawel, de tweede div floaten in de eerste div.

Dan staat de tekst er nog steeds naast of onder hoor. De tekst float dan langs de afbeelding.
Position: absolute is hier het goede sleutelwoord inderdaad.

Tesla Model Y RWD (2024)

maandag 22 oktober 2007 18:27

Acties:

Geert.H

hmm, het kan aan mij liggen maar ik snap niet helemaal wat je bedoeld. De eerste div staat lekker links uitgelijnd, als jij de tweede div naar links float dan zal de div of links of rechts van de afbeelding komen te staan. Niet ervoor. (niet getest

)

maandag 22 oktober 2007 19:27

Acties:

Reveller

Hopla!

Topicstarter

Float werk idd niet; en een combinatie met position: absolute; zorgt ervoor dat het plaatje en de tekst buiten te tabel komen te staan:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Test</title>
<style type="text/css" media="screen">
.layer1 {
  z-index: 0;
}

.layer2 {
  float: right;
  z-index: 1;
}
</style>
</head>

<body>
<table border="1">
  <tr>
    <td>
      <div class="layer1"><img src="http://www.google.nl/intl/nl_nl/images/logo.gif"><div>
      <div class="layer2">Dit is tekst</div>
    </td>
    <td>
      <div class="layer1"><img src="http://www.google.nl/intl/nl_nl/images/logo.gif"><div>
      <div class="layer2">Dit is ook tekst</div>
    </td>
  </tr>
</table>
</body>
</html>

@iedereen: iemand een ander idee?
@Geert.H: als ik het plaatje als achtergrond instel, kan ik het niet klikbaar maken (wat wel moet). Is het mogelijk de hele <td> klikbaar te maken?

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

maandag 22 oktober 2007 23:12

Acties:

Geert.H

Iets zegt me dat je complete opbouw niet goed is. Wat is wat je precies wilt gebruiken? waarom gebruik je überhaupt een tabel? Verder is position:absolute zeker wel de weg die je moet gaan. Het is alleen niet zo dat je probleem wordt opgelost door alleen "position:absolute;" toe te voegen.
Lees er eerst eens wat meer over: http://www.w3schools.com

Verder zeg je dat er op je afbeelding moet worden geklikt. Maar hoezo bedoel je dat? In het voorbeeld dat je geeft is dat niet een mogelijkheid (ok je kan wel op je afbeelding klikken, maar d'r zal niets anders gebeuren dan als het een achtergrond afbeelding is).
Ik denk dus dat het in jou geval even wat handiger is dat je iets meer toelichting geeft wat je precies wilt bereiken. Want iets zegt mij dat je nu een oplossing voor een probleem vraagt terwijl het echte probleem nog een paar laagjes dieper ligt.

[ Voor 16% gewijzigd door Geert.H op 22-10-2007 23:14 ]

dinsdag 23 oktober 2007 08:48

Acties:

BCC

Volgens mij kun je dit veel beter aanpakken met een grote div, waarin je divs opneemt met daarin de plaatjes. Je kan dan de div als achtergrond plaatje jouw plaatje gebruiken met een onclick of in de div je plaatje zetten met een a href eromheen. Met position kun je dan bijvoorbeeld een span ten opzichte van je div neerzetten. Dus:

code:

<div class="box_container">
  <div class="box">
     <a href="/aap"><img src="aap.jpg"></a>
     <span>Dit is een aap</span>
  </div>
</div>

of

code:

<div class="box_container">
  <div class="box" style="backgrond-image: aap.jpg" onclick="javascript:window.top.location = '/aap'; ">
     <span>Dit is een aap</span>
  </div>
</div>

maar zoals gezegd: dit ligt er even aan wat je exact wil.

[ Voor 4% gewijzigd door BCC op 23-10-2007 08:52 ]

Na betaling van een licentievergoeding van €1.000 verkrijgen bedrijven het recht om deze post te gebruiken voor het trainen van artificiële intelligentiesystemen.

woensdag 24 oktober 2007 12:29

Acties:

moozzuzz

Voor een lijst plaatjes gebruik je best een lijstje:

HTML:

<ul>
   <li class="fotoboekfoto"><a href="" title=""><img style="vertical-align:middle;" alt="" src=""></a></li>
   <li class="fotoboekfoto"><a href="" title=""><img style="vertical-align:middle;" alt="" src=""></a></li>
</ul>

Cascading Stylesheet:

/* gepikt uit een eigen recente website... */
#content ul.fotoboekfoto   {position: relative; list-style: none; margin: 0px; padding: 0px;}
#content ul li.fotoboekfoto   {display: inline; text-align: center; padding:0px; margin: 0px;position: relative; background-image: url(' '); background-repeat: no-repeat;}
#content ul li.fotoboekfoto img {border: 2px solid #FCFCFC; background-Color: #f9f9f9; margin: 2px;}

Wellicht staat er wat teveel code, is dan ook letterlijk copy/paste. Binnen de <li> kan je dan een <span> met tekst in absoluut zetten (evt. de <li> ook expliciet relatief positioneren)

spam-voorbeeldje :-p

[ Voor 5% gewijzigd door moozzuzz op 24-10-2007 12:34 . Reden: een ander voorbeeld uit 2006 ]