Jeg har lavet en mindre hjemmeside, der hedder: http://www.forstanderkredsen.dk
Det fungerer sådan set OK, men der er et mindre problem, når man vil se siden i nogle bestemte browsere, d.v.s. Seamonkey, Firefox 2 og Mozilla (Windows).
På nogle af siderne vises seks billeder i 2 rækker á 3 stk. Men åbner jeg systemet i en af de nævnte browsere, vises alle 6 billeder i en lodret søjle, men hvis jeg klikker opdater, kommer billederne på plads, hvor de skal være.
Jeg har gransket koden nøje, og kan ikke se, at der skulle være noget galt.
Jeg har lavet det i en tabel. Jeg forsøgte først med en , men så kunne jeg ikke få billederne til at stå i to rækker á tre. Uanset, hvor meget jeg gav ny linie eller nyt afsnit, blev billederne på een række, bare lidt forskudt i højden.
Men jeg er såmænd også tilfreds med, at de står i en tabel, og problemet er jo til at overse, da der næppe er nogen af sidens brugere, der anvender de pågældende browsere. Jeg kunne dog alligevel godt tænke mig at høre, om nogen af jer har en ide om, hvori fejlen består. De af jer, der eventuelt kan bedømme det, kan sikkert også finde den bagvedliggende kode.
Og nej, jeg har ikke valideret det på w3c.
Kaj
16-09-1991
Det er fordi tabellens bredde varierer. For at tvinge siden til at vise billederne som du beskriver skal tabellen se således ud:
<table id="show"><tr><td><img src="img/img-24b.jpg" border="0" hspace="2" align="left"></td><td><img src="img/img-26b.jpg" border="0" hspace="2" align="left"></td><td><img src="img/img-29.jpg" border="0" hspace="2" align="left"></td></tr>
<tr><td><img src="img/img-25b.jpg" border="0" hspace="2" align="left"></td><td><img src="img/img-28.jpg" border="0" hspace="2" align="left"></td><td><img src="img/img-21b.jpg" border="0" hspace="2" align="left"></td></tr>
</table>
Noget andet er, at du egentlig bør fjerne tabellen og sætte billederne i to tags i stedet. Alternativt kan du rode med noget css og spans.
---
Miracle.dk - we dare, share & care.
14-03-2004
Hej kjaer
Tak for dit forslag. Det varede lidt, inden jeg så forskellen, men du har en td /td til hvert billede. Det passer nu ikke, at tabellens bredde varierer, da alle billeder er lige store. Venstre margin er bestemt af mit stylesheet.
Jeg har dog fundet en anden måde at lave det på:
<div style="width:619px"><img src="img/coast.jpg" border="0" hspace="2" vspace="2" align="right"><img src="img/rock.jpg" border="0" hspace="2" vspace="2" align="right"><img src="img/swans.jpg" border="0" hspace="2" vspace="2" align="right"></div><div style="width:619px"><img src="img/bug4.jpg" border="0" hspace="2" vspace="2" align="right"><img src="img/bug3.jpg" border="0" hspace="2" vspace="2" align="right"><img src="img/bug2.jpg" border="0" hspace="2" vspace="2" align="right"></div>
Ved at lave en div til hver række og give billederne align=right fik jeg dem til at være på to rækker.
Jeg har en lokal style for at få den ønskede margin, og har tilføjet vspace=2 for at få de 4 px afstand mellem billederne, som min kone forlanger.
Kaj
13-10-2005
Hej Kaj
Godt at du fik det til at virke. Du skriver at tabellens bredde ikke varierer, da billederne er lige store. Men det ved browseren vel ikke, da du ikke definerer deres størrelse i koden. Det er sandsynligvis derfor at de kommer på plads ved et tryk på opdatér; nu har browseren set billederne før, og kender nu deres størrelse.
Det er længe siden jeg har arbejdet med tabeller, så jeg har jeg ikke rigtigt noget at have det i.
25-08-2005
Hej Kaj,
Prøv og skift
<table>ud med<div>. Det giver meget mere frihed.<div style="overflow:hidden; width:400px;"><div style="float:left; width:96px; border:1px solid #000; padding:1px;">1. left</div>
<div style="float:left; width:296px; border:1px solid #000; padding:1px;">1. right</div>
<div style="float:left; width:296px; border:1px solid #DDD; padding:1px;">1. left</div>
<div style="float:left; width:96px; border:1px solid #DDD; padding:1px;">1. right</div>
</div>
14-03-2004
Hej larskhansen
Mange tak for dit forslag.
Webdesign har udviklet sig en del siden jeg så småt begyndte med det i forrige årtusinde, og det er lidt svært at følge med alt det nye. Jeg har været vant til at betragte div'er som store boxe, men jeg er ved at finde ud af, at man nærmest skal strø om sig med dem i stedet for tabeller.
Som du kan se i #2, er jeg så småt ved at finde ud af noget, og jeg betrgter dette problem som løst, men jeg vil kigge nærmere på din kode, den kan måske hjælpe mig på et senere tidspunkt.
Kaj
26-06-2007
#5 Som en tommelfinger regel skal du benytte div og css til layout, og tabeller skal benyttes til at fremstille data i tabelform.
Jeg vil dog erkende mig selv skyldig i en gang imellem at benytte tabeller til layout, idet forskellige browsere har en meget forskellig opfattelse af hvordan css skal fortolkes.
25-08-2005
Hej Kaj,
Jeg startede selv tilbage i '95 og kan godt huske hvordan det så ud dengang *gys* :)
Jeg gik over til for mange år siden, selv til at vise data... Du er ikke låst fast i bredden osv som du er i tabellerne. Når man først har sat en bredde til sin
<td>er man låst hele vejen ned. Med<div>kan du variere bredden hele vejen ned. Man skal bare huske at en "række" skal have samme bredde som "container" div'en. (Som i mit forslag).Div er vejen frem og tabeller høre til fortiden. "end of discussion" :)
24-04-2006
#7
CSS-layout er helt sikkert at foretrække i langt de fleste situationer, men vi må erkende at browserne endnu ikke implementerer hverken CSS eller W3-anbefalingerne fornuftigt nok til at vi helt og aldeles kan skrotte de dårlige vaner og gå over til den ideelle opdeling af markup og layout.
25-08-2005
Det virker fint i de browsere jeg tester. Firefox, IE7-8, Opera og Safari.