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

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/

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

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

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

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

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

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/

Leave a Comment » | design | Tagué: | Permalien
Publié par Audrey Rozowykwiat

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

Leave a Comment » | javascript | Tagué: | Permalien
Publié par Audrey Rozowykwiat

Bientôt des outils en lignes collaboratifs pour les artistes :

5 octobre 2007

Aviary est un outil collaboratif pour les artistes, intégrant une suite d’application riche. Il n’est pas encore sorti, mais on peut s’inscrire pour recevoir une invitation dés qu’il sera en ligne :

http://www.creationonthefly.com/blog

http://fr.techcrunch.com/2007/07/29/aviary-un-projet-artistique-incroyablement-ambitieux/

Leave a Comment » | design | Tagué: , | Permalien
Publié par Audrey Rozowykwiat

Un blog de designer

5 octobre 2007

Parce qu’il aime son métier, ce webdesigner vous fait partager son métier-passion et tout ce qui l’entoure :

http://www.presse-citron.net

Leave a Comment » | blog, design | Tagué: , | Permalien
Publié par Audrey Rozowykwiat

Algorithme avec Java

24 septembre 2007

Voici un algorithme issu de mon cours d’Algorithme avec Java au CNAM, de monsieur Jean-François PEYRE. Je le répète ici pour mieux le mémoriser. Mais on peux retrouver sa source à cette adresse :
http://deptinfo.cnam.fr/Enseignement/CycleA/APA/

Problème :

Calculer un prix TTC à partir d’un prix HT

Analyse :

Il y a deux taux : 19,6% et 5,5%

Données :

  • Entrée
    • Un prix HT de type double : prixHT
    • Un type : taux
      • o pour normal
      • 1 pour réduit
  • Sortie
    • Un prix TTC de type douvle: prixTTC

Algorithme

  1. Afficher un message demandant une somme HT à l’utilisateur
  2. Recueillir la réponse dans prixHT
  3. Afficher un message demandant le taux (0 ou 1)
  4. Recueillir la réponse dans taux
  5. 2 cas:
    1. le taux est normal : prixTTX= prixHT +(prixHT*0.196)
    2. le taux est réduit : prixTTX= prixHT +(prixHT*0.055)
  6. Afficher le prixTTC

Code Source :

Ce code utilise des méthodes accessibles dans le fichier Terminal.java, qui doit être compilé dans le même répertoire que notre fichier .
Le fichier terminal.java est accessible dans le cours de monsieur Jean-François Peyre à cette adresse :
http://deptinfo.cnam.fr/Enseignement/CycleA/APA/

Voici le code Source de mon fichier que j’appelle tva.java

public class tva {
 public static void main(String[] args){
  double prixHT;
  double prixTTC;
  int taux;
  Terminal.ecrireString("Quel est votre somme HT ?");
  prixHT=Terminal.lireDouble();
  Terminal.ecrireString("Quel est votre taux ? 0 -> taux à 19.6%, 1-> taux à 5.5% ");
  taux=Terminal.lireInt();
  if (taux==0){
    prixTTC=prixHT+ (prixHT*0.196);
    Terminal.ecrireDouble(prixTTC);
    }
  else if (taux==1) {
    prixTTC=prixHT + (prixHT*0.055);
    Terminal.ecrireDouble(prixTTC);
    }
  }
 }
 

Leave a Comment » | algorithme, java | Permalien
Publié par Audrey Rozowykwiat

Qu’est-ce que J2SE ?

21 septembre 2007

C’est un framework spécialisé pour créer des applications pour poste de travail.
Il contient des API ( Application Programming Interface)  ou interface de programmation.

Les API de J2SE sont :

  • Java Foundation Classes (JFC)            -> Graphisme
    • Abstract Window Toolkit (AWT)
    • Swing
    • Java 2D
  • Java API for XML (JAXP)                       -> XML
  • Java Database Connectivity (JDBC)   ->Base de donnée

Un commentaire | java | Permalien
Publié par Audrey Rozowykwiat

Qu’est-ce que Java ?

21 septembre 2007

Java comprend :

  • Le language de programmation JAVA
  • La machine virtuelle JAVA
  • La plateforme JAVA

Le language de programmation Java sert à écrire des applications Java, des Applets, des servlets, et des composants.

Java est un language compilé. Le code source Java est convertit dans un autre format appelé bytecode ou code octet.
Un programme à base de bytecode est exécuté ou interpété dans une machine virtuelle. Une machine virtuelle execute le code de la même façon qu’un processeur. Le language Java, une fois compilé, est exécuté sur une machine virtuelle Java ou JVM.

Source: www.commentcamarche.net

La plateforme Java désigne à la fois l’ensemble des classes Java qui existe dans chaque installation Java, et l’environnement d’éxécution Java.

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

Les jeux inspirent les applications interfaces riches

20 septembre 2007

Source

Johnatan Boutelle
http://www.slideshare.net/jboutelle
http://www.jonathanboutelle.com/

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

Histoire du design par Valdir Soares

20 septembre 2007

Voici un cours d’histoire du design :

Lire le reste de cette entrée »

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

Sur la route de John Maeda – étape 1

19 septembre 2007

Suite à la conférence donnée par Etienne Mineur aux Designer Interactif, j’ai décidé de tout savoir sur John Maeda. Une première chose m’attire vers cette personnalité du web : John Maeda à une double culture informatique et artistique. Pour moi cette double culture est fondamentale. C’est pour ça que j’ai décidé et que je me suis formé à l’école des Gobelins comme Concepteur réalisateur multimédia. Et puis je trouve aussi la double culture américaine et   japonaise fantastique. Personnellement je suis pour la transversalité des savoirs et des compétences, et je n’aime pas les cases.

Lire le reste de cette entrée »

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

10 choses que j’ai envie d’explorer après la conférence d’Etienne Mineur, Une histoire du design

19 septembre 2007

Je reviens de la conférence d’Etienne Mineur des Designer interactif intitulée (une) histoire du design interactif. Voici la liste des sujets que j’ai envie d’explorer à l’issue de cette conférence :

Lire le reste de cette entrée »

Leave a Comment » | design, Etienne Mineur | Permalien
Publié par Audrey Rozowykwiat

Un site de Template

18 septembre 2007

Voici un site de templates pour chercher de l’inspiration, des idées en matière de design. On peut aussi s’exercer pour construire des sites semblables, histoire de s’entrainer à acquérir une technique et de savoir tout faire. Cela me rapelle mon professeur d’art plastique, Koegan. Elle nous faisait pratiquer des exercices de peintures en essayant de copier des originaux de façon à s’impregner de certaines techniques. C’est une méthode très efficace de créativité, si elle est alternée avec la composition libre.

http://www.templatesfactory.net

Leave a Comment » | design, peinture | Permalien
Publié par Audrey Rozowykwiat

Qu’est-ce qu’Adobe Flex

18 septembre 2007

Adobe flex est une solution de développement créée par macromédia en 2004, et reprise par Adobe en 2006, suite au rachat de Macromedia par Adobe.

Il permet de créer des applications internet riches (RIA) multi-plateformes.

Flex utilise deux langages :

  • MXML ( Macromedia Flex Markup Language, reposant sur XML
    • MXML permet de produire une interface graphiq.ue à partir de balise XML spécifique au moyen d’un outil intermédiaire.
    • MXML est à comparer à XUL, XAML, OpenLazlo.
    • Il sert à agencer des composants d’interface utilisateurs.
    • Il permet d’accéder à des sources de données côté serveur.
    • Il permet d’intégrer des liaisons de données entre des composants d’interface utilisateurs et des sources de données
  • Action Script 3

http://www.estvideo.com/dew/index/2005/06/18/457-mxml-xaml-xul-qui-sera-le-gatekeeper

Un commentaire | flex | Permalien
Publié par Audrey Rozowykwiat

colourlovers

17 septembre 2007

Un site génial sur les palettes de couleur

http://www.colourlovers.com/

Leave a Comment » | couleur, design | 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

« Entrées Précédentes