Image Positioning

**DaWebmasta** · 09-02-2004, 08:49 PM

---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

---DaWebmasta

**coothead** · 09-02-2004, 10:29 PM

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>

p.s. it's a lot safer and better to underscore or hyphen the img.....

John_Cena_Enter_Banner.jpg

coothead

**DaWebmasta** · 09-02-2004, 10:43 PM

---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>

---I Have Another Question How Can I Position
---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

---DaWebmasta

**coothead** · 09-03-2004, 08:11 AM

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

Here is an example...

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>

...this will position the iimage top left corner, 200px to the right of the left hand edge and 200px down from the top edge of the page.

And you said that it is a lot safer to underscore.Why is that safer I never heard about that before

Well compare...

Code:

"http://www.themainevent.vzz.net/john cena enter banner.jpg"

...with...

Code:

"http://www.themainevent.vzz.net/john cena  enter banner.jpg"

...the first link will work, the second will not, the extra space between cena and enter may be difficult to find if your image has not loaded.
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

**DaWebmasta** · 09-03-2004, 09:07 AM

---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

Thread: Image Positioning

Thread Tools

Related

CSS Image Pop Up - Positioning Forum: CSS Forum

Positioning of image Forum: HTML Forum

image positioning Forum: HTML Forum

Image Positioning

Tags for this Thread