How do i... :D

DampCat · 2 Oct 2009 at 22:41

Sorry, this is retardedly simple im sure, but "how to" sites dont seem to have my answer...

I've made a graphic (psd/jpg/whatever) to put on my index page as a page holder... what i want is that graphic to sit in the centre of the page, no matter what size the window is (ie, on different monitors). There's nothing else on teh page, it's just blank, and i just one that one graphic in the centre

What's the HTML code i need?

Cheers

asim18 · 2 Oct 2009 at 22:46

enclose the body in center tags like this:

<center> <body> blah blah </body> </center>

Dj_Jestar · 2 Oct 2009 at 22:46

Code:

<img id="image" src="http://blah/image.jpg" height="200" width="300" />

Code:

img#image {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -100px;
}

DampCat · 2 Oct 2009 at 23:09

Cheers guys. I looked into both, and then kinda stumbled onto a table form like

Code:

<HTML>
<BODY>
<table width="100%" height="100%" valign="middle">
<tr>
<td>
<center>
<img id="image" src="image.png" height="480" width="640" />
</center>
</td>
</tr>
</table>
</BODY>
</HTML>

Cheers

www.rhyscartwright.co.uk

I know it's poor, but it's not for long... the site will be finished in a week or so

Dj_Jestar · 3 Oct 2009 at 10:00

RobH · 3 Oct 2009 at 11:22

Dj_Jestar has the model solution here, the other two are just horrific. It's not a big deal here, just don't get into bad habits when you start to build the actual site.

DampCat · 3 Oct 2009 at 11:46

I know 0 about HTML/CSS or any type of web design, and I couldn't get Jestar's to do anything other than display that code as text. Luckily, the site isn't being done by me, and is being done professionally at considerable cost

knowledge123 · 3 Oct 2009 at 12:42

DampCat said:
I couldn't get Jestar's to do anything other than display that code as text.

you have to put

Code:

<style type="text/css">

before it, and

Code:

</style>

after it

Auraomega · 3 Oct 2009 at 15:01

I always use CSS for things like that, I'm lazy so less code =

.

Crash course in CSS

DampCat · 3 Oct 2009 at 16:19

as in

Code:

<img id="image" src="http://www.rhyscartwright.co.uk/Indexplaceholder.png" height="480" width="640" />
<style type="text/css">
img#image {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -100px;
}
</style>

?
because that doesn't sit in teh centre for me, it's way off to the right and too far down, and poduces scroll bars.

TwoSaints · 3 Oct 2009 at 17:04

This is what you want, you need to adjust the negative margins so they are half of the size of your image:

Code:

<img id="image" src="http://www.rhyscartwright.co.uk/Indexplaceholder.png" height="480" width="640" />
<style type="text/css">
img#image {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -320px;
  margin-top: -240px;
}
</style>

DampCat · 4 Oct 2009 at 08:28

Cheers.

Clearly my idiocy is far beyond what any of you could have imagined

It's ok to tell me so publically.

Works great, ta. Site is clickable in sig. It's only temp, but i'll keep that for future reference.

Cheers again.