HTML/CSS Text under image

Question

Below is the desired style:

here

This is the jsfiddle link: here

HTML:

   <div class="photos">
        <ul>
            <li><span><a href="#"><img src="http://cdn.androidbeat.com/wp-content/uploads/2013/07/android.jpg" width="200" height="150"   /></a></span>
            <span>Android</span>
            <a href="">See More...</a>
            </li>
            <li><a href="#"><img src="http://lotssports.com/wp-content/uploads/2013/07/zappy-android-300x300.jpg" width="200" height="150"  /></a>
            <span>Android</span>
            <a href="">See More...</a>
            </li>
            <li><a href="#"><img src="http://cdn.androidbeat.com/wp-content/uploads/2013/07/android.jpg" width="200" height="150"  /></a></li>
            <li><a href="#"><img src="http://2.bp.blogspot.com/-65ZTcnMYW9c/TurVOon7PrI/AAAAAAAAA_s/07tBb3zCktI/s400/new%2Bprof.png" width="200" height="150"  /></a></li>
        </ul>
      </div>

CSS:

  /* gallery display */
        .photos {
          display: block;
        }

        .photos ul {
          list-style: none;

        }

        .photos ul li { 
            display: inline;
            list-style: none;
            float: left;
            padding: 0 10px 0 0;
            text-align:center; 
        }

        .photos ul li span a {
            background-color: #fff;
        }

        .photos ul li a {

          display: block;
          /*
          margin-right: 10px;
          margin-bottom: 7px; */
          opacity: 0.75;
          -webkit-transition: all 0.3s linear;
          -moz-transition: all 0.3s linear;
          transition: all 0.3s linear;
        }
        .photos ul li a:hover {
          opacity: 1.0;
        }

        .photos ul li a img {
          border: 6px solid #e1d9ec;
        }

But the problem is I can't make the background color white for each list item (image with text underneath) Any help is much appreciated. thanks.

You are assigning a white background to the .photos ul li span a, not the .photos ul li (the whole list item). If you want the list item to have a white background (or black as the image you showed suggests), you should assign a background-color:#000; to the .photos ul li — gespinha
– gespinha, Commented Sep 16, 2013 at 5:27
Yes I tried that but it's covering the whole photos with white background. I want each list to have its own white background — neknek mouh
– neknek mouh, Commented Sep 16, 2013 at 5:28

Milan and Friends · Accepted Answer · 2013-09-16 05:28:21Z

7

Fiddle

.photos ul li {
  background: #999;
  display: inline;
  list-style: none;
  float: left;
  margin-right: 10px;
  padding: 0;
  text-align:center; 
  color: #fff;
}

or

.photos ul li {
  background: #fff;
  display: inline;
  list-style: none;
  float: left;
  margin-right: 10px;
  padding: 0;
  text-align:center; 
  color: #000;
}

answered Sep 16, 2013 at 5:28

Milan and Friends

5,6101 gold badge23 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yehonatan Over a year ago

The float:left on the image and list is the one who saved me

gespinha · Accepted Answer · 2013-09-16 05:29:38Z

You are assigning a white background to the .photos ul li span a, not the .photos ul li (the whole list item). If you want the list item to have a white background (or black as the image you showed suggests), you should assign a background-color:#000; to the .photos ul li.

http://jsfiddle.net/gespinha/ZvUuy/11/

If you change the body background to a different colour and apply a margin to the list items, to separate them, you will notice that it is then applied as you want.

/* gallery display */
 body {
    background:#000;
}
.photos {
    display: block;
}
.photos ul {
    list-style: none;
}
.photos ul li {
    display: inline;
    list-style: none;
    float: left;
    padding: 0 10px 0 0;
    text-align:center;
    background-color: #fff;
    margin:5px;
}
.photos ul li a {
    display: block;
    /*
  margin-right: 10px;
  margin-bottom: 7px; */
    opacity: 0.75;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.photos ul li a:hover {
    opacity: 1.0;
}
.photos ul li a img {
    border: 6px solid #e1d9ec;
}

Vuthy Sok · Accepted Answer · 2013-09-16 05:32:06Z

0

Try this way maybe can help

.photos ul li {
    background:white;            
    list-style: none;
    float: left;
    margin:0 10px 10px 0;
    text-align:center; 
}

No need use display:inline because you always use float:left

answered Sep 16, 2013 at 5:32

Vuthy Sok

7403 gold badges10 silver badges22 bronze badges

Comments

stevel · Accepted Answer · 2013-09-16 05:38:10Z

I assume you wanted the following:

Black background in each block, you do that with: .photos ul li { background-color: #000; }
White text, you should have: .photos ul li span { color: #fff; }
White gaps, which can be done with: .photos ul li { margin: 10px; }

In the end, you get this: http://jsfiddle.net/vZ8eD/1/

/* gallery display */
.photos {
  display: block;
}

.photos ul {
  list-style: none;

}

.photos ul li { 
    display: inline;
    list-style: none;
    float: left;
    padding: 20px;
    margin: 10px;
    text-align:center; 
    background-color: #000;    
}

.photos ul li span {
    color: #fff;
}

.photos ul li a {

  display: block;
  /*
  margin-right: 10px;
  margin-bottom: 7px; */
  opacity: 0.75;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.photos ul li a:hover {
  opacity: 1.0;
}

.photos ul li a img {
  border: 6px solid #e1d9ec;
}

Collectives™ on Stack Overflow

HTML/CSS Text under image

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related