CSSBags: Multiple Buttons in a single image Verticaly and Horizontally

Jayakumar 1/16/2009 No comments

CSSBags: Multiple Buttons in a single image Verticaly and Horizontally

No comments :

Post a Comment

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 :

Post a Comment

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 :

Post a Comment

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

1 comment :

Post a Comment

Subscribe to: Posts ( Atom )

No comments :