Free Web Hosting Forum
Go Back   Free Web Hosting Forum > Website Building > Web Design and HTML
Reload this Page Align image at center and top with no space margins?
Reply
 
Thread Tools Display Modes
(#1 (permalink))
Old
Member
Str8 is on a distinguished road
 
Posts: 85
Join Date: Aug 2011
Exclamation Align image at center and top with no space margins? - 08-15-2011, 05:53 AM

I am trying to align an image at the center and all the way at the top.

Currently I have:
HTML Code:
<div style="padding-left: 233px"><a href="1_2_Products.html"> <img src="web_images/str8_v2.jpg" alt="" /> </a></div>
Which I am gettting the image to center (I don't know if the image will stay centered this way with the padding with different screen sizes, or just shifted to the right more on some screens), but there is a space gap between the image and the top of the screen. How can i get rid of this gap and get the image ALL the way at the top of the screen and without the space?

Last edited by Str8; 08-15-2011 at 06:15 AM.
Reply With Quote
Sponsored Links
(#2 (permalink))
Old
lobrc's Avatar
Administrator
lobrc is on a distinguished road
 
Posts: 5,046
Join Date: Jan 2010
Location: http://www.lobrc.net
Default 08-15-2011, 12:37 PM

Place this at the top of the page:
HTML Code:
<div style="text-align:center;"><a  href="1_2_Products.html"><img src="web_images/str8_v2.jpg"  /></a></div>


FREE SCRIPT INSTALLATION SERVICE | PREMIUM HOSTING* | LOBRC.NET

*All packages include Quality Support, Website Builder, Free Site Migration, 30 Day Money Back Guarantee, Official cPanel and Fantastico Autoinstaller.

Plus get 20% off with promo code 000WH20. Contact sales for more information.
Reply With Quote
(#3 (permalink))
Old
Member
Str8 is on a distinguished road
 
Posts: 85
Join Date: Aug 2011
Default 08-15-2011, 04:20 PM

Quote:
Originally Posted by lobrc View Post
Place this at the top of the page:
HTML Code:
<div style="text-align:center;"><a  href="1_2_Products.html"><img src="web_images/str8_v2.jpg"  /></a></div>
Thank you, that's centering the picture, although I still have a very small space at the very top of the image with the page.

this seems to center and put my image at the top like I want it, but it just works as a background image and cannot hyperlink it
Code:
background: #000000 url(web_images/str8_v2.jpg) no-repeat center top;

Last edited by Str8; 08-15-2011 at 04:48 PM.
Reply With Quote
(#4 (permalink))
Old
lobrc's Avatar
Administrator
lobrc is on a distinguished road
 
Posts: 5,046
Join Date: Jan 2010
Location: http://www.lobrc.net
Default 08-15-2011, 05:28 PM

Try this:

HTML Code:
<div style="text-align:center; margin-top:0px;"><a   href="1_2_Products.html"><img src="web_images/str8_v2.jpg"   /></a></div>


FREE SCRIPT INSTALLATION SERVICE | PREMIUM HOSTING* | LOBRC.NET

*All packages include Quality Support, Website Builder, Free Site Migration, 30 Day Money Back Guarantee, Official cPanel and Fantastico Autoinstaller.

Plus get 20% off with promo code 000WH20. Contact sales for more information.
Reply With Quote
(#5 (permalink))
Old
Member
Str8 is on a distinguished road
 
Posts: 85
Join Date: Aug 2011
Default 08-15-2011, 05:31 PM

Quote:
Originally Posted by lobrc View Post
Try this:

HTML Code:
<div style="text-align:center; margin-top:0px;"><a   href="1_2_Products.html"><img src="web_images/str8_v2.jpg"   /></a></div>
I'm still getting that little space, if you wanna take a look at the page and how its got the gap, this is the page Link
Reply With Quote
(#6 (permalink))
Old
lobrc's Avatar
Administrator
lobrc is on a distinguished road
 
Posts: 5,046
Join Date: Jan 2010
Location: http://www.lobrc.net
Default 08-15-2011, 05:36 PM

HTML Code:
<div style="text-align:center; margin-top:-2px;"><a    href="1_2_Products.html"><img src="web_images/str8_v2.jpg"    /></a></div>


FREE SCRIPT INSTALLATION SERVICE | PREMIUM HOSTING* | LOBRC.NET

*All packages include Quality Support, Website Builder, Free Site Migration, 30 Day Money Back Guarantee, Official cPanel and Fantastico Autoinstaller.

Plus get 20% off with promo code 000WH20. Contact sales for more information.
Reply With Quote
(#7 (permalink))
Old
Member
Str8 is on a distinguished road
 
Posts: 85
Join Date: Aug 2011
Default 08-15-2011, 05:43 PM

Quote:
Originally Posted by lobrc View Post
HTML Code:
<div style="text-align:center; margin-top:-2px;"><a    href="1_2_Products.html"><img src="web_images/str8_v2.jpg"    /></a></div>
GENIUS!!! That worked perfectly. I ended up going with -7.5px. Will this affect the way the page looks on different screen sizes and maybe I am just seeing it work on my screen size, or should this work universally.
Reply With Quote
(#8 (permalink))
Old
lobrc's Avatar
Administrator
lobrc is on a distinguished road
 
Posts: 5,046
Join Date: Jan 2010
Location: http://www.lobrc.net
Default 08-15-2011, 07:00 PM

Quote:
Originally Posted by Str8 View Post
GENIUS!!! That worked perfectly. I ended up going with -7.5px. Will this affect the way the page looks on different screen sizes and maybe I am just seeing it work on my screen size, or should this work universally.
It should work fine on all screen resolutions


FREE SCRIPT INSTALLATION SERVICE | PREMIUM HOSTING* | LOBRC.NET

*All packages include Quality Support, Website Builder, Free Site Migration, 30 Day Money Back Guarantee, Official cPanel and Fantastico Autoinstaller.

Plus get 20% off with promo code 000WH20. Contact sales for more information.
Reply With Quote
(#9 (permalink))
Old
Member
Str8 is on a distinguished road
 
Posts: 85
Join Date: Aug 2011
Default 08-15-2011, 07:00 PM

In the future, if I want to lower the image vertically but having the image stay in the center, would I lower it by increasing the margin px? Or is there a better way to accomplish this.
Reply With Quote
(#10 (permalink))
Old
lobrc's Avatar
Administrator
lobrc is on a distinguished road
 
Posts: 5,046
Join Date: Jan 2010
Location: http://www.lobrc.net
Default 08-15-2011, 07:01 PM

Quote:
Originally Posted by Str8 View Post
In the future, if I want to lower the image vertically but having the image stay in the center, would I lower it by increasing the margin px? Or is there a better way to accomplish this.
That way is perfectly acceptable


FREE SCRIPT INSTALLATION SERVICE | PREMIUM HOSTING* | LOBRC.NET

*All packages include Quality Support, Website Builder, Free Site Migration, 30 Day Money Back Guarantee, Official cPanel and Fantastico Autoinstaller.

Plus get 20% off with promo code 000WH20. Contact sales for more information.
Reply With Quote
Reply

Tags
html

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off

Forum Jump



Powered by vBulletin® Version 3.8.2
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.5.2
vBulletin Skin developed by: vBStyles.com