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 trialJay Valentine
Courses Plus Student 4,389 PointsGot a little CSS puzzle for ya
Guil sets an icon in the center of a div by using absolute centering...
I however, type out the same CSS as shown in the video, and my icon goes up into the header miles away from said div..? here is my CSS and HTML
<div class="extra-content col">
<h3>Extra Content</h3>
<p>Filet mignon turkey flank doner strip steak. Frankfurter ham hock turkey, venison sirloin pig chuck shank capicola hamburger doner spare ribs boudin.</p>
<hr>
<p> Drumstick bresaola meatloaf ham hock salami tri-tip landjaeger beef filet mignon biltong boudin turkey.</p>
<div class="icon"></div>
.icon::after {
content: " ";
display: block;
width: 150px;
height: 90px;
background: url('../img/icon.png') no-repeat;
background-size: 100%;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
What could be the problem?
3 Answers
John Fisher
7,974 PointsI think you need to make it's parent element position: relative;
Ion Jones
11,299 PointsWhen using absolute positioning, your element will position itself to the nearest positioned ancestor. In your case it sounds like the nearest positioned ancestor is your header element.
The Mozilla Developer Network can explain it much better than I can: https://developer.mozilla.org/en/docs/Web/CSS/position#Absolute_positioning
Jay Valentine
Courses Plus Student 4,389 PointsThanks for the reply, if that is the case, why have me and Guil got 2 separate results using the same code?
Ion Jones
11,299 PointsAs John said above, the parent element needs to be positioned in order for absolute positioning to get the desired effect. I'd imagine that Guil had his parent element positioned and maybe it just wasn't shown in the video?
erdragerdragsson
Courses Plus Student 5,887 Pointstry using this code
margin-left: auto;
margin-right: auto;
Hope this helps!
Kind Regards
erdrag
Jay Valentine
Courses Plus Student 4,389 PointsUnfortunately this did not work
Jay Valentine
Courses Plus Student 4,389 PointsJay Valentine
Courses Plus Student 4,389 PointsCongratulations haha!, if i could award you treehouse points, i'd give you some.
Many thanks
Jasen Carroll
9,958 PointsJasen Carroll
9,958 PointsYou can award treehouse point, I think you can approve John's answer or something and he'll get 12 points.
Andres Hamilton
7,594 PointsAndres Hamilton
7,594 Points@Jasen Carroll where do we need this points ?