By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,724 Members | 1,707 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,724 IT Pros & Developers. It's quick & easy.

CSS Text Over Images - Centred

P: 4
Hi There, I'm trying to layout a block of HTML with CSS, the layout is quite simple. 4 or 5 images inline with each other, with a caption of html text above each one. This is easily done with tables, but I can't seem to make it work with css. Heres my code:-


Expand|Select|Wrap|Line Numbers
  1. <div id="componentpics">
  2.  
  3. <div class="piccon"><span>Some text here</span>
  4. <img style="width: 136px; height: 120px;" alt="" src="file:///C:/wamp/www/drupal/drupal-4.7.6/files/theme_editor/stevestheme/phonepic.png"></div>
  5.  
  6. <div class="piccon"><span>Some more text here<br></span>
  7. <img style="width: 113px; height: 106px;" alt="" src="file:///C:/wamp/www/drupal/drupal-4.7.6/files/theme_editor/stevestheme/fcscore.png"></div>
  8.  
  9. <div class="piccon"><span>Foo Bar Foo Bar  Foo<br> Bar</span>
  10. <img style="width: 113px; height: 106px;" alt=""
  11. src="file:///C:/wamp/www/drupal/drupal-4.7.6/files/theme_editor/stevestheme/short.png"></div>
  12.  
  13. <div class="piccon"><img
  14.  style="width: 116px; height: 134px;" alt=""
  15.  src="file:///C:/wamp/www/drupal/drupal-4.7.6/files/theme_editor/stevestheme/deskpc.png"></div>
  16.  
  17. <div class="piccon"><img
  18.  style="width: 113px; height: 106px;" alt=""
  19.  src="../../../../../../wamp/www/drupal/drupal-4.7.6/files/theme_editor/stevestheme/SCOREDMESSAG.png"></div>
  20.  
  21. </div>
And some CSS to boot...

Expand|Select|Wrap|Line Numbers
  1.   .piccon { border-style: solid;
  2.     border-color: rgb(255, 255, 153);
  3.     padding-left: 10px;
  4.     padding-right: 10px;
  5.     width: 150px;
  6.     display: inline;
  7.     max-width: 150px;
  8.  
A simple solution is to float the <divs class="piccon">'s to the left, but this overrides the centring from the containing <div id="componentpics"> I just can't seem to get it to work, I've tried removing all the <br> tags and limiting the width of the <span> tags within the <div> to avoid interrupting the flow but it generates random results. I'd bet I'm missing something very fundamental here, so please enlighten me.
Mar 7 '07 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.