8 berichten aan het bekijken - 1 tot 8 (van in totaal 8)
  • Q:
    Bijdrager
    Es

    [CSS vraag] Positioneren img-thumbnails-gallery lukt niet

    Ik ben bezig met een CSS site http://www.esthermols.net/clients/steef/houtsoorten.html maar het lukt me niet om een image gallery met kleine thumbnails te positioneren. In Safari ziet het er o.k. uit maar via browsercam heb ik de PC browsers getest en daar lijnen de thumbs ineens allemaal naar rechts uit (zowel in IE als de Mozilla browsers). Terwijl ik ze links laat floaten…?? Wat doe ik verkeerd?

    Ik heb al verschillende CSS sites=mogelijke oplossingen bekeken maar niets werkt tot nu toe. Heeft iemand de gouden tip voor een goede image-gallery in CSS?

    DANK ALVAST!

    Bijdrager
    Kyokushinkai

    Waarom heb je daar een float voor nodig? Je kunt toch ook gewoon de afbeeldingen los er in plaatsen.

    Bijdrager
    Es

    Omdat als ik die float weghaal ze allemaal onder elkaar verschijnen, en dat wil ik niet…

    Bijdrager
    Kyokushinkai

    Dat komt omdat je die afbeeldingen in <p>’s gestoken hebt. Probeer eens 1 setje <p>’s om alle afbeeldingen heen te zetten.

    edit: hmm, wordt wel lastig om er zo tekst bij te zetten natuurlijk…

    Bijdrager
    tennapel

    Kijk eens hier:
    http://www.doublea.net/media_photos.html

    Volgens mij is dat ongeveer hetzelfde en dit werkt prima in IE. Gewoon even de bron bekijken.

    Deze is met tekst: http://www.photovictim.com/

    Bijdrager
    Es

    Dat zijn volgens mij zeer behulpzame links, ik ga het uitproberen. Dank!

    Bijdrager
    MacTommy

    Misschien begrijp ik het niet helemaal goed, maar het lijkt mij dat je precies weet hoe groot al die afbeeldingen zijn enzo, en hoe ver je ze uit elkaar wilt hebben.
    Waarom zet je ze niet gewoon in een tabel..??

    Bijdrager
    martijnG

    @MacTommy

    Als je zijn source bekijkt, zie je dat hij tabellen wil voor komen. Tabellen zijn bedoeld voor tabulaire data, niet voor vormgeving.

    Kun je niet beter zoiets doen zodat je class=”thumbs” float en cleared met een <br />

    [code:1:c846df8427]
    <div class="thumbs">
    <a href="#" target="_self">
    <img src="images/hout/hout1.jpg" alt="[houtsoort1]" width="99" height="99"><br />
    Frans eiken rustiek
    </a>
    </div >

    <div class="thumbs">
    <a href="#" target="_self">
    <img src="images/hout/hout1.jpg" alt="[houtsoort2]" width="99" height="99"><br />
    belgisch eiken rustiek
    </a>
    </div >

    <div class="thumbs">
    <a href="#" target="_self">
    <img src="images/hout/hout1.jpg" alt="[houtsoort3]" width="99" height="99"><br />
    Nederlands eiken rustiek
    </a>
    </div >

    <div class="thumbs">
    <a href="#" target="_self">
    <img src="images/hout/hout1.jpg" alt="[houtsoort4]" width="99" height="99"><br />
    Amerikaans eiken rustiek
    </a>
    </div >

    <!– clear de float –>
    <br />

    [/code:1:c846df8427]

8 berichten aan het bekijken - 1 tot 8 (van in totaal 8)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.