Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

foto's in een tabel

18 antwoorden
  • Hallo Allemaal, Ik was wat aan het experimenteren met wat foto's en een hover effect. Drie kleine fototjes onder elkaar van 100px hoog, daarnaast een foto van 310px hoog en een cellspacing van 5. Er ontstaat nu een net recht blok in IE 7. Kijk ik in Firefox dan zie ik een klein randje ruimte onder de foto waardoor het geheel niet meer strak is. Nou ben ik al bezig geweest met padding en margin ipv de cellspacing en meer van dat soort zaken echter zonder resultaat. Ondat het tabelletje in een website stond heb ik het in een aparte pagina gezet zonder verder enige opmaak en blijf ik dit probleem houden. Ik heb al gegoogled en op diverse fora gezocht maar kom er niet uit. Het tabelletje ziet er zo uit: [code:1:e994592619]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Foto's in tabel</title> <META HTTP-EQUIV="content-type" CONTENT="text/html;charset=ISO-8859-1"> <meta name="description" content=""> <META HTTP-EQUIV="content-style-type" CONTENT="text/css"> <meta name="robots" content="index, follow"> </head> <body> <table border="0" cellspacing="5" cellpadding="0"> <tr> <td><img src="fotos/zee-sm01.jpg" width="100" height="100" alt=""></td> <td rowspan="3"><img src="fotos/zee01.jpg" width="415" height="310" alt=""></td> </tr> <tr> <td><img src="fotos/zee-sm02.jpg" width="100" height="100" alt=""></td> </tr> <tr> <td><img src="fotos/zee-sm03.jpg" width="100" height="100" alt=""></td> </tr> </table> </body> </html>[/code:1:e994592619] en is [url=http://websites.kcst.nl/fotostab/fotos-tabel.html]hier[/url] te zien. Wie heeft er enig idee hoe ik dit op moet lossen? Alvast bedankt. Moos
  • die 310 heigth van die grote foto is te weinig om de drie foto´s plús tussenruimte te dekken?
  • Nee die 310 is precies genoeg, 3 x 100 voor de foto's + 2 x 5 voor de tussenruimte. Alleen werkt dit voor IE 6 en 7 wel maar bij FF komt er onderaan de foto wat extra ruimte. En dat zal je vast wel weg kunnen werken maar hoe. En deze uitvoering, met 3 plaatjes links en dan rechts daarvan een groote foto heb ik met div's nog niet voor elkaar gekregen.
  • Links zijn er drie TD's onder elkaar met een cellspacing van 5 en een plaatje van 100. Dat geeft een totale hoogte van 3 x (5+100 +5) = 330 Rechts 1 plaatje van 310 + 2 x 5 voor de cellspacing = 320 Je hebt daar dus 10 pixels te weinig. In IE8 ziet het er dan ook hetzelfde uit als in FF3 en als in Opera, chrome enz. IE6 en 7 moet je niet gebruiken om te kijken of iets goed is, want die browsers deugen zelf niet. Wimb
  • Hoi Wimb, celspacing is toch gewoon de ruimte tussen twee cellen? Wat jij voorrekend is dan toch padding? Dan klopt het verhaal wel maar is het beeld nog steeds niet hetzelfde. Als ik de celpadding en de celspacing op nul zet, met de kleine foto's 100 hoog en de grote foto 300 hoog zouden ze dus allemaal tegen elkaar moeten liggen. In ie7 en lager is dat ook zo en alle anderen dus niet. En als ik het verhaal nou omdraai, vind ik ook goed, dus beginnen in FF om alles netjes opgelijnd te krijgen maar dan klopt het dus niet meer in ie7 en lager. Dan moet je dus een ie hack maken voor ei7 en lager, ok kan ook maar wat moet daar in staan dan? Dat heb ik dus geprobeerd met verschillende waardes voor padding en margin maar daar kom ik dus ook niet uit. Waar het dus om gaat is dat ik het er hetzelfde uit wil laten zien in ie7 en lager en in alle andere. Als je dus weet in FF doe je het zo en dan maak je een hack voor ie7 en lager er daar zet je dan een padding van zoveel in dan klopt het altijd, dat bedoel ik en dat heb ik nog steeds niet voor elkaar, ben benieuwd of we er uit komen. We gaan gewoon verder zoeken. Ik krijg trouwens niet meer automatisch bericht van reacties, weet iemand daar wat van?
  • Als je cellspacing naar 0 zet, en aan de cel met de grote foto een style met een padding-left van een pixel of 5 geeft, ziet het er prima uit in FF.
  • Dat klopt maar dan dus niet in ie7 en lager.
  • Online voorbeeld? - Bas
  • Hoi Bas, linkje naar online voorbeeld staat in eerste post. Bedankt alvast dat je gaat kijken.
  • Ik dacht het even snel op te kunnen lossen maar dat viel dus mooi tegen. Op de een of andere manier krijg ik het niet voor elkaar om de tabel netjes een hoogte van 310 pixels te geven, op bizarre wijze blijft er een ruimte onderaan bij de kleine afbeelding en dus ook onderaan bij de grote afbeelding. Ik kan de reden niet terugvinden in mijn CSS. Verder heb ik wel een combinatie van regels weten samen te stellen waarbij het resultaat gelijk is in FF3 en IE7. Aan de rest van het forum om dit schoonheidsfoutje te corrigeren. (Je hebt een border nodig om het goed te zien.) :P [code:1:caacb581a2]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Foto's in tabel</title> <META HTTP-EQUIV="content-type" CONTENT="text/html;charset=ISO-8859-1"> <meta name="description" content=""> <META HTTP-EQUIV="content-style-type" CONTENT="text/css"> <meta name="robots" content="index, follow"> <style type="text/css"> table,td,tr,img{border:0;padding:0;margin:0;outline:0;} table{border-spacing:0;border-collapse: separate;} td{vertical-align: top;} td.klein{height:105px;} td.groot{padding:0 0 0 5px;} td.klein.onder{height:100px;} </style> </head> <body> <table cellspacing="0"> <tr> <td class="klein"><img src="fotos/zee-sm01.jpg" alt=""></td> <td class="groot onder" rowspan="3"><img src="fotos/zee01.jpg" alt=""></td> </tr> <tr> <td class="klein"><img src="fotos/zee-sm02.jpg" alt=""></td> </tr> <tr> <td class="klein onder"><img src="fotos/zee-sm03.jpg" alt=""></td> </tr> </table> </body> </html>[/code:1:caacb581a2] - Bas
  • Hee Bas, Wat gaaf dat je dat zo snel voor elkaar hebt. Ik ga daar eens verder in duiken en kom daar nog op terug. Misschien is hier een soort algemen oplossing uit te halen voor complexere gevallen. Die ruimte onderaan de plaatjes is inderdaad erg vreemd, is er zelfs zonder enige opmaak. En waar dat nou aan ligt begrijp ik nog steeds niet. In ieder geval hartstikke bedankt! Moos
  • Ik denk dat het aan het doctype ligt. Verander die eens in transitional en ook de eerste code wordt bij mij goed weergegeven. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • Hee Aagjen, Dat is ook een leuke. Gewoon HTML 4.01 Transitional werkt niet, HTML 4.01 Strict ook niet, XHTML Transitional wel en XHTML Strict ook niet. Heb jij daar een verklaring voor Bas?
  • Ik kan zo snel niet iets bedenken, maar ik kan je wel vertellen dat bovenstaande code niet zal valideren met een XHTML-doctype. Als al je pagina's nu netjes HTML4 Strict zijn zou ik dat zo laten, dat is de moeite van het omschrijven niet waard. Daarbij ben ik niet bepaald fan van Transitional doctypes, ongeacht het feit of het HTML of XHTML is. Ik heb overigens misschien een oplossing voor ons schoonheidsfoutje. We zouden de cellen allemaal een expliciete hoogte kunnen geven met CSS en vervolgens de [i:931ada8883]overflow[/i:931ada8883] van alle cellen op [i:931ada8883]hidden[/i:931ada8883] kunnen zetten. Niet getest, maar ik heb goede hoop dat dat zal werken. - Bas
  • Hoi Bas, Nee met alleen dit andere doctype valideerd de pagina natuurlijk niet, maar dat is zo verholpen [url=http://websites.kcst.nl/fotostab/fotos-tabel-doctype.html]klik[/url]. Maar ik ben met je eens dat ik ook niet van Transitional houd, maar als ik nou strict codeer en er een transitional doctype boven zet om, in dit geval, het goed uitgelijnd te krijgen, kan ik daarmee leven. Alle cellen een expliciete hoogte geven heb ik ook geprobeerd alleen nog niet met [i:b05ad6757a]overflow hidden[/i:b05ad6757a], ga ik ook eens proberen. Bedankt weer! Moos
  • Na mijn uitstekend rekenwerk :D heb ik zelf maar het een en ander geprobeerd. Er blijft dus een (extra) ruimte onder de plaatjes. Voor mij is dat het keiharde bewijs dat tabellen niet geschikt zijn voor pagina opmaak. Dus heb ik iets zonder tabel gemaakt: [code:1:af12c9064c] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head> <title>Foto's in tabel</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta name="description" content="yxcyxc"> <meta http-equiv="content-style-type" content="text/css"> <meta name="robots" content="index, follow"> <style type="text/css"> #fototabel {height: 336px; width: 524px;border:0px solid #000;} .fll {float:left; margin: 0; padding: 0; border:0px solid #000;} .flr {float:right; margin: 0; padding: 0; border:0px solid #000;} .mid {margin: 5px 0 5px;} </style> </head><body> <div id="fototabel"> <img class="fll" src="fotos-tabel_files/zee-sm01.jpg" alt="" height="100" width="100"> <img class="flr" src="fotos-tabel_files/zee01.jpg" alt="" height="310" width="415"> <img class="fll mid" src="fotos-tabel_files/zee-sm02.jpg" alt="" height="100" width="100"> <img class="fll" src="fotos-tabel_files/zee-sm03.jpg" alt="" height="100" width="100"> </div> </body></html>[/code:1:af12c9064c] Werkt hier prima. Omdat ik mij niet voor kon stellen dat dit probleem nooit eerder is opgedoken, heb ik wat gegoogeld en [b:af12c9064c][url=http://www.webmasterworld.com/forum21/12234.htm]dit[/url][/b:af12c9064c] gevonden. Met[code:1:af12c9064c] <style type="text/css"> xxxtd {line-height:0px;} img {display:block;} </style>[/code:1:af12c9064c] in de head is het hier met de table ook goed. De line height lijkt het ook te doen, maar die heb ik even weggehaald om de andere te testen. Ik heb dus alleen met FF3 gekeken, niet met andere browsers. wimb
  • Hee WimB, Mooi stukje progammeer werk. Ik heb ook al heel wat op dit onderwerk gegoogled maar geen oplossing gevonden. Deze vind ik wel heel erg mooi, img {display: block;}, werkt in alle brouwsers! En kan je dan gewoon HTML 4.01 Strict gebruiken, vind ik ook wel zo lekker. Hartstikke bedankt WimB! Moos
  • Heej Moos, Volgens mij was het probleem bij jou dat je de cellspacing="0", cellpadding="0" en border="0" niet had ingesteld. Dit doe ik altijd als ik een tabel begin te maken. Tip voor in de toekomst ;).

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.