Text links underneath images

Reply

•
•
Join Date: Dec 2005
Posts: 12
Reputation: riscphree is an unknown quantity at this point 
Solved Threads: 0
riscphree riscphree is offline Offline
Newbie Poster

Text links underneath images

 
0
  #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:

HTML and CSS Syntax (Toggle Plain Text) 
  1. .cards { top: 5px; background: #66AAFF; height: 124px; width: 537px; position: absolute;}
  2. .cards ul { margin: 0; padding 0; list-style-type: none; }
  3. .cards ul li { width: 103px; display: inline; }

HTML and CSS Syntax (Toggle Plain Text) 
  1. <div class="cards">
  2. <ul id="list">
  3. <li><a href="layout.php"><img src="card.png" border="0" /></a>Cards</li>
  4. <li><a href="layout.php"><img src="card.png" border="0" /></a>Cards</li>
  5. <li><a href="layout.php"><img src="card.png" border="0" /></a>Cards</li> 
  6. <li><a href="layout.php"><img src="card.png" border="0" /></a>Cards</li>
  7. </ul>
  8. </div>
Last edited by riscphree; Nov 10th, 2008 at 5:30 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2004
Posts: 247
Reputation: cmills83 is an unknown quantity at this point 
Solved Threads: 1
cmills83 cmills83 is offline Offline
Posting Whiz in Training

Re: Text links underneath images

 
0
  #2
Nov 11th, 2008
duno why my response didnt show up wrap cards in <p class="imgtxt">Cards</p>

HTML and CSS Syntax (Toggle Plain Text) 
  1. p.imgtxt {
  2. margin:0;
  3. padding:0;
  4. width:103px;
  5. text-align:center; /* optional */
  6. }
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2005
Posts: 12
Reputation: riscphree is an unknown quantity at this point 
Solved Threads: 0
riscphree riscphree is offline Offline
Newbie Poster

Re: Text links underneath images

 
0
  #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 Quick reply to this message  
•
•
Join Date: Jun 2004
Posts: 247
Reputation: cmills83 is an unknown quantity at this point 
Solved Threads: 1
cmills83 cmills83 is offline Offline
Posting Whiz in Training

Re: Text links underneath images

 
1
  #4
Nov 11th, 2008
HTML and CSS Syntax (Toggle Plain Text) 
  1. .cards ul li { width: 103px; display: inline; }
  2. to
  3. .cards ul li { width: 103px; float:left; }
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2005
Posts: 12
Reputation: riscphree is an unknown quantity at this point 
Solved Threads: 0
riscphree riscphree is offline Offline
Newbie Poster

Re: Text links underneath images

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

Re: Text links underneath images

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

HTML and CSS Syntax (Toggle Plain Text) 
  1. .clear { clear:both; }

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

Re: Text links underneath images

 
0
  #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 Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Text links underneath images

 
0
  #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 Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum


Views: 1394 | Replies: 7
Thread Tools Search this Thread



Tag cloud for HTML and CSS
2002 appointments asp background backgroundcolor beta browser bug calendar cart center cgi code codeinjection corporateidentity create css deleted design development displayimageinsteadofflash dreamweaver drupal emailmarketing epilepsy explorer firefox flash font fonts form format free frontpage google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft missing mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. templates textcolor theme timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 wordpress xml xsl
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC