Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How can I make an image appear in the centre of the page?

Reply
Thread Tools

How can I make an image appear in the centre of the page?

 
 
Ant
Guest
Posts: n/a
 
      08-09-2005
Hi,

I'm trying to make the image appear in the centre of the page no matter what
the resolution is.

I had the idea of creating a 1*1 table whose dimensions were the size of the
viewable browser area and then centering the image in that but I'm running
into some problems.

Then I had the idea of setting the IMG hspace and vspace attributes but then
I realised that they would need ot be dynamically calculated.

So am I missing an obvious method?

If so then please enlighten me!

Cheers


 
Reply With Quote
 
 
 
 
Des
Guest
Posts: n/a
 
      08-10-2005
if this is in a table try this

<table cellpadding="0" cellspacing="0" width="900" align="center">

this will keep things centeral

Desmond.

 
Reply With Quote
 
 
 
 
Toby Inkster
Guest
Posts: n/a
 
      08-10-2005
Ant wrote:

> I'm trying to make the image appear in the centre of the page no matter
> what the resolution is.


The best reliable way is to put it as a background image:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>some title</title>
<style type="text/css">
body
{
background-image: url("foo.jpeg");
background-repeat: no-repeat;
background-position: center center;
}
div
{
position: relative;
width: 20em;
left: -99em;
}
</style>
<div>alt text</div>

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
dingbat@codesmiths.com
Guest
Posts: n/a
 
      08-10-2005
[placing it as a background image]

Will be a problem for printing though.

 
Reply With Quote
 
Barbara de Zoete
Guest
Posts: n/a
 
      08-10-2005
On 10 Aug 2005 01:24:23 -0700, <(E-Mail Removed)> wrote:

> [placing it as a background image]
>
> Will be a problem for printing though.
>


What will be? What are you referring to? Where is the quote from the post you
reply to? Who wrote it?

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 
Reply With Quote
 
Ant
Guest
Posts: n/a
 
      08-10-2005
Thanks everyone for the replies!

I should have mentioned that I would like the image to act as the entrance
to a site - so you click on the picture and get taken to the main page - so
I don't think the background method will work for this - my bad, should have
said.


 
Reply With Quote
 
Jedi Fans
Guest
Posts: n/a
 
      08-10-2005
Ant wrote:
> Thanks everyone for the replies!
>
> I should have mentioned that I would like the image to act as the entrance
> to a site - so you click on the picture and get taken to the main page - so
> I don't think the background method will work for this - my bad, should have
> said.
>
>

css:
img.central{position:absolute;width:WIDTHOFIMAGEpx ;height:HEIGHTOFIMAGEpx;left:50%;top:50%;margin-top:-HALFOFIMAGEHEIGHTpx;margin-left:-HALFOFIMAGEWIDTHpx;}

html:
<img src="enter.png" class="central" alt="Enter the website" />

--
Hope This Helped and MTFBWY...
Kieren aka JediFans - <URL:http://jedifans.com/>
The Force Is With Me, SuSE Linux Professional 9.3, Mozilla Firefox
1.0.6, Mozilla Thunderbird 1.5 Alpha 2 and Revenge Of The Sith!
 
Reply With Quote
 
Ant
Guest
Posts: n/a
 
      08-10-2005
wow! thanks!!

that did the job perfectly

"Jedi Fans" <"news[at]jedifans[-=dot=-]com"> wrote in message
news:42f9dfbf$0$18637$(E-Mail Removed)...
> Ant wrote:
>> Thanks everyone for the replies!
>>
>> I should have mentioned that I would like the image to act as the
>> entrance to a site - so you click on the picture and get taken to the
>> main page - so I don't think the background method will work for this -
>> my bad, should have said.

> css:
> img.central{position:absolute;width:WIDTHOFIMAGEpx ;height:HEIGHTOFIMAGEpx;left:50%;top:50%;margin-top:-HALFOFIMAGEHEIGHTpx;margin-left:-HALFOFIMAGEWIDTHpx;}
>
> html:
> <img src="enter.png" class="central" alt="Enter the website" />
>
> --
> Hope This Helped and MTFBWY...
> Kieren aka JediFans - <URL:http://jedifans.com/>
> The Force Is With Me, SuSE Linux Professional 9.3, Mozilla Firefox 1.0.6,
> Mozilla Thunderbird 1.5 Alpha 2 and Revenge Of The Sith!



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Basic question. Centre text in the remaining space to right of image? Mike Barnard HTML 4 05-03-2007 06:43 PM
How can I make window appear and go away ASM Javascript 6 02-28-2007 03:05 PM
Centre an image in a <div> Vince Morgan HTML 10 11-16-2006 09:04 PM
How to make a "container" div a certain size as well as centre it. xxfiredragonxx HTML 0 12-19-2005 10:10 PM
Way to make image hidden then appear based on circustance? Bob Franz Javascript 4 03-09-2005 02:38 PM



Advertisments