GoFuckYourself.com - Adult Webmaster Forum - View Single Post - Ok - I admit it - I still use nested tables for gals

raymor · 10-25-2011, 10:46 PM

Here's a simple recipe.

Start with a fresh page, nothing but thumbs iin divs to start. That will isolate problems from other supposedly unrelated CSS or elements.

Your divs contain thumbs. Thumbs, being images, are sized in pixels, so the divs will be sized in pixels. Set the width of that class of divs to be a few pixels wider than the thumbs they contain. (Only images and things that align to images should be set in pixels, btw.)

divs are normally block elements, meaning that they force a new line. You don't want a new line for each image, so in your CSS set that div class to "display: inline;". You're DONE! You have neat rows of images!

You can also set those divs to float: left, but float takes some getting used to. It's tricky. Play with floats some time, but first get comfortable with the basics of the block model.

Now you probably want to put this group of thumbs in a real page. Hey, we just said the word "group". That's what a div REALLY is, a group. So will make all those separate thumbs into group by putting a div tag around them. In your css, set that div to have a solid green border so you can see the outline of the group of thumbs. This marks your selfs contained box of thumbs. Copy - paste it into your page. The stuff inside the green box, the thumbs, should look just the same as it did on own page, since it's self contained. If it doesn't, remove whatever CSS is accidentally affecting the thumbs. Don't "fix" it for now, just remove it. Later you can put it back, but make it more specific so it affects only what it's supposed to affect and doesn't break your thumbs.

Perhaps that group of thumbs, the big green box, needs to be resized, have margins added, etc. to better fit the page. You do that by applying CSS to he big green div, not what's inside it. You may want to set it's width as a percentage, such as 50% to be half the page width.

If something breaks, more often than not the fix is to GET RID of some CSS. Most pages have too many CSS positioning and sizing rules that make too many assumptions, rather than not enough rules. It's the browser's job to figure out how to make the page look "right" on any given screen in any given size of window. Let it do it's job, making limited CSS rules only where the browser doesn't make it look nice when left to do it's own job.

10-25-2011, 10:46 PM
raymor Confirmed User Join Date: Oct 2002 Posts: 3,745	Here's a simple recipe. Start with a fresh page, nothing but thumbs iin divs to start. That will isolate problems from other supposedly unrelated CSS or elements. Your divs contain thumbs. Thumbs, being images, are sized in pixels, so the divs will be sized in pixels. Set the width of that class of divs to be a few pixels wider than the thumbs they contain. (Only images and things that align to images should be set in pixels, btw.) divs are normally block elements, meaning that they force a new line. You don't want a new line for each image, so in your CSS set that div class to "display: inline;". You're DONE! You have neat rows of images! You can also set those divs to float: left, but float takes some getting used to. It's tricky. Play with floats some time, but first get comfortable with the basics of the block model. Now you probably want to put this group of thumbs in a real page. Hey, we just said the word "group". That's what a div REALLY is, a group. So will make all those separate thumbs into group by putting a div tag around them. In your css, set that div to have a solid green border so you can see the outline of the group of thumbs. This marks your selfs contained box of thumbs. Copy - paste it into your page. The stuff inside the green box, the thumbs, should look just the same as it did on own page, since it's self contained. If it doesn't, remove whatever CSS is accidentally affecting the thumbs. Don't "fix" it for now, just remove it. Later you can put it back, but make it more specific so it affects only what it's supposed to affect and doesn't break your thumbs. Perhaps that group of thumbs, the big green box, needs to be resized, have margins added, etc. to better fit the page. You do that by applying CSS to he big green div, not what's inside it. You may want to set it's width as a percentage, such as 50% to be half the page width. If something breaks, more often than not the fix is to GET RID of some CSS. Most pages have too many CSS positioning and sizing rules that make too many assumptions, rather than not enough rules. It's the browser's job to figure out how to make the page look "right" on any given screen in any given size of window. Let it do it's job, making limited CSS rules only where the browser doesn't make it look nice when left to do it's own job. __________________ For historical display only. This information is not current: support@bettercgi.com ICQ 7208627 Strongbox - The next generation in site security Throttlebox - The next generation in bandwidth control Clonebox - Backup and disaster recovery on steroids