|
1 2 |
table{ table-layout: fixed; } table td.col-01{ width: 40%; } |
Mois : octobre 2013
[CSS][Responsive Design] Les media-queries de base pour cibler les périphériques standards.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/* 320x480 */ @media (min-width: 320px) { } /* 480x320 */ @media (min-width: 480px) { } /* 600x800 */ @media (min-width: 600px) { } /* 800x600 */ @media (min-width: 768px) { } /* 768x1024 */ @media (min-width: 800px) { } /* 1024x768 */ @media (min-width: 1024px) { } |
[jQuery] Détecter la présence d’une classe .current sur un élément LI et ajouter des classes .before et .after aux éléments LI précédents et suivants avec prevAll et nextAll
|
1 2 3 4 5 6 7 |
<ul class="steps"> <li>first step</li> <li>second step</li> <li class="current">third step</li> <li>fourth step</li> <li>fifth step</li> </ul> |
|
1 2 3 4 |
jQuery(document).ready(function(){ jQuery('.steps li.current').prevAll('li').addClass('before'); jQuery('.steps li.current').nextAll('li').addClass('after'); }); |
[jQuery][Responsive Design] Centrer verticalement un élément en jQuery
…et conserver le centrage au redimensionnement de la fenêtre.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// On crée une fonction qui centre verticalement le visuel du champ résumé function verticalAlignImageOnWindowResize() { jQuery('.mobile-blog-list li').each(function(){ var listItemHeight = jQuery(this).height(); var listItemImageHeight = jQuery(this).find('img').height(); jQuery(this).find('img').css('margin-top', + ((listItemHeight - listItemImageHeight) / 2)); }); } jQuery(window).load(function(){ verticalAlignImageOnWindowResize(); }); jQuery(window).resize(function(){ jQuery('.mobile-blog-list li .post-image img').each(function(){ jQuery(this).removeAttr('style'); }); verticalAlignImageOnWindowResize(); }); |
[CSS] Masquer du texte
Méthode d’avantage compatible que celle du hack -9999px !
|
1 2 3 |
button {text-indent:-9999px;} * html button{font-size:0;display:block;line-height:0} /* ie6 */ *+html button{font-size:0;display:block;line-height:0} /* ie7 */ |
Source : http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
|
1 2 3 4 5 |
.hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; } |