André Willemijns WebSite

• Accueil
• XHTML et CSS
• Web 2.0
• Contact

• Sommaire
• Texte
• Images, vidéo et son
• Gabarits
• Webographie

Créer des tableaux

le 4 décembre 2008

Si la tendance de créer des pages web sous forme de tableaux est abandonnée au profit des feuilles de style, les tableaux sont encore utilisés pour la présentation de données.

Différents tableaux sont disponibles avec les codes XHTLM et CSS :

• Simple tableau
• Tableau formaté
• Tableau avec fusion des lignes et des colonnes
• Tableau pour présentation de photos

Réalisation de cadres ombrés

le 7 novembre 2007

Nous allons réaliser un cadre particulier et cela sans utiliser une image

Deux configurations sont possibles, le contenu du texte posséde une bordure ou n'en posséde pas

Cadres ombrés sans images

Réalisation de bords arrondis

le 7 novembre 2007

La réalisation de bords arrondis en XHTML et CSS est courante et se fait généralement avec des images.

Les techniques utilisées sont bien connues.

On utilise un quart de cercle que l'on place aux extrémités de la boîte à réaliser puis on rempli l'intérieur d'une couleur uniforme.

D'autres techniques sont utilisées avec l'utilisation de 1, 2 ou 4 images.

Ici nous allons voir la possibilité de faire des bords arrondis sans images.

Bords arrondis sans images

Eviter les débordements

le 7 novembre 2007

Petite bidouille pour éviter qu'un élément flottant déborde (une image par exemple de déborder vers le bas sur le contenu qui suit), vous pouvez le faire suivre par un élément XHTML contenant un espace invisible.

Soit l'introduction d'un paragraphe :

<p class="dessous"> </p>

.dessous {clear : both ;}

Ou plus simplement, comme souvent il s'agit d'un nouveau paragraphe, vous ajouter aux propriétés des titres h1 ou h2 "clear: both" et vous n'avez plus à vous préoccuper de ce problème.

Mettre en valeur un paragraphe

le 6 février 2008

Voici le paragraphe que je souhaite mettre en valeur.

Pour cela nous utiliserons la balise blockquote et nous lui ajouterons une image.

Le code à insérer sera pour la page :

<blockquote style="background:url(images/quote.png) 
left top no-repeat;	color: blue; line-height:1.4;	margin:.6em 0 .4em 0;	
padding: 0 0 10px 40px;">Texte du paragraphe </blockquote>

Les ancres

le 7 novembre 2007

Les ancres sont des références (genre notes de fin de documents, points à retrouver dans une page web .etc..)

Dans une page HTLM nous pouvons avoir quelque chose comme :

<a href="#1">Lien 1</a>
<a href="index.html#2">Lien 2</a>

<a name="1"></a> Blabla
<a name="2"></a> Blabla

En XHTML 1.0 Strict//EN", "name" n'est plus accepté, le seul identificateur possible est "id". Mais attention il est nécessaire que l'attribut "id" commence par une lettre. Dans notre exemple ci-dessus nous avons utilisé des chiffres.

Le validateur du W3C rejette notre page alors que tout fonctionne bien dans les navigateurs.

La solution sera d'utiliser :

<a href="#a1">Lien 1</a>
<a href="index.html#a2">Lien 2</a>

<a id="a1"></a> Blabla
<a id="a2"></a> Blabla

Insérer un document dans une page web

le 12 mars 2008

Document pdf

Pour inclure un document pdf dans une page web nous utiliserons aussi la balise "object" et pour la valeur de l'attribut "data" nous utiliserons le nom du document avec l'extension pdf.

Soit avec la balise div pour centrer notre application le code suivant à insérer dans la page web sera:

<div style="width: 600px; margin: 10px auto;">
<object data="chemin/nom_du_fichier.pdf" type="application/pdf" width="600" height="500">
  alt : <a href="chemin/nom_du_fichier.pdf"> nom_du_fichier.pdf</a>
	La page au format pdf ne peut pas être incluse.
</object>
</div>

Voici le résultat :

Les positionnnements et la fonction z-index

le 3 juillet 2009

La propriété "z-index" permet de préciser l'empilement d'éléments.

Elle permet par exemple d'indiquer que pour deux éléments A et B, A sera placé au dessus de B ou inversement.

Normalement par défaut, le dernier élément positionné déclaré dans le code XHTLM s'affichera par-dessus tous les autres éléments d'un même conteneur. Pour changer cela nous utiliserons la fonction de profondeur z-index.

Notons que pour l'application de z-index il faut avoir les conditions suivantes :

1. Seuls les éléments positionnés peuvent avoir un z-index. Un élément positionné est un élément dont la propriété CSS "position" a pour valeur "relative", "absolute" ou "fixed".
2. Les valeurs les plus élevées sont au premier plan, et les plus faibles sont au second plan.

Exemple avec des paragraphes :

<div class="a">
<p id="pn1">Premier paragraphe</p>
<p id="pn2">Premier paragraphe</p>
</div>

div.a {
position: relative;
width: 300px;
height: 200px;
background: #ffff00;
}

p#pn1 {
position: absolute;
top: 5px;
left: 5px;
width: 100px;
height: 50px;
background: #ccc;
z-index: 10;
}

p#pn2 {
position: absolute;
top: 40px;
left: 50px;
width: 100px;
height: 50px;
background: green;
z-index: 2;
}

Dans notre exemple la valeur la plus élevée de z-index concerne le paragraphe 1, il est donc au premier plan

Exemple avec des images :

La fonction z-index appliquée avec des images nous permet de réaliser un mini diaporama

<div style="width: 100%; height: 380px; margin: 10px 0; padding: 0">
<ul class="z">
<li class="p1"><a href="#"><img src="images/Hohenzollern-pres-de-Stuttg.jpg" 
alt="Hohenzollern" width="561" height="300" /></a></li>
<li class="p2"><a href="#"><img src="images/Le-rocher-Perce-Gaspesie-Ca.jpg" 
alt="Le rocher Percé" width="561" height="300" /></a></li>
<li class="p3"><a href="#"><img src="images/New-White-Desert-Egypte.jpg" 
alt="New White Desert" width="561" height="300" /></a></li>
<li class="p4"><a href="#"><img src="images/White-Desert-Egypte.jpg" 
alt="White Desert" width="561" height="300" /></a></li>
</ul>
</div>

ul.z{
list-style:none;
padding:10px 0;
position:relative;
width:100%;
margin: 0;
height: 380px;
}
.z li{
float:left;
margin:10px 0 0 -541px;
}
.z li.p1{margin:0}
.z li.p2{margin-top:20px}
.z li.p3{margin-top:40px}
.z li.p4{margin-top:60px}

.z img {
padding:2px;
border:1px solid #000;
background:#fff;
display:block;
}
.z a img{position:relative;z-index:1}
.z a:hover{visibility:visible;}/* indispensable pour IE*/
.z a:hover img{z-index:2;}