Using CSS to center and overlay images

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Rob the R
Forum Contributor
Posts: 128
Joined: Wed Nov 06, 2002 2:25 pm
Location: Houston

Using CSS to center and overlay images

Post by Rob the R »

I'm having trouble finding a cross-browser solution to do what I want. Basically, I want to center an image in the browser window, and then place other images on top of that main image. It seems like CSS with the right <div> tags should do this, but I haven't been able to hit upon the right combination.

You can see a left-justified version of this at this page:
http://www.robreid.com/twins/index.php

This is exactly what I want, except I want the image to be centered. The smaller images (the numbers and text) need to remain in their current positions relative to the main picture.

And yes, the left-justified version is completely servicable, but I'd like to know how to do this to advance my CSS knowledge.
User avatar
m3mn0n
PHP Evangelist
Posts: 3548
Joined: Tue Aug 13, 2002 3:35 pm
Location: Calgary, Canada

Post by m3mn0n »

Code: Select all

<div id="bgpict" valign="center">
Try that.

Beautiful twins ya got btw. :)
Rob the R
Forum Contributor
Posts: 128
Joined: Wed Nov 06, 2002 2:25 pm
Location: Houston

Post by Rob the R »

Hm. That didn't seem to have any affect.
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

valign=vertical-align
try

Code: Select all

.bgpict &#123;
		text-align: center;
		width: 600px;
		height: 368px;
		padding: 0px;
		border: 1 solid #000000;
	&#125;
Rob the R
Forum Contributor
Posts: 128
Joined: Wed Nov 06, 2002 2:25 pm
Location: Houston

Post by Rob the R »

Of course. Unfortunately, the text-align trick did not work either. I've updated my page with that in it so you can see for yourself.
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

there are some strange characters before the text-align-property
Ê ÊÊ Êtext-align: center;
and I tested it with mozilla 1.2 and IE6 before I posted ;)
User avatar
m3mn0n
PHP Evangelist
Posts: 3548
Joined: Tue Aug 13, 2002 3:35 pm
Location: Calgary, Canada

Post by m3mn0n »

I loaded the html & css into dreamweaver and i could not find a way, i tried about 15 different things.

I too am getting that weird code before the css for that particular image. In notepad & Dreamweaver.
Rob the R
Forum Contributor
Posts: 128
Joined: Wed Nov 06, 2002 2:25 pm
Location: Houston

Post by Rob the R »

I think the strange characters were because of the way my system handles cutting-and-pasting in some cases. The strange characters should not be there any more. The weird thing is, it's still left-justified! I am testing it in Safari and IE 5.2 (both Mac OS X). Maybe, volka, you can tell me if it looks any different and/or if the strange characters are still there.

Thanks, Oromian, for trying various permuations. I don't mind it being impossible (or nearly so), just as long as I'm not overlooking something I should know about CSS.
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

it's still left aligned
replace

Code: Select all

#bgpict &#123;
by

Code: Select all

.bgpict &#123;
it's working then for me, if I save your page and add a proper <base href=....>
Rob the R
Forum Contributor
Posts: 128
Joined: Wed Nov 06, 2002 2:25 pm
Location: Houston

Post by Rob the R »

The ".bgpict" would mean a class and a "#bgpict" would mean an ID, right? So I don't know why changing it to a ".bgpict" would help.

You said, volka, that you got it to work on yours, so I'll just spend some more time fiddling along the lines you have suggested. Thanks for your help!
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

sorry, my fault. I played a bit with the code and posted the wrong version :oops:

Code: Select all

#bgpict &#123;
      text-align: center; 
      padding: 0px;
	  &#125;
   
#bgpict img&#123;
         border: 1px solid #000000;
    &#125;
Rob the R
Forum Contributor
Posts: 128
Joined: Wed Nov 06, 2002 2:25 pm
Location: Houston

Post by Rob the R »

No problem. I'll try it out. Thanks for devoting the time with this!

And I like the link in your signature. I hope I adhered to its guidelines :)
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post by patrikG »

I've just had to do pretty much the same thing as you Rob - although in my case I am using a free-floating image, not the background-image.

Code: Select all

<div style="width:100%; text-align:center; vertical-align: bottom; position:absolute; top:33%; padding:0px; visibility:visible; margin:0px;"><img src='whatever.gif'></div>
The image is exactly in the center of the screen. Do note, however, that the distance from the "top" is 33%, it depends on the image size. I had to make use of "top" since vertical-align has apparently not been implemented outside W3.org.

EDIT: Bah, I am not awake today. Mozilla and NS don't like this kind of positioning... I'll try some more...
EDIT 2: Well, looks like IE is using the right border of a DOM-element when the position is set to absolute, unlike Mozilla & NS. I've changed "position:absolute" to "position:relative" and it works. :)
Post Reply