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
Mauro Bonucci
5,953 PointsMenu lines
Hello, i have a website that im converting in css and html, but there are some layout details that im struggling the best way in making them, for example this menu lines boave te text, can someone tell me the best way to make them? Havin in count that the title can have a different size dependeing in the charecteres, i leave here the image in the link
5 Answers
Lucas Krause
19,924 PointsHere's something I put together for you ;)
Jason Anello
Courses Plus Student 94,610 PointsHi Mauro,
Do you know if the text will always be a single word or is there a possibility it will wrap to multiple lines?
This was what i came up with if the text doesn't wrap: http://codepen.io/anon/pen/rEfBI
Let me know if you have any questions about the css. It will not work if the text wraps to a second line.
I think it's possible to get it to work with wrapping text but all I can come up with right now is to wrap the last word in a span. Here's a codepen demo illustrating that: http://codepen.io/anon/pen/dDHFK
This requires extra css. There's white borders overlapping portions of the black borders and I don't think you'll be able to get this to work if you don't have a solid color background.
Mauro Bonucci
5,953 PointsIts only one line, thanks Jason ;)
Mauro Bonucci
5,953 PointsNo, is not this, basically what im tryeing to achieeve it to create a underline but whit a specific drwaing, not a straitght line.
Mauro Bonucci
5,953 PointsHere is what im trying to accompplish
Mauro Bonucci
5,953 PointsHi guysm just to understand better, how do you guys made the stairs effect whit the lines?
Jason Anello
Courses Plus Student 94,610 PointsI'll answer for my own code. I'm not sure if we did it the same way or not.
The :before pseudo element is used to generate the first "step". You can think of that as an 8px square with the left and top border black. The :after pseudo element is used for the 2nd "step" which is 8 px high but it's 200px wide to make sure it reaches the right edge of the container. Same as the first step it only has a left and top border, no background color so that your container background color will show through.
Then they're positioned in the right spot using absolute positioning and margins.
Let me know if you have any further questions about it.
Lucas Krause
19,924 PointsI did it similarly but not exactly the same.
I also use ::after and ::before to create the "steps" but I made them both 10px+1px (border-top) tall. The steps have a border-left and a border-top. The upper step has also a white border-bottom which hides the right part of the top border of the bottom step.
Unlike Jason's example my steps take the whole horizontal space and don't use a fixed width. I established this by using an additional <div> .stroke which creates a new block formatting context and stretches over that available space. The pseudo elements are positioned absolutely within that <div>.
I hope you can understand what I'm writing about. If you have any questions feel free to ask. ;)
Mauro Bonucci
5,953 PointsMauro Bonucci
5,953 PointsThanks Lucas, this helped ;)