May 16, 2008

A Demonstration Of Floats, Clears And Absolute Positions - See the differences here...

Free Web Hosting, No Ads > CONTRIBUTE > Computers > Programming Languages > CSS (Cascading Style Sheets)

free web hosting

A Demonstration Of Floats, Clears And Absolute Positions - See the differences here...

jlhaslip
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

suberatu
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



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Similar Topics

Keywords : demonstration floats clears absolute positions differences


    Looking for demonstration, floats, clears, absolute, positions, differences,

Searching Video's for demonstration, floats, clears, absolute, positions, differences,
advertisement



A Demonstration Of Floats, Clears And Absolute Positions - See the differences here...



 

 

 

 

ADD REPLY / Got an Opinion! Remove these ADs! RAPID SEARCH! Free Web Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE