943,866 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Text links underneath images
Ad:
Permalink
Nov 10th, 2008
0

Text links underneath images

Expand Post »
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.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
riscphree is offline Offline
12 posts
since Dec 2005
Permalink
Nov 11th, 2008
0

Re: Text links underneath images

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. }
Reputation Points: 37
Solved Threads: 1
Posting Whiz in Training
cmills83 is offline Offline
249 posts
since Jun 2004
Permalink
Nov 11th, 2008
0

Re: Text links underneath images

That makes them go vertical though.

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

Anyway to get them back horizontal?
Reputation Points: 10
Solved Threads: 0
Newbie Poster
riscphree is offline Offline
12 posts
since Dec 2005
Permalink
Nov 11th, 2008
1

Re: Text links underneath images

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; }
Reputation Points: 37
Solved Threads: 1
Posting Whiz in Training
cmills83 is offline Offline
249 posts
since Jun 2004
Permalink
Nov 11th, 2008
0

Re: Text links underneath images

oh awesome, thanks man!
Reputation Points: 10
Solved Threads: 0
Newbie Poster
riscphree is offline Offline
12 posts
since Dec 2005
Permalink
Nov 11th, 2008
0

Re: Text links underneath images

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
Reputation Points: 37
Solved Threads: 1
Posting Whiz in Training
cmills83 is offline Offline
249 posts
since Jun 2004
Permalink
Nov 11th, 2008
0

Re: Text links underneath images

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
Reputation Points: 10
Solved Threads: 0
Newbie Poster
riscphree is offline Offline
12 posts
since Dec 2005
Permalink
Nov 14th, 2008
0

Re: Text links underneath images

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.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: please help me in this question plz.its urgent
Next Thread in HTML and CSS Forum Timeline: Another ie & ff viewing problem





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC