retour

MODIFIER L'ASPECT DES PAGES AVEC CSS

Rappel

nous avons ces pages créées par XnView

elles se trouvent dans le répertoire 'galerie'

xnview nous a généré une page comme ça nous allons modifier ces pages pour arriver à ça

ATTENTION SI VOUS AVEZ UNE VERSION RECENTE DU LOGICIEL !
la méthode n'est plus la même avec la dernière version d'XnView (v 1.82.2)
elle créé une feuille de style externe, ya plus qu'à la modifier à souhait :

la manip en 2 phases

copier le code

/* ASPECTS VISUELS DES LIENS HYPERTEXTE*/
a  { font-weight: bold;
  text-decoration: none;
  color: #222222;
  }
a:link  {  font-weight: bold;
  text-decoration: none;
  color: #222222;
  }
a:visited  {  font-weight: bold;
  text-decoration: none;
  color: #222222;
  }
a:hover  {  font-weight: bold;
  text-decoration: underline;
  color: #444444;
  }
a:active  {  font-weight: bold;
  text-decoration: none;
  color: #444444;
  }

/* PAGE */
body  {  background-color: #C8C0AC;
  background-image: url(bg.jpg);
  font-size: 12px;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
  color: #555500;
  margin: 20px;
  text-align: center;
  }
h1  {
  font-size: 16px;
  font-weight: bold;
  color: #006600;
  border-style: solid;
  border-color: #FFFFAA;
  border-width: 0px;
  border-bottom-width: 2px;
  }
i  {
  padding: 10px;
  font-size:10px;
  border-style: solid;
  border-color: #FFFFAA;
  border-width: 0px;
  border-top-width: 2px;
  }
table  {
  padding: 2px;
  border-width: 0px;
  font-size: 12px;
  margin: 0px;
  margin-bottom: 8px;
  }
td  {
  vertical-align:middle;
  border-style: solid;
  border-color:#F8F7DC;
  border-bottom-color:#A8A78C;
  border-left-color:#A8A78C;
  border-width:1px;
  text-align: center;
  padding: 10px;
  }
img  {
  vertical-align: middle;
  margin-right: 10px;
  }

modifier les pages

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
    <meta name="GENERATOR" content="XnView v1.74">
    <title>Galerie photos</title>

<link rel='stylesheet' type='text/css' href='./web_by_xnview.css'>

</head>
<BODY>
...