Got working on something the other day and came up with this small demonstration on the differences between several techniques using the same html code, but different CSS to position a block of four thumbnail images approximately the same ( well, similar at least ) onto a page and the resultant differences in the effect of the techniques. Have a look: http://www.jlhaslip.trap17.com/samples/mis...ions/index.html

The first one uses floats to group the images into a fixed width block and then uses absolute positioning of the wrapper div to space them off the left hand side and down a little from the top of the page. That last paragraph actually follows the code for the Image block if you do a view > source, but the absolute positioning of the group of pictures removes the block from the normal flow of the page, which allows the paragraph to slide up. Might be what you want, but re-sizing the viewport will alter things . Try it.

The second one uses absolute positioning of each image and a percentage of the viewport to place the same four images into pretty much the same place on the display... well, my display at least... and therein lies a problem with position:absolute and percentages for layout. Resizing the Browser viewport changes stuff, majorly... Oh, and because the Image Blocks are declared to be 100% width of the viewport, and because of the manner in which the browser places the absolutely positioned div's onto the page {after} positioning the rest of the page, the image block is effectively a 'layer' over top of the third and fourth links, so you can't click them because the Browser ties to click the Image block layer, but there are no links there. The links are under the transparent Image block. Click the first link to access links three and four.

The next page uses Floats to group the Image and margins to space the grouped images off the left hand side approximately the same as the previous pages. notice how the trailing paragraph is displayed beside the group of Images? This is a result of using Float to position the grouped pictures. The paragraph will 'wrap' the images, taking up the next available spot on the display, next to the images. This is a common technique used in layouts.

Lastly, if you don't want the 'wrapped' look, then 'clear' the block of images by using 'clear:both' on the trailing paragraph. Options for the clear are left : right and both, depending on the presentation you want to provide for the page.

Hope this helps you understand that css is a handy tool for laying out your pages, and does a good job of it, but be careful how you go about it. There is usually more than one method that you have available to create the same/similar look to a page, and each of them has various side effects. The method you choose might be the right one, but it might not be...

 

 

 

Reply

Very nice. I'm not too much into CSS, but I can appreciate a demonstration and explanation that is as clear and easy-to-understand as yours. Even though I'm not strong with CSS, I was able to follow most of what you said, or at the very least the concept, if not the actual coding.

Reply