Accès membres : identifiez-vous !     Dernière remise à jour du site : le Mar. 11 Novembre 2014 à 14:51:19

wxFrantz's Concept

(X)HTML & CSS - Code snippets

Vous trouverez ci-dessous quelques extraits de codes suceptibles de vous être utiles :

Tous ces codes sont valides XHTML 1.0 Strict et CSS 2.1.

Fenêtre type Bloc-notes sous Windows XP

Le code suivant permet d'obtenir ce rendu façon Bloc-notes sous Windows XP :

Exemple

Titre_de_la_fenetre.txt - Bloc-notes
Ceci est le texte à afficher au milieu de la fenêtre type Bloc-notes Windows XP.


Code HTML

<!-- Tableau format bloc-notes Windows XP -->
<table class="bloc_notes_win_xp" cellpadding="0" cellspacing="0" width="350">
<thead>	<!-- En-tête du tableau -->
   <tr>
      <th class="win_xp_haut_gauche"></th>
      <th class="win_xp_haut_milieu_gauche"></th>
      <th class="win_xp_haut_milieu">Titre_de_la_fenetre.txt - Bloc-notes</th>
      <th class="win_xp_haut_milieu_droit"></th><th class="win_xp_haut_droit"></th>
   </tr>
</thead>
<tfoot>   <!-- Pied de tableau -->
   <tr>
      <th class="win_xp_bas_gauche"></th>
      <th colspan="3" class="win_xp_bas_milieu"></th>
      <th class="win_xp_bas_droit"></th>
   </tr>
</tfoot>
<tbody>   <!-- Corps du tableau -->
   <tr>
      <td class="win_xp_cote_gauche"></td><td colspan="3" class="win_xp_contenu">
         <!-- Début du texte à afficher -->
            Ceci est le texte à afficher au milieu de la fenêtre type Bloc-notes Windows XP.
         <!-- Fin du texte à afficher -->
	  </td>
      <td class="win_xp_cote_droit"></td>
   </tr>
</tbody>
</table>
<!-- Fin du tableau format bloc-notes Windows XP -->

Pour modifier la largeur de la fenêtre, il suffit de modifier le paramètre width="350" de la deuxième ligne.

Code CSS

Le code de la feuille de style permettant le formatage ad hoc :

.bloc_notes_win_xp {
   margin : 20px auto 12px auto;
}
.win_xp_haut_gauche {
   height : 31px;
   width : 5px;
   background : url(win_xp_haut_gauche.png);
   background-repeat : no-repeat;
   color : #ffffff;
   background-color : #aaaaaa;
}
.win_xp_haut_milieu_gauche {
   height : 31px;
   width : 18px;
   background : url(win_xp_haut_milieu_gauche.png);
   background-repeat : no-repeat;
   color : #ffffff;
   background-color : #aaaaaa;
}
.win_xp_haut_milieu {
   height : 31px;
   background : url(win_xp_haut_milieu.png);
   background-repeat :repeat-x;
   padding-left : 5px;
   text-align : left;
   font : 1.9ex "Trebuchet MS",verdana, helvetica, arial, sans-serif;
   font-weight : bold;
   color : #000000;
   background-color : #aaaaaa;
}
.win_xp_haut_milieu_droit {
   height : 31px;
   width : 69px;
   color : #ffffff;
   background : url(win_xp_haut_milieu_droit.png);
   background-repeat : no-repeat;
   background-color : #aaaaaa;
}
.win_xp_haut_droit {
   height : 31px;
   width : 5px;
   color : #ffffff;
   background : url(win_xp_haut_droit.png);
   background-repeat : no-repeat;
   background-color : #aaaaaa;
}
.win_xp_cote_gauche {
 
   width : 5px;
   background : url(win_xp_cote_gauche.png);
   background-repeat : repeat-y;
   color : #ffffff;
   background-color : #aaaaaa;
}
.win_xp_cote_droit {
   width : 5px;
   background : url(win_xp_cote_droit.png);
   background-repeat : repeat-y;
   color : #ffffff;
   background-color : #aaaaaa;
}
.win_xp_contenu {
   padding : 5px;
   color : #000000;
   text-align : left;
   font : 1.9ex "Lucida Console", monospace;
   background-color : #ffffff;
}
.win_xp_bas_gauche {
   height : 5px;
   width : 5px;
   background : url(win_xp_bas_gauche.png);
   background-repeat : no-repeat;
   color : #ffffff;
   background-color : #aaaaaa;
}
.win_xp_bas_milieu {
   height : 5px;
   background : url(win_xp_bas_milieu.png);
   background-repeat : repeat-x;
   color : #000000;
   background-color : #aaaaaa;
}
.win_xp_bas_droit {
   height : 5px;
   width : 5px;
   color : #ffffff;
   background : url(win_xp_bas_droit.png);
   background-repeat : no-repeat;
   background-color : #aaaaaa;
}

Appel de la feuille de style dans l'entête de la page HTML :

<head>
   <link rel="stylesheet" type="text/css" href="bloc-notes-win-xp.css" />
</head>

Téléchargement du résultat

Télécharger le fichier zip contenant le code HTML, la feuille de style et les images associées :



Télécharger


Fenêtre type Bloc-notes sous Windows Seven

Le code suivant permet d'obtenir ce rendu façon Bloc-notes sous Windows Seven :

Exemple

Titre_de_la_fenetre.txt - Bloc-notes
Ceci est le texte à afficher au milieu de la fenêtre type Bloc-notes Windows Seven.


Code HTML

<!-- Tableau format bloc-notes Windows Seven -->
<table class="bloc_notes_win_seven" cellpadding="0" cellspacing="0" width="450">
<thead>	<!-- En-tête du tableau -->
   <tr>
      <th class="win_seven_haut_gauche"></th>
      <th class="win_seven_haut_milieu_gauche"></th>
      <th class="win_seven_haut_milieu">Titre_de_la_fenetre.txt - Bloc-notes</th>
      <th class="win_seven_haut_milieu_droit"></th><th class="win_seven_haut_droit"></th>
   </tr>
</thead>
<tfoot>   <!-- Pied de tableau -->
   <tr>
      <th class="win_seven_bas_gauche"></th>
      <th colspan="3" class="win_seven_bas_milieu"></th>
      <th class="win_seven_bas_droit"></th>
   </tr>
</tfoot>
<tbody>   <!-- Corps du tableau -->
   <tr>
      <td class="win_seven_cote_gauche"></td><td colspan="3" class="win_seven_contenu">
         <!-- Début du texte à afficher -->
		 Ceci est le texte à afficher au milieu de la fenêtre
		 type Bloc-notes Windows Seven.
         <!-- Fin du texte à afficher -->
	  </td>
      <td class="win_seven_cote_droit"></td>
   </tr>
</tbody>
</table>
<!-- Fin du tableau format bloc-notes Windows Seven -->

Pour modifier la largeur de la fenêtre, il suffit de modifier le paramètre width="450" de la deuxième ligne.

Code CSS

Le code de la feuille de style permettant le formatage ad hoc :

.bloc_notes_win_seven {
    margin : 20px auto 12px auto;
}
.win_seven_haut_gauche {
    height : 54px;
    width : 23px;
    background : url(win_seven_haut_gauche.png);
    background-repeat : no-repeat;
    color : #ffffff;
    background-color : #aaaaaa;
}
.win_seven_haut_milieu_gauche {
    height : 54px;
    width : 16px;
    background : url(win_seven_haut_milieu_gauche.png);
    background-repeat : no-repeat;
    color : #ffffff;
    background-color : #aaaaaa;
}
.win_seven_haut_milieu {
	height : 54px;
	background : url(win_seven_haut_milieu.png);
	background-repeat : repeat-x;
	text-align : left;
	padding-left : 5px;
	vertical-align : middle;
	font : 12px "Segoe UI", arial, sans-serif;
	color : #000000;
	background-color : #aaaaaa;
}
.win_seven_haut_milieu_droit {
    height : 54px;
    width : 100px;
    color : #ffffff;
    background : url(win_seven_haut_milieu_droit.png);
    background-repeat : no-repeat;
    background-color : #aaaaaa;
}
.win_seven_haut_droit {
    height : 54px;
    width : 27px;
    color : #ffffff;
    background : url(win_seven_haut_droit.png);
    background-repeat : no-repeat;
    background-color : #aaaaaa;
}
.win_seven_cote_gauche {
 
    width : 23px;
    background : url(win_seven_cote_gauche.png);
    background-repeat : repeat-y;
    color : #ffffff;
    background-color : #aaaaaa;
}
.win_seven_cote_droit {
    width : 27px;
    background : url(win_seven_cote_droit.png);
    background-repeat : repeat-y;
    color : #ffffff;
    background-color : #aaaaaa;
}
.win_seven_contenu {
    padding : 0px 7px 7px 7px;
    color : #000000;
    text-align : left;
    font : 1.9ex "Lucida Console", monospace;
    background-color : #ffffff;
}
.win_seven_bas_gauche {
    height : 29px;
    width : 23px;
    background : url(win_seven_bas_gauche.png);
    background-repeat : no-repeat;
    color : #ffffff;
    background-color : #aaaaaa;
}
.win_seven_bas_milieu {
    height : 29px;
    background : url(win_seven_bas_milieu.png);
    background-repeat : repeat-x;
    color : #000000;
    background-color : #aaaaaa;
}
.win_seven_bas_droit {
    height : 29px;
    width : 27px;
    color : #ffffff;
    background : url(win_seven_bas_droit.png);
    background-repeat : no-repeat;
    background-color : #aaaaaa;
}

Appel de la feuille de style dans l'entête de la page HTML :

<head>
   <link rel="stylesheet" type="text/css" href="bloc-notes-win-seven.css" />
</head>

Téléchargement du résultat

Télécharger le fichier zip contenant le code HTML, la feuille de style et les images associées :



Télécharger


Dernière modification de cette page le 23 janvier 2013 à 20:25
Sauf mention contraire, le contenu de cette page est sous licence Creative Commons Paternité et Conditions de partage à l'identique
Page générée en 642.833 millisecondes | Votre adresse IP : 10.2.162.6 via 216.73.216.254 | Me contacter

             
Impossible de se connecter : Access denied for user 'wxfrantz'@'172.20.245.55' (using password: YES)