PDA

View Full Version : How do I position an image inside a div?



moss2076
Sep 3rd, 2007, 05:40 PM
I am learning CSS and I want to insert an image inside a div used as a footer. I want the image to appear to the left of the div with say 10px left margin and 5px top and bottom.

I also have a horizontal UL and a <p> inside the div which are set to the centre. I want to keep their appearance as they are - but add the image to the left without putting anything else out of place if that makes sense.

Can someone show me how it is done?

http://www.tomkilbourn.com/newsite/test/footer.html

The image which I want to use is from validator.wc3.org -

<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>

ajith_rock
Sep 3rd, 2007, 08:10 PM
i am a big fan of absolute positioning. Just try adding an absolutely positioned block element(say a span) just before u close the body and use the top and left property to align it to whereever you want it to be.

Cheers,

Ajith

moss2076
Sep 3rd, 2007, 08:23 PM
Sorry im still learning, that doesnt mean allot to me!

ajith_rock
Sep 3rd, 2007, 08:37 PM
Okay. :) .

Try this

<span style="position:absolute;top:how-much-ever-from-the-top;left:how-much-ever-from-the-left;">
<img src="your-image"></img></span>

add this line with the necessary values just before u close ur body tag.

Eg:

<span style="position:absolute;top:20%;left:15%;"><img ... ></span>
</body>

Cheers,

Ajith

moss2076
Sep 3rd, 2007, 08:53 PM
Well bugger me that has put it where i wanted it.

Can I be a real pain and ask what the absolute positioning and span are doing? Sorry to be a pain, but its worked!

ajith_rock
Sep 4th, 2007, 07:23 AM
span is a block element. Meaning whatever is inside a span container can be moved as one whole block. Similar to div perhaps(but different.. :) ). So when we declare the span as absolute, all we have done is asked the span to be relative to the browser instead of being relative to the other elements. Try googling and find more. One obvious pain with absolute positioning is gonna be compatibility with multiple resolutions. The obvious solution being moving into a complete liquid layout(with all dimensions, height, width etc in % rather than in em or px)

Cheers,

Ajith

VIPStephan
Sep 4th, 2007, 03:59 PM
Wait, wait, wait, stop it! All wrong! I canít read this crap without saying something. You probably donít mean it ajith_rock but itís people like you with insufficient and plain wrong advice that make newbies get an entirely wrong idea of the actual concept of modern web design and CSS.

The first thing to know is that positioning in general (and absolute positioning specifically) isnít needed at all in most cases/layouts. Itís a typical misunderstanding among people that are new to CSS that you can position things anywhere and itís sooo easy because actually itís not. Positioning can be more tricky than it seems and should only be used if you know exactly what you are doing because if not it makes things only worse rather than itís helping.

Now that weíve got this straight another thing to know, moss2067, is that any image that is of purely stylistic relevance (i.e. is not necessary to understand the content of the page) should be applied as background image via CSS and so can you do with your footer image without messing with the actual content of the div. You can position your background image where you want, too (I hope youíre smart enough to take my hints as chance to look up the relevant CSS properties yourself).

Then another thing on ajith_rockís advice and code:
If absolute positioning is used it can be done in a much cleaner and simpler way. Specifically you can position any element. You donít have to put an image into another useless span, you can position it directly.
(I just now realized that you wanna position the W3C icon so that wouldnít be applicable as background image).
So in your case you can position the anchor element within which the image is (and which is needed to click it and go to the other site).

And to resolve another plain wrong statement: a span element is an inline element (as opposed to its block-level equivalent div) and is a semantically neutral element used to apply styles to certain words or sections that donít create a block by itself (for which divs are there).

In order to position the link absolutely within the footer you need to apply position: relative; to the footer, too, otherwise, as ajith_rock correctly stated, it would be positioned relative to the viewport instead of the footer section. So, in a nutshell:


Put the image (i.e. link with image inside) into the footer
Apply position: relative; to the footer
Apply position: absolute; to the anchor, along with top/left/right/bottom offsets

ajith_rock
Sep 4th, 2007, 04:32 PM
Thanks for that mate. Seems logically right. All i wanted to know when i took up relative positioning was, why should you NOT use absolute positioning to do the needful?. As ive generally learnt, when i have combined absolute positioning with good liquidity it works like a doll. If it works when we use absolute positioning, and if you generally know what you are doing, i dont think its tough handling things. Not generally crap for me. Again its my perspective. As you have rightly said, even i know its not the orthodox way you do things and is never very pretty. But ive grown up with it. :) .

Thanks for your comments! Keep it going!!.. :thumbsup:

Cheers,

Ajith.

moss2076
Sep 4th, 2007, 04:41 PM
Wait, wait, wait, stop it! All wrong! I canít read this crap without saying something. You probably donít mean it ajith_rock but itís people like you with insufficient and plain wrong advice that make newbies get an entirely wrong idea of the actual concept of modern web design and CSS.

The first thing to know is that positioning in general (and absolute positioning specifically) isnít needed at all in most cases/layouts. Itís a typical misunderstanding among people that are new to CSS that you can position things anywhere and itís sooo easy because actually itís not. Positioning can be more tricky than it seems and should only be used if you know exactly what you are doing because if not it makes things only worse rather than itís helping.

Now that weíve got this straight another thing to know, moss2067, is that any image that is of purely stylistic relevance (i.e. is not necessary to understand the content of the page) should be applied as background image via CSS and so can you do with your footer image without messing with the actual content of the div. You can position your background image where you want, too (I hope youíre smart enough to take my hints as chance to look up the relevant CSS properties yourself).

Then another thing on ajith_rockís advice and code:
If absolute positioning is used it can be done in a much cleaner and simpler way. Specifically you can position any element. You donít have to put an image into another useless span, you can position it directly.
(I just now realized that you wanna position the W3C icon so that wouldnít be applicable as background image).
So in your case you can position the anchor element within which the image is (and which is needed to click it and go to the other site).

And to resolve another plain wrong statement: a span element is an inline element (as opposed to its block-level equivalent div) and is a semantically neutral element used to apply styles to certain words or sections that donít create a block by itself (for which divs are there).

In order to position the link absolutely within the footer you need to apply position: relative; to the footer, too, otherwise, as ajith_rock correctly stated, it would be positioned relative to the viewport instead of the footer section. So, in a nutshell:


Put the image (i.e. link with image inside) into the footer
Apply position: relative; to the footer
Apply position: absolute; to the anchor, along with top/left/right/bottom offsets


Hi, thanks VIP STEPHAN, to be honest I would really like to stay away from the absoulte positioning, and the rest of my site has not used it, everything has been positioned with padding/margins etc.

The background im using at the moment in the footer is CSS background-color, one color for the UL and one color for the <div> backgrounds. Im unsure how I can use the W3C image as a background image as the UL takes up the whole width of the div and the UL has its own background color. I guess I could remove the UL background color? I will keep thinking about it!

moss2076
Sep 4th, 2007, 04:49 PM
.
Ive also applied it as you said as footer - relative and image - aboslute. This has made the footer colapse upwards slightly. How can I give the footer a bit of space below the <p>? I cant get padding to work. I think im getting there. Here is an update of the footer -
http://www.tomkilbourn.com/newsite/test/footer.html

LFCFan
Sep 4th, 2007, 05:48 PM
Specifically you can position any element.


Huh? Can you position a hidden form field or am I being pedantic? :)

VIPStephan
Sep 4th, 2007, 06:42 PM
How can I give the footer a bit of space below the <p>?

Apply some bottom padding to the footer? ;)


Huh? Can you position a hidden form field or am I being pedantic? :)

Yes and yes.
Yes, you can. You wonít see it, though. ;)
And yes, you're pedantic. :p

Of course you canít position elements in the document header etc. but people should get my point.

LFCFan
Sep 6th, 2007, 12:51 PM
Ah yes, a hidden form does have layout. Seems silly, another silly invention from Micrsoft.