Tags: css

Sort by: Date / Title /

  1. Easiest cross-browser CSS min-height 
    3 months ago by fandelost
    1. .foo {
    2. min-height:100px;
    3. height: auto !important;
    4. height: 100px;
    5. }
    View source | 0
  2. Como visualizar elementos criticos en CSS 
    4 months ago by jacinmontava
    Reinhold Weber desde su blog, nos ofrece una atractiva, útil e interesante técnica para detectar elementos vacíos en nuestro diseño como DIVs, listas, párrafos, celdas en tablas o etiquetas alt sin información o etiquetas title vacías, etc. Ha utilizado colores para representar áreas donde debemos prestar atención y sólo hay que incluir el siguiente código al final de nuestro CSS
    1. /* Empty Elements */
    2. div:empty, span:empty, li:empty, p:empty, td:empty, th:empty
    3. { padding: 20px; border: 5px dotted yellow !important; }
    4.  
    5. /* Empty Attributes */
    6. *[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"]
    7. { border: 5px solid yellow !important; }
    8.  
    9. /* Deprecated Elements */
    10. applet, basefont, center, dir, font, isindex, menu, s, strike, u
    11. { border: 5px dotted red !important; }
    12.  
    13. /* Deprecated Attributes */
    14.  
    15. *[background], *[bgcolor], *[clear], *[color], *[compact], *[noshade], *[nowrap], *[size], *[start],
    16. *[bottommargin], *[leftmargin], *[rightmargin], *[topmargin], *[marginheight], *[marginwidth], *[alink], *[link], *[text], *[vlink],
    17. *[align], *[valign],
    18. *[hspace], *[vspace],
    19. *[height], *[width],
    20. ul[type], ol[type], li[type]
    21. { border: 5px solid red !important; }
    22.  
    23. /* Proposed Deprecated Elements */
    24. input[type="button"], big, tt
    25. { border: 5px dotted #33FF00 !important; }
    26.  
    27. /* Proposed Deprecated Attributes */
    28. *[border], a[target], table[cellpadding], table[cellspacing], *[name]
    29. { border: 5px solid #33FF00 !important; }
    View source | 0
  3. Scrolling Render for Internet Explorer with CSS
    4 months ago by spirit
    1. html {
    2.   background : url(null) fixed no-repeat;
    3. }
    View source | 0
  4. Cross-browser PRE tag
    4 months ago by spirit
    1. pre {
    2.   white-space: pre-wrap; /* css-3 */
    3.   white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    4.   white-space: -pre-wrap; /* Opera 4-6 */
    5.   white-space: -o-pre-wrap; /* Opera 7 */
    6.   word-wrap: break-word; /* Internet Explorer 5.5+ */
    7. }
    View source | 0
  5. Reset CSS
    4 months ago by spirit
    1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
    2. fieldset,input,p,blockquote,th,td {
    3.   margin:0; padding:0;
    4. }
    5. table {border-collapse:collapse;border-spacing:0;}
    6. fieldset,img {border:0;}
    7. address,caption,cite,code,dfn,em,strong,th,var {
    8.   font-style:normal;font-weight:normal;
    9. }
    10. ol,ul {list-style:none;}
    11. caption,th {text-align:left;}
    12. h1,h2,h3,h4,h5,h6 {font-size:100%;}
    13. q:before,q:after {content:”;}
    View source | 0
  6. Cross-browser opacity in CSS
    4 months ago by spirit
    1. #transdiv {
    2.    filter:alpha(opacity=75);
    3.    -moz-opacity:.75;
    4.    opacity:.75;
    5. }
    View source | 0
  7. Solapamiento Div's y Flash
    5 months ago by jacinmontava
    El parametro wmode puesto como transparent hara que los divs siempre esten por encima del objeto flash.
    1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="200" title="slip">
    2. <param name="movie" value="RUTA_ARCHIVO">
    3. <param name="quality" value="high">
    4. <param name="wmode" value="transparent"> <!-- este es el parametro que hara que los div's esten por encima del objeto flash -->
    5. <embed src="RUTA_ARCHIVO" width="500" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
    6. </object>
    View source | 0
  8. Sponsorised links
    sponsorised links
  9. Clavier virtuel
    5 months ago by benoitbalon
    Copier-coller ce code dans un fichier avec une extension ".html"
    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3.  
    4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    5.         <head>
    6.                 <script language="javascript">
    7.                         function taper(lettre)
    8.                         {
    9.                                 if (lettre == 'ECHAP')
    10.                                 {
    11.                                         document.getElementsByTagName("textarea")[0].value = "";
    12.                                 }
    13.                                 else if (lettre == 'BACKSPACE')
    14.                                 {
    15.                                         var temp = document.getElementsByTagName("textarea")[0].value;
    16.                                         temp = temp.substring(temp.length - 1, 0);
    17.                                         document.getElementsByTagName("textarea")[0].value = temp;
    18.                                 }
    19.                                 else
    20.                                 {
    21.                                         var temp = document.getElementsByTagName("textarea")[0].value;
    22.                                         document.getElementsByTagName("textarea")[0].value = temp + lettre;
    23.                                 }
    24.                         }
    25.                        
    26.                         function clic_maj(showmaj)
    27.                         {
    28.                                 if (showmaj)
    29.                                 {
    30.                                         var anchors = document.getElementsByTagName("span");
    31.                                         for (var i=0; i<anchors.length; i++) {
    32.                                                 var anchor = anchors[i];
    33.                                                 if (anchor.getAttribute("class") == "minus") anchor.style.display = "none";
    34.                                                 if (anchor.getAttribute("class") == "majus") anchor.style.display = "inline";
    35.                                                 if (anchor.getAttribute("class") == "altgr") anchor.style.display = "none";
    36.                                         }
    37.                                         document.getElementById("majg").setAttribute("onclick", "javascript: clic_maj(false);");
    38.                                         document.getElementById("majd").setAttribute("onclick", "javascript: clic_maj(false);");
    39.                                         document.getElementById("verr").setAttribute("onclick", "javascript: clic_verr(true);");
    40.                                 }
    41.                                 else
    42.                                 {
    43.                                         var anchors = document.getElementsByTagName("span");
    44.                                         for (var i=0; i<anchors.length; i++) {
    45.                                                 var anchor = anchors[i];
    46.                                                 if (anchor.getAttribute("class") == "minus") anchor.style.display = "inline";
    47.                                                 if (anchor.getAttribute("class") == "majus") anchor.style.display = "none";
    48.                                                 if (anchor.getAttribute("class") == "altgr") anchor.style.display = "none";
    49.                                         }
    50.                                         document.getElementById("majg").setAttribute("onclick", "javascript: clic_maj(true);");
    51.                                         document.getElementById("majd").setAttribute("onclick", "javascript: clic_maj(true);");
    52.                                 }
    53.                         }
    54.                        
    55.                         function clic_altgr()
    56.                         {
    57.                                 var anchors = document.getElementsByTagName("span");
    58.                                 for (var i=0; i<anchors.length; i++) {
    59.                                         var anchor = anchors[i];
    60.                                         if (anchor.getAttribute("class") == "minus") anchor.style.display = "none";
    61.                                         if (anchor.getAttribute("class") == "majus") anchor.style.display = "none";
    62.                                         if (anchor.getAttribute("class") == "altgr") anchor.style.display = "inline";
    63.                                 }
    64.                         }
    65.                        
    66.                         function declic_altgr()
    67.                         {
    68.                                 var anchors = document.getElementsByTagName("span");
    69.                                 for (var i=0; i<anchors.length; i++) {
    70.                                         var anchor = anchors[i];
    71.                                         if (anchor.getAttribute("class") == "minus") anchor.style.display = "inline";
    72.                                         if (anchor.getAttribute("class") == "majus") anchor.style.display = "none";
    73.                                         if (anchor.getAttribute("class") == "altgr") anchor.style.display = "none";
    74.                                 }
    75.                         }
    76.                        
    77.                         function clic_verr(verrouiller)
    78.                         {
    79.                                 if (verrouiller)
    80.                                 {
    81.                                         var anchors = document.getElementsByTagName("span");
    82.                                         for (var i=0; i<anchors.length; i++) {
    83.                                                 var anchor = anchors[i];
    84.                                                 if (anchor.getAttribute("class") == "minus") anchor.style.display = "none";
    85.                                                 if (anchor.getAttribute("class") == "majus") anchor.style.display = "inline";
    86.                                                 if (anchor.getAttribute("class") == "altgr") anchor.style.display = "none";
    87.                                         }
    88.                                         document.getElementById("verr").setAttribute("onclick", "javascript: clic_verr(false);");
    89.                                         document.getElementById("majg").setAttribute("onclick", "javascript: clic_maj(true);");
    90.                                         document.getElementById("majd").setAttribute("onclick", "javascript: clic_maj(true);");
    91.                                 }
    92.                                 else
    93.                                 {
    94.                                         var anchors = document.getElementsByTagName("span");
    95.                                         for (var i=0; i<anchors.length; i++) {
    96.                                                 var anchor = anchors[i];
    97.                                                 if (anchor.getAttribute("class") == "minus") anchor.style.display = "inline";
    98.                                                 if (anchor.getAttribute("class") == "majus") anchor.style.display = "none";
    99.                                                 if (anchor.getAttribute("class") == "altgr") anchor.style.display = "none";
    100.                                         }
    101.                                         document.getElementById("verr").setAttribute("onclick", "javascript: clic_verr(true);");
    102.                                 }
    103.                         }
    104.                        
    105.                         function clic_majus()
    106.                         {
    107.                                 if ( document.getElementById("verr").getAttribute("onclick") == "javascript: clic_verr(true);" )
    108.                                 {
    109.                                         clic_maj(false);
    110.                                 }
    111.                         }
    112.                 </script>
    113.                 <style type="text/css">
    114.                 span.bouton
    115.                 {
    116.                         background-color: #D4D0C8;
    117.                         border-left: 1px solid white;
    118.                         border-top: 1px solid white;
    119.                         border-right: 2px solid grey;
    120.                         border-bottom: 2px solid grey;
    121.                         padding-left: 5px;
    122.                         padding-right: 5px;
    123.                         padding-top: 3px;
    124.                         padding-bottom: 3px;
    125.                         cursor: default;
    126.                         font-family: sans-serif;
    127.                         font-size: smaller;
    128.                 }
    129.                
    130.                 span.bouton:active
    131.                 {
    132.                         border-left: 2px solid grey;
    133.                         border-top: 2px solid grey;
    134.                         border-right: 1px solid white;
    135.                         border-bottom: 1px solid white;
    136.                         padding-left: 5px;
    137.                         padding-right: 5px;
    138.                         padding-top: 3px;
    139.                         padding-bottom: 3px;
    140.                 }
    141.  
    142.                 span.touche, span.minus, span.majus, span.altgr
    143.                 {
    144.                         background-color: #E9E8E6;
    145.                         border-left: 5px solid silver;
    146.                         border-top: 2px solid silver;
    147.                         border-right: 5px solid grey;
    148.                         border-bottom: 7px solid grey;
    149.                         padding-left: 10px;
    150.                         padding-right: 10px;
    151.                         padding-top: 1px;
    152.                         padding-bottom: 3px;
    153.                         cursor: pointer;
    154.                         font-weight: bold;
    155.                         font-family: sans-serif;
    156.                 }
    157.  
    158.                 span.touchetop
    159.                 {
    160.                         background-color: #E9E8E6;
    161.                         border-left: 5px solid silver;
    162.                         border-top: 2px solid silver;
    163.                         border-right: 5px solid grey;
    164.                         border-bottom: 7px solid grey;
    165.                         padding-left: 10px;
    166.                         padding-right: 10px;
    167.                         padding-top: 1px;
    168.                         padding-bottom: 3px;
    169.                         cursor: pointer;
    170.                         font-weight: bold;
    171.                         font-family: sans-serif;
    172.                         font-size: smaller;
    173.                 }
    174.  
    175.                 span.touche:active, span.minus:active, span.majus:active, span.altgr:active
    176.                 {
    177.                         border-left: 4px solid grey;
    178.                         border-top: 1px solid grey;
    179.                         border-right: 4px solid silver;
    180.                         border-bottom: 6px solid silver;
    181.                         margin-left: 2px;
    182.                         margin-right: 2px;
    183.                         margin-bottom: 3px;
    184.                         padding-left: 9px;
    185.                         padding-right: 9px;
    186.                         padding-bottom: 2px;
    187.                 }
    188.                
    189.                 span.majus
    190.                 {
    191.                         display: none;
    192.                 }
    193.                
    194.                 span.altgr
    195.                 {
    196.                         display: none;
    197.                 }
    198.  
    199.                 span.touchetop:active
    200.                 {
    201.                         border-left: 4px solid grey;
    202.                         border-top: 1px solid grey;
    203.                         border-right: 4px solid silver;
    204.                         border-bottom: 6px solid silver;
    205.                         margin-left: 2px;
    206.                         margin-right: 2px;
    207.                         margin-bottom: 3px;
    208.                         padding-left: 9px;
    209.                         padding-right: 9px;
    210.                         padding-bottom: 2px;
    211.                 }
    212.                
    213.                 /*div
    214.                 {
    215.                         height: 250px;
    216.                 }*/
    217.                 </style>
    218.         </head>
    219.         <body>
    220.                 <div><textarea cols="80" rows="25" name="saisie"></textarea></div>
    221.                 <div>
    222.                         <p>
    223.                         <span class="touchetop" onmousedown="javascript: taper('ECHAP');">Esc</span>&#160;<span class="touchetop">F1 </span><span class="touchetop">F2 </span><span class="touchetop">F3 </span><span class="touchetop">F4 </span>&#160;<span class="touchetop">F5 </span><span class="touchetop">F6 </span><span class="touchetop">F7 </span><span class="touchetop">F8 </span>&#160;<span class="touchetop">F9 </span><span class="touchetop">F10</span><span class="touchetop">F11</span><span class="touchetop">F12</span><br/><br/>
    224.                         </P>
    225.                         <P>
    226.                         <span class="minus" onmousedown="javascript: taper('&#178;');">&#178;</span><span class="majus" onclick="javascript: clic_majus();">&nbsp;</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    227.                         <span class="minus" onmousedown="javascript: taper('&amp;');">&amp;</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('1');">1</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    228.                         <span class="minus" onmousedown="javascript: taper('&#233;');">&#233;</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('2');">2</span><span class="altgr" onclick="javascript: declic_altgr();" onmousedown="javascript: taper('&#152;');">&#152;</span>
    229.                         <span class="minus" onmousedown="javascript: taper('&quot;');">&quot;</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('3');">3</span><span class="altgr" onclick="javascript: declic_altgr();" onmousedown="javascript: taper('#');">#</span>
    230.                         <span class="minus" onmousedown="javascript: taper('\'');">'</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('4');">4</span><span class="altgr" onclick="javascript: declic_altgr();" onmousedown="javascript: taper('{');">{</span>
    231.                         <span class="minus" onmousedown="javascript: taper('(');">(</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('5');">5</span><span class="altgr" onclick="javascript: declic_altgr();" onmousedown="javascript: taper('[');">[</span>
    232.                         <span class="minus" onmousedown="javascript: taper('-');">-</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('6');">6</span><span class="altgr" onclick="javascript: declic_altgr();" onmousedown="javascript: taper('|');">|</span>
    233.                         <span class="minus" onmousedown="javascript: taper('&#232;');">&#232;</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('7');">7</span><span class="altgr" onclick="javascript: declic_altgr();" onmousedown="javascript: taper('`');">`</span>
    234.                         <span class="minus" onmousedown="javascript: taper('_');">_</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('8');">8</span><span class="altgr" onclick="javascript: declic_altgr();" onmousedown="javascript: taper('\\');">\</span>
    235.                         <span class="minus" onmousedown="javascript: taper('&#231;');">&#231;</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('9');">9</span><span class="altgr" onclick="javascript: declic_altgr();" onmousedown="javascript: taper('&#136;');">&#136;</span>
    236.                         <span class="minus" onmousedown="javascript: taper('&#224;');">&#224;</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('0');">0</span><span class="altgr" onclick="javascript: declic_altgr();" onmousedown="javascript: taper('@');">@</span>
    237.                         <span class="minus" onmousedown="javascript: taper(')');">)</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('&#176;');">&#176;</span><span class="altgr" onclick="javascript: declic_altgr();" onmousedown="javascript: taper(']');">]</span>
    238.                         <span class="minus" onmousedown="javascript: taper('=');">=</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('+');">+</span><span class="altgr" onclick="javascript: declic_altgr();" onmousedown="javascript: taper('}');">}</span>
    239.                         <span class="touche" onmousedown="javascript: taper('BACKSPACE');">Backspace</span>
    240.                         </P>
    241.                         <P>
    242.                         <span class="touche" onmousedown="javascript: taper('\t');">Tab</span>
    243.                         <span class="minus" onmousedown="javascript: taper('a');">a</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('A');">A</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    244.                         <span class="minus" onmousedown="javascript: taper('z');">z</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('Z');">Z</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    245.                         <span class="minus" onmousedown="javascript: taper('e');">e</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('E');">E</span><span class="altgr" onclick="javascript: declic_altgr();" onmousedown="javascript: taper('&euro;');">&euro;</span>
    246.                         <span class="minus" onmousedown="javascript: taper('r');">r</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('R');">R</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    247.                         <span class="minus" onmousedown="javascript: taper('t');">t</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('T');">T</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    248.                         <span class="minus" onmousedown="javascript: taper('y');">y</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('Y');">Y</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    249.                         <span class="minus" onmousedown="javascript: taper('u');">u</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('U');">U</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    250.                         <span class="minus" onmousedown="javascript: taper('i');">i</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('I');">I</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    251.                         <span class="minus" onmousedown="javascript: taper('o');">o</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('O');">O</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    252.                         <span class="minus" onmousedown="javascript: taper('p');">p</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('P');">P</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    253.                         <span class="minus" onmousedown="javascript: taper('&#136;');">&#136;</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('&#168;');">&#168;</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    254.                         <span class="minus" onmousedown="javascript: taper('$');">$</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('&#163;');">&#163;</span><span class="altgr" onclick="javascript: declic_altgr();">&curren;</span>
    255.                         <span class="touche" onmousedown="javascript: taper('\n');">Entr&eacute;e</span>
    256.                         </P>
    257.                         <P>
    258.                         <span class="touche" id="verr" onclick="javascript: clic_verr(true);">Verr</span>
    259.                         <span class="minus" onmousedown="javascript: taper('q');">q</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('Q');">Q</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    260.                         <span class="minus" onmousedown="javascript: taper('s');">s</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('S');">S</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    261.                         <span class="minus" onmousedown="javascript: taper('d');">d</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('D');">D</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    262.                         <span class="minus" onmousedown="javascript: taper('f');">f</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('F');">F</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    263.                         <span class="minus" onmousedown="javascript: taper('g');">g</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('G');">G</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    264.                         <span class="minus" onmousedown="javascript: taper('h');">h</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('H');">H</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    265.                         <span class="minus" onmousedown="javascript: taper('j');">j</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('J');">J</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    266.                         <span class="minus" onmousedown="javascript: taper('k');">k</span><span class="majus" onclick="javascript: clic_majus();" onmousedown="javascript: taper('K');">K</span><span class="altgr" onclick="javascript: declic_altgr();">&nbsp;</span>
    267.                         <span class="minus" onmous