How to place a picture centered on a webpage / with fixed offset of 300 pixels from left border?
Camille Petersen
The picture should NOT be stretched.
The problem now is that I do not know the current browser window size of a potential user.
So the web page/CSS must find it out dynamically.
If the browser windows is SMALLER than the picture then the picture should be
a.) put into the upper left corner of the browser window and
or
b.) Should be shown centralized on the web page
The horizontal and vertical sliders should automatically appear in thiese cases.
The picture should not be shrinked!
How can I achieve this with HTML/CSS ?
What if I want to add a fixed offset of 300 pixels to the position from the left border?
Camille
Neredbojias
> Assume I have a picture which I want to put centered on a webpage.
> The picture should NOT be stretched.
>
> The problem now is that I do not know the current browser window size
> of a potential user. So the web page/CSS must find it out
> dynamically.
>
> If the browser windows is SMALLER than the picture then the picture
> should be
>
> a.) put into the upper left corner of the browser window and
> or
> b.) Should be shown centralized on the web page
If the window is *smaller* than the image, just how do you expect that
to occur? Next time wait until you're fully awake to post a question.
> The horizontal and vertical sliders should automatically appear in
> thiese cases. The picture should not be shrinked!
It's "shrunk".
> How can I achieve this with HTML/CSS ?
Do nothing and you have it.
> What if I want to add a fixed offset of 300 pixels to the position
> from the left border?
Css -
img {
margin-left:300px;
}
--
Neredbojias
http://www.neredbojias.org/
http://www.neredbojias.net/
dorayme
cpet_...@hotmail.com (Camille Petersen) wrote:
Simplest is surely just to put a center text-align (this is slightly
misnamed in the CSS, it should really be inline-align!) the container
that holds the inline image.
Here is a page where you can see the two main techniques in the first
two of my images, and the third down is using an offset from centre, the
fourth is offset from the left edge of body (I was not sure what you
meant by offset. These should cover the possibilities):
<http://dorayme.netweaver.com.au/camille.html>
My margin-bottom rules on the divs are there to separate the examples,
they are not important.
--
dorayme