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
Lemmy Kilmister
30 Pointssetting the background color of <a> tag
Hi guys !
i am having troubles setting the background color of an <a> tag , the <a> tag is inside of a list item and it has an image and a paragraph and they link to an image, when i select the <a> tag in my css and set the background to a specific color the background-color only displays for the image .
here is my code >>>>
<ul>
<li>
<a href="image.jpg">
<img src="image.jpg">
<p>here is the paragrapgh</p>
</a>
</li>
</ul>
i want the background-color to be displayed for both (the image and the paragraph) , i know that i can do this by selecting the <li> or by wrapping a <div> tag around the <a> tag, but i wanna know why it does not work when i select the <a> tag !!
thanks in advance :)
Jeremy Hill
29,567 PointsTry adding an id to your <li> and then use that id selector in your css for the background if you want to do everything in that list item:
<li id="listId">
#listId{
background-color: red;
}
1 Answer
Lemmy Kilmister
30 PointsGot it , thanks guys for your help ! :)
Ashish Mehra
Courses Plus Student 340 PointsAshish Mehra
Courses Plus Student 340 PointsHey Lemmy Kilmister,
I check your script <a> is an inline-block element and you use inside it <p> which is block element which make it display on next line of image . Simple solution for this is to assing <a> property of display:block;
thanks