Salut,
Tout d'abord merci d'avoir mis le code source de votre fichier et merci à Papadon d'avoir nettoyé le code.
Je vais commencer par un truc très simple. Il y a plusieurs manières d'utiliser nvu/kompozer. L'utilisation la plus simple est de laisser gérer la mise en forme par le logiciel. Ce qui est très pratique sauf que pour une utilisation avancée, nous nous retrouvons vite coincés à cause de cela :
- Code: Tout sélectionner
<div style="text-align: center; text-decoration: underline; font-weight: bold; font-family: Monotype Corsiva;">
<h1>Mes Gifs</h1>
<div style="text-align: left; font-weight: bold;">
Les Chevaliers de Bronzes :<br>
</div>
<div style="text-align: left;">
<img style="font-weight: normal; width: 140px; height: 90px;" alt="Seiya" src="http://saintseiyastory.ovh.org/Mes%20gifs/Seiya.gif">
<img style="font-weight: normal; width: 120px; height: 90px;" alt="Seiya 2" src="http://saintseiyastory.ovh.org/Mes%20gifs/Seiya%202.gif">
</div>
</div>
Lorsque vous voyez apparaître à l'intérieur des balises HTML des éléments de style, ex
- Code: Tout sélectionner
<div style=""></div>
Vous utilisez ce que l'on appelle des règles de styles en ligne. Et si vous tentez d'utiliser une feuille de style à l'aide de l'éditeur CSS ; les règles de style écrits avec l'éditeur CSS ne fonctionneront pas . Pourquoi ? Ce n'est pas un défaut du logiciel mais une particularité des règles de style qui se nomme
ordre de priorité des styles. Les styles en ligne à l'intérieur d'une balise HTML sont prioritaires sur toutes les autres feuilles de styles y compris celles générées avec l'éditeur.
Donc ce qu'il faut faire. C'est d'abord mettre uniquement la structure HTML. ici un titre, là des images. Et rien d'autre. Ensuite il faut activer l'éditeur CSS puis dire, là pour le titre je veux qu'il soit de couleur bleue et soulignée ; pour les images je voudrais des bordures. Etc.
Voici le fichier html corrigé. Il fonctionne sous nvu et/ou kompozer. J'ai passé tous les styles dans une feuille de style interne. En conséquence j'ai donné des identifiants afin de les repérer plus facilement dans la structure HTML :
- Code: Tout sélectionner
Tout ce qui concerne les titres :
<div id="titre"></div>
Pour tout ce qui concerne les images :
<div id="gifs"></div>
Ce qui donne pour la sturcture HTML (J'en ai profité aussi pour passer en tittre de niveau 2 les chevaliers de bronze) :
- Code: Tout sélectionner
<div id="titre">
<h1>Mes Gifs</h1>
<h2> Les Chevaliers de
Bronzes :<br>
</h2>
<div id="gifs"> <img style="width: 140px; height: 90px;" alt="Seiya"
src="http://saintseiyastory.ovh.org/Mes%20gifs/Seiya.gif"> <img
style="width: 120px; height: 90px;" alt="Seiya 2"
src="http://saintseiyastory.ovh.org/Mes%20gifs/Seiya%202.gif"> </div>
</div>
Et ce qui donne pour le code CSS (le règles de style)
- Code: Tout sélectionner
<style type="text/css">
#titre {
font-weight: bold;
text-align: center;
font-family: Monotype Corsiva;
}
h1 {
text-decoration: underline;
}
h2 {
font-weight: bold;
}
#gifs img {
border: 1px solid black;
margin: 5px;
padding: 3px;
}
</style>
Maintenant voici le code source complet. Tout ce ce que vous avez à faire, c'est de le copier puis de le coller dans un simple éditeur de texte, genre notepad (sous windows). Vous l'enregistrez avec un nom, genre
page_de_test.html. Puis vous ouvrez N|VU ou KompoZer, vous chargez le fichier
page_de_test.html, et, vous activez l'éditeur CSS (touche F11 sous KompoZer), vous sélectionnez une règle de style dans la fenêtre de gauche, puis vous sélectionnez un onglet pour tout modifier comme bon vous semble. Amusez-vous dans un premier temps, histoire de vous familiariser.
onglet : texte = tout ce qui concerne le texte, sa couleur, son alignement, etc ;
onglet : Fond = ajouter des couleurs et/ou des images de fond décoratives ;
onglet : Bordure = décoration des bords ;
onglet : Boîte = mettre les éléments HTML là où on veut, un peu difficile à aborder comme cela ;
onglet : listes = décorer ou non les listes ;
onglet : aural = règles de style pour un logiciel de lecture à haute voix.
Ensuite pour aller un peu plus loin, il y a le forum
N|Vu, KompoZer de geckozone. Vous trouverez de l'aide, des références, des tutoriels complets, des ressources pour tout savoir sur la création de sites, de pages web à l'aide de KompoZer et/ou N|VU.
Bon code !
Oups, j'allais oublier l'essentiel, le code source complet :
- Code: Tout sélectionner
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Mes Gifs</title>
<style type="text/css">
#titre {
font-weight: bold;
text-align: center;
font-family: Monotype Corsiva;
}
h1 {
text-decoration: underline;
}
h2 {
font-weight: bold;
}
#gifs img {
border: 1px solid black;
margin: 5px;
padding: 3px;
}
</style>
</head>
<body>
<div id="titre">
<h1>Mes Gifs</h1>
<h2> Les Chevaliers de
Bronzes :<br>
</h2>
<div id="gifs"> <img style="width: 140px; height: 90px;" alt="Seiya"
src="http://saintseiyastory.ovh.org/Mes%20gifs/Seiya.gif"> <img
style="width: 120px; height: 90px;" alt="Seiya 2"
src="http://saintseiyastory.ovh.org/Mes%20gifs/Seiya%202.gif"> </div>
</div>
</body>
</html>
