Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Elwin de Witte
1,357 PointsList not working properly
Hi everyone,
I'm currently building a new site and I stumbled upon a strange problem. When using an "ul" the placement of the "li" becomes a bit random when the sizes vary. Is there a simple answer that is not using a fixed heigt?
Live website: http://insider.harwindesigners.nl/lunatic/over-ons.html
Many thanks, Elwin
Elwin de Witte
1,357 PointsI tried, but it didn't work. You know you can use F12 to see the code of every website? Many thanks anyway!
Gunhoo Yoon
5,027 PointsI know that but looking at entangled CSS from browser is pretty confusing. I might need to do few experiments in workspace.
Elwin de Witte
1,357 PointsI'm sure you'll get the hang of it fast enough. Have fun learning!
Gunhoo Yoon
5,027 PointsSo this is just a skeleton on how the logic works. https://w.trhou.se/xvsqb9gnnp
Fork the link I posted and preview it. This only demonstrates idea without any visual sugars just try to see the difference between display: list-item and display: inline-block. Rest of it is just tweaking width, margin, padding.
If I'm not using grid system or flexbox I'll probably approach from display: inline-block and % width that mimics bit of grid system.
Elwin de Witte
1,357 PointsThanks man, awesome! It worked!
1 Answer
Elwin de Witte
1,357 PointsFor anyone who had the same problem, see the code from Gunhoo Yoon: https://w.trhou.se/xvsqb9gnnp or watch the CSS Layout Techniques course.
Gunhoo Yoon
5,027 PointsIt's great that it worked for your project. However, I'd rather suggest watching CSS layout technique course and understand rather than sampling my rubbish.
Gunhoo Yoon
5,027 PointsGunhoo Yoon
5,027 PointsHave you tried setting display of li to inline-block? I'm not an expert so seeing live website and figuring it out works way worse for me but see what happens when you change display of li to inline-block. I would probably suggest using grid system to make them straightforward maybe you should check out CSS layout technique course.