Symfony: Créer un site web avec le framework PHP Symfony - La Ferme Du Web

Tutorial Symfony

A travers le projet WatchMyDesk, apprenez à maîtriser le Framework PHP5 Symfony.

Tutorial: Créer un serveur web complet sous debian - #1 Apache - La Ferme Du Web

Tuto serveur web debian

Créez votre serveur web complet sous linux debian: Apache2, PHP, MySQL, pureFTPd, Postfix...

Novaway recrute un développeur PHP5 Symfony et un dev iPhone / iPad - La Ferme Du Web

Novaway Recrute !

Novaway, société éditrice de la Ferme du Web recrute un dév PHP5 Symfony et un dev iPhone/iPad

30
DEC

[Memo] Des portions de code CSS valides tous navigateurs

Publié le 30/12/09 à 07h36 par DJo

Voici 4 bouts de code CSS très pratiques au quotidien et compatibles avec tous les navigateurs.

4portions de code CSS

(Crédits photos: Exey Panteleev)

 

Centrer un site web en CSS ou un élément HTML en display block

Le code HTML:

<div id='conteneur'></div>

 

Le code CSS:

#conteneur {
  margin: 0 auto;
  width: 960px;
}

 

 

Créer un footer qui colle au bas du site en CSS

Le code HTML:

<div id='conteneur'>
    <div id='centre' class='clearfix'>

    </div>
</div>

<div id='footer'>

</div>

 

Le code CSS:

  * { margin:0; padding:0; } 

  html, body, #conteneur { height: 100%; }

  body > #conteneur {height: auto; min-height: 100%;}

  
  /* La valeur doit être la même que la hauteur du footer */
  #centre { padding-bottom: 150px; }  
  #footer {
      position: relative;
    
     /* Doit être la valeur négative de la hauteur du footer */
      margin-top: -150px; 
      height: 150px;
      clear:both;
  } 

  /* CLEAR FIX*/
  .clearfix:after {content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;}
   .clearfix {display: inline-block;}
   /* Hides from IE-mac */
   * html .clearfix { height: 1%;}
   .clearfix {display: block;}
   /* End hide from IE-mac */

 

Hauteur minimum (min-height) compatible tous navigateurs en CSS

Le code HTML:

<div id='conteneur'></div>

 

Le code CSS:

#conteneur { 
  min-height:600px; 
  height:auto !important; 
  height:600px; 
}

 

L'opacité en CSS compatible tous navigateurs

Le code HTML:

<div class='divTransparente'></div>

 

Le code CSS:

  .divTransparente {
    
    /* Modern Browsers */ opacity: 0.7;
  
    /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

    /* IE 5-7 */ filter: alpha(opacity=70);

    /* Netscape */ -moz-opacity: 0.7;

    /* Safari 1 */ -khtml-opacity: 0.7;
    
  }

 

Source



A voir aussi sur le même sujet:

Commentaires La Ferme Du Web4 Commentaires
Tags La Ferme Du Web

css

-

navigateurs

-

footer

-

centrer

-

opacite

1
Baraguiné par zetoun17 le 31/12/09 à 10h50
zetoun17 sur La Ferme du Web
on se rend bien compte que les CSS ont un grand besoin d'être simplifiées, devoir taper autant de lignes pour faire des choses aussi simples me semble aberrant
Baraguiné par RapotOR le 31/12/09 à 11h18
RapotOR sur La Ferme du Web
ce n'est pas tellement CSS qui est compliqué. ce sont plutot les navigateurs qui ne respectent pas les règles établies. Du coup, il faut "bidouiller" pour tenter de satisfaire tout le monde.
Baraguiné par le 02/01/10 à 13h54
Je suis bien d'accord avec vous, RapotOR. Quand il faut créer une Css par navigateur pour que tout s'affiche, là je crise ! c'est limite admissible.
Baraguiné par MisterV le 07/01/10 à 11h58
MisterV sur La Ferme du Web
Merci pour ces petits trucs. J'ai cependant quelques réticences sur certains points :

- Le clearfix :
Dans la deuxième astuce, on voit apparaitre une jolie petite classe CSS "clearfix".
Cette astuce du clearfix est un barbarisme qui me dérange systématiquement quand je la vois. Non seulement ça rajoute une classe CSS de hack dans le doc HTML et une tripoté de propriétés CSS dédiées à ce hack, mais le pire c'est que c'est complètement inutile, car il existe une solution propre, simple, efficace, fonctionnant à ma connaissance sur tous les navigateurs, pour faire exactement la même chose : la propriété "overflow" correctement utilisée dans toutes ses déclinaisons.
En effet la propriété overflow, généralement pas assez connue, permet (entre autre) de spécifier à un élément de type block que ses enfants flottant ne doivent pas "déborder" : "overflow: hidden".
Dans le cas du bout de code présenté plus haut, il suffirait de définir la propriété CSS suivante :
#centre { overflow: hidden; }
Et hop, plus besoin de clearfix, ni de toutes les propriétés CSS associées. Le conteneur #centre s'adaptera automatiquement en s'agrandissant pour que les éléments flottant qui pourraient déborder soient dans sont périmètre (et donc visible quand même).
C'est quand même nettement plus simple, non ?
Évidemment, une contrainte de cette technique c'est que le conteneur #centre est désormais en overflow: hidden. Mais généralement si on gère bien son truc (doc HTML bien monté, avec les bons éléments imbriqués comme il faut), ça ne devrait pas poser de soucis.
La propriété overflow est très spéciale, et mériterait d'être mieux connue.

- Mélange de code propre et de hacks
Dans les astuces présentés, le code CSS contient un mélange de code CSS standard propre et de code CSS de hack spécifique pour des navigateurs, et notamment IE.
Je trouve qu'il est généralement préférable de faire d'un coté des fichiers CSS propre ne contenant que le code CSS standard : la feuille de style idéale qui devrait suffire. Ensuite on ajoute à cela d'autres feuilles de styles qui se chargeront de mettre en place les hacks. Pour les hacks IE (les plus nombreux), on peut utiliser la solution des commentaires HTML conditionnel pour insérer certaines feuilles de style seulement pour IE.
De cette manière on a bien une feuille de style propre, et on peut facilement localiser tout ce qui est hack.


Désolé pour le lachage verbeux... j'espère que ça pourra être utile a quelqu'un.

Nico
1

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web