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

CSS

Posted by Dean Gray
Dean Gray
12,487 Points

Putting an img in-between some li

Ok So I have a centered nav (ul) with 4 items. I now want to add an img in-between the 2nd and 3rd item. However I want to keep the img out of the ul because in media query I want to move the Logo to the left and nav to the right.

Can I do this in css? Or do I need to use something like JQuery to remove the img from the ul then add it before the ul?

The nav is centered by moving the ul right 50% then moving li left 50%.

3 Answers

Lee Hilton
Lee Hilton
16,794 Points

You can probably go about this a number of ways. Perhaps you can put it in the UL structure, then use media queries to hide/show at the appropriate sizes.

Another option might be to apply the image as a background of either the UL or the LI, but then you would need to use media queries to show/hide or move as well.

A third solution could be to use position: absolute on the img, setting bottom: 0 and then using other styling to put the image where you want. This approach is very flexible but can be finicky. For example, you might need to set parent or siblings to position: relative to get where you need to be, and various browsers will handle things a bit differently.

Dean Gray
Dean Gray
12,487 Points

I didn't think to use hide and show. i.e. have two img elements one before and one inside the ul. So when the screen width hits my large screen size it hides the img before and then shows the img inside.

James Mejia
James Mejia
7,726 Points
James Mejia
James Mejia
7,726 Points

You want an image in-between your list items, right? You can add it as a background-image with a pseudo-element.

<ul class="centered-nav">
  <li><a href="">Link 1</a></li>
  <li><a href="">Link 2</a></li>
  <li><a href="">Link 3</a></li>
  <li><a href="">Link 4</a></li>
</ul>

.centered-nav > li {
  display: inline-block;
}
.centered-nav > li:nth-of-type(3):before {
  content: '';
  background-image: url("http://placekitten.com/g/200/200");
  display: inline-block;
  height: 200px;
  width: 200px;
  vertical-align: middle;
}

When you want to hide it just set content to none like so 

@media (max-width: 600px) {

  .centered-nav > li:nth-of-type(3):before { content: none; }

}

View Demo

Some Issues

If it's an image for decoration then this code is fine. You might want to add a class to the list-item you'll be adding an image to. That way if you decide you want to change or add it to another list item you just add/move the class. Instead of getting your CSS dirty with :nth-of-type(N).

If the image has some deeper meaning than just aesthetic than you might need to rethink your markup OR add in some text to the content: ' '; and hide the text so it can still be accessible to people with screen readers. Accessibility is important because it allows everyone to enjoy your site equally.

Dean Gray
Dean Gray
12,487 Points
Dean Gray
Dean Gray
12,487 Points

Hi, thank you both for answering so quickly. I used Lee Hilton idea of hide and show, i.e. when the screen size hit my media query criteria it display:none 1 img element and showed the other.

Can't believe I didn't think of that.