PDA

View Full Version : Need to have blocks of text/images wrap together to next line. Help?



senselocke
Feb 5th, 2010, 01:49 AM
Hello, noob question incoming.

I have been tasked with monitoring/maintaining this website: http://www.armygear.net

I have managed to figure out the CSS for rollover buttons, and a movable header image (just figured out PNG and transparency).

My problem is this: the center part of the page is too messy. We've decided to stick with 210x210 images, with short descriptions and text below each. Since the sidebars stay on their respective sides, this is what I would like to do:

Somehow define a "block" consisting of an image, with details and price below, and have those blocks act like text, ie wrap to the next line as the window size goes down. At modern HD resolutions, that could give 5 "blocks" per line, or at 800x600, would give only two. What I want to see is as the window size increased, blocks would move back up to the line above, so I don't wind up with huge spans of empty space on the page. I also want the horizontal distance between the blocks to "stretch" with the page so it always looks presentable.

I have a basic knowledge of HTML, and at first thought I could somehow make the blocks table cells, but cannot find out how to have the cells move to the next row as the window size decreased. I don't know how DIV tags work, and only have a hazy understanding of CSS. Anyone have any ideas?

Oh, also, to avoid rendering number images for pricing, is there a way to have nice-looking soft shadows around text using CSS, sort of how the main logo's red text looks? That would save some time and reduce download sizes.

Any other simple ways to reduce size, or any glaring errors in the code, feel free to point out--I'm all ears. And finally, are any folk on here decent with Interchange?

Thanks for your answers if you do, and your time if you don't.

~Senselocke

Excavator
Feb 5th, 2010, 02:00 AM
Somehow define a "block" consisting of an image, with details and price below, and have those blocks act like text, ie wrap to the next line as the window size goes down. At modern HD resolutions, that could give 5 "blocks" per line, or at 800x600, would give only two. What I want to see is as the window size increased, blocks would move back up to the line above, so I don't wind up with huge spans of empty space on the page. I also want the horizontal distance between the blocks to "stretch" with the page so it always looks presentable.


Have a look at an easy way for putting captions with images (http://nopeople.com/CSS/image%20captions/index.html) so they are contained. You can float:left; those containers to get them to break to the next line as the site narrows up.

As always, view the source to see how it's done.

senselocke
Feb 5th, 2010, 03:59 AM
Excavator--Thanks for the link, I'll give that a shot.

Caps--We just need to have more items on the main page. As it is now, we tried to have a self-contained image, but it's a mess if we change the price. Whereas if we simply make a standard "front page" size image, we can rotate them quicker. 210px will allow two images, breathing room, and both sidebars on 800x window size, 3 images for 760p displays, and 4 images wide for 1600x resolutions.

We also tend to ramble in the product definitions, a clean-cut one- or two-line description and price only will force us to be leaner in the text, meaning more items visible at a time.