Member Avatar for riscphree

I'm trying to line up horizontally four images with a small text link underneath them. I can't get the text to go underneath. How can I do this? My code so far:

.cards { top: 5px; background: #66AAFF; height: 124px; width: 537px; position: absolute;}
.cards ul { margin: 0; padding 0; list-style-type: none; }
.cards ul li { width: 103px; display: inline; }
<div class="cards">
<ul id="list">
<li><a href="layout.php"><img src="card.png" border="0" /></a>Cards</li>
<li><a href="layout.php"><img src="card.png" border="0" /></a>Cards</li>
<li><a href="layout.php"><img src="card.png" border="0" /></a>Cards</li> 
<li><a href="layout.php"><img src="card.png" border="0" /></a>Cards</li>
</ul>
</div>
  • 3 Contributors
  • 7 Replies
  • 141 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by essential

Recommended Answers

All 7 Replies

Member Avatar for cmills83

duno why my response didnt show up wrap cards in <p class="imgtxt">Cards</p>

p.imgtxt {
margin:0;
padding:0;
width:103px;
text-align:center; /* optional */
}
Member Avatar for cmills83 
.cards ul li { width: 103px; display: inline; }
to
.cards ul li { width: 103px; float:left; }
Member Avatar for riscphree

oh awesome, thanks man!

Member Avatar for cmills83

after the </ul> add <div class="clear"></div>

.clear { clear:both; }

to clear out the float left so you can put stuff below

Member Avatar for essential

Here's what you need. I've added some span elements to control the portion of the text. Hope this will help you up. Enjoy

<html>
<head>
<title></title>
<style type="text/css">
.cards {
      width: 537px;
      height: 140px;
      float: left;
      margin: 0;
      padding: 0;
      background: #66AAFF;
      overflow: hidden;
}    
.cards ul {
      list-style-type: none;
/* line-height uses the total height of "cards" class */
      line-height: 140px;
      float: left;
      width: 534px;
      margin: 0;
      padding: 0;      
}
.cards li {
      width: auto;
      line-height: 140px;
      float: left;
      margin: 5px 0 5px 0;
      padding: 0;
      display: inline;
}
.cards span { 
      float: left;
      clear: both;
      text-align: left;
      line-height: 36px;
      margin: 0;

/* Base on 100pixel width image, get the half of it to center your text. So it wil take 50px to the padding to center the text! You may adjust the pixel rate to any desired amount base on the width of your image. */

      padding: 0 50px;
}

.cards li img {
      margin: 0;
      padding: 0 5px;
      border: none;
      width: auto;
      height: auto;
}
</style>
</head>
<body>
<div class="cards"> <ul id="list"> <li><a href="layout.php"><img src="images/type_red1.jpg" border="0" /></a><span>Cards</span></li> <li><a href="layout.php"><img src="images/type_red1.jpg" border="0" /></a><span>Cards</span></li> <li><a href="layout.php"><img src="images/type_red1.jpg" border="0" /></a><span>Cards</span></li></ul>  </div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.