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;
    }

Leave a Comment » | css, Informatique et multimédia | Tagué: , , | Permalien
Publié par Audrey Rozowykwiat

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 }

Leave a Comment » | css, Informatique et multimédia | Tagué: , | Permalien
Publié par Audrey Rozowykwiat

Comment faire un retrait en CSS ?

12 septembre 2007

Pour faire un retrait en css, il faut utiliser la propriété text-indent :

.retrait {
     text-indent:15px;
     }

Leave a Comment » | css | Permalien
Publié par Audrey Rozowykwiat

Les caractères spéciaux

11 septembre 2007

Quels sont les codes numériques ou les code texte pour mettre en ligne des caractères spéciaux :

http://alexandre.alapetite.net/doc-alex/alx_special.html

Leave a Comment » | css | Permalien
Publié par Audrey Rozowykwiat

Comment définir l’interlignage avec les CSS

11 septembre 2007

Pour modifier l’interlignage avec les CSS, il faut utiliser la propriété line-height :

.interlignage{ 
       line-height:120% 
}

ou

.interlignage{ 
      line-height:14px; 
}

Un commentaire | css | Permalien
Publié par Audrey Rozowykwiat

Comment centrer une image automatiquement avec un css

11 septembre 2007

Appliquer le code suivant

.image{ 
     display:block; 
     text-align:center; 
} 

Un commentaire | css | Permalien
Publié par Audrey Rozowykwiat

blog sur le design web

2 septembre 2007

Un blog sur le design web, l’ergonomie, XHTML1.0 et les CSS

css4design

Leave a Comment » | blog, css, design, ergonomie, graphisme | Permalien
Publié par Audrey Rozowykwiat

normandlamoureux.com

2 septembre 2007

Des cours, des articles traduits de qualité

Normand Lamoureux

Leave a Comment » | blog, css | Permalien
Publié par Audrey Rozowykwiat