Page 1 of 1
Using CSS to center and overlay images
Posted: Fri Mar 14, 2003 8:54 pm
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.
Posted: Sat Mar 15, 2003 3:25 am
by m3mn0n
Try that.
Beautiful twins ya got btw.

Posted: Sat Mar 15, 2003 7:13 am
by Rob the R
Hm. That didn't seem to have any affect.
Posted: Sat Mar 15, 2003 7:19 am
by volka
valign=vertical-align
try
Code: Select all
.bgpict {
text-align: center;
width: 600px;
height: 368px;
padding: 0px;
border: 1 solid #000000;
}
Posted: Sat Mar 15, 2003 1:07 pm
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.
Posted: Sat Mar 15, 2003 4:18 pm
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

Posted: Sat Mar 15, 2003 5:25 pm
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.
Posted: Sat Mar 15, 2003 6:55 pm
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.
Posted: Sat Mar 15, 2003 8:00 pm
by volka
it's still left aligned
replace
by
it's working then for me, if I save your page and add a proper <base href=....>
Posted: Sun Mar 16, 2003 10:49 am
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!
Posted: Sun Mar 16, 2003 2:13 pm
by volka
sorry, my fault. I played a bit with the code and posted the wrong version
Code: Select all
#bgpict {
text-align: center;
padding: 0px;
}
#bgpict img{
border: 1px solid #000000;
}
Posted: Sun Mar 16, 2003 4:17 pm
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

Posted: Mon Mar 17, 2003 4:32 am
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.
