Thread: Image Positioning
Results 1 to 5 of 5
Related
-
CSS Image Pop Up - Positioning Forum: CSS Forum
Replies: 1 -
Positioning of image Forum: HTML Forum
Replies: 3 -
image positioning Forum: HTML Forum
Replies: 1
-
09-02-2004, 08:49 PM #1
Image Positioning
---Hello
---I'm Writing A Web Page In HTML And I Wan't To
--- Make It So That My Image Is Smack Dab In The
---Center Of The Page I Have It So That It's In The
---Center but It's At The Top Of The Page I Need A
---Code To Make It So That It Will Center The Image
---Between The Top And Bottom And Is Between Left
---And Right
---Here Is An Example Of What I Am Trying To Explain
---link removed
---Thanx
---DaWebmastaLast edited by HTML; 09-07-2004 at 05:56 PM.
-
09-02-2004, 10:29 PM #2bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
Hi there DaWebmasta,
this will position the img DEAD CENTRE
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"> <title>Dead Centre</title> <style type="text/css"> /*<![CDATA[*/ body { margin: 0px padding:0px; } #horizon { background-color: transparent; text-align: center; position: absolute; top: 50%; left: 0px; width: 100%; height: 1px; overflow: visible; visibility: visible; display: block } #content { background-color: transparent; margin-left: -250px; /*half the image width */ position: absolute; top: -120px; /*half the image height */ left: 50%; width: 500px; /* image width */ height: 240px; /* image height */ visibility: visible } #banner { width:500px; height:240px; border: solid 1px #000000; } /*//]]>*/ </style> </head> <body> <div id="horizon"> <div id="content"> <img id="banner"src="http://www.themainevent.vzz.net/John%20Cena%20Enter%20Banner.jpg" alt=""/> </div> </div> </body> </html>
John_Cena_Enter_Banner.jpg
cootheadLast edited by coothead; 09-02-2004 at 10:32 PM.
-
09-02-2004, 10:43 PM #3
---Thanx The Code Works Great But I Tried To Add
---The original Mouse Over I Had On It And I Turned
---The Image Into A Link And For Some Reason The
---Dots Don't Go All The Way Around The Image
---They Just Go On The Left Side Click On The Link In
---My First Post And You Can See What I Am Talkin
---About Here's My Code Can You Tell Me How I Can
---Fix It
Code:<html> <head> <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"> <title>Dead Centre</title> <style type="text/css"> /*<![CDATA[*/ body { margin: 0px padding:0px; } #horizon { background-color: transparent; text-align: center; position: absolute; top: 50%; left: 0px; width: 100%; height: 1px; overflow: visible; visibility: visible; display: block } #content { background-color: transparent; margin-left: -250px; /*half the image width */ position: absolute; top: -120px; /*half the image height */ left: 50%; width: 500px; /* image width */ height: 240px; /* image height */ visibility: visible } #banner { width:500px; height:240px; border: solid 1px #000000 } /*//]]>*/ </style> </head> <body> <div id="horizon"> <div id="content"> <a class="chlnk" style="cursor:crosshair" HREF="http://www.themainevent.vzz.net/home.html" "/h36.shtml" STYLE="TEXT-DECORATION: none" onMouseOver="window.status=''; return true" onMouseOut="window.status='';return true"><img id="banner" src="http://www.themainevent.vzz.net/John%20Cena%20Enter%20Banner.jpg"><style type="text/css"><!-- a:hover {border:#FFffff 1px dashed;} --></style></IMG> </div> </div> </body> </html>
---Images, Text Boxes, ECT. In An Exact Spot For
---Example Is There A Code That Would Allow Me To
---Position The (Whatever Item Is) Say 29 From The
---Right And 100 From The Top
---And You Said That It Is A Lot Safer To Underscore
---Why Is That Safer I Never Heard About That
---Before
---Thanx
---DaWebmastaLast edited by DaWebmasta; 09-02-2004 at 11:18 PM.
-
09-03-2004, 08:11 AM #4bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
Hi there DaWebmasta,
here is the modified code with the 'dotty' mouseover
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Dead Centre Image</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> /*<![CDATA[*/ body { margin: 0px padding:0px; } #horizon { background-color: transparent; text-align: center; position: absolute; top: 50%; left: 0px; width: 100%; height: 1px; overflow: visible; visibility: visible; display: block; } #content { background-color: transparent; margin-left: -251px; /*half the image and border width */ position: absolute; top: -121px; /*half the image and border height */ left: 50%; width: 502px; /* image width plus border*/ height: 242px; /* image height plus border */ visibility: visible } #banner { border:solid 1px #000000; width:500px; height:240px; cursor:crosshair; } /*//]]>*/ </style> </head> <body> <div id="horizon"> <div id="content"> <a class="chlnk" href="http://www.themainevent.vzz.net/home.html" > <img id="banner"src="http://www.themainevent.vzz.net/john cena enter banner.jpg" alt="" onmouseover="window.status='';this.style.border='dashed 1px #000000'; return true" onmouseout="window.status='';this.style.border='solid 1px #000000';return true"/> </a> </div> </div> </body> </html>
How can I position images, text, boxes, etc. in an exact spot
Code:<style type="text/css"> /*<![CDATA[*/ #container { position:absolute; left:200px; top:200px; } /*//]]>*/ </style> <div id="container"> <img src="http://www.ahfb2000.com/images/webmastertools.gif" alt=""/> </div>
And you said that it is a lot safer to underscore.Why is that safer I never heard about that before
Code:"http://www.themainevent.vzz.net/john cena enter banner.jpg"
Code:"http://www.themainevent.vzz.net/john cena enter banner.jpg"
So the underscore will help prevent this type of error occuring, and it is just as easy to insert the underscore as it is to insert a space...
Code:"http://www.themainevent.vzz.net/john_cena_enter_banner.jpg"
coothead
-
09-03-2004, 09:07 AM #5
---Thanx Coothead For All Your Help I Don't Know
---What I Would Do With Out It Thanx
---The Codes You Gave All Work Great Thanx Again
---DaWebmasta