Adding text to a list of divs without it effecting the other div - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:UL Element

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. UL Element

Description

Adding text to a list of divs without it effecting the other div

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
.span11 {<!-- w w w .  j a va2 s. c o m-->
   width:960px;
}
.dark-color {
   background-color:pink;
}
.box {
   max-width: 250px;
   min-width: 250px;
   max-height: 160px;
   min-height: 160px;
   background-color: red;
   display: inline-block;
   margin: 1.5em;
   list-style-type: none;
   text-align: center;
   position: relative;
}
img {
   margin-top: 35px;
}
.caption {
   position: absolute;
   left: 50%;
   bottom: 0;
   width: 200px;
   margin-left: -100px;
   text-align: center;
}
.terrain-text {
   font-size: 40px;
}
.profile-text {
   font-size: 20px;
}

      </style> 
   </head> 
   <body> 
      <div class="row-fluid dark-color"> 
         <div class="span11 offset1"> 
            <ul class="boxes"> 
               <li class="box"> 
                  <img src="https://www.java2s.com/style/demo/Opera.png" alt="alt message"> 
               </li> 
               <li class="box"> 
                  <img src="http://java2s.com/resources/d.png" alt="alt message"> 
               </li> 
               <li class="box"> 
                  <span class="caption terrain-text">test test test test</span> 
                  <img src="https://www.java2s.com/style/demo/Firefox.png" alt="alt message"> 
               </li> 
               <li class="box"> 
                  <span class="caption profile-text">camber</span> 
                  <img src="http://java2s.com/resources/h.png" alt="alt message"> 
               </li> 
               <li class="box"> 
                  <img src="http://java2s.com/resources/i.png" alt="alt message"> 
               </li> 
               <li class="box"> 
                  <img src="http://java2s.com/resources/d.png" alt="alt message"> 
               </li> 
               <li class="box"> 
                  <img src="http://java2s.com/resources/g.png" alt="alt message"> 
               </li> 
            </ul> 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials