oct 11

Centrer une div verticalement, y compris sous IE6

CSS No Comments »

La solution la plus simple serait d’ utiliser les propriétés suivantes sur le conteneur pour simuler le comportement d’un tableau:

display:table-cell;
vertical-align:middle;

Seulement cette solution ne fonctionne pas sous Internet Explorer 6…

Voici donc une autre solution qui fonctionne sous IE6:
CSS :

#conteneur{
	height:400px;
	position:relative;
}
#bloc{	
	position:absolute;
	top:50%;
	height:200px;
	margin-top:-100px;  /*  margin-top négatif de la moitié de la propriété height  */
}

HTML :

<div id="conteneur">
      <div id="bloc">
		Mon contenu HTML.
       </div>
</div>

Seul inconvénient, il faut connaître la hauteur du bloc intérieur.

campagne-stop-ie6

Post to Twitter Twitter ce post


sept 16

Cibler et feinter Internet Explorer 6 dans son CSS

CSS No Comments »

Dans la série IE6 voici 3 différentes manières de cibler IE6 dans votre code CSS:

  1. Avec le !important :
    La clause !important est comprise par tous les navigateurs sauf IE6 et elle permet de donner la priorité à une instruction même si elle est redéfinie par la suite. Dans l’exemple ci-dessous l’ objet d’identifiant « test » sera vert dans tous les navigateur et rouge sous IE6.

    1
2
3
4

     #test{
     background-color:green !important;
     background-color:red;
 }
  2. En semant IE6 avec des sélecteurs trop compliqués pour lui:
    IE6 ne lira pas les sélecteurs trop compliqués comme « #test[id]« . Dans l’exemple ci-dessous l’ objet d’ identifiant « test » sera rouge dans tous les navigateur et vert sous IE6.

    1
2
3
4
5
6

     #test{
     background-color:green;
 }
 #test[id]{
     background-color:red;
 }
  3. Avec les commentaires conditionnels :
    Les commentaires conditionnels doivent être insérés dans votre code HTML et permettent ici de restreindre certaines instructions CSS à IE6.Dans l’exemple ci-dessous l’ objet d’ identifiant « test » sera rouge dans tous les navigateur et vert sous IE6.

    1
2
3
4
5
6
7
8
9
10
11
12

     <style>
     #test{
         background-color:red;
     }
</style>
<!--[if IE 6]>
 <style>
     #test{
         background-color:green;
     }
</style>
<![endif]-->

A vous maintenant d’ appliquer ces exemples à vos problèmes.

N’ oubliez pas que l’ordre des instructions CSS est bien sûr important et que le doctype l’est aussi, comme celui-ci par exemple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Et n’oubliez pas non plus..la lutte continue ;-)

campagne-stop-ie6

Post to Twitter Twitter ce post

août 23

IE6 et Z-index la solution !

CSS No Comments »

Puisque nous allons nous « payer » IE6 jusqu’en 2014 (date de fin support de micro$oft..), j’ai décidé de faire une série de posts sur les bugs de IE6 en donnant la solution pour chacun d’eux. Celui-ci concerne z-index qui permet de gérer l’empilement (profondeur) des éléments HTML sur une page.

On rencontre ce bug la plupart du temps en créant un menu déroulant,quant le menu se déroule sous le contenu.

Pour le résoudre il suffit d’associer les styles CSS  : position:relative; et  : z-index:1; à la balise parente.

Exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="barre">
   <ul id="menu">
	<li><a href="http://">Lien1</a></li>
	<li><a href="http://">Lien2</a></li>
   </ul>
</div>
#barre{
position: relative;
z-index:1;
}
 
#menu
{
z-index:12;
}

Post to Twitter Twitter ce post

juil 03

Grille CSS en moins d’ 1ko

CSS No Comments »

Les grilles CSS permettent de créer des structures de pages très rapidement, c’est ce système qui est employé dans les frameworks CSS comme blueprint ou encore 960gs.

Certaines personnes n’aiment pas ces frameworks à cause des  » kilo octets » en trop qu’ ils sont susceptibles d’amener. Voici un petit système de grille CSS compatible tous navigateurs qui devrait leurs faire changer d’avis:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }
 
.column {
  float: left;
  margin: 0 10px;
  overflow: hidden;
  display: inline;
}
.row {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
}

Bien sur ce CSS n’est pas à lui seul un framework entier puisqu’il n’y a pas de reset CSS ou encore de style typographique..etc, mais il permet de créer la structure d’une page très simplement en évitant d’ écrire une tartine de CSS pour arriver à une structure compatible tous navigateurs.

grille-css

Pour en savoir plus je vous invite à lire cet article.

Si vous êtes convaincu par ce système, voici un outil qui va vous permettre de générer votre système de grille CSS à votre convenance et toujours en moins d’ 1 Ko.

1ko-css-grid-generateur

Post to Twitter Twitter ce post

juil 03

Choisir son Framework CSS

CSS No Comments »

Voici une présentation plutôt bien faite sur les frameworks CSS :

Post to Twitter Twitter ce post

mar 02

Cheat sheet ou antisèche pour le CSS

CSS, Documentation No Comments »

Voici un “cheat sheet” ou mémo CSS pour vous aider dans vos longues heures d’intégration XHTML/CSS.
cheat-sheet-css-memo-antiseche
Et en voici un 2ème.

Post to Twitter Twitter ce post

fév 12

Créer de jolis graphiques en pur CSS

CSS No Comments »

Le site Cssglobe nous apprends comment créer de jolis graphiques en pur CSS ( et HTML bien sûr), ouioui c’est possible…et assez simple, en voici l’exemple ci-dessous :
graphiques-pur-css
Lien vers l’article.

Exemples.

Post to Twitter Twitter ce post

Twitter links powered by Tweet This v1.6.1, a WordPress plugin for Twitter.