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

    [CSS] schaduw bij foto’s zorgt voor centreerproblemen

    Daar de foto’s die mogen worden geupload geen vaste verhoudingen moeten hebben, zat ik met een schaduw-probleem. Hadden alle foto’s standaard 2:3 of 3:2 geweest, was een schaduwafbeelding met die verhoudingen snel gemaakt en als background-img meegegeven.
    Daar die verhoudingen mogen variƫren (bvb vierkant of panorama) heb ik een andere oplossing gevonden.

    Daarbij heb ik nu wel 2 andere problemen. Doordat die img een float:left heeft, krijg ik centreer-problemen wanneer er een verticale naast of onder horizontale foto’s staan.

    Zoals je hier ziet: http://www.xposed.be/site/photographerNEW.php?action=show&id=14 beginnen op de 2e lijn de verticale, en die staan links uitgelijnd tov de bovenstaande en onderstaande foto’s. Ik had graag die afbeeldingen met schaduw in het midden gekregen. Gecentreerd in de ‘kolom’ als het ware.
    Ik heb elke afbeelding dan maar in een nieuwe div gestoken en die laten centreren, maar dat blijkt geen bal uit te halen…

    2e probleem: in alle browsers behalve IE (who else…) zijn de schaduwen correct, in IE echter (hier IE6, IE7 heb ik niet) beginnen de schaduwen helemaal bovenaan en links van de foto, terwijl die een 6px later zouden moeten starten, zoals in goede browsers…

    Op deze afbeelding is het misschien ook duidelijk wat ik bedoel (bovenaan FF, onderaan IE6): http://www.f-ocaldesign.be/xposed/probleem.jpg

    Mijn code:

    [code:1:272d3a23d7]
    .photographer_center
    {
    width:212px;
    margin:0 auto;
    text-align:center;
    float:left;
    }

    .img-shadow
    {
    float:left;
    background: url(IMAGES/shadow.gif) no-repeat bottom right;
    text-align:center;
    margin:20px 0;
    }

    .img-shadow img
    {
    display: block;
    background-color: #fff;
    margin-top: -6px;
    margin-right: 6px;
    margin-bottom: 6px;
    margin-left: -6px;
    border: 1px solid #000;
    }
    [/code:1:272d3a23d7]

    [code:1:272d3a23d7]<div class="thumbs_photographer">
    <div class="photographer_center"><div class="img-shadow"><a href="PHOTOGRAPHERS/Faan/6.jpg" onclick="return enlarge(’PHOTOGRAPHERS/Faan/6.jpg’,event, ‘center’,900,600)"><img src="PHOTOGRAPHERS/Faan/thumbs/tn_6.jpg" alt="" /></a></div></div>
    <div class="photographer_center"><div class="img-shadow"><a href="PHOTOGRAPHERS/Faan/1.jpg" onclick="return enlarge(’PHOTOGRAPHERS/Faan/1.jpg’,event, ‘center’,900,600)"><img src="PHOTOGRAPHERS/Faan/thumbs/tn_1.jpg" alt="" /></a></div></div>
    <div class="photographer_center"><div class="img-shadow"><a href="PHOTOGRAPHERS/Faan/2.jpg" onclick="return enlarge(’PHOTOGRAPHERS/Faan/2.jpg’,event, ‘center’,900,600)"><img src="PHOTOGRAPHERS/Faan/thumbs/tn_2.jpg" alt="" /></a></div></div>
    <div class="photographer_center"><div class="img-shadow"><a href="PHOTOGRAPHERS/Faan/5.jpg" onclick="return enlarge(’PHOTOGRAPHERS/Faan/5.jpg’,event, ‘center’,900,600)"><img src="PHOTOGRAPHERS/Faan/thumbs/tn_5.jpg" alt="" /></a></div></div>
    </div>[/code:1:272d3a23d7]

    Ik heb reeds verschillende fora afgelopen en nergens vinden ze een oplossing… jullie misschien?

    Bijdrager
    aerosoul

    Ten eerste raad k het je af om die schaduw d’r achter te doen.. maakt het toch wel corny!

    Maar is het niet een idee om je image een class mee te geven en ’n padding left en bottom van ongeveer 10 px. en een achtergrond met een plaatje wat _| zo is en dan best wel groot. Welke je een bottom right meegeeft?

    http://www.aerosoul.nl/dump/shadowtest.html <- zoiets?

    Bijdrager
    Faan

    Die schaduw is gevraagd door de admins van Xposed, dus ik moet doen wat ze vragen.

    Ik dacht dat ik zoiets gelijkaardigs gedaan had voor die schaduw zoals jij beschrijft?

    Op die url zie ik nergens een schaduw?

    Bijdrager
    aerosoul

    Tsjah jammer is dat..

    Maar ik zie het inderdaad.. heb het alleen in Safari gechecked en daar werkt het wel in. Zal even kijken wat ie ie andere browsers doet

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

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