Forum     

Go Back   Digit Technology Discussion Forum > Software > Programming
Register FAQ Calendar Mark Forums Read

Programming The destination for developers - C, C++, Java, Python and the lot


Closed Thread
 
LinkBack Thread Tools Display Modes
Old 14-02-2008, 10:45 PM   #1 (permalink)
Banned
 
slugger's Avatar
 
Join Date: May 2004
Location: Baudland
Posts: 2,433
Default aligning image with HTML/CSS


I am trying to align a picture right in the middle of the screen using HTML/CSS

Althought I am able to align it in the middle - either vertically or horizonatally but I am not able to do it both at the same time, ie no matter what the moitor size the picture must alway remain at the center of the screen

My code
Verticle Middle
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Verticle Alignment</title>
</head>
<body bgcolor=#000000>
<style> body,html { height:100%;margin:0; } </style>
<table border="0" height="100%">
<tr>
<td valign="middle">
<a href="http://blogspot.com"><img src="center.gif"></a>
</td>
</tr>
</table>
</div>
</body>
</html>
Horizontal Middle
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Horizontal alignment</title>
</head>
<body bgcolor=#000000>
<center>
<table>
<tr>
<td align="center">
<a href="http://blogspot.com"><img src="center.gif"></a>
</td>
</tr>
</table>
</center>
</div>
</body>
</html>
Although i can do it by making the image as a background, I want to make it a link so image as a background not an option
slugger is offline  
Advertisements. Register and be a member of the community to get rid of them.
Advertisement

Old 15-02-2008, 10:42 AM   #2 (permalink)
MMO Addict
 
amitava82's Avatar
 
Join Date: Jul 2004
Location: Bangalore
Posts: 1,474
Default Re: aligning image with HTML/CSS

Try this.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}
#centerimg {
	left: 50%;
	top: 50%;
	position: absolute;
	padding: 0px;
	margin-top: -150px; //half of the image's hight
	margin-left: -150px; //half of the image's width
	}
-->
</style>
</head>

<body>
<div id="centerimg"> <img src="image.jpg" width="300" height="300" /></div>
</body>
</html>
There is a little problem with firefox after you resize browser below some specific size.. Opera, IE works good.
__________________
Steam Profile || Personal Page
Warp drive active. Approaching stargate.
amitava82 is offline  
Old 15-02-2008, 11:03 AM   #3 (permalink)
Google Bot
 
Pathik's Avatar
 
Join Date: Aug 2005
Posts: 9,772
Default Re: aligning image with HTML/CSS

Don't know much css but what are the dimensions of your image (center.gif) ?
__________________
My new blog: www.pathikshah.com
Pathik is offline  
Old 15-02-2008, 12:40 PM   #4 (permalink)
Banned
 
slugger's Avatar
 
Join Date: May 2004
Location: Baudland
Posts: 2,433
Default Re: aligning image with HTML/CSS

@amitava

dint work buddy
heres the screenshot


it has been centered vertically, but to the right horizontally
i removed the image resize attribute sne it was reizing it out of ratio

@pathiks

the gif file that i tried it with has dimensions of 534*159

anyway heres the code [amitava's with the modifications]

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}
#centerimg {
	left: 50%;
	top: 50%;
	position: absolute;
	padding: 0px;
	margin-top: -80px; //half of the image's hight
	margin-left: -267px; //half of the image's width
	}
-->
</style>
</head>

<body>
<div id="centerimg"> <img src="center.gif"></div>
</body>
</html>
slugger is offline  
Old 15-02-2008, 01:52 PM   #5 (permalink)
Google Bot
 
Pathik's Avatar
 
Join Date: Aug 2005
Posts: 9,772
Default Re: aligning image with HTML/CSS

Try this
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}
#centerimg {
	left: 20%;
	top: 50%;
	position: relative;
	padding: 0px;
	vertical-align: middle;
	horizontal-align: middle;
	margin-top: -80px; //half of the image's hight
	margin-left: -267px; //half of the image's width
	
	}
-->
</style>
</head>

<body>
<div id="centerimg"> <img src="image.jpg" width="534" height="159" 

/></div>
</body>
</html>
__________________
My new blog: www.pathikshah.com
Pathik is offline  
Old 15-02-2008, 02:43 PM   #6 (permalink)
Banned
 
slugger's Avatar
 
Join Date: May 2004
Location: Baudland
Posts: 2,433
Default Re: aligning image with HTML/CSS

Thanks Pathik
the code that you gave gave me a result nearest to what i was looking for

although your ouringal code rendered the page like this



so i modified it by changing the value of margin-top to 250px and so the page now looks like this



But thee still is a horizontal scrollbar [something that i wouldl iek to remove]

but when the same page is viewed in IE the page looks like this



although the page looks like this in full screen, the image ceases to remain at the center of the page as soon as i resize it

i would actually like the image to remain at the center of the viewable space in the browser window no mater what the size of the browser window

any suggestion??
slugger is offline  
Old 15-02-2008, 08:00 PM   #7 (permalink)
MMO Addict
 
amitava82's Avatar
 
Join Date: Jul 2004
Location: Bangalore
Posts: 1,474
Default Re: aligning image with HTML/CSS

Ok, this one is working..
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}
#centerimg {
	top: 50%;
	left: 50%;
	position: absolute;
	padding: 0px;
	margin-top: -80px;
	margin-left: -267px;
	height: 160px;
	width: 534px;
	
	}
-->
</style>
</head>

<body>
<div id="centerimg"> <img src="IUP.jpg" width="534" height="160" /></div>
</body>
</html>
just add hight width property to image div
__________________
Steam Profile || Personal Page
Warp drive active. Approaching stargate.
amitava82 is offline  
Old 15-02-2008, 10:28 PM   #8 (permalink)
Banned
 
slugger's Avatar
 
Join Date: May 2004
Location: Baudland
Posts: 2,433
Default Re: aligning image with HTML/CSS

thanks a TONNN buddy!!
Works like a charm
slugger is offline  
Old 19-02-2008, 04:51 PM   #9 (permalink)
ax3
Cool as a CUCUMBAR ! ! !
 
ax3's Avatar
 
Join Date: Dec 2003
Posts: 5,052
Default Re: aligning image with HTML/CSS

any site \ tut where i can learn 2 make a site with css only [without tables] ????
__________________
... W H O T ...
ax3 is offline  
Old 19-02-2008, 05:14 PM   #10 (permalink)
Google Bot
 
Pathik's Avatar
 
Join Date: Aug 2005
Posts: 9,772
Default Re: aligning image with HTML/CSS

Dude google for css tuts.
__________________
My new blog: www.pathikshah.com
Pathik is offline  
Old 20-02-2008, 11:22 PM   #11 (permalink)
हॉर्न ओके प्लीज़
 
victor_rambo's Avatar
 
Join Date: Sep 2007
Posts: 1,493
Default Re: aligning image with HTML/CSS

Quote:
Originally Posted by ax3 View Post
any site \ tut where i can learn 2 make a site with css only [without tables] ????
Just use DIV and position them with CSS.
__________________
विक्टर रॅंबो - चाणकया प्रभावित व्यक्ति

गीक होना माँगता
victor_rambo is offline  
Closed Thread

Bookmarks

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 On
Pingbacks are On
Refbacks are On


Similar Threads
Thread Thread Starter Forum Replies Last Post
HTML to Compiled HTML(.chm) [A]bu QnA (read only) 3 20-04-2007 10:08 PM
Writing image file generated by Image Mixer VCD2 software JBP Software Q&A 3 12-03-2007 05:11 PM
HTML Image Problem boosters QnA (read only) 10 15-02-2007 07:14 PM
Convert any image to a text image of ASCII characters amitava82 Random News 5 11-02-2007 12:46 PM
how to block image copying from html page.. nikku12982 QnA (read only) 6 24-08-2006 04:40 PM

 
Latest Threads
- by Charan
- by Sarath
- by clmlbx

Advertisement




All times are GMT +5.5. The time now is 12:51 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2012, vBulletin Solutions, Inc.

Search Engine Optimization by vBSEO 3.3.2