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
Kristopher Van Sant
Courses Plus Student 18,830 PointsProper way to create a small graphic on a website?
Hi! I'm currently cleaning up and redesigning a site for a client, that someone else originally built. The site has a simple, small "graphic" or design element, below a couple of paragraphs, that I'd like to keep. The previous developer created the element by styling an empty div.
.thin-sep {
height: 1px;
background-color: #d7d7d7;
width: 50px;
margin: 8% auto 0 auto;
}
However, this doesn't seem like an appropriate use of a div to me, so I was just wondering what others think would be a better way to achieve this. Should I do the same thing but with a paragraph tag instead? Or should it be a SVG? I'm leaning towards SVG but I'm still not 100% convinced. Any thoughts would be appreciated! Thanks :)
Kevin Korte
28,149 PointsThe small line right? Not the clip of the image below is in question?
Kristopher Van Sant
Courses Plus Student 18,830 PointsYup just that tiny little line
Rhett Moxon
449 Pointsprobably better off putting a border on an element.
6 Answers
Rhett Moxon
449 PointsDoesnt really seem like a graphic, more like a divider.
How about a link to it so people can see what youre talking about?
Kevin Korte
28,149 PointsYeah, is this just a 1px divider below a paragraph? If so this if fine, I would not use an image or svg to render a 1px line, no need to load more resources and make more http requests.
If that's what this is, you could get more semantic with a hr tag possibly. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
But I agree with Rhett, a link would help to see it in it's full context.
Rhett Moxon
449 PointsThe page for this conversation uses border property to create dividers.
Kristopher Van Sant
Courses Plus Student 18,830 PointsI think the hr tag is exactly what I was looking for. Thanks Kevin!
I had thought of using the border property too, Rhett, but I wasn't too keen on it since the line feels like a separate element all together.
Kevin Korte
28,149 PointsYeah, I'm a big fan of using borders to create element separates when you have a border length that works. In this case, I don't see you have any content there that that a border is a natural separator, and in that case, I think a hr tag is probably going to be most semantic. You can give the hr tag styles just like any other element.
Kristopher Van Sant
Courses Plus Student 18,830 PointsPerfect, the hr tag feels much better in this case for sure. But I'll definitely be keeping the borders in mind for future projects. Thanks guys for your input!
Kristopher Van Sant
Courses Plus Student 18,830 PointsKristopher Van Sant
Courses Plus Student 18,830 PointsHere's an image of what it looks like. Just a small line....