Van tabellen naar DIV/CSS - nog wat advies svp

[anoniem]

Ik ben er bijna.. Nu loop ik nog tegen een klein dingetje aan. Mijn website is een fotowebsite, onderverdeeld per land, en dan per gebied. Voor een 'gebied'-pagina heb ik dan een container pagina met thumbnails, waar je op kan klikken, waarna je een groter plaatje te zien krijgt. In de huidige situatie is zo'n container pagina een tabel, met 4 kolommen. Enigszins wijs geworden van mijn vorige vraag op dit forum, ben ik stoeien met DIVs en ben ik gaan proberen om van die tabelstruktuur af te komen. Dat doe ik door het volgende stukje code in mijn stylesheet te zetten: [code:1:bfacadc381] div.float { float: left; margin: 5px; padding: 5px; width: 225px; height:225px; } div.float p { text-align: center; } [/code:1:bfacadc381] En de thumbnails worden dan als volgt in de html-source aangeroepen: [code:1:bfacadc381] <div class="float"> <a href = "bayofislandsandportcampbellnp\bayofislandsandportcampbellnp8.htm "> <img border = "0" src = "..\images\th_04_121_2192.jpg " alt="Bay of Martyrs "> </a> <p>Bay of Martyrs </p> </div> [/code:1:bfacadc381] Dat werkt prima zolang alle thumbnails in landscape staan. Maar niet als je er een portrait-plaatje tussendoor gooit. Kijk op [url]http://www.bluegumdata.com.au/pictures/test/australia/bayofislandsandportcampbellnp2.htm[/url] voor een voorbeeld (de links werken uiteraard niet).. Is hier iets aan te doen? Marcel

[anoniem]

Geen antwoord op je vraag maar een paar kleine tips: 1. Gebruik forward slashes '/'in je URLs, geen backslashes. 2. Gebruik voor je classnamen geen gereserveerde woorden zoals float, dat is verwarrend en soms mag je geen gereserveerde woorden gebruiken. 3. Is het perse nodig om de width en heigt van die div op te geven? Als dit niet nodig is dan ben je flexibeler. 4. gebruik geen spaties tussen je key en je value maar zo: border="0"

[anoniem]

Dank je wel Jaap, je commentaar wordt meegenomen..

[anoniem]

PS: die width en height had ik opgegeven in een poging om alle foto's op 1 lijn te krijgen. Is helaas niet gelukt, en ik ga voor dit soort pagina's maar weer terug naar de tabelstruktuur. Ik zag op de A List Apart website dat meer mensen er tegenaan gelopen waren...

[anoniem]

Ik heb een tijde geleden [url=http://www.wimb.net/index.php?s=home&page=21]deze[/url] pagina gemaakt, zonder tabellen maar met veel divjes. wimb

[anoniem]

Ik heb een boek van Eric Meyer en heb op het internet een hoofdstuk gevonden in pdf formaat, waarin hij een hele mooie manier uitlegt een Photogallery te maken mbv CSS. [url]http://www.peachpit.com/content/images/chap02_0735714258/elementLinks/chap02_0735714258.pdf[/url] Het laden duurt wel erg lang, dus heb even geduld.

[anoniem]

1) je hebt nu heel veel <div class="float"> die er eigenlijk weinig doen. Je kan beter één <div class="float-images"> met daarin alle images. dit scheelt een paar kb, en houdt het overzichtelijker. [code:1:cfea82cb3b] css: div .float-images div { float: left; margin: 5px; padding: 5px; width: 225px; height:225px; } .float-images p { text-align: center; } html: <div class="float-images"> <div> <a href=" bayofislandsandportcampbellnp\bayofislandsandportcampbellnp1.htm"> <img border=" 0" src=" ..\images\th_04_121_2154.jpg" alt="Murnanes Bay - Childers Cove"></a> <p>Murnanes Bay - Childers Cove </p> </div> <div> <a href=" bayofislandsandportcampbellnp\bayofislandsandportcampbellnp1.htm"> <img border=" 0" src=" ..\images\th_04_121_2154.jpg" alt="Murnanes Bay - Childers Cove"></a> <p>Murnanes Bay - Childers Cove </p> </div> <div> <a href=" bayofislandsandportcampbellnp\bayofislandsandportcampbellnp1.htm"> <img border=" 0" src=" ..\images\th_04_121_2154.jpg" alt="Murnanes Bay - Childers Cove"></a> <p>Murnanes Bay - Childers Cove </p> </div> <!-- etc //--> [/code:1:cfea82cb3b] 2) tutorial, tutorial, tutorials! Van tips leer je heel weinig waarom het zo is. Er zijn tonnen informatie te vinden over alles wat met webdesign/css/semantiek etc te maken heeft. Goede beginpunten voor nederlandse tut's zijn www.naarvoren.nl (jammer genoeg weet ik niet zoveel nederlandse websites) en engels: http://www.roderickhoward.com/cssdirectory/ http://www.simplebits.com/notebook/2004/06/21/bonanza.html http://www.alistapart.com/