Single Image background

March 30th, 2011 Posted in CSS Tutorials, HTML Techniques, Web Tutorials
No Comments

/* ################################### */
/*    Menu Start  */
/* ################################### */
.menu-container{
width:580px;
margin:7px auto 15px auto;
}

a.menu-nor{
text-decoration:none;
color:#000000;
font:16px “Myriad Pro”, Verdana, Tahoma, Arial, Helvetica, sans-serif;
outline:0;
margin-right:30px;
}
a.menu-nor span{
background:url(images/menu-nor.png) no-repeat 100% 0;
text-decoration:none;
font:16px “Myriad Pro”, Verdana, Tahoma, Arial, Helvetica, sans-serif;
color:#000000;
padding:10px 0 10px 0;
height:18px;

}
a.menu-nor span span{
background-position: 0 -100%;
padding:10px 20px 10px 20px;
height:18px;
font:16px “Myriad Pro”, Verdana, Tahoma, Arial, Helvetica, sans-serif;
margin-left:-10px;
}
a.menu-nor:hover{
color:#ffffff !important;
font:16px “Myriad Pro”, Verdana, Tahoma, Arial, Helvetica, sans-serif;
}
a.menu-nor span:hover{
background:url(images/menu-hil.png) no-repeat 100% 0;
padding:10px 0 10px 0;
height:18px;
color:#ffffff !important;
font:16px “Myriad Pro”, Verdana, Tahoma, Arial, Helvetica, sans-serif;
}
a.menu-nor span span:hover{
background-position: 0 -100%;
padding:10px 20px 10px 20px;
height:18px;
color:#ffffff !important;
font:16px “Myriad Pro”, Verdana, Tahoma, Arial, Helvetica, sans-serif;
margin-left:-10px;
}

Read More

Css padding techniques

March 22nd, 2011 Posted in CSS Tutorials, HTML Techniques, Web Tutorials
No Comments

Here i mention some of css techniques.

1.  /*padding: top right+left bottom;*/

padding:20px 22px 18px;

2.  /*padding: top right bottom left;*/

padding:20px  10px 18px 22px;

3.  /*padding: top+bottom left+right;*/

padding:20px  22px;
4.  /*     margin: top left+right bottom !important;*/

margin: 0 6px 20px !important;

Read More

Text Shadow

March 17th, 2011 Posted in CSS Tutorials, General, HTML Techniques, Web Tutorials
No Comments

This is “text-shadow” proberty. Below I mention the some of example for text shdow proberty.

Ex:
color: #000;
background: #fff;
text-shadow: 2px 0px 10px #000;

Below i mention text-shadow property field explantion.

text-shadow: x-offset y-offset Blur color;

Read More

Newsletter Image Break Solved

February 22nd, 2011 Posted in HTML Techniques
No Comments

When you get Image Break in Newsletter Or Gmail.

Just You can put Image inside small “Style Code”. Below I mention that source.

Source :

<img src=”images/flower.jpg”  alt=”” width=”100″  height=”25″  style=”display:block;” />;
that’s all. Your design view is very clear.

Read More

Map Tricks

September 7th, 2010 Posted in HTML Techniques, Web Tutorials
No Comments

coords=”x,y,w,h”

coords=”left,top,w,h”

Ex:
coords=”10,50,100,250″

Read More

Show Hide Javascript

August 25th, 2010 Posted in HTML Techniques, Javascript
No Comments

//here you place the ids of every element you want.
var ids=new Array(‘a1′,’a2′,’a3′,’thiscanbeanything’);

function switchid(id){
hideallids();
showdiv(id);
}

function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}

function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = ‘none’;
}
else {
if (document.layers) { // Netscape 4
document.id.display = ‘none’;
}
else { // IE 4
document.all.id.style.display = ‘none’;
}
}
}

function showdiv(id) {
//safe function to show an element with a specified id

if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = ‘block’;
}
else {
if (document.layers) { // Netscape 4
document.id.display = ‘block’;
}
else { // IE 4
document.all.id.style.display = ‘block’;
}
}
}

<a href=”javascript:switchid(‘a2’);”>show a2</a>

Ref : http://support.internetconnection.net/CODE_LIBRARY/Javascript_Show_Hide.shtml
——————————————————————————————————

1. Next Option :
—————————————-
function showlayer(layer){
var myLayer = document.getElementById(layer).style.display;
if(myLayer==”none”){
document.getElementById(layer).style.display=”block”;
} else {
document.getElementById(layer).style.display=”none”;
}
}

<a onclick=”javascript:showlayer(‘myName’)” href=”#”>Hide / Show Layer </a>
Ref :http://woork.blogspot.com/2007/10/show-hide-layer-using-simple-javascript.html

<hr />

Option 2 :
——————————————-
http://www.cssnewbie.com/showhide-content-css-javascript/

<hr />
Option 3:
———————————————-

function toggle_visibility(id) {

var e = document.getElementById(id);

if(e.style.display == ‘block’)

e.style.display = ‘none’;

else

e.style.display = ‘block’;

}

<a onclick=”toggle_visibility(‘foo’);” href=”#”>Click here to toggle visibility of element #foo</a>
<div id=”foo”>This is foo</div>
<hr />

Read More

CSS Conditional comments

August 13th, 2010 Posted in HTML Techniques
No Comments

<!–[if IE 6]>
Special instructions for IE 6 here
<![endif]–>

<!–[if IE]>
According to the conditional comment this is Internet Explorer

<![endif]–>
<!–[if IE 5]>
According to the conditional comment this is Internet Explorer 5

<![endif]–>
<!–[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0

<![endif]–>
<!–[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5

<![endif]–>
<!–[if IE 6]>
According to the conditional comment this is Internet Explorer 6

<![endif]–>
<!–[if IE 7]>
According to the conditional comment this is Internet Explorer 7

<![endif]–>
<!–[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up

<![endif]–>
<!–[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6

<![endif]–>
<!–[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5

<![endif]–>
<!–[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6

<![endif]–>

<![if !IE]>
<link rel=”stylesheet” type=”text/css” href=”css/not-ie.css” media=”screen”/>
<![endif]>

<!–[if lt IE 7]><style type=”text/css”>a.menu{height:0;}</style><![endif]–>

#1:
<!--[if IE]>
You are using IE (IE5+ and above).
<![endif]-->

#2:
<![if !IE]>
You are NOT using IE.
<![endif]>



Operators supported by CC



Operator syntax
Description




!
The "not" operator.




lt
The "less than" operator.




lte
The "less than or equal to" operator.




gt
The "greater than" operator.




gte
The "greater than or equal to"              operator






With the above operators more generic detection of        browsers such as IE6+ (which encompasses IE6, IE6.1, IE7, and so on)        becomes possible. For example:




<!--[if gte IE 6]>
You are using IE 6+
<![endif]-->
Read More
Newer Entries

© 2020 Spirituality