jquery cycle centreren

[bassment]

Hoi,
In mijn site wil ik gebruik maken van jquery cycle.
Ik heb alles verwerkt en alles werkt naar behoren.
Alleen wil ik graag dat alle foto's automatisch gecentreerd worden en heb daar ook naar gekeken op de site van jquery.
Helaas krijg ik het niet voor elkaar alles te centreren zoals daar word beschreven..
Ik hoop dat iemand me hier kan helpen.
Mijn link is www.dianaontwerpster.nl/test/grafisch.html
En hier vind je hoe te centreren: http://jquery.malsup.com/cycle/center-horz.html

Thanx B

 

[phobia]

Als ik ff naar de broncode kijk van de site,
zie ik wel dat een <td> niet geopend wordt.

				<tr>HIER MOET DE <td> NOG KOMEN<div class="slideshow">

		<div><img src="img/grafisch/7-Geboortekaartje.jpg" width="474" height="474"  /></div>
		<div><img src="img/grafisch/1-WebsiteVanGerwen.jpg" width="711" height="474" /></div>
        <div><img src="img/grafisch/2-WebsiteVanGerwen.jpg" width="711" height="474" /></div>
		<div><img src="img/grafisch/3-WebsiteVanGerwen.jpg" width="711" height="474" /></div>
		<div><img src="img/grafisch/4-Adv-HansVanGerwen.png" width="711" height="474" /></div>
        <div><img src="img/grafisch/5-Veraison-visitkrt.png" width="711" height="474" /></div>
        <div><img src="img/grafisch/6-Kerstkaart.jpg" width="711" height="474" /></div>
		<div><img src="img/grafisch/8-Geboortekaartje.jpg" width="711" height="355" /></div>
        <div><img src="img/grafisch/9-Geboortekaartje.jpg" width="471" height="474" /></div>

		<div><img src="img/grafisch/10-Folder-Downsyndroom.jpg" width="642" height="474" /></div>
		<div><img src="img/grafisch/11-Folder-Downsyndroom.jpg" width="642" height="474" /></div>
       
	</div>
					<td>

Verder lijk het allemaal er wel goed uit te zien.

 

[bassment]

Wanneer ik daar een <td> Plaats verschiet de gehele site uit zijn verband

 

[phobia]

okey, zou kunnen. Maar hij hoort er wel te staan!

 

[bassment]

Nou hij staat wat eerder..
ik heb de cycle er na geplaatst anders verschoof ook de hele pagina..
en viel de cycle over het menu heen :S

 

[phobia]

in je css staat
/* make sure each slide image is centered */
#slideshow div img { margin: auto; display: block }

Dit zoek naar een img-tag in een div met een id="slideshow"

Maar jou div heeft geen id="slideshow" maar een class="slideshow"
vandaar daar het niet werkt!!!

 

[That Guy]

Dit zoek naar een img-tag in een div met een id="slideshow"

Niet helemaal echt;

#slideshow div img

gaat over *een* element met een id 'slideshow', met daarin ergens een div element, met daarin weer ergens een img element, zoals:

<element id='slideshow'>
   <div>
      <img />
   </div>
</element>

maar ook

<element id='slideshow'>
   <element2>
      <div>
         <img />
      </div>
   </element2>
</element>

en ook

<element id='slideshow'>
   <div>
      <element2>
         <img />
      </element2>
   </div>
</element>

of een combinatie van dezen. Zie CSS Selectors en dan specifiek descendant selectors. Of, in minder 'technische' taal, hier.

 

[phobia]

okey, maar hoe dan ook als de div een class heeft zal hij hem niet vinden

 

[That Guy]

Yup! De correcte CSS is zoiets:

.slideshow img
{
   display: block;
   margin: 0 auto;
}