Centering images |
  |
 Aug 3 2007, 02:00 PM
Post
#1
|
|
 I scream at men with pink shirts.  Group: Member Posts: 169 Joined: Oct 2004 Member No: 58,653  |
This is kind of weird, and I don't know quite how to phrase it.
I have a layout that I want RIGHT in the middle of the page. My first attempt ended up like this: Here. I've changed the layout, and I know how to center stuff HORIZONTALLY (of course), but I also want it centered VERTICALLY no matter what size the browser is. Is that possible with more than just an image (say, with several images and an iFrame put on top of the images?) Not sure if that makes sense, but I hope someone replies soon 
|
|
|
|
|
Aug 3 2007, 02:13 PM
Post
#2
|
|
|
I scream at men with pink shirts. Group: Member Posts: 169 Joined: Oct 2004 Member No: 58,653 |
oops, double post
|
|
|
|
|
Aug 3 2007, 02:14 PM
Post
#3
|
|
 define our lives for us. Group: Staff Alumni Posts: 11,656 Joined: Aug 2004 Member No: 43,293 |
UHHHH.. I think I get what you're saying..?
Can you try aligning vertically with 50% or something as position? |
|
|
|
|
Aug 3 2007, 02:19 PM
Post
#4
|
|
|
I scream at men with pink shirts. Group: Member Posts: 169 Joined: Oct 2004 Member No: 58,653 |
Well, I got SOMETHING working.
This is an abbreviated version of my code, involving only the elements that deal with vertical centering: CODE <HTML> <head> <style type="text/css"> div#centered { border: 0; height: 50%; width: 50%; position: absolute; left: 25%; top: 25%; } </style> </HEAD> <BODY background="http://img176.imageshack.us/img176/6640/bgenterfv6.jpg"> <center> <div id="centered"> <img src="http://img245.imageshack.us/img245/7481/entertopleftnp8.gif"><img src="http://img177.imageshack.us/img177/9003/entertopmiddleno5.jpg"><img src="http://img184.imageshack.us/img184/1107/entertoprightlq1.gif"><br> <img name="enter_middle" src="http://img520.imageshack.us/img520/8884/entermiddlegl5.jpg" width="550" height="280" border="0" id="enter_middle" usemap="#m_enter_middle" alt="" /><br> <img src="http://img177.imageshack.us/img177/5096/enterbottomleftwu5.gif"><img src="http://img522.imageshack.us/img522/4106/enterbottommiddlesp4.jpg"><img src="http://img245.imageshack.us/img245/2968/enterbottomrightev7.gif"> </div> </center> </body> </html> My problem is that with this kind of method, if the window gets to small, the images don't stay side by side anymore D: |
|
|
|
|
Aug 4 2007, 03:46 AM
Post
#5
|
|
 |[ V A L E E N ' ]| Group: Member Posts: 21 Joined: Aug 2007 Member No: 556,055 |
uhhh..i don't get it.
|
|
|
|
|
Aug 4 2007, 09:45 PM
Post
#6
|
|
 AKA RockIt Studios Group: Official Member Posts: 2,286 Joined: Jun 2006 Member No: 421,809 |
Uhmmm, I don't know if this is what you're looking for, or if it will help, but put this BEFORE the code that you need aligned...I'm guessing you know DIV's, so this is just basically one big DIV that you can use to move the entire object. Change 0 to whatever you want...
CODE <div style="left:0px; top:0px; position=absolute;"> Hope this helps a little. 
|
|
|
|
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members: