Tags: css

Sort by: Date / Title /

  1. 7 years ago by jacinmontava
    1. if ($("div#capa_1").height() > $("div#capa_2").height()) {
    2.             $("div#capa_2").height($("div#capa_1").height())
    3. }else{
    4.             $("div#capa_1").height($("div#capa_2").height())
    5.  }
    Paste this in your website: <script type="text/javascript" src="http://www.posteet.com/embed/2093"></script>
  2. 7 years ago by spirit
    1. #someElement { 
    2.   background: red; /* modern browsers */ 
    3.   *background: green; /* IE 7 and below */ 
    4.   _background: yellow; /* IE6 exclusively */ 
    5. }
    Paste this in your website: <script type="text/javascript" src="http://www.posteet.com/embed/2037"></script>
  3. 8 years ago by jacinmontava
    1. <STYLE>
    2.  H1.SaltoDePagina
    3.  {
    4.      PAGE-BREAK-AFTER: always
    5.  }
    6. </STYLE>
    7.  
    8. <!--En el sitio en que quieras forzar el salto de página deberás poner el tag h1 aplicando el estilo SaltoDePagina definido anteriormente-->
    9.  
    10. <H1 class=SaltoDePagina> </H1>
    Paste this in your website: <script type="text/javascript" src="http://www.posteet.com/embed/1802"></script>
  4. sponsorised links
  5. 8 years ago by spirit
    1. En HTML:
    2. <img src="..." align="absmiddle" /> Texte
    3.  
    4. En CSS :
    5. <img src="..." style="vertical-align:middle" /> Texte
    Paste this in your website: <script type="text/javascript" src="http://www.posteet.com/embed/1707"></script>
  6. 8 years ago by spirit
    Useful for displaying code snippets for example
    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. }
    Paste this in your website: <script type="text/javascript" src="http://www.posteet.com/embed/1642"></script>
  7. 8 years ago by spirit
    Aucune erreur DOM n'est générée avec cette méthode
    1. // styleFloat, IE
    2. // cssFloat , Safari ou Firefox
    3. // styleFloat and cssFloat,  Opera
    4.  
    5. //assignation 
    6. var el = document.getElementById('element_id');
    7. el.style.styleFloat = 'left';
    8. el.style.cssFloat = 'left';
    9. //récupération
    10. var elFloat = (typeof el.style.cssFloat === 'string') ? el.style.cssFloat : el.style.styleFloat;
    Paste this in your website: <script type="text/javascript" src="http://www.posteet.com/embed/1420"></script>
  8. 8 years ago by sx
    1. //work in IE7 IE8b2 FF2 FF3 SF3.1 OP
    2.  
    3. a[href^='http://'] {
    4.     padding-right: 15px;
    5.     background: url(extern.gif) right no-repeat;
    6. }
    7. a[href^='http://www.OWNDOMAIN.com'],
    8. a[href^='http://OWNDOMAIN.com'] {
    9.     padding-right: 0;
    10.     background: none;
    11. }
    12. a[href^='mailto:'] {
    13.     padding-right: 15px;
    14.     background: url(mail.gif) right no-repeat;
    15. }
    16. a[href^='mailto:USER'] {
    17.     padding-right: 15px;
    18.     background: url(USERPIC.gif) right no-repeat;
    19. }
    Paste this in your website: <script type="text/javascript" src="http://www.posteet.com/embed/1404"></script>
  9. 8 years ago by stephane
    This code using html & css is very useful if you want to display this kind of menu! go to the adress of this source to see the demo or copy paste it in a htm file...
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" lang="fr">                               
    3.   <head>                                                         
    4.     <meta content="text/html; charset=UTF-8" http-equiv="content-type" />                                                           
    5.     <title>:: Demo dropdown nav menu without js ::</title>
    6.     <style type="text/css">
    7.  
    8.  
    9. /* ================================================================
    10. This copyright notice must be untouched at all times.
    11.  
    12. The original version of this stylesheet and the associated (x)html
    13. is available at http://www.cssplay.co.uk/menus/final_drop.html
    14. Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
    15. This stylesheet and the associated (x)html may be modified in any
    16. way to fit your requirements.
    17. =================================================================== */
    18.  
    19. .menu {width:745px; height:32px; position:relative; z-index:100;border-right:1px solid #000; font-family:arial, sans-serif;}
    20. /* hack to correct IE5.5 faulty box model */
    21. * html .menu {width:746px; w\idth:745px;}
    22. /* remove all the bullets, borders and padding from the default list styling */
    23. .menu ul {padding:0;margin:0;list-style-type:none;}
    24. .menu ul ul {width:149px;}
    25. /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    26. .menu li {float:left;width:149px;position:relative;}
    27. /* style the links for the top level */
    28. .menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:#fff; width:138px; height:30px; border:1px solid #000; border-width:1px 0 1px 1px; background:#09c; padding-left:10px; line-height:29px; font-weight:bold;}
    29. /* a hack so that IE5.5 faulty box model is corrected */
    30. * html .menu a, * html .menu a:visited {width:149px; w\idth:138px;}
    31.  
    32. /* style the second level background */
    33. .menu ul ul a.drop, .menu ul ul a.drop:visited {background:#d4d8bd url(http://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif) no-repeat 130px center;}
    34. /* style the second level hover */
    35. .menu ul ul a.drop:hover{background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}
    36. .menu ul ul :hover > a.drop {background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}
    37. /* style the third level background */
    38. .menu ul ul ul a, .menu ul ul ul a:visited {background:#e2dfa8;}
    39. /* style the third level hover */
    40. .menu ul ul ul a:hover {background:#b2ab9b;}
    41.  
    42.  
    43. /* hide the sub levels and give them a positon absolute so that they take up no room */
    44. .menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:149px;border-top:1px solid #000;}
    45. /* another hack for IE5.5 */
    46. * html .menu ul ul {top:30px;t\op:31px;}
    47.  
    48. /* position the third level flyout menu */
    49. .menu ul ul ul{left:149px; top:-1px; width:149px;}
    50.  
    51. /* position the third level flyout menu for a left flyout */
    52. .menu ul ul ul.left {left:-149px;}
    53.  
    54. /* style the table so that it takes no ppart in the layout - required for IE to work */
    55. .menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}
    56.  
    57. /* style the second level links */
    58. .menu ul ul a, .menu ul ul a:visited {background:#d4d8bd; color:#000; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;}
    59. /* yet another hack for IE5.5 */
    60. * html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}
    61.  
    62. /* style the top level hover */
    63. .menu a:hover, .menu ul ul a:hover{color:#000; background:#b7d186;}
    64. .menu :hover > a, .menu ul ul :hover > a {color:#000; background:#b7d186;}
    65.  
    66. /* make the second level visible when hover on first level list OR link */
    67. .menu ul li:hover ul,
    68. .menu ul a:hover ul{visibility:visible; }
    69. /* keep the third level hidden when you hover on first level list OR link */
    70. .menu ul :hover ul ul{visibility:hidden;}
    71. /* make the third level visible when you hover over second level list OR link */
    72. .menu ul :hover ul :hover ul{ visibility:visible;}
    73.  
    74. </style>
    75.  
    76.   </head>
    77. <div class="menu">
    78.  
    79. <li><a href="../menu/index.html">DEMOS<!--[if IE 7]>
    80. <!-->
    81. </a><!--<![endif]-->
    82. <!--[if lte IE 6]>
    83. <table><tr><td><![endif]-->
    84.  
    85.         <ul>
    86.         <li><a href="../menu/zero_dollars.html">zero dollars advertising page</a></li>
    87.         <li><a href="../menu/embed.html">wrapping text around images</a></li>
    88.         <li><a href="../menu/form.html">styled form</a></li>
    89.         <li><a href="../menu/nodots.html">active focus</a></li>
    90.  
    91.         <li><a class="drop" href="../menu/hover_click.html">hover/click with no borders<!--[if IE 7]>
    92. <!-->
    93. </a><!--<![endif]-->
    94.  
    95. <!--[if lte IE 6]>
    96. <table><tr><td><![endif]-->
    97.                 <ul>
    98.                         <li><a href="../menu/form.html">styled form</a></li>
    99.                         <li><a href="../menu/nodots.html">removing active/focus borders</a></li>
    100.                         <li><a href="../menu/hover_click.html">hover/click</a></li>
    101.                 </ul>
    102.  
    103. <!--[if lte IE 6]>
    104. </td></tr></table></a><![endif]-->
    105.         </li>
    106.  
    107.         <li><a class="drop" href="../menu/shadow_boxing.html">shadow boxing<!--[if IE 7]>
    108. <!-->
    109. </a><!--<![endif]-->
    110. <!--[if lte IE 6]>
    111. <table><tr><td><![endif]-->
    112.                 <ul>
    113.                         <li><a href="../menu/form.html">styled form</a></li>
    114.                         <li><a href="../menu/nodots.html">removing active/focus borders</a></li>
    115.                         <li><a href="../menu/hover_click.html">hover/click</a></li>
    116.  
    117.                 </ul>
    118.  
    119. <!--[if lte IE 6]>
    120. </td></tr></table></a><![endif]-->
    121.         </li>
    122.         <li><a class="drop" href="../menu/old_master.html">image map for detailed information<!--[if IE 7]>
    123. <!-->
    124. </a><!--<![endif]-->
    125. <!--[if lte IE 6]>
    126. <table><tr><td><![endif]-->
    127.                 <ul>
    128.                         <li><a href="../menu/form.html">styled form</a></li>
    129.                         <li><a href="../menu/nodots.html">removing active/focus borders</a></li>
    130.                         <li><a href="../menu/hover_click.html">hover/click</a></li>
    131.  
    132.                 </ul>
    133. <!--[if lte IE 6]>
    134. </td></tr></table></a><![endif]-->
    135.         </li>
    136.         <li><a href="../menu/bodies.html">fun with background images</a></li>
    137.         <li><a href="../menu/fade_scroll.html">fade scrolling</a></li>
    138.         <li><a href="../menu/em_images.html">em image sizes compared</a></li>
    139.  
    140.         </ul>
    141.  
    142. <!--[if lte IE 6]>
    143. </td></tr></table></a><![endif]-->
    144. </li>
    145. <li><a href="../boxes/index.html">BOXES<!--[if IE 7]>
    146. <!-->
    147. </a><!--<![endif]-->
    148. <!--[if lte IE 6]>
    149. <table><tr><td><![endif]-->
    150.         <ul>
    151.         <li><a href="spies.html">a coded list of spies</a></li>
    152.         <li><a href="vertical.html">vertical menu</a></li>
    153.         <li><a href="expand.html">enlarging unordered list</a></li>
    154.         <li><a href="enlarge.html">link images</a></li>
    155.  
    156.         <li><a href="cross.html">non-rectangular</a></li>
    157.         <li><a href="jigsaw.html">jigsaw links</a></li>
    158.         <li><a href="circles.html">circular links</a></li>
    159.         </ul>
    160. <!--[if lte IE 6]>
    161. </td></tr></table></a><![endif]-->
    162. </li>
    163. <li><a href="../mozilla/index.html">MOZILLA<!--[if IE 7]>
    164. <!-->
    165. </a><!--<![endif]-->
    166. <!--[if lte IE 6]>
    167. <table><tr><td><![endif]-->
    168.         <ul>
    169.  
    170.         <li><a href="../mozilla/dropdown.html">drop down menu</a></li>
    171.         <li><a href="../mozilla/cascade.html">cascading menu</a></li>
    172.         <li><a href="../mozilla/content.html">content:</a></li>
    173.         <li><a href="../mozilla/moxbox.html">mozzie box</a></li>
    174.         <li><a href="../mozilla/rainbow.html">I can build a rainbow with transparent borders</a></li>
    175.         <li><a href="../mozilla/snooker.html">a snooker cue using border art</a></li>
    176.  
    177.         <li><a href="../mozilla/target.html">target practise</a></li>
    178.         <li><a href="../mozilla/splittext.html">two tone headings</a></li>
    179.         <li><a href="../mozilla/shadow_text.html">shadow text</a></li>
    180.         </ul>
    181. <!--[if lte IE 6]>
    182. </td></tr></table></a><![endif]-->
    183. </li>
    184. <li><a href="../ie/index.html">EXPLORER</a></li>
    185.  
    186. <li><a href="../opacity/index.html">OPACITY<!--[if IE 7]>
    187. <!-->
    188. </a><!--<![endif]-->
    189.  
    190. <!--[if lte IE 6]>
    191. <table><tr><td><![endif]-->
    192.         <ul>
    193.         <li><a href="../opacity/colours.html">a colour wheel using opaque colours</a></li>
    194.         <li><a href="../opacity/picturemenu.html">a menu using opacity</a></li>
    195.         <li><a href="../opacity/png.html">partial opacity</a></li>
    196.         <li><a href="../opacity/png2.html">partial opacity II</a></li>
    197.  
    198.         <li><a class="drop" href="../menu/hover_click.html">HOVER/CLICK<!--[if IE 7]>
    199. <!-->
    200. </a><!--<![endif]-->
    201.  
    202. <!--[if lte IE 6]>
    203. <table><tr><td><![endif]-->
    204.                 <ul class="left">
    205.                         <li><a href="../menu/form.html">styled form</a></li>
    206.                         <li><a href="../menu/nodots.html">removing active/focus borders</a></li>
    207.                         <li><a href="../menu/hover_click.html">hover/click</a></li>
    208.                 </ul>
    209.  
    210. <!--[if lte IE 6]>
    211. </td></tr></table></a><![endif]-->
    212.         </li>
    213.  
    214.         </ul>
    215. <!--[if lte IE 6]>
    216. </td></tr></table></a><![endif]-->
    217. </li>
    218. </ul>
    219.  
    220. </div>
    221.  
    222.  
    223. </body>
    224. </html>
    Paste this in your website: <script type="text/javascript" src="http://www.posteet.com/embed/1402"></script>
  10. 8 years ago by spirit
    Creates a grey overlay in background and a modal window in foreground
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    2.         <head>
    3.                 <title>LIGHTBOX EXAMPLE</title>
    4.                 <style>
    5.                 .black_overlay{
    6.                         display: none;
    7.                         position: absolute;
    8.                         top: 0%;
    9.                         left: 0%;
    10.                         width: 100%;
    11.                         height: 100%;
    12.                         background-color: black;
    13.                         z-index:1001;
    14.                         -moz-opacity: 0.8;
    15.                         opacity:.80;
    16.                         filter: alpha(opacity=80);
    17.                 }
    18.                 .white_content {
    19.                         display: none;
    20.                         position: absolute;
    21.                         top: 25%;
    22.                         left: 25%;
    23.                         width: 50%;
    24.                         height: 50%;
    25.                         padding: 16px;
    26.                         border: 16px solid orange;
    27.                         background-color: white;
    28.                         z-index:1002;
    29.                         overflow: auto;
    30.                 }
    31.         </style>
    32.         </head>
    33.         <body>
    34.                 <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
    35.                 <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
    36.                 <div id="fade" class="black_overlay"></div>
    37.         </body>
    38. </html>
    Paste this in your website: <script type="text/javascript" src="http://www.posteet.com/embed/1401"></script>
  11. 8 years ago by stephane
    The author of this code does not tell where put it in the file... i suppose the good place is between <head> tags. You just have to build your cssheets as you want and you're done! :D
    1. <SCRIPT LANGUAGE="JavaScript">
    2. <!-- Begin
    3. function getCSS()
    4. {
    5. datetoday = new Date();
    6. timenow=datetoday.getTime();
    7. datetoday.setTime(timenow);
    8. thehour = datetoday.getHours();
    9.  
    10. if (thehour > 20)
    11. display = "tree_twilight.css";
    12. else if (thehour > 17)
    13. display = "tree_sunset.css";
    14. else if (thehour > 14)
    15. display = "tree_afternoon.css";
    16. else if (thehour > 11)
    17. display = "tree_noon.css";
    18. else if (thehour > 7)
    19. display = "tree_morning.css";
    20. else if (thehour > 4)
    21. display = "tree_sunrise.css";
    22. else if (thehour > 1)
    23. display = "tree_twilight.css";
    24. else
    25. display = "tree_sunset.css";
    26.  
    27. var css = '<';  css+='link rel="stylesheet" href=' + display + ' \/';  css+='>';
    28.  
    29. document.write(css);
    30. // End -->
    31. }
    32. </script>
    33. <script language="javascript">getCSS();</script>
    Paste this in your website: <script type="text/javascript" src="http://www.posteet.com/embed/1398"></script>

First / Previous / Next / Last / Page 1 of 4 (37 posteets)