Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Positioneren van fotos in lijst (<ul>) met css

11 antwoorden
  • Hoi, Voor mijn vakgroep heb ik een website gemaakt waarop onder andere foto's van iedereen in de groep te zien zijn. Om deze te positioneren gebruik ik CSS in combinatie <ul> en <li> om de elementen van de lijst naast elkaar te laten 'floaten'. Op deze manier passen er 6 foto's naast elkaar op een rij en daarna wordt het volgende item automatisch op de volgende rij 'gefloat'. Een voorbeeld van de code die ik gebruik staat hieronder. [code:1:e350732b8c] <div class="people"> <ul> <li><a href="link1.shtml"><img src="image1.jpg" width="100%"></a>Name</li> <li><a href="link1.shtml"><img src="image1.jpg" width="100%"></a>Name</li> <li><a href="link1.shtml"><img src="image1.jpg" width="100%"></a>Name</li> <li><a href="link1.shtml"><img src="image1.jpg" width="100%"></a>Two line long Name</li> <li><a href="link1.shtml"><img src="image1.jpg" width="100%"></a>Name</li> <li><a href="link1.shtml"><img src="image1.jpg" width="100%"></a>Name</li> <li><a href="link1.shtml"><img src="image1.jpg" width="100%"></a>Name</li> <li><a href="link1.shtml"><img src="image1.jpg" width="100%"></a>Name</li> <li><a href="link1.shtml"><img src="image1.jpg" width="100%"></a>Name</li> <li><a href="link1.shtml"><img src="image1.jpg" width="100%"></a>Name</li> </ul> </div> CSS-code .people ul{ position:relative; } .people li{ display:block; position:relative; float: left; vertical-align: top; text-align:left; padding-right: 0%; margin-left: 0px; margin-right:1%; height: 100%; width:15%; font-size: 10pt; }[/code:1:e350732b8c] Mijn vraag gaat over het vierde item in de lijst (met de extra lange naam). Het gevolg van deze extra lange naam is dat deze float 1 regel hoger is dan de rest waardoor item nr 7 niet helemaal links op de volgende regel komt, maar als het ware tegen de onderkant van item nr 4 aanbotst. Ik heb dit nu verholpen door elk 6e item van een regel een paar <br> te geven, maar dit is natuurlijk geen elegante oplossing. Bovendien gaat het voorbij aan de reden dat ik uberhaupt deze constructie gebruik: namelijk omdat er nogal wat verloop in de groep is en ik makkelijk items weg wil kunnen halen en wil kunnen plaatsen zonder over de layout na te hoeven denken. Weet iemand hoe ik dit zonder harde returns (en met css of html) kan oplossen?! Voor een voorbeeld van de daadwerkelijke site: [url]http://cheme.nl/ppe/people/people.shtml[/url] Alvast dank
  • Als je zeker weet dat er altijd op een nieuwe regel wordt begonnen na elk 6e element, dan is de toevoeging van het volgende wellicht voldoende: [code:1:216b0b006b].people li:nth-child(6n){ clear: left; /* de andere opties zijn "right" en "both" */ }[/code:1:216b0b006b] - Bas
  • Hoi Bas, Dank voor het antwoord, het lijkt tot op zekere hoogte te werken: de eerste regel krijgt nu 5 fotos en alle regels daarna 6, inderdaad met de gewenste positionering. Weet je hoe het komt dat de eerste regel bij 5 al afgebroken wordt?
  • Ik gebruik de code die ik heb gegeven niet zo vaak, en naar aanleiding van een snelle blik in de documentatie ging ik er van uit dat ze elementen beginnen te tellen bij 0 (want het begint bij n = 0), dus het zevende element is dan dus nummer 6. Wellicht is mijn aanname verkeerd, dan moeten we uitgaan van tellen vanaf 1. De voor de hand liggende oplossing zou zijn om er simpelweg 1 bij op te tellen. [code:1:aa5ac65a17].people li:nth-child(6n+1){ /* 1, 7, 13, ... */ clear: left; }[/code:1:aa5ac65a17] Mocht dit niet werken zoals verwacht of gewenst, dan moeten we waarschijnlijk helemaal compenseren voor n = 0 door er 7 bij op te tellen. [code:1:aa5ac65a17].people li:nth-child(6n+7){ /* 7, 13, 19, ... */ clear: left; }[/code:1:aa5ac65a17]Ik heb niet de tijd/zin gehad om dit nu te testen, maar als het goed is kom je hiermee een heel eind. Succes! - Bas [b:aa5ac65a17]Edit:[/b:aa5ac65a17] De gegenereerde rij in commentaar toegevoegd.
  • Ik vermoed omdat het één lange <ul> is, en het zesde element komt dus maar één keer voor. Het zesde element "duld" niets links naast hem vanwege de clear, dus die begint weer vooraan de regel. Ik zie dat je de <li>'s een hoogte geeft van 100%. Als je die nu eens een fixed hoogte geeft, in pixels. Dus ter groote van de grootst mogelijke inhoud (Dus b.v. van die ene met twee regels). Dan zijn ze allemaal even hoog en worden ze allemaal gelijk afgehandeld lijkt me.
  • [quote:4b4ce1ac29="Gooly"]Ik vermoed omdat het één lange <ul> is, en het zesde element komt dus maar één keer voor.[/quote:4b4ce1ac29]Het gaat ook niet om het zesde element, maar om het 6*n-de element, voor n in alle natuurlijke getallen inclusief 0 (N*). Het zou (in theorie) ongeveer zo moeten werken. :D Wat jouw suggestie betreft: dat is waarschijnlijk een betere oplossing voor de lange termijn, maar het vraagt om aanpassingen in de html-code als je het gelijk goed wil doen. Ik zou namelijk de tekst onder de afbeeldingen in een paragraaf of iets dergelijks zetten, dan kan je de paragrafen bijvoorbeeld een hoogte van 2 maal de letterhoogte geven. Mijn oplossing leek mij in dit specifieke geval het snelste. Bijkomend voordeel van jouw oplossing is dan weer dat het netjes schaalt bij het aanpassen van de venstergrootte, het kunnen er dan ook mooi 5 per rij of 7 per rij zijn, afhankelijk van de resolutie. Het hangt van de situatie van de TS af of dat gewenst is of niet. - Bas
  • Hoi Bas en Gooly, Dank voor de opmerkingen en hulp! De 6n+1 oplossing werkt inderdaad, dank daarvoor! Voor zover ik heb kunnen vinden in tests met resolutie verandering heb ik altijd 6 foto's op 1 rij omdat ik de breedte van de <li> (en foto daarin) mee schaal met de container (15% breedte, 1% padding). De fixed li-hoogte is inderdaad een optie waar ik weleens naar gekeken heb, maar ik geef de voorkeur aan een iets meer schaalbare oplossing aangezien er af en toe mensen in de groep langskomen met een naam van 200 karakters of zo.
  • @Bas: Kijk, weer wat geleerd :) En die aanpak met die paragraaf zou ik inderdaad ook zo doen. @pc_freak17: Mooi zo. Blij dat het werkt :)
  • Het is alleen wel zo dat nth-child alleen werkt met browsers die CSS3 ondersteunen voor internet explorer is dat vanaf IE9.
  • Klopt, daar heb ik inderdaad even niet bij stilgestaan. Alle andere browsers ondersteunen het in ieder geval, en IE dus pas vanaf 9, dat overigens wel de huidige versie is. Als het geen applicatie-kritieke opmaak is dan is er wel mee te leven, voor IE8 en eerder moet er evt nog een oplossing worden bedacht, je zou bijv met JavaScript (JQuery) een oplossing kunnen bedenken. - Bas
  • Of via "[url=http://www.quirksmode.org/css/condcom.html]conditional comments[/url]".

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.