CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Rasel
Rasel

Reputation: 5734

html div is not displaying its content text

I have a carousel slider where i want to give model name to each image.So i use a <div> and put text into div. But the text is not displaying though background color of this div is visible.So need help .please.How to display the text? my code sample goes here

html

<link href="bootstrap.min.css" rel="stylesheet">
<div id="body-content">
    <div class="carousel-nano" >
            <div id="demo5" class="scroll-img">
              <ul>
                <li>
                    <a href="" target="_blank">
                        <img  src="jsfiddle.net/img/logo.png"/>
                        <div style="color:red;background-color:#000;">Text goes here</div>
                    </a>
                </li>
              </ul>
            </div>
    </div>
</div>

css

#body-content .scroll-img {
  border: 2px solid #CCC;
width: 890px;
height: 155px;
overflow: hidden;
font-size: 0;
margin-top: 2px;
}
#body-content  .scroll-img ul {
  margin: 0;
  height: 58px !important;
  background:#123456;
}
#body-content .scroll-img ul li a img{
  width: 140px;
  height: 100px;
  margin: 0;
}
#body-content .scroll-img ul li {
  display: inline-block;
  margin: 0px 0 0px 0px;
  border-right: 10px solid #EEE;
}

#body-content #demo5.scroll-img ul {
  width: 1500px;
}
#body-content #demo5-btn {
  width: 680px;
  padding-top: 10px;
}
#body-content .carousel-nano{
margin:0 auto;
padding:0px;
text-align:center;
width:960px;
}
#search-image{
margin: 0px auto;
padding: 0px;
float: left;
width: 66px;
height: 103px;
}

jsfiddle

Upvotes: 0

Views: 188

Answers (3)

Vijish Vijayan
Vijish Vijayan

Reputation: 34

Change 

#body-content .scroll-img {
  border: 2px solid #CCC;
  width: 890px;
  height: 155px;
  overflow: hidden;
  font-size: 0;
  margin-top: 2px;
}

to

#body-content .scroll-img {
  border: 2px solid #CCC;
  width: 890px;
  height: 155px;
  overflow: hidden;
  font-size: 14px;
  margin-top: 2px;
}

Upvotes: 1

user3489116
user3489116

Reputation:

the thing i have noticed that, you have mentioned font-size=0; which is causing the problem to you.

font-size is the attribute to set the size of the text you want to print on the screen as a result. so increase font-size=5px; atleast to see the result.

Rest is fine. Thanks & Keep coding. :)

Upvotes: 1

GautamD31
GautamD31

Reputation: 28763

Try to increase font-size here

#body-content .scroll-img {
    font-size : 12px;
}

You have font-size zero in your fiddle.See updated FIDDLE.

Upvotes: 3

Related Questions