RSS Forums RSS
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 507 | Replies: 7 | Thread Tools  Display Modes
Reply
•
•
Join Date: Dec 2005
Posts: 12
Reputation: riscphree is an unknown quantity at this point 
Rep Power: 4
Solved Threads: 0
riscphree riscphree is offline Offline
Newbie Poster

Text links underneath images

  #1  
Nov 10th, 2008
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>
Last edited by riscphree : Nov 10th, 2008 at 5:30 pm.
AddThis Social Bookmark Button
Reply With Quote  
•
•
Join Date: Jun 2004
Posts: 231
Reputation: cmills83 is an unknown quantity at this point 
Rep Power: 5
Solved Threads: 0
cmills83 cmills83 is offline Offline
Posting Whiz in Training

Re: Text links underneath images

  #2  
Nov 11th, 2008
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 */
}
Reply With Quote  
•
•
Join Date: Dec 2005
Posts: 12
Reputation: riscphree is an unknown quantity at this point 
Rep Power: 4
Solved Threads: 0
riscphree riscphree is offline Offline
Newbie Poster

Re: Text links underneath images

  #3  
Nov 11th, 2008
That makes them go vertical though.

http://www.riscit.info/jquery/lols2.html

Anyway to get them back horizontal?
Reply With Quote  
•
•
Join Date: Jun 2004
Posts: 231
Reputation: cmills83 is an unknown quantity at this point 
Rep Power: 5
Solved Threads: 0
cmills83 cmills83 is offline Offline
Posting Whiz in Training

Re: Text links underneath images

  #4  
Nov 11th, 2008 
.cards ul li { width: 103px; display: inline; }
to
.cards ul li { width: 103px; float:left; }
Reply With Quote  
•
•
Join Date: Dec 2005
Posts: 12
Reputation: riscphree is an unknown quantity at this point 
Rep Power: 4
Solved Threads: 0
riscphree riscphree is offline Offline
Newbie Poster

Re: Text links underneath images

  #5  
Nov 11th, 2008
oh awesome, thanks man!
Reply With Quote  
•
•
Join Date: Jun 2004
Posts: 231
Reputation: cmills83 is an unknown quantity at this point 
Rep Power: 5
Solved Threads: 0
cmills83 cmills83 is offline Offline
Posting Whiz in Training

Re: Text links underneath images

  #6  
Nov 11th, 2008
after the </ul> add <div class="clear"></div>

.clear { clear:both; }

to clear out the float left so you can put stuff below
Reply With Quote  
•
•
Join Date: Dec 2005
Posts: 12
Reputation: riscphree is an unknown quantity at this point 
Rep Power: 4
Solved Threads: 0
riscphree riscphree is offline Offline
Newbie Poster

Re: Text links underneath images

  #7  
Nov 11th, 2008
I can't quite figure out the clear stuff. Is it ok to use negative numbers for positioning?

I've updated my page: http://www.riscit.info/jquery/lols2.html
Reply With Quote  
•
•
Join Date: Aug 2008
Posts: 198
Reputation: essential is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 28
essential's Avatar
essential essential is offline Offline
Junior Poster

Re: Text links underneath images

  #8  
Nov 14th, 2008
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 Syntax (Toggle Plain Text) 
  1. <html>
  2. <head>
  3. <title></title>
  4. <style type="text/css">
  5. .cards {
  6.       width: 537px;
  7.       height: 140px;
  8.       float: left;
  9.       margin: 0;
  10.       padding: 0;
  11.       background: #66AAFF;
  12.       overflow: hidden;
  13. }    
  14. .cards ul {
  15.       list-style-type: none;
  16. /* line-height uses the total height of "cards" class */
  17.       line-height: 140px;
  18.       float: left;
  19.       width: 534px;
  20.       margin: 0;
  21.       padding: 0;      
  22. }
  23. .cards li {
  24.       width: auto;
  25.       line-height: 140px;
  26.       float: left;
  27.       margin: 5px 0 5px 0;
  28.       padding: 0;
  29.       display: inline;
  30. }
  31. .cards span { 
  32.       float: left;
  33.       clear: both;
  34.       text-align: left;
  35.       line-height: 36px;
  36.       margin: 0;
  37.  
  38. /* 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. */
  39.  
  40.       padding: 0 50px;
  41. }
  42.  
  43. .cards li img {
  44.       margin: 0;
  45.       padding: 0 5px;
  46.       border: none;
  47.       width: auto;
  48.       height: auto;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <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>
  54. </body>
  55. </html>
Last edited by essential : Nov 14th, 2008 at 5:46 am.
Reply With Quote  
Reply

Quick Reply to Thread
•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register


Similar Threads
Other Threads in the HTML and CSS Forum
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
Thread Tools Display Modes
Linear Mode Linear Mode
Forums | Blogs | Tutorials | Code Snippets | Whitepapers | RSS Feeds | Advertising
All times are GMT -4. The time now is 9:13 pm.
Newsletter Archive - Sitemap - Privacy Statement - Acceptable Use Policy - Contact Us
Forum system based on vBulletin Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC