172 users online (0 members and 172 guests)  

> > > > Image Positioning

  Results 1 to 5 of 5

Related

  1. CSS Image Pop Up - Positioning    Forum: CSS Forum
    Replies: 1
  2. Positioning of image    Forum: HTML Forum
    Replies: 3
  3. image positioning    Forum: HTML Forum
    Replies: 1
  1. 09-02-2004, 08:49 PM #1
    DaWebmasta
    DaWebmasta is offline
    DaWebmasta's Avatar
    Senior Member
    Status
    Offline
    Join Date
    Jul 2004
    Posts
    83

    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

    ---DaWebmasta
    Last edited by HTML; 09-07-2004 at 05:56 PM.
    Reply With Quote Reply With Quote
  2. 09-02-2004, 10:29 PM #2
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    733
    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
    Last edited by coothead; 09-02-2004 at 10:32 PM.
    Reply With Quote Reply With Quote
  3. 09-02-2004, 10:43 PM #3
    DaWebmasta
    DaWebmasta is offline
    DaWebmasta's Avatar
    Senior Member
    Status
    Offline
    Join Date
    Jul 2004
    Posts
    83

    Smile

    ---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
    Last edited by DaWebmasta; 09-02-2004 at 11:18 PM.
    Reply With Quote Reply With Quote
  4. 09-03-2004, 08:11 AM #4
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    733
    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
    Reply With Quote Reply With Quote
  5. 09-03-2004, 09:07 AM #5
    DaWebmasta
    DaWebmasta is offline
    DaWebmasta's Avatar
    Senior Member
    Status
    Offline
    Join Date
    Jul 2004
    Posts
    83
    ---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


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread