Comment centrer une page dans la fenêtre du navigateur avec CSS

30 juillet 2008

Pour centrer une page, il faut dans la page HTML mettre tout le contenu de la page dans une balise div identifié par id= »conteneur ». Puis dans le code css déclarer margin:auto;.

Il faut également avoir un des doctypes suivant :

XHTML 1.0 STRICT

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

XHTML 1.0 TRANSITIONAL

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

ou

XHTML 1.0 FRAMESET

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

ou

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

ou

HTML 4.0 STRICT

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">
ou

HTML 4.0 TRANSITIONNAL

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   "http://www.w3.org/TR/html4/loose.dtd">

ou

HTML 4.0 FRAMESET

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
	   "http://www.w3.org/TR/html4/frameset.dtd">

ATTENTION LE DOCTYPE DOIT INCLURE UNE URI COMPLETE
Si il n'y a pas d'URI complète en fin de balise ou s'il n'y a pas de doctype cela ne marche pas.

Code HTML ou XHTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">
<html>
     <head>
     </head>
     <body>
          <div id="conteneur">
          Tout le code de la page
          </div>
     </body>
</html>

Code CSS :

body{
    margin:0;
    padding:0;
    }
#conteneur{
    margin:auto;
   padding:auto;
    }

Mémento HTML CSS

29 juillet 2008

1. Structure de la page web

<html>
<head>
<title>Titre de la page</title>
</head>
<body>
Contenu de la page
</body>
</html>

2. Balises essentielles

<p></p> : Paragraphe
<h1></h1> : Titre 1
<h6></h6> : Titre 6
<strong></strong> : Forte emphase (en gras)
<em></em> : Emphase
<i></i> : Italique
<b></b> : Gras
<u></u> : Souligné
<br/> : Retour chariot

3. Insérer une feuille de style

<style type="text/css" title="mes_styles" media="all">
<!--

-->

media="screen" : écran d'ordinateur
media="print" : Impression
media="projection" : Projecteurs
media="handled" : Ecran de petites tailles
media="tv" : WebTV

</style>

4. Styliser le fond

background-color:#ffffff;  // Couleur d'arrière plan
margin: 10px; // Marge

5. Les écritures

font-family: Georgia, "Times New Roman", Times, serif;
font-size : 10px;
Tailles de caractères relatives:
em
%
Medium,  Larger, Smaller,  x-small, xx-small, x-large et xx-large
Tailles de caractères absolues:
px
Interlignage :
line-height: 180%
text-indent:10px  //Retrait du paragraphe (indentation)
&nbsp; Espace insécable
margin-top: 70px;   // Les marges externes
margin-left: 120px;
margin-right: 50px;
margin-bottom: 70px;
letter-spacing: 0.5em; // Espace entre les lettres
word-spacing:0.5em // Espace entre les mots

6. Les listes

Listes non numérotées:
<ul>
     <li>Item n°1</li>
     <li>Item n°2</li>
     <li>Item n°3</li>
     <li>Item n°4</li>
     <li>Item n°5</li>
</ul>

Résultats :
  • Item n°1
  • Item n°2
  • Item n°3
  • Item n°4
  • Item n°5
Listes numérotées :
<0l>
     <li>Item n°1</li>
     <li>Item n°2</li>
     <li>Item n°3</li>
     <li>Item n°4</li>
     <li>Item n°5</li>
</0l>

Résultats :
  1. Item n°1
  2. Item n°2
  3. Item n°3
  4. Item n°4
  5. Item n°5
Définir l'apparence des puces des éléments de listes :
list-style-type: box | check | circle | diamond | disc | hyphen | square | decimal
| decimal-leading-zero |lower-roman | upper-roman | lower-greek | lower-latin
| upper-latin | armenian | georgian |hebrew | lower-alpha | upper-alpha | none | inherit

Exemple :

ul {
   list-style-type:check;
}

Les glyphes :

box : □

check : ✓

circle :  ◦

diamond : ◆

disc :  Un cercle remplit de noir

hyphen : ⁃

square : ■

Les listes numérotés ou ordonnées:

décimal : 1,2,3...
decimal-leading-zero : 01,02,03...
lower-roman : i,ii,iii,iv
upper-roman : I, II, III, IV
lower-alpha : a,b,c,d
upper-alpha : A,B,C,D
lower-greek : alpha, beta, gamma, 

Espacer les lignes :

ul li { margin: 1em 0 1em 0}
ou
ol li { margin: 1em 0 1em 0}

utiliser ses images :

ul { list-style-image: url(images/image.gif) }

créer une image par item :

<ul id="menu">
     <li id="accueil">Accueil</li>
     <li id="ressources">Ressources</li>
     <li id="historique">Historique</li>
</ul>

ul #accueil {
list-style-image: url(images/accueil.gif); }

ul #ressources { url(images/ressources.gif);}

ul #historique { url(images/historique.gif);}

Espacer le texte des icones dans IE6 :

ajouter &nbsp; devant le texte

7. Les liens

Créer une ancre dans la page :

<a name="mon_ancre"></a>  //Ancre

Lien hypertexte vers l'ancre :

<a href="http://www.site.com/index.htm#mon_ancre">Lien</a> //Lien vers l'ancre

Changer les couleurs des liens :

a:link 
  {color: #696; 
  text-decoration: none; 
  background-color: transparent }
a:visited 
  { color: #699; 
  text-decoration: none; 
  background-color: transparent }
a:hover 
  { color: #c93; 
  text-decoration: underline; 
  background-color: transparent }
a:active 
  { color: #900; 
  text-decoration: underline; 
  background-color: transparent }

Smashing magazine, un magazine sur le design

19 juillet 2008

Smasing Magazine est un webzine fondée en 2006 par deux gourous du web : Vitaly Friedman et Sven Lennartz. Leur but est de diffuser une information utile et innovante pour les designer et webmaster. On y trouve donc des informations sur les dernières tendances et techniques du web.

On y trouve du graphisme, des cas pratiques, des sources d’inspirations, des polices, des « comment faire », des articles sur le CSS, une boîte à outils, les bests off, des tutoriels et des offres d’emplois.

http://www.smashingmagazine.com/


shizoo

11 juillet 2008

Actuellement en reconstruction Shizoo.frozen-media est un site très tendance sur le design actuel.

On y trouve du webdesign, des pinceaux pour photoshop, des textures, des motifs, des scans, des assortiments de couleurs, des photos et images détourées, des icones et des fonds d’écran.

http://shizoo.frozen-media.de/affis.php


Les avatars de Second Life viennent de marcher sur Open Sim

9 juillet 2008

L’interopérabilité c’est pour aujourd’hui.

Désormais les avatars de Second Life peuvent sortir de Second Life pour voyager vers un autre métverse :

A travers les métavers


Un blog sur le design

20 février 2008

Admirable design est un blog entirement consacré au design sous toutes ses formes :

http://admirabledesign.com/


Créer une feuille de style par navigateur

10 octobre 2007

Pour pouvoir changer de feuilles de styles selon les navigateurs, il faut reconnaître à l’aide de javascript le nom du navigateur et la version du navigateur.

appName retourne le nom du navigateur.

appVersion retourne la version du navigateur sous la forme numéro de version ( plateforme (système d’exploitation), nationalité).

Sur une page version.html on peut détecter la version du navigateur de cette manière :

<script language="Javascript">       

<!-- 
document.write(appVersion.propriete);       

// -->       

</script>

Voici le code permettant de choisir une feuille par navigateur :

<script language="javascript"> 
      var navig = navigator.appName; 
      var version = navigator.appVersion; 
 if (version.search("MSIE 7.0") != -1 
&& navig.search("Microsoft")!=-1 ) 
   { 
   document.write("<link rel=\"stylesheet\" 
type=\"text/css\" media=\"screen\" 
href=\"screenie7.css\" />"); 
   document.write("<link rel=\"stylesheet\" 
 type=\"text/css\" media=\"print\" 
 href=\"printie7.css\" />");    
   }  
 else if ( version.search("MSIE 6.0")!=-1 
&& navig.search("Microsoft")!=-1  ) 
   { 
   document.write("<link rel=\"stylesheet\" 
 type=\"text/css\" media=\"screen\" 
href=\"screenie6.css\" />"); 
   document.write("<link rel=\"stylesheet\" 
type=\"text/css\" media=\"print\" 
 href=\"printie6.css\" />");    
   } 
 else if (  navig.search("Netscape")!=-1  ) 
   { 
   document.write("<link rel=\"stylesheet\" 
type=\"text/css\" media=\"screen\" 
 href=\"../assets/styles/screenfirefox2.css\" />"); 
   document.write("<link rel=\"stylesheet\" 
type=\"text/css\" media=\"print\" 
 href=\"printfirefox2.css\" />");    
   }    
 else if ( navig.search("Opera")!=-1  ) 
   { 
   document.write("<link rel=\"stylesheet\" 
 type=\"text/css\" media=\"screen\" 
 href=\"screenopera9.css\" />"); 
   document.write("<link rel=\"stylesheet\" 
 type=\"text/css\" media=\"print\" 
 href=\"printopera9.css\" />");    
   } else  
   { 
   document.write("<link rel=\"stylesheet\" 
type=\"text/css\" media=\"screen\" 
 href=\"firefox2.css\" />"); 
   document.write("<link rel=\"stylesheet\" 
type=\"text/css\" media=\"print\" 
 href=\"printfirefox2.css\" />"); } 
  
  </script> 
  

http://www.commentcamarche.net/javascript/jsnavigator.php3?imprim=1