FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Center Picture





Eyre
Okay, im putting up a picture/link on my index page, and its eventually going to link to the forums and the site, but i want to put it smack dab in the middle of the website. I know how to get it centered horizontally, but i dont know how to do it vertically. The HTML code would be appreciated. (im using Notepad)
phileplanet
I had to do a little research myself because I thought I knew this. I'm not sure if there is a tag directly for this but I know you could accomplish this by putting it in a table cell. Assuming your image is the only thing on the page, it should put the image in the center of the cell by default.
Code:
<table width="100%" height="100%" valign="middle"><tr><td align="center" width="100%" height="100%">
<a href="http://forums.illidrithin.frihost.net/">
<img src="http://www.frihost.com/forums/images/avatars/925387489434317ad5f381.jpg" />
</a>
</td></tr></table>
Eyre
thanks! That did the trick. the only thing i had to add was to make it not put in a border on the edges. Thanks much. Heres the finishing results:
http://illidrithin.frihost.net/

P.S. I want to stop putting all my pictures in photobucket and put it in my site so i can link it localy.I put the picture in the "Pictures" folder of the file manager, but when i link it "indexpic.jpg" in the code, the picture wont show up. Do i have to add anything before the file name? Such as "pictures/indexpic.jpg" Im gonna test it out now in case that works.
polarBear
the one above is a good alternative that only works if your <body> has specifically set width and height in pixels, or, if on percentages, absolutely positioned. Otherwise the table shrinks its height.


You could also try this, it might work, but I haven't tested it yet:
Code:
<div style="
         position:absolute;
         top:50%;
         left:50%;
         margin-top:[HalfOfTheImageHeight]; /*replace what's between the [] with a number given that is the half of your image's height */
         margin-left:[HalfOfTheImageWidth]/*replace what's between the [] with a number given that is the half of your image's width*/
">
<img src="foo.bar" /> <!-- replace foo.bar with the real filename of your image -->
</div>
Eyre
edit: Got it to work. The picture, if put in the "images" files, needs to have images/picture.name for it to work. I wanted to save some space in the main folder, and just placed it in images. thanks for the help guys.
phileplanet
Your button is not linked to anything, just so you know.
Eyre
which one? the www button next to the PM button, or my signature? If its my sig, its because im making a new one right now, that ones gonna be linked Very Happy . If its the www button then i don't get it, because i just tried it and it worked.
phileplanet
Eyre wrote:
which one? the www button next to the PM button, or my signature? If its my sig, its because im making a new one right now, that ones gonna be linked Very Happy . If its the www button then i don't get it, because i just tried it and it worked.


No I mean the one on your site. The page taht would link to the forums I guess.
Eyre
yeah i havent set that up yet Razz
Related topics
W3C buttons without images
picture slide show (java)
The Unofficial Jokes Thread
Ok a little help for a semi-beginner
There's One Born Every Minute
Tutorials
E-Cards with PHP & MySQL
picture-dept.
My photo
my pic
Mambo header picture
Freedom Tower/World Trade Center
Media Center pc or Blu ray?
Printable Picture Collage Cards for Kids
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.