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
Ryan Hellerud
3,635 PointsHtml/css positioning pains.
So, I eventually need to create this design: http://imgur.com/yM8Z1xr but right now Im just fiddling around with position and trying to figure out how to accomplish this. There will need to be a few nested divs positioned with relative and absolute position but I'm struggling with the order ect. So far I have just a little mock up trying to get it going. http://jsbin.com/recixuwoxa/edit?html,css,output . Also, I should be able to change the bg color of 1,2,3 boxes and have them show up behind the numbers.
2 Answers
Justin Iezzi
18,199 PointsHey Ryan,
If you need any reference, I tried this myself and made a pen: http://codepen.io/nomad5/pen/XbGjaL
Not sure if this is exactly what you were going for, I tried to replicate your drawing. And as a self-disclaimer, there are many different ways of solving this issue, mine might not be the best!
rydavim
18,814 PointsIt looks like Justin has done a good job of giving you a starting place.
However, it's difficult to design the structure without content or context. I would recommend getting started styling your content, and asking for specific help or advice if you get stuck.
A mock-up or prototype version is likely going to need to do things like add hard-coded heights, or placeholder content, in order to get the look you're asking for. This means that the methods may or may not be the best way to solve your specific task.
Speaking generally, you'll probably want to use relative units and floats to achieve your positioning, so that your content remains responsive. If you're not concerned with older browsers, you could also look into using something like flexbox, depending on your goals.
Happy coding!
Justin Iezzi
18,199 PointsCompletely agree, thanks for the extended clarifications!
Ryan Hellerud
3,635 PointsRyan Hellerud
3,635 Pointsthanks Justin! This is very helpful! Do you think this would work if we made the wrapper an li tag ? Ideally, each panel would represent a seperate list item which would be a song that could be played through the user interface we are building. Also, would it work the same if we just made those spans divs and then put an icon in them? Which is what we are going for. Really appreciate it thanks!!!
Justin Iezzi
18,199 PointsJustin Iezzi
18,199 PointsSure, remember that tags are completely customizable in CSS. To make the spans divs, all you have to do is turn them into divs and then add a class to them, and the copy the properties from my span { } rule into your new class rule.
I went ahead and modified the original link so that you can see how a list would work.
Let me know if you have trouble with the spans.