Positioning the Image

Jayakumar 1/05/2009 Positioning the Image using css No comments

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

No comments :

Horizontal Submenu with Effects

Jayakumar 1/05/2009 Horizontal Submenu with Effects 4 comments

}

#links {
position: relative;
margin: 0 auto;
left: 0;
width:900px;
height: 125px; 
font: 16px Verdana, sans-serif;

}
#links li{
FLOAT:LEFT;
WIDTH:166PX;
list-style:NONE;
}
#links li a {
display: block;
text-align: center;
font: bold 1em sans-serif;
padding: 5px 10px;
margin: 0 0 1px;
border-width: 0;
text-decoration: none; 
color: #CCC;
background: #444;
border-right: 5px solid #505050;
}
#links li a:hover {
color: #411;
background: #FFF;
border-right: 5px double #999;}

#links li a span{
display: none;
}
#links li a:hover .home{
display: block;
position: absolute;
left: 30px;
width: 125px;
padding: 5px;
margin: 10px 10px 10px 15px;
color: #999; 
background: #000;
font: 10px Verdana, sans-serif;
text-align: center;
}
#links li a:hover .interest{
display: block;
position: absolute;
left: 145px;
width: 145px;
padding: 5px;
margin: 10px 10px 10px 65px;
color: #999; 
background: #000;
font: 10px Verdana, sans-serif;
text-align: center;
}
#links li a:hover .collection{
display: block;
position: absolute;
left:320px;
width: 125px;
padding: 5px;
margin: 10px 10px 10px 65px;
color: #999; 
background: #000;
font: 10px Verdana, sans-serif;
text-align: center;
}
#links li a:hover .techno{
display: block;
position: absolute;
left: 485px;
width: 125px;
padding: 5px;
margin: 10px 10px 10px 65px;
color: #999; 
background: #000;
font: 10px Verdana, sans-serif;
text-align: center;
}
#links li a:hover .meals{
display: block;
position: absolute;
left: 700px;
width: 125px;
padding: 5px;
margin: 10px;
color: #999; 
background: #000;
font: 10px Verdana, sans-serif;
text-align: center;
}
</style> 
</head> 
 
<body> 
<div id="links"> 
<ul><li> 
<a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Home The main page of the site-- a jumping-off point, as it were-- and not actually a picture of our house</a></li>

<li> 
<li><a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Links A collection of things which interest me, and might interest you</a></li> 
 
<li><a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Away A collection of things which interest me, and might interest you</a></li> 
 
<li><a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">techno He's been called "an internationally recognized expert," but then he's also been called a "techno-fascist"</a></li> 
 
<li><a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Meals She cooks fabulous meals, she throws great parties, she helps women deliver their babies-- what can't she do?</a></li>

Result becomes like this...

4 comments :

Vertical SubMenu with Effects

Jayakumar 1/05/2009 Vertical SubMenu with Effects 1 comment

#links {
position: relative;
margin:0 auto;
top: 10px;
left: 0;
width: 166px;
height: 500px; 
font: 16px Verdana, sans-serif; 
z-index: 100;
}
#links a {
display: block;
text-align: center;
font: bold 1em sans-serif;
padding: 5px 10px;
margin: 0 0 1px;
border-width: 0;
text-decoration: none; 
color: #CCC;
background: #444;
border-right: 5px solid #505050;
}
#links a:hover {
color: #411;
background: #FFF;
border-right: 5px double #999;}
#links a span{
display: none;
}
#links a:hover span{
display: block;
position: absolute;
top: 180px;
left: 0;
width: 125px;
padding: 5px;
margin: 10px;
color: #999; 
background: black;
font: 10px Verdana, sans-serif;
text-align: center;
}
</style> 
</head> 
<body> 
<div id="links"> 
<a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Home The main page of the site-- a jumping-off point, as it were-- and not actually a picture of our house</a> 
<a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Links A collection of things which interest me, and might interest you</a> 
<a href="http://cssbags.blogspot.com/">Away A collection of things which interest me, and might interest you</a> 
<a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">techno He's been called "an internationally recognized expert," but then he's also been called a "techno-fascist"</a> 
<a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Meals She cooks fabulous meals, she throws great parties, she helps women deliver their babies-- what can't she do?</a> 
<a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Other Inevitably, there's stuff that doesn't fit in with other stuff, so we stuffed it all into this page of random stuff</a> 
</div>

Result becomes like this...

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

No comments :

Post a Comment

Horizontal Submenu with Effects

Result becomes like this...

4 comments :

Post a Comment

Vertical SubMenu with Effects

Result becomes like this...

1 comment :

Post a Comment

About Author

Blog Archive

Popular Posts

Followers

Translate

JOIN THE TEAM