I have some basic questions.

[Fredde]

Hello all.

I just need some basic help that have to do with CSS and html.

If I want to place a image in the right corner of a div, what should I do then?

And if I use like {position:absolute;top:0;right:0} will it be right?

I don't really get padding and margin, like which of them are for top and right and so on.

And If I use position absolute in the div on the image, will it might look different in some other browser?

 

Seeya

[dbrimlow]

1. position:absolute is dangerous. It takes that block of code completely OUTSIDE of the flow of the html all around it. In other words, it has nothing to do with the rest of the page so far as layout is concerned. It stays where you tell it to in the browser window regardless of what the rest of the page is doing.

 

That said, let me point out that there is valid use of position absolute and it can be controlled if put in a container that is position:relative. This makes the position:absolute container "relative" to that parent container, instead of the browser window. HOWEVER, it should ONLY be used by those who are advanced in css and fully understand alternatives and when and how it can be used.

 

will it might look different in some other browser?

 

Actually, the better way to always ask this question is  - "is it cross-browser compatible". Occasionally you may get a "yes" answer.

 

It is always safe to automatically assume that IE 6.0 and below WILL always have a problem with any css box item, positioned or floated item and/or dimensions (margin/padding); and if it doesn't be pleased and consider yourself lucky.

 

This is why most professionals first test, and tweak, their beta page designs in modern browsers (Firefox and Safari being the top two used) before even opening in IE6 and IE7.

 

It is far, far easier to create a separate "ie-only.css" page, then to try to tweak one css file to work with all browsers (via hacks that require knowledge of how all browsers actually work).

 

I don't really get padding and margin, like which of them are for top and right and so on.

 

Margins relate to THE SPACE all around (or outside of) an element or container - like how much space should be before and after a paragraph, or how much a list item should be indented on the left or right.

 

Think of it like how far from the walls of a closet a box is on each side.

 

Padding relates to the space all around "THE CONTENTS" INSIDE OF the element or container.

 

Think of a box with blue borders on all four sides. You want to have space between the inside of the borders and the text/image within the box ... that's padding.

 

The shortcut is ALWAYS Top, Right, Bottom, Left (padding or margin) - when first learning css, as a mnemonic, I thought of this as "TRIBAL" Top, Right, Bottom And Left.

 

Examples:

"margin: 10px 0 5px 20px" is 10pixels on top, nothing on the right, 5 pixels on the bottom and 20pixels on the left.

 

This shortcut - "padding: 10px 0" - is 10pixels on top and bottom and no pixels on right and left.

 

This shortcut - "margin: 10px" - is 10pixels on all sides.