Showing posts with label Positioning the Image using css. Show all posts

Positioning the Image

Jayakumar 1/05/2009 Positioning the Image using css

HTML Codings

<head> 
<link href="css/css.css" type="text/css" rel="stylesheet" /> 
</head> 
<body> 
<table class="clsProfileTable"><tbody> 
<tr> 
<td class="clsProfileImage"><a href="http://cssbags.blogspot.com"> <img height="90" width="90" alt="img" src="images/suriya.jpg"/> </a> <a title="Click here Goto Profile page" href="http://cssbags.blogspot.com"> </a> </td> 
<td><h3>uyuyguydgsvabihf</h3> 
Diwali 2008 
 
Diwali, information and links. ... Wish your family and friends "Shubh Diwali!" here on diwali.nl and mail to info@diwali.nl. Diwali ... 
<a title="Click here Goto Blog" href="http://cssbags.blogspot.com">Check it out!</a> </td> 
</tr>

</tbody> 
</table> 
<table class="clsNewMembersList"><tbody> 
<tr> 
<td class="clsProfileImage"> <a href="http://cssbags.blogspot.com"> <img height="85" width="85" alt="img" src="images/suriya.jpg"/> </a> <a title="Click here Goto Profile page" href="http://cssbags.blogspot.com"> <a class="clsProfilename" href="#">jai</a></td> 
<td><h3>uyuyguydgsvabihf</h3> 
Diwali 2008 
Diwali, information and links. ... Wish your family and friends "Shubh Diwali!" here on diwali.nl and mail to info@diwali.nl. Diwali ... 
<a title="Click here Goto Blog" href="http://cssbags.blogspot.com">Check it out!</a> </td> 
</tr>

</tbody> 
</table> 
<table class="clsProfile"><tbody> 
<tr> 
<td class="img"> 
<div class="imga"><a href="./blogs_full.php?id=1"> 
<img height="85" width="85" alt="" src="images/suriya.jpg"/></a><a href="./blogs_full.php?id=1"> 
 </a> 
</div> 
</td> 
<td> 
<h3>Diwali 2008</h3> 
Diwali, information and links. ... Wish your family and friends "Shubh Diwali!" here on diwali.nl and mail to info@diwali.nl. Diwali 2008 : Do you organise ... 
<a href="./blogs_full.php?id=1">read more</a> 
</td> 
</tr>

</tbody> 
</table> 
</body>

Image for 90X90 and 85X85 size

Background image for 90X90 size

Background image for 85X85 size

CSS Codings

/* CSS Document */ 
.clsProfileTable, .clsNewMembersList { 
width:98%; 
} 
.clsProfileTable .clsProfileImage span { 
background:transparent url(../images/Profile-img-bg.png) no-repeat scroll 0 0; 
bottom:104px; 
display:block; 
height:104px; 
margin:0 0 -106px -3px; 
position:relative; 
width:104px; 
} 
.clsNewMembersList .clsProfileImage span { 
background:transparent url(../images/profile_h2NewPeople_bg.png) no-repeat scroll 0 0; 
bottom:94px; 
display:block; 
height:90px; 
margin:0 0 -106px; 
position:relative; 
width:90px; 
} 
.clsNewMembersList .clsProfilename p{ 
font:bold 12px Arial, Helvetica, sans-serif; 
color:red; 
text-align:center; 
margin:15px 35px 0 0; 
 
} 
.clsProfile{ 
position:relative; 
table-layout:fixed; 
width:98%; 
} 
.clsProfile td.img { 
width:133px; 
} 
.imga { 
height:117px; 
position:relative; 
width:116px; 
} 
.imga span { 
background:transparent url(../images/profile_h2NewPeople_bg.png) no-repeat scroll 0 0; 
display:block; 
height:117px; 
left:0; 
position:absolute; 
top:0; 
width:116px; 
} 
#sitemap { 
font:normal 16px Arial,sans-serif; 
overflow:hidden; 
} 
#sitemap ul { 
list-style:none; 
margin:0; 
padding:0; 
} 
#sitemap li { 
background-color:#eee; 
margin:0 0 -0.1em; 
min-height:1em; 
padding:.2em .4em; 
position:relative; 
width:9em; 
} 
#sitemap ul ul { 
font-size:90%; 
margin-top:-1.4em; 
} 
#sitemap ul ul li { 
background:#ddd; 
 
 
border-top:0.5em solid #fff !important; 
border-left:0.5em solid #66c; 
left:10.4em; 
} 
#sitemap ul ul ul li { 
background:#ccc; 
border-color:#9c3; 
} 
#sitemap ul ul ul ul li { 
background:#bbb; 
border-color:#c93; 
} 
#sitemap ul ul ul ul ul li { 
background:#999; 
border-color:#c33; 
color:#fff; 
} 
#mainNav.fiveStep li { 
width:182px; 
} 
#mainNav li.current { 
background-color:#C36615; 
background-image:url(../images/1st.gif); 
} 
#mainNav li { 
background-color:#EBEBEB; 
background-image:url(images/navBtn.gif); 
background-position:right top; 
background-repeat:no-repeat; 
float:left; 
height:71px; 
list-style-image:none; 
list-style-position:outside; 
list-style-type:none; 
} 
#mainNav li.lastDone a, #mainNav li.lastDone a:link, #mainNav li.lastDone a:visited, #mainNav li.lastDone a:hover, #mainNav li.lastDone a:active, #mainNav li.current a, #mainNav li.current a:link, #mainNav li.current a:visited, #mainNav li.current a:hover, #mainNav li.current a:active, #mainNav li.done a, #mainNav li.done a:link, #mainNav li.done a:visited, #mainNav li.done a:hover, #mainNav li.done a:active { 
color:#FFFFFF; 
} 
#mainNav li a, #mainNav li a:link, #mainNav li a:visited, #mainNav li a:hover, #mainNav li a:active { 
color:#CCCCCC; 
} 
body * { 
line-height:1.22em; 
}

Result becomes like this.....

Subscribe to: Posts ( Atom )

Positioning the Image

HTML Codings

Image for 90X90 and 85X85 size

Background image for 90X90 size

Background image for 85X85 size

CSS Codings

Result becomes like this.....

About Author

Blog Archive

Popular Posts

Followers

Translate

JOIN THE TEAM