florynth Posted July 2, 2006 Share Posted July 2, 2006 Hi I want to display image with bottom text like it was a icon.Here's my code... Check post #4 for new version (who still doesn't work...) If you try it it doesn't work, the div are display as block, but if I take out the block in the img.icon style it's ok for the alignement but not for the text so I take out the inline in the div.icon style now the text is ok (center in the bottom of the icon) but it's not inline anymore .......... It's been about 3 hours I'm on that...I need helpp.s. : Sorry to don't give you a link because it's secure page in a CMS Link to comment Share on other sites More sharing options...
Err Posted July 2, 2006 Share Posted July 2, 2006 So what exactly do you want it to do?if I'm following you, have you tried using the <br /> tag to break the text underneath the image? Link to comment Share on other sites More sharing options...
scott100 Posted July 2, 2006 Share Posted July 2, 2006 If you try it it doesn't work, the div are display as block, but if I take out the block in the img.icon style it's ok for the alignement but not for the text so I take out the inline in the div.icon style now the text is ok (center in the bottom of the icon) but it's not inline anymore .......... It's been about 3 hours I'm on that...Instead of having display:block; on the img.icon try it on the div.icon Link to comment Share on other sites More sharing options...
florynth Posted July 2, 2006 Author Share Posted July 2, 2006 Instead of having display:block; on the img.icon try it on the div.icon <{POST_SNAPBACK}> It doesn't work. I was using a table instead of div before it was working but i'm sure there's a way without it (I'm converting all to div to be with the tendency....)here's a link IconHere's the source<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <title>Web Site Manager : test.w-s-m.com</title> <style type="text/css">div.icon1{ width:90px; height:90px; margin:0; padding:5px 5px 5px 5px; vertical-align:middle; text-align:center; display:inline-table; overflow:hidden;}img.icon1{ border: none; width:48px; height:48px; display:block;}</style></head> <body> With div<br /><div class="icon1"> <a href="./icon.html" class="icon"> <img class="icon1" src="/websitemanager/img/add.gif" alt="icon" />Nouvelles </a></div><div class="icon1"> <a href="./icon.html" class="icon"> <img class="icon1" src="/websitemanager/img/add.gif" alt="icon" />Foire aux questions </a></div><br /><style type="text/css">img.icon { border: none; width:48px; height:48px; display:block;}table.icon{ width:90px; height:90px; margin:0; padding:5px 5px 5px 5px; display:inline; text-align:center; }td.icon{ vertical-align:middle;}</style>With table (what I want)<br /><table class="icon"> <tr><td class="icon"> <a href="./icon.html" class="icon"> <img class="icon" src="/websitemanager/img/add.gif" alt="icon" />Nouvelles </a> </td></tr></table><table class="icon"> <tr><td class="icon"> <a href="./icon.html" class="icon"> <img class="icon" src="/websitemanager/img/add.gif" alt="icon" />Foire aux questions </a> </td></tr></table></body> </html> Ok I know it's more demanding for you but since I've try everything (that I know of) give me the good style/code to modify not just tell me try this try that because I've probably try it before (except if you're so sure that I'm not losing a other 3 hours on try and error...)Thanks for your help... Link to comment Share on other sites More sharing options...
florynth Posted July 2, 2006 Author Share Posted July 2, 2006 I found a solution... <style type="text/css">div.icon1{ width:90px; height:90px; margin:0; padding:6px 6px 6px 6px; text-align:center; overflow:hidden; float:left;}img.icon1{ border: none; width:48px; height:48px; display:block;}</style> Instead of using display I'm using the float property...Now there's just one thing left, how to verticaly align the content of the div like it was a align on a <td>. For people who will tell me to put vertical-align:middle; it's not good because it's the alignement of the element toward is parent I want the content to be align... It's not that important for the icon but I would like to know because it's not the first time I get this problem... Link to comment Share on other sites More sharing options...
rupert160 Posted July 6, 2006 Share Posted July 6, 2006 I tried the following code and it worked quite well with a resizing window: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title><style type="text/css">div.float {float: left} div.float p {text-align: center}</style></head><body><div class="float"> <img class="block" src="http://onlinegames.web-ideas.net.au/images/icons/Casino.jpg" alt="Casino"> <p>caption 1</p></div><div class="float"> <img class="block" src="http://onlinegames.web-ideas.net.au/images/icons/Casino.jpg" alt="Casino"> <p>caption 1</p></div><div class="float"> <img class="block" src="http://onlinegames.web-ideas.net.au/images/icons/Casino.jpg" alt="Casino"> <p>caption 1</p></div><div class="float"> <img class="block" src="http://onlinegames.web-ideas.net.au/images/icons/Casino.jpg" alt="Casino"> <p>caption 1</p></div><div class="float"> <img class="block" src="http://onlinegames.web-ideas.net.au/images/icons/Casino.jpg" alt="Casino"> <p>caption 1</p></div><div class="float"> <img class="block" src="http://onlinegames.web-ideas.net.au/images/icons/Casino.jpg" alt="Casino"> <p>caption 1</p></div><div class="float"> <img class="block" src="http://onlinegames.web-ideas.net.au/images/icons/Casino.jpg" alt="Casino"> <p>caption 1</p></div><div class="float"> <img class="block" src="http://onlinegames.web-ideas.net.au/images/icons/Casino.jpg" alt="Casino"> <p>caption 1</p></div><div class="float"> <img class="block" src="http://onlinegames.web-ideas.net.au/images/icons/Casino.jpg" alt="Casino"> <p>caption 1</p></div><div class="float"> <img class="block" src="http://onlinegames.web-ideas.net.au/images/icons/Casino.jpg" alt="Casino"> <p>caption 1</p></div><div class="float"> <img class="block" src="http://onlinegames.web-ideas.net.au/images/icons/Casino.jpg" alt="Casino"> <p>caption 1</p></div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now