 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / April 2006How do I get the floated elements to be centred?
Hello, If you look at http://www.kidsinaction.org.uk/Thumbs.html you will see a simplified version of a page that could be used to display thumbnail images of various products. Now, due to the floating, the thumbnails go across the page until the line is full, then spill over on to the next line. This is exactly what I want, as it allows the display to use up the full available width, depending on the user's browser window, etc. What I would like though is to have the thumbnails centred within the containing element. Now maybe I'm asking something stupid, after all, I did float them to the left!! Is it possible to have them centred? What I mean is that there would be the same amount of white space on the left side of the leftmost image as there is on the right side of the rightmost image. I would also like the images on the last line (which will usually be fewer in number than on preceding lines) to be centred, rather than being over to the left. Is this possible? TIA  SignatureAlan Silver (anything added below this line is nothing to do with me) > What I would like though is to have the thumbnails centred within > the containing element. Now maybe I'm asking something stupid, after .container {text-align:center} SignatureStan McCann, "Uncle Pirate" http://stanmccann.us/ Webmaster, NMSU Alamogordo http://alamo.nmsu.edu/ Implementing http://blinkynet.net/comp/uip5.html >> What I would like though is to have the thumbnails centred within >> the containing element. Now maybe I'm asking something stupid, after > >.container {text-align:center} Thanks, but if you look at the sample I posted, you will see that the div with ID "main" already has this property set, and the thumbnails still go from the left edge of the container. I tried adding the property to the <ul> itself (ID of "thumblinks") but that didn't make any difference. Any other ideas? Thanks again. SignatureAlan Silver (anything added below this line is nothing to do with me) > Hello, > [quoted text clipped - 15 lines] > will usually be fewer in number than on preceding lines) to be centred, > rather than being over to the left. Is this possible? Not while floating them. In order to have them centered with text-align:center, they need to be inline elements. But inline elements don't have widths. Have a look at this page and see if it's an option for you: http://locusmeus.com/test/thumbswithcaptionscentered.html SignatureEls http://locusmeus.com/ accessible web design: http://locusoptimus.com/ <snip> >>I would also like the images on the last line (which >> will usually be fewer in number than on preceding lines) to be centred, >> rather than being over to the left. Is this possible? > >Not while floating them. Thought not!! Thanks for the clarification. >In order to have them centered with text-align:center, they need to be >inline elements. But inline elements don't have widths. Have a look at >this page and see if it's an option for you: >http://locusmeus.com/test/thumbswithcaptionscentered.html Well, apart from making me feel old (it's a long time since I looked at pictures like those - heavy metal means deuterium to me nowadays!!), it is exactly the layout idea I want. I tried to do this with my HTML, but failed miserably. I guess this is because I am using <ul> and <li> for the thumbnails as this seemed more like structured markup. The page you showed used tables for each thumbnail, which I don't want to do. Any idea how I achieve the same effect with <ul> and <li> instead? Thanks for the reply. SignatureAlan Silver (anything added below this line is nothing to do with me) > <snip> >>>I would also like the images on the last line (which [quoted text clipped - 13 lines] > pictures like those - heavy metal means deuterium to me nowadays!!), it > is exactly the layout idea I want. Okay, next example has no heavy metal ;-) > I tried to do this with my HTML, but failed miserably. I guess this is > because I am using <ul> and <li> for the thumbnails as this seemed more > like structured markup. The page you showed used tables for each > thumbnail, which I don't want to do. Any idea how I achieve the same > effect with <ul> and <li> instead? http://locusmeus.com/test/thumbswithcaptionslistcentered.html Tested in Opera 8.52, 9, IE 5.01, 5.5, 6.0, 7b2, FF 1.5. (IE<7 are hacked versions, sometimes acting differently, so better test it in an original version as well) Drawback compared to using tables: you can't vertically center images of different heights without setting explicit top margins on them. > Thanks for the reply. You're welcome :-) SignatureEls http://locusmeus.com/ accessible web design: http://locusoptimus.com/ To further the education of mankind, Els <els.aNOSPAM@tiscali.nl> declaimed: >> I tried to do this with my HTML, but failed miserably. I guess this is >> because I am using <ul> and <li> for the thumbnails as this seemed more [quoted text clipped - 7 lines] > hacked versions, sometimes acting differently, so better test it in an > original version as well) Anemone? Clever, but what I don't understand is how you got away with putting block elements (span.thumb{display:block;....) inside inline elements (li {display:inline;}). The validator doesn't complain; it only harps about inline-block (-which is probably a css2/css2.1 thing) and "lightgreen". SignatureNeredbojias Infinity can have limits. > To further the education of mankind, Els <els.aNOSPAM@tiscali.nl> > declaimed: [quoted text clipped - 12 lines] > > Anemone? No idea - here's the full picture: http://locusmeus.com/bp/camping2005-047.html > Clever, but what I don't understand is how you got away with putting block > elements (span.thumb{display:block;....) inside inline elements (li > {display:inline;}). That's never been a problem. You can't put block elements (div, p) inside inline elements (span), but you can put inline elements (span) inside block elements (li) and reverse the properties. The problem is to make the browser do what you want with it though ;-) > The validator doesn't complain; it only harps about > inline-block (-which is probably a css2/css2.1 thing) and "lightgreen". Yup - I should have used a colour number, but it was late and I was lazy. I didn't actually check the validator... SignatureEls http://locusmeus.com/ accessible web design: http://locusoptimus.com/ Now playing: Camel - Freefall To further the education of mankind, Els <els.aNOSPAM@tiscali.nl> declaimed: >> Anemone? > > No idea - here's the full picture: > http://locusmeus.com/bp/camping2005-047.html -Er, no, I doubt it. Actually, I was thinking of a _sea_ anemone... >> Clever, but what I don't understand is how you got away with putting >> block elements (span.thumb{display:block;....) inside inline elements [quoted text clipped - 4 lines] > inside block elements (li) and reverse the properties. The problem is > to make the browser do what you want with it though ;-) I see. Missed that on my browse-through. Thanks for the clarification. >> The validator doesn't complain; it only harps about >> inline-block (-which is probably a css2/css2.1 thing) and >> "lightgreen". > > Yup - I should have used a colour number, but it was late and I was > lazy. I didn't actually check the validator... Figured. Had a page up myself for a long time which used "gold" which I stubbornly refused to change because I'm stubborn. And, if I forgot to mention it before, nice job. SignatureNeredbojias Infinity can have limits. >>> Anemone? >> >> No idea - here's the full picture: >> http://locusmeus.com/bp/camping2005-047.html > > -Er, no, I doubt it. Actually, I was thinking of a _sea_ anemone... Like this one? :-) http://locusmeus.com/dimage-z1/whatsit.html >>> The validator doesn't complain; it only harps about >>> inline-block (-which is probably a css2/css2.1 thing) and [quoted text clipped - 5 lines] > Figured. Had a page up myself for a long time which used "gold" which I > stubbornly refused to change because I'm stubborn. Gold, silver, orange .. they should just be part of legal CSS imo. > And, if I forgot to mention it before, nice job. Thanks :-) SignatureEls http://locusmeus.com/ accessible web design: http://locusoptimus.com/ Now playing: Camel - Lady Fantasy (Bonus track) To further the education of mankind, Els <els.aNOSPAM@tiscali.nl> declaimed: >> Neredbojias wrote: >> -Er, no, I doubt it. Actually, I was thinking of a _sea_ anemone... > > Like this one? :-) > http://locusmeus.com/dimage-z1/whatsit.html Yep, that's it, although I'm more familiar with the white ones. Maybe that individual had a stomach ache. >>> Yup - I should have used a colour number, but it was late and I was >>> lazy. I didn't actually check the validator... [quoted text clipped - 3 lines] > > Gold, silver, orange .. they should just be part of legal CSS imo. Of course. They added one (1) awhile back (-might be 'orange' but forgot) but almost any even fairly common name should be defined. > >> And, if I forgot to mention it before, nice job. > > Thanks :-) SignatureNeredbojias Infinity can have limits. > you can't vertically center images > of different heights without setting explicit top margins on them. Sure you can, if you ignore IE. Set line-height to at least the height of the tallest img, and vertical-align:middle IE has a bug concerning line-height and replaced elements, so it will align the images at top instead, but other browsers should center them nicely. SignatureReply email address is a bottomless spam bucket. Please reply to the group so everyone can share. >> you can't vertically center images >> of different heights without setting explicit top margins on them. > > Sure you can, if you ignore IE. Set line-height to at least the height > of the tallest img, and vertical-align:middle Yes, I know that trick, but for some reason it doesn't work in my example. I've even tried it setting the line-height on all the elements, setting explicit display:inline on the image, but alas - not working. Maybe you can find what I'm missing? > IE has a bug concerning line-height and replaced elements, so it will > align the images at top instead, but other browsers should center them > nicely. That would be good enough for me - but I can't get it to work in this particular construct :-( SignatureEls http://locusmeus.com/ accessible web design: http://locusoptimus.com/ <snip> >http://locusmeus.com/test/thumbswithcaptionslistcentered.html > >Tested in Opera 8.52, 9, IE 5.01, 5.5, 6.0, 7b2, FF 1.5. (IE<7 are >hacked versions, sometimes acting differently, so better test it in an >original version as well) <snip> Sorry for the delay in replying, I've been off for just over a week (holidays, new baby, etc) so have only just had chance to look at this. That example was exactly what I wanted, thanks. I converted it to work with <ul> instead of <p> without much problem. As my thumbnails are inside links to other pages, I was able to remove the <span> elements and use <a> instead, which resulted in neater code. You can see my version at www.kidsinaction.org.uk/thumbs3.html This now looks fine in IE5, IE6 and Opera 8.54, but has a couple of small problems in FF 1.5.0.2, namely:- 1) The links appear to be vertically aligned at the bottom, not at the top like in the other browsers. This is most noticeable on the one with the longest caption text, where the image is higher than the others. Any idea how to make them aligned to the top of the images, like IE and Opera? 2) The vertical space between one caption and the top of the image below it (when they use more than one line) is zero in FF, whereas it is as expected in IE and Opera. I have set a top margin of 0.5em and a bottom margin of 1em on the li element, so there should be something there, no? Any ideas about these two? My only other problem is that the validator complains about... display: inline-block; saying that "inline-block" isn't a valid value. According to the page you linked, this is CSS2.1, and not CSS2. I don't know if this is the problem though. Any idea how to get the CSS to validate? Thanks for the reply. SignatureAlan Silver (anything added below this line is nothing to do with me) Anyone any ideas about this? ><snip> >>http://locusmeus.com/test/thumbswithcaptionslistcentered.html [quoted text clipped - 39 lines] > >Thanks for the reply. SignatureAlan Silver (anything added below this line is nothing to do with me) >If you look at http://www.kidsinaction.org.uk/Thumbs.html you will see a >simplified version of a page that could be used to display thumbnail [quoted text clipped - 7 lines] >What I would like though is to have the thumbnails centred within the >containing element. Does this help? http://www.spartanicus.utvinternet.ie/centered_image_gallery_with_captions.htm SignatureStephen Poley http://www.xs4all.nl/~sbpoley/webmatters/ To further the education of mankind, Stephen Poley <sbpoleySpicedHamTrap@xs4all.nl> declaimed: >>What I would like though is to have the thumbnails centred within the >>containing element. [quoted text clipped - 3 lines] > http://www.spartanicus.utvinternet.ie/centered_image_gallery_with_capti > ons.htm That is probably the most erudite page on css I've ever seen. But how many people could do that (-from scratch)? I doubt I could have. SignatureNeredbojias Infinity can have limits. >> http://www.spartanicus.utvinternet.ie/centered_image_gallery_with_captions.htm Pretty impressive. |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.