 |
 | 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 / October 20063-column liquid layout? (for thumbnails)
http://phazm.net/csstest/index2.html I'm trying to make the thumbnails fit to the width of the page, so there are 3-4 in each row, but when you resize, I want it to basically flow with the page, and I'm having a bit of a hard time figuring that out. I want the code to remain logical: <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> and so on. Anyone have any ideas? I've read this, http://www.alistapart.com/articles/multicolumnlists but I can't really make it work for me. Really lookin for some help here, thanks, - Jon > http://phazm.net/csstest/index2.html > [quoted text clipped - 27 lines] > > - Jon The problem I'm having is getting the text UNDER the thumbnail, and centered. Also, getting 3 thumbnails in a row, I can't figure that out. >> http://phazm.net/csstest/index2.html >> [quoted text clipped - 3 lines] > centered. Also, getting 3 thumbnails in a row, I can't figure that > out. .thumbs li {display: inline; text-align: center; } and place a <br> between the image and the caption in the HTML.  Signature-bts -Motorcycles defy gravity; cars just suck > >> http://phazm.net/csstest/index2.html > >> [quoted text clipped - 11 lines] > -bts > -Motorcycles defy gravity; cars just suck Can you think of a way to not use br (or any additional tags, for that matter) >>>> http://phazm.net/csstest/index2.html >>>> [quoted text clipped - 10 lines] > Can you think of a way to not use br (or any additional tags, for that > matter) Restrict the width of the <li> to some number of pixels perhaps, but this will mess up the display if/when someone increases the text size... What's wrong with a <br>? This is what it is designed for. Signature-bts -Motorcycles defy gravity; cars just suck >> >> http://phazm.net/csstest/index2.html >> >> [quoted text clipped - 5 lines] >> >> .thumbs li {display: inline; text-align: center; } The li was floating, which means setting display: inline on it does nothing. And text-align is set on the block box, not on the inline boxes anyway. >> and place a <br> between the image and the caption in the HTML. But it's basically the right idea. >> -- >> -bts >> -Motorcycles defy gravity; cars just suck > > Can you think of a way to not use br (or any additional tags, for that > matter) You can easily avoid the <br> by making img display: block. In this case, make the li also text-align: center. <li> <img ...> Caption </li> should do the trick. The floating li will shrink-to-fit the block which will contain two lines, the image, and an anonymous block box containing the centered caption. >>> .thumbs li {display: inline; text-align: center; } > > The li was floating, which means setting display: inline on it does > nothing. And text-align is set on the block box, not on the inline boxes > anyway. I didn't see any floats in the css, only this: .thumbs ul { list-style-type:none; } I added my .thumbs li (.. to his page, and it did what he was asking... >>> and place a <br> between the image and the caption in the HTML. > [quoted text clipped - 4 lines] > > You can easily avoid the <br> by making img display: block. I think the <br> is more semantically correct... > In this case, make the li also text-align: center. That's what I said above. <g> Signature-bts -Motorcycles defy gravity; cars just suck >>>> .thumbs li {display: inline; text-align: center; } >> [quoted text clipped - 9 lines] > > I added my .thumbs li (.. to his page, and it did what he was asking... You are absolutely right, it wasn't floating. I suggested the OP float those things, and that confused me. >>>> and place a <br> between the image and the caption in the HTML. >> [quoted text clipped - 6 lines] > > I think the <br> is more semantically correct... You may be right. But from another point of view, it pollutes the HTML with tags that are only there for the purposes of layout. >> In this case, make the li also text-align: center. > > That's what I said above. <g> I know. But in your case the li was display: inline; it's still true that text-align applies to block-level elements. In article <W8Q0h.372602$QM6.179511@bgtnsc05-news.ops.worldnet.att.net>, > >> http://phazm.net/csstest/index2.html > >> [quoted text clipped - 7 lines] > > and place a <br> between the image and the caption in the HTML. Or use <p> for caption and style it, you can see the sort of thing at <http://members.optushome.com.au/droovies/galleryTemplate/galleryF loatPara.html> and adapt it to your needs. Signaturedorayme >> .thumbs li {display: inline; text-align: center; } >> >> and place a <br> between the image and the caption in the HTML. > > Or use <p> for caption and style it, you can see the sort of > thing at His captions are already in the <li>, why not just style it, instead of introducing additional elements that aren't really needed? > <http://members.optushome.com.au/droovies/galleryTemplate/galleryF > loatPara.html> Yours are in a series of <div>s. Perhaps that has less of a semantic meaning than as a list? Signature-bts -Motorcycles defy gravity; cars just suck In article <vDR0h.372993$QM6.162470@bgtnsc05-news.ops.worldnet.att.net>, > >> .thumbs li {display: inline; text-align: center; } > >> [quoted text clipped - 11 lines] > Yours are in a series of <div>s. Perhaps that has less of a semantic > meaning than as a list? In that case, B, I have stuffed up! I meant to show the list example I had... <http://members.optushome.com.au/droovies/galleryTemplate/galleryL istedCaptioned.html> You are right about the meaning and I did feel the way you did when comparing various layouts (divs floated, compared with inline listed thumbs). JL thought that on balance, the divs would likely have less trouble across browsers. He may even have muttered stuff about the list which I have incorporated. Signaturedorayme >>> <http://members.optushome.com.au/droovies/galleryTemplate/galleryF >>> loatPara.html> [quoted text clipped - 7 lines] > <http://members.optushome.com.au/droovies/galleryTemplate/galleryL > istedCaptioned.html> This one works quite nicely. <g> Signature-bts -Motorcycles defy gravity; cars just suck > In article > <vDR0h.372993$QM6.162470@bgtnsc05-news.ops.worldnet.att.net>, [quoted text clipped - 29 lines] > -- > dorayme Alright, there seems to be some debate, so I tried pretty much everything that was said here, and variations, and can't find anythign that doesn't break in IE, or when expanded in FF. I re-uploaded the page if you can take a look. Thanks, - Jon In article <1162093819.943874.130040@m7g2000cwm.googlegroups.com>, > > <http://members.optushome.com.au/droovies/galleryTemplate/galleryL > > istedCaptioned.html> [quoted text clipped - 13 lines] > > I re-uploaded the page if you can take a look. Looks the same to me from the last time I uploaded it. How did you get my password? Signaturedorayme > In article > <1162093819.943874.130040@m7g2000cwm.googlegroups.com>, [quoted text clipped - 22 lines] > -- > dorayme .... http://phazm.net/csstest/index2.html I re-uploaded MY page. Sorry for the... confusion. [snip] > <http://phazm.net/csstest/index2.html> [snip] > Alright, there seems to be some debate, so I tried pretty much > everything that was said here, and variations, and can't find anythign > that doesn't break in IE, or when expanded in FF. > > I re-uploaded the page if you can take a look. 1. Make #wrap position: relative, so it's the containing block for #content, which we're about to make absolutely positioned. Might as well get rid of unnecessary "width: 100%" on #wrap. 2. Make #content position: absolute, and not floated. Add "left: 160px; right: 0px;" to the #content selector. This way it will stretch to fit the available space and won't jump down. 3. Add "text-align: center" to thumbs .li. > [snip] > > <http://phazm.net/csstest/index2.html> [quoted text clipped - 12 lines] > fit the available space and won't jump down. > 3. Add "text-align: center" to thumbs .li. Well, that made it better in FF, but still not correct. The text isn't aligned to the center of the thumbnail, it's aligning to the 200px li, And now, in IE, it doesn't display ANYTHING below the header (so anything in #content) >> [snip] >> > <http://phazm.net/csstest/index2.html> [quoted text clipped - 16 lines] > The text isn't aligned to the center of the thumbnail, it's aligning to > the 200px li, Centre the images in the <li>s as well by adding "margin: 0 auto" to .thumbs img. > And now, in IE, it doesn't display ANYTHING below the header (so > anything in #content) Can't help you there. Only advice I can give is check you've got IE in strict mode. You've got an XHTML doctype there, not sure what IE does with that. > >> [snip] > >> > <http://phazm.net/csstest/index2.html> [quoted text clipped - 26 lines] > strict mode. You've got an XHTML doctype there, not sure what IE does > with that. Thank you so much for your help :) I'll look into why it's not workign in IE. In article <1162145739.746349.314180@e3g2000cwe.googlegroups.com>, > > Can't help you there. Only advice I can give is check you've got IE in > > strict mode. You've got an XHTML doctype there, not sure what IE does [quoted text clipped - 3 lines] > > I'll look into why it's not workign in IE. In the examples I posted before, in the css, I fiddled about making provisions for IE. There is even stuff to help Mac IE along! They are an experimental test bed for me... I just point out that you may need to give IE special instructions (not necessarily mine) and you can see one way to "talk" to those browsers at the links I gave... Signaturedorayme > In article > <1162145739.746349.314180@e3g2000cwe.googlegroups.com>, [quoted text clipped - 16 lines] > -- > dorayme the http://members.optushome.com.au/droovies/galleryTemplate/galleryListedCaptioned.html link? I don't see anything in there that will help me really, can you point them out for me? In article <1162157356.412051.186360@e64g2000cwd.googlegroups.com>, > the > http://members.optushome.com.au/droovies/galleryTemplate/galleryListedCaptione [quoted text clipped - 4 lines] > > can you point them out for me? I just meant that if you are having trouble in Win IE 6 say, you can give different instructions to that browser via css as in the baootom of that css sheet of mine. There is a height there that cures some problem I was having. Sorry, at the moment, I am not with Windows machine on so I don't see what your site looks like in it. looks ok on my Mac browsers. There was a thread on rounded corners just recently here and/or alt.html. Some good links there. Check them out. "Rounded corners" Signaturedorayme [snip] >> > <http://members.optushome.com.au/droovies/galleryTemplate/galleryF >> > loatPara.html> [quoted text clipped - 11 lines] > when comparing various layouts (divs floated, compared with > inline listed thumbs). Your ListedCaptioned example still floats the <li>s, though, and you have <li> set to both float: left and display: inline. Floats with display: inline set on them have a "computed" value for display of block. This is explained in 9.7 of the spec. So the list items aren't really inline (they're floating blocks), and you can delete the display: inline on your page without altering the layout. Obviously you do want floats on that page so you can do the captions. CSS makes no distinction between li and div, it only cares what selectors apply to them. Once you set list-style-type to none, a li is already mostly like a div. Anything different it's getting from the default stylesheet can be overridden. As you say it's nice to use <li> for the semantic meaning rather than just more divs. > JL thought that on balance, the divs would likely have less trouble > across browsers. This may well be true though. [snip] >> You are right about the meaning and I did feel the way you did >> when comparing various layouts (divs floated, compared with [quoted text clipped - 17 lines] > As you say it's nice to use <li> for the semantic meaning rather than > just more divs. I've just been looking at FuzzyLogic's page again. Now I understand why everyone uses display: inline; float: left; It's because they *don't* set list-style-type: none. So display: inline changes li from display: list-item, and gets rid of the bullets. I wouldn't be surprised if some browsers don't properly support list-style-type: none, so there's probably a good reason for prefering to change display. I still think the equivalent display: block; float: left; would be clearer. > http://phazm.net/csstest/index2.html > [quoted text clipped - 17 lines] > > Anyone have any ideas? I think the best approach is likely to be to float those <li>s. > I've read this, > http://www.alistapart.com/articles/multicolumnlists > but I can't really make it work for me. They did mention floats, but rejected the idea because list item numbering doesn't go in columns. But your thumbnails aren't numbered, so that doesn't matter. If you do float the <li>s the first thing you'll find is they jump down the page. This is because they're in an auto-width container that's also floated and to the right of another float. So they fill that container up to the full containing width, which ends up jumping down to clear the first float to somewhere where there's more space. So the first thing to do is to set a width on div#content. > > http://phazm.net/csstest/index2.html > > [quoted text clipped - 34 lines] > first float to somewhere where there's more space. So the first thing to > do is to set a width on div#content. I can only give it a relative width to keep it liquid, right? I can't seem to find the happy medium to make it take the whole width, without going to the bottom. [snip] >> > http://phazm.net/csstest/index2.html >> > >> > I'm trying to make the thumbnails fit to the width of the page, so >> > there are 3-4 in each row, but when you resize, I want it to basically >> > flow with the page, and I'm having a bit of a hard time figuring that >> > out. [snip] >> If you do float the <li>s the first thing you'll find is they jump down >> the page. This is because they're in an auto-width container that's also [quoted text clipped - 4 lines] > > I can only give it a relative width to keep it liquid, right? You mean percentage? > I can't seem to find the happy medium to make it take the whole width, > without going to the bottom. You've got IIRC two columns, the first one is some number of pixels, and you want the second one to occupy the remaining width. For this it's better to use absolutely positioned boxes, either for both columns, but certainly for the right-hand one, than floats. If the left column has a width of 160px, you can make the right column left: 160px; right: 0px. This means the second column runs from the 160th pixel from the left edge all the way to the right edge of the container. Just what you want. There's no way to set the width on a float to "the rest" like this, even with percentages. You can't say "100% - 160px". You can still use floats for the thumbnails. > http://phazm.net/csstest/index2.html > [quoted text clipped - 17 lines] > > Anyone have any ideas? img { display: block; } li { float: left; list-style-type: none; text-align: center; height: 10em; /* Adjust to taste */ } The containers must all be the same height for it to work. See <http://cfaj.freeshell.org/testing/alpha.html>. SignatureChris F.A. Johnson <http://cfaj.freeshell.org> =================================================================== Author: Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) |
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.