Toon posts:

[css] img in div wil maar niet verticaal uitlijnen

Pagina: 1
Acties:

Onderwerpen


  • Wiethoofd
  • Registratie: juli 2007
  • Laatst online: 08-08 00:26
Ik heb nu een stuk php wat afbeeldingen uit een map trekt, in maximaal 3 afbeeldingen per rij neerzet en de omliggende div per rij een hoogte meegeeft welke de maximale hoogte is van de grootste afbeelding op die rij. Tot zo ver geen problemen, waar het fout gaat is om de plaatjes verticaal in het midden uit te lijnen.

Geprobeerd:
margin: auto met een vaste hoogte van de .thumb de .thumb img een vertical-align geven

Ik zit hier nu al een flinke tijd mee te klooien en het is waarschijnlijk met 2 minuten werk op te lossen, maar ik heb het nodige geprobeerd en zie niet meer hoe het wel zou moeten werken...

Hieronder links de uitwerking van de huidige versie en rechts het gewenste resultaat wat hier geforceerd moest worden.

Uitwerking

Gewenste resultaat

Testcase: http://wiethoofd.info/got/speciaalwerk.html

Relevante ingekorte html en css:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
.imgcontainer {
    overflow: hidden;
    margin-bottom: 5px;
}
.imgcontainer .thumb {
    text-align: center;
    float: left;
    width: 190px;
    height: 100%;
    vertical-align: middle;
}
HTML:
1
2
3
4
5
6
7
8
   <div class="imgcontainer" style="height: 153px">
    <div class="thumb"><img src="images/01.jpg" alt="" /></div>
    <div class="thumb"><img src="images/02.jpg" alt="" /></div>
    <div class="thumb"><img src="images/03.jpg" alt="" /></div>
   </div>
   <div class="imgcontainer" style="height: 126px">
    <div class="thumb"><img src="images/04.jpg" alt="" /></div>
   </div>

Wiethoofds meuk en 'overige'


  • Wiethoofd
  • Registratie: juli 2007
  • Laatst online: 08-08 00:26
Dat werkt dus niet. Aan de hand van http://www.brunildo.org/test/img_center2.html zou de .thumb een vaste breedte en hoogte mee moeten krijgen en wordt er gebruik gemaakt van een lege <span></span>

Een lege span maar ook de display: table-cell halen niets uit in bovenstaand geval..

[Voor 8% gewijzigd door Wiethoofd op 11-10-2010 14:20]

Wiethoofds meuk en 'overige'


  • noes
  • Registratie: augustus 2006
  • Niet online

noes

gek op benzine.

Je zou ook gewoon de divjes een bg kunnen geven (tenzij je een goede reden hebt dat je dat niet wil..), dan de post van bastv gebruiken of een javascriptje maken zoals: (onderstaande gebruikt de JQuery library).

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function valign(element){
    $(element).each(function(){ 
        var outerheight = $(this).parent('div').height();
        var innerheight = $(this).height();
        if (innerheight < outerheight){
            //margins toepassen zodat element in midden valt
            var margin = (outerheight - innerheight) / 2;
            $(this).css('margin-top', margin + 'px').css('margin-bottom', margin + 'px');
        } else {
            //binnenste element niet groter maken dan het maximale (buitenste element).
            $(this).css('height', outerheight);
        }
    });
}


Bovenstaande is ff snel in elkaar gezet en aan te roepen door valign($('.thumbs')); aan te roepen, aangenomen dat thumbs de klasse van de thumbnail is.

Succes en groet

[Voor 0% gewijzigd door noes op 11-10-2010 14:22. Reden: bugfix :+]

2020 R1250RS, K26/R1200RT, E61/550i


  • Wiethoofd
  • Registratie: juli 2007
  • Laatst online: 08-08 00:26
Een background is onmogelijk want er zijn ook versies met een clickable thumb, verder is niet elke afbeelding hetzelfde formaat. En het liefste maak ik geen gebruik van javascript als het serverside op te lossen is door de css of html aan te passen die nu uitgespuugd wordt.

Wiethoofds meuk en 'overige'


  • Salandur
  • Registratie: mei 2003
  • Laatst online: 19:50

Salandur

Software Engineer

dit heeft waarschijnlijk met de align van het img element te maken. speel hier eens mee.

Assumptions are the mother of all fuck ups | iRacing Profiel | GT Sport stats


  • Wiethoofd
  • Registratie: juli 2007
  • Laatst online: 08-08 00:26
Daar ook mee zitten spelen, een vertical-align op de img zelf werkt ook niet.

Wiethoofds meuk en 'overige'


  • noes
  • Registratie: augustus 2006
  • Niet online

noes

gek op benzine.

Wiethoofd schreef op maandag 11 oktober 2010 @ 14:25:
Een background is onmogelijk want er zijn ook versies met een clickable thumb, verder is niet elke afbeelding hetzelfde formaat. En het liefste maak ik geen gebruik van javascript als het serverside op te lossen is door de css of html aan te passen die nu uitgespuugd wordt.
Clickable thumb is toch ook JS? Dan trek je de url ipv uit het src attribuut gewoon uit de style/bg css:

code:
1
$(selector).css('background-image'); //jquery call om de bg-img uit een element in te lezen


En als je het helemaal backend wil oplossen, moet je de dimensies van je thumbnail uitlezen en de dimensies van je kader weten en dan plaatsen dmv margins (dus de JS call die ik in mn vorige post plaatste naar PHP/C#/VB/whatever porten).
Good luck!

2020 R1250RS, K26/R1200RT, E61/550i


  • OkkE
  • Registratie: oktober 2000
  • Laatst online: 04-06 12:54

OkkE

Front-end ninja :+

Door de .thumb een vaste hoogte te geven kun je door de line-heigt even veel pixels te maken als de height, alle minder hoge images centreren. Maar wanneer je ook de hoogte niet vast wil hebben, is het vrij lastig om dit cross-browser netjes (zonder JS) op te lossen, ben ik bang.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • crisp
  • Registratie: februari 2000
  • Nu online

crisp

Devver

Pixelated

OkkE schreef op maandag 11 oktober 2010 @ 15:13:
Door de .thumb een vaste hoogte te geven kun je door de line-heigt even veel pixels te maken als de height, alle minder hoge images centreren. Maar wanneer je ook de hoogte niet vast wil hebben, is het vrij lastig om dit cross-browser netjes (zonder JS) op te lossen, ben ik bang.
Och, met een good-old table lukt dat wel hoor ;) :P

Intentionally left blank


  • Ma.rkus.nl
  • Registratie: maart 2005
  • Laatst online: 28-08 11:32
^ precies, dan kom je op een constructie waarbij je de hoogte van het plaatje linksonder moet uitlezen en dat moet toepassen op het plaatje rechtsonder.

Dit is typisch iets wat je niet met divs wil oplossen. Want wat je eigenlijk hebt hier is een <table> met vier cellen.

offtopic:
OMG HIJ ZEI TABLE!!

¯¯¯¸(¤)¸¯¯¯       ¯¯¯¯¸¤¯¯(¯.¯)¯¯¤¸¯¯¯¯


  • 8088
  • Registratie: december 2000
  • Niet online

8088

NaN

Wiethoofd schreef op maandag 11 oktober 2010 @ 14:25:
Een background is onmogelijk want er zijn ook versies met een clickable thumb
Dan maak je de container toch clickable?
verder is niet elke afbeelding hetzelfde formaat.
Cascading Stylesheet:
1
background-position: center center;

Maar een table lijkt me inderdaad stukken eenvoudiger.

Do you seek to engage in or have you ever engaged in terrorist activities, espionage, sabotage, or genocide?


  • moozzuzz
  • Registratie: januari 2005
  • Laatst online: 10-01 23:26
Ergens in 2006 gefabriceerd:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
/* ergens algemeen gedefinieerd */
img {border: 0; text-decoration: none;}
.c {text-align: center;}

/* ivm fotoboeken */
#content ul.fotoboekfoto   {list-style: none; margin: 0px; padding: 0px;}
#content li.fotoboekfoto   {display: inline; text-align: center; padding:0; margin: 0;}
#content li.fotoboekfoto a {border: 0px;}
#content li.fotoboekfoto img {border: 10px solid #ffffff; background-Color: #f9f9f9; vertical-align:middle;}

de b-parameter is overigens de locatie vd foto, dus doet eigenlijk niet terzake 8-)
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul class="fotoboekfoto">
   <li class="fotoboekfoto">
      <a href="" title="">
         <img alt="" src="./getfoto.php?b=xxx&w=120&h=150&thumb=1"></a>
   </li>

   <li class="fotoboekfoto">
      <a href="" title="">
         <img alt="" src="./getfoto.php?b=xxx&w=120&h=150&thumb=1"></a>
   </li>

   <li class="fotoboekfoto">
      <a href="" title="">
         <img alt="" src="./getfoto.php?b=xxx&w=120&h=150&thumb=1"></a>
   </li>

   ...etc
</ul>

Succes!

[Voor 5% gewijzigd door moozzuzz op 11-10-2010 16:31]


  • OkkE
  • Registratie: oktober 2000
  • Laatst online: 04-06 12:54

OkkE

Front-end ninja :+

crisp schreef op maandag 11 oktober 2010 @ 15:17:
[...]

Och, met een good-old table lukt dat wel hoor ;) :P
Eigenlijk zijn tabellen gewoon nog steeds het beste! :+




Het hangt een beetje van je ontwerp af, maar ik vind het zelf altijd netjes of elk item een vaste breedte + hoogte te geven en de images er binnen te centreren.

Testcase van TS omgebouwd: http://azwart.nl/tmp/1429518.html
Het kan nog netter, minder DIVs etc, maar daar ben ik nu te lui voor...

@Wish; Oeps, mijn fout. Het was "html" ipv "htm"... :)

[Voor 20% gewijzigd door OkkE op 11-10-2010 15:38]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • Wish
  • Registratie: juni 2006
  • Laatst online: 16:52

Wish

ingwell

Eh...
Oeps! Deze link lijkt niet te werken -

No drama


  • Wiethoofd
  • Registratie: juli 2007
  • Laatst online: 08-08 00:26
Van de oude tables wil ik dus af :P Dit is schijnbaar een slecht voorbeeld geweest met de afbeeldingen, er zijn namelijk zeer veel verschillende formaten afbeeldingen, langer, tot 175px breed en is dus een vaste hoogte in de css van de container of .thumb opgeven niet mogelijk. De plaatjes allemaal moeten gaan wijzigen is ook een no-go.

De oplossing van OkkE zou inderdaad ideaal zijn mochten de afbeeldingen qua afmetingen allemaal in de buurt liggen, dit is echter niet het geval...

Wiethoofds meuk en 'overige'


  • moozzuzz
  • Registratie: januari 2005
  • Laatst online: 10-01 23:26
@Okke, fyi: met mijn archaische (want browser van 't werk) IE6 krijg ik geen vertical align: middle, maar top.

@Wiethoofd: thumbs die erg van van grootte verschillen zijn misschien wel wat eigenaardig neen? Verder: divs gebruiken als ware het tabellen, schiet natuurlijk ook niets op én is niet wat we semantisch web noemen :-).

  • Wiethoofd
  • Registratie: juli 2007
  • Laatst online: 08-08 00:26
moozzuzz schreef op maandag 11 oktober 2010 @ 16:30:
@Okke, fyi: met mijn archaische (want browser van 't werk) IE6 krijg ik geen vertical align: middle, maar top.
IE7 werkt ie ook niet....
@Wiethoofd: thumbs die erg van van grootte verschillen zijn misschien wel wat eigenaardig neen? Verder: divs gebruiken als ware het tabellen, schiet natuurlijk ook niets op én is niet wat we semantisch web noemen :-)
Het is omzetten van de oude site naar een wat overzichtelijkere basis, maar ik zal eens knutselen of ik het in een tabel wel crossbrowser werkend krijg...

Wiethoofds meuk en 'overige'


  • moozzuzz
  • Registratie: januari 2005
  • Laatst online: 10-01 23:26
Al mijn UL-versie geprobeerd? (werkt bij mij wel in IE6). Ik geloof dat het ligt aan de vertical-align: middle die enkel werkt op inline-elementen (maar dat is mijn vage achterhoofd dat me dit influistert -- te checken met de experts hier :^)

  • Cartman!
  • Registratie: april 2000
  • Niet online
In dit geval is het toch ook enigszins tabulaire data? Dan zou ik niet perse het uit een tabel willen halen.

Je kunt ook je images door een script trekken die ze uitvult zodat ze in het midden komen te staan, zo krijgen je nieuwe thumbs allemaal dezelfde afmeting mee...

  • Patriot
  • Registratie: december 2004
  • Laatst online: 10:20

Patriot

Fulltime #whatpulsert

Ik moet zeggen dat ik niet inzie hoe deze gegevens tabulair genoemd kunnen worden. Op het moment dat plaatsing van gegevens binnen tabel niets uitmaakt moet je al bij jezelf na gaan denken of je iets wel in een tabel wilt stoppen, dat is hier zeker het geval.

Het is gewoon een lijstje foto's waarvan de volgorde niet belangrijk lijkt te zijn, ik zou gewoon voor de oplossing van moozzuzz gaan.

de Tweakers-cookiewall is illegaal


  • OkkE
  • Registratie: oktober 2000
  • Laatst online: 04-06 12:54

OkkE

Front-end ninja :+

moozzuzz schreef op maandag 11 oktober 2010 @ 16:30:
@Okke, fyi: met mijn archaische (want browser van 't werk) IE6 krijg ik geen vertical align: middle, maar top.
I know. Ga me met zulke kleine dingen niet meer druk maken om IE6. Website is ook prima te gebruiken wanneer de images aan de bovenkant staan uitgelijnd. :)
@Wiethoofd: thumbs die erg van van grootte verschillen zijn misschien wel wat eigenaardig neen? Verder: divs gebruiken als ware het tabellen, schiet natuurlijk ook niets op én is niet wat we semantisch web noemen :-).
Agree. Als de thumbs te veel in grootte verschillen moet je daar misschien iets aan veranderen. Verder is opzich geen doodzonde om een tabel te gebruiken in dit geval; al zou ik dat zelf niet doen.
Hmm, dacht dat het in IE7 wel werkte, maar inderdaad niet.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • 8088
  • Registratie: december 2000
  • Niet online

8088

NaN

Wiethoofd schreef op maandag 11 oktober 2010 @ 16:20:
Van de oude tables wil ik dus af :P
Behalve dat dit natuurlijk een non-argument is, is 't ook nog eens onjuist: de div tag bestaat langer dan de table tag.

Do you seek to engage in or have you ever engaged in terrorist activities, espionage, sabotage, or genocide?


  • Wiethoofd
  • Registratie: juli 2007
  • Laatst online: 08-08 00:26
8088 schreef op maandag 11 oktober 2010 @ 16:56:
Behalve dat dit natuurlijk een non-argument is, is 't ook nog eens onjuist: de div tag bestaat langer dan de table tag.
Wiethoofd schreef op maandag 11 oktober 2010 @ 16:34:
Het is omzetten van de oude site naar een wat overzichtelijkere basis, maar ik zal eens knutselen of ik het in een tabel wel crossbrowser werkend krijg...


Inmiddels de ul/lijst optie van moozzuzz toegepast welke werkt, maar met een display: inline-block en een vaste width voor de li's.

Wiethoofds meuk en 'overige'

Pagina: 1


Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee