Bonjour, et merci de ta contribution...je suis un p'tit nouveau sur le forum, et c'est toujours bien de pouvoir compter sur l'aide d'autrui...
Voici mon code htlm pour l'index:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Zenit</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="ie.css"><![endif]-->
<style type="text/css">
<!--
.Style1 {color: #5d5445}
.Style15 {
font-size: 14px;
}
-->
</style>
</head>
<body>
<!-- L'entête de la page, affiché tout en haut de l'écran : -->
<div id="entete">
<h1>Zenit</h1>
<!-- Le menu principal du site, affiché horizontalement, tout en haut de l'écran, juste en dessous de l'entête : -->
<!-- La page en elle-même, cette division sera utile pour styler le site en CSS : -->
<div id="page">
<!-- Le sous-menu, affiché dans une colonne sur la gauche du site : -->
<div id="sous-menu">
<li><a href="index.htm"><strong>PHILOSOPHIE</strong></a></li>
<li><a href="techniques.html"><strong>TECHNIQUES</strong></a></li>
<li><a href="photos.html"><strong>PHOTOS</strong></a></li>
<li><a href="contact.html"><strong>CONTACT</strong></a></li>
</ul>
</div>
<!-- Le contenu utile de la page, affiché sur une grande colonne à droite du site : -->
<div id="contenu">
<h3 class="Style1"> </h3>
<h3 class="Style1">"La zentitude<br>
est une attitude"</h3>
<p class="Style15">Notre leithmotiv est de vous aider à vous sentir mieux, à être en harmonie avec votre corps et votre esprit,<br />
dans une société qui en veut toujours plus; où tout va de plus en plus vite! Vous n'avez pas toujours le temps ou la possibilité de pouvoir vous ressourcer et de faire le vide pour mieux vous accomplir!</p>
<h3><span class="Style1">"La tradition orientale millénaire à votre service</span><span class="Style1">)</span></h3>
<p><span class="Style15">Notre secret exclusif réside dans la connaissance et l'expérience issue des arts martiaux par le travail de la respiration; la connaissance du reiki, art millénaire qui permet l'harmonisation de l'énergie interne; ainsi que l'accupressure et les postures relaxantes venant en appoint pour vous permettre d'être enfin en harmonie avec vous-même!</span></p>
</div>
<!-- Le pied de page, affiché tout en bas de l'écran. Est à l'intérieur du div "page" pour le CSS : -->
<div id="pied">
© ZENIT 2008
<a href="http://alcaponestudio.be">Créé par Alcaponestudio</a>
</div>
</div>
</body>
</html>
/* Voici le css correspondant...*/
/** Page : */
body {
background: #eaeaea url('images/body.png'); /* (grille grise et blanche) */
margin: 20px 30px; /* Donner plus de marge à gauche et à droite, et moins en haut et en bas */
font-family: sans-serif; /* Police moderne, sans empattements, du type Times New Roman */
}
/** En-tête : */
#entete {
height: 237px;
background: #9f9f9f url('images/en-tete.jpg'); /* (grosse barre grise) */
border: 1px solid white; /* Une bordure noire de 1 pixel sur tous les côtés, sauf... */
border-bottom: none; /* ... en bas, pour ne pas faire double-emploi avec la bordure du haut de #page */
}
h1 {
height: 234px; /* La hauteur de l'image de fond entete.png (grosse barre grise) */
line-height: 58px; /* Centrer le texte sur toute la hauteur de l'image de fond */
border-bottom: 0px solid black; /* L'entête est composé de deux parties : h1 et #menu, il faut donc les séparer */
margin: 0; /* Par défaut les navigateurs assignent une marge aux titres. Ici on gère notre propre mise en page */
text-align: center; /* Centrer le texte horizontalement sur toute la largeur de la page */
/* Technique de substitution du texte par une image : */
/*background: url('images/h1.png') 50% 50% no-repeat; /* Cette jolie image, unique et centrée, remplace le texte ennuyeux */
text-indent: -32000px; /* On décale le titre autant que possible sur la gauche de l'écran, pour ne plus le voir */
}
/** Menu principal : */
#menu {
background: black url('images/menu.png'); /* (barre noire, avec un bandeau à rayures noir et orange juste en dessous) */
list-style: none; /* On ne veut plus que les lignes de la liste aient de puces */
margin-left: 413px; /* Aucune marge au dessus et en dessous de la liste (les listes étant normalement utilisées entre des paragraphes) */
padding: 0; /* Aucune indentation des éléments contenus dans la liste (généralement, les listes ont un padding à gauche) */
height: 29px; /* Hauteur de l'image menu.png */
}
#menu li {
float: left; /* Afin que chaque élément de la liste se positionne juste à droite de l'élément précédent, et non en dessous */
margin: 0 2px; /* Espacer horizontalement chaque bouton à l'intérieur du menu */
}
#menu a {
display: block; /* Afin de pouvoir assigner une hauteur au lien (la hauteur étant définir dans la règle "#menu span") */
text-decoration: none; /* Pas de soulignement des liens dans le menu, ils sont déjà identifiables en tant que liens par le visiteur */
color: #a8a191; /* Le texte est orange */
background: url('images/menu-lien.png'); /* Bande noir, mais devenant orange lorsque décalée vers le haut */
cursor: pointer; /* Curseur en forme de main, pour résoudre un bug sous IE, causé lors du changement du lien en affichage bloc, quelques lignes plus haut */
}
#menu span { /* Ce span permet au menu survolé d'avoir un reflet de lumière sur sa droite */
display: block; /* Afin de pouvoir assigner une hauteur à cet élément (voir ci-dessous) */
height: 21px; /* Hauteur de l'image menu-lien.png, divisé par 2 */
line-height: 21px; /* Centrer le texte verticalement sur la barre noire */
padding: 0 10px; /* Espacement intérieur du bouton à gauche et à droite, pour plus d'aération */
background: url('images/menu-lien-droite.png') 100% 0 no-repeat; /* Une seule occurrence de l'image de fond, et aligné tout à droite */
}
#menu a:hover, /* Au survol de la souris */
#menu a:focus, /* Lorsque le lien a le focus, sous Firefox et autres navigateurs */
#menu a:active /* Lorsque le lien a le focus, sous Internet Explorer */
{
color: black; /* Le fond devient orange, donc le texte doit être noir pour être visible */
background-color: #ffb400; /* L'image de fond reste inchangée, mais si l'image n'a pas été chargée, s'assurer qu'il y ait un effet visible */
background-position: 0 -21px; /* =42 (la hauteur de l'image) / 2 : remonte l'image de fond de moitié vers le haut pour révéler sa partie orange */
}
#menu a:hover span, /* Au survol de la souris */
#menu a:focus span, /* Lorsque le lien a le focus, sous Firefox et autres navigateurs */
#menu a:active span /* Lorsque le lien a le focus, sous Internet Explorer */
{
background-position: 100% -21px; /* =42 (la hauteur de l'image) / 2 ; mais toujours aligné à droite */
}
#menu .actuel { /* Indique au visiteur que ce lien est en fait la page actuellement affichée */
font-weight: bold; /* Gras... */
text-decoration: underline; /* ... et souligné */
}
/** Page : */
#page {
background: #99c80a url('images/menu.jpg') repeat-y;
background: ; /* Technique des colonnes factices : le menu de gauche a un fond sur toute la hauteur de la page */
border: 1px solid white; /* Encadrer toute la page par une bordure noire de 1 pixel */
border-top: none;
}
/** Sous-menu : */
#sous-menu {
background: #99c80a url('images/menu.jpg') repeat-y;/* Fond noir si images non chargées, mais il faut remettre l'image de fond de #page */
float: left; /* Colonne de gauche sur la page */
width: 237px; /* Largeur de l'image sous-menu-lien.png */
height: 268px; /* Largeur de l'image sous-menu-lien.png */
list-style: none; /* On ne veut plus que les lignes de la liste aient de puces */
margin: 0; /* Aucune marge au dessus et en dessous de la liste (les listes étant normalement utilisées entre des paragraphes) */
padding: 0; /* Aucune indentation des éléments contenus dans la liste (généralement, les listes ont un padding à gauche) */
}
#sous-menu a {
display: block; /* Afin de pouvoir assigner une hauteur au lien (voir la règle "#menu span") */
height: 22px; /* Hauteur de l'image sous-menu-lien.png, divisé par 2 (car elle représente deux états : normal et survolé) */
line-height: 22px; /* Centrer le texte verticalement sur la ligne */
/*background: url('images/sous-menu-lien.png'); /* Fond du sous-menu, mais devenant orange lorsque l'image est décalée vers le bas */
text-align: left; /* Centrer le texte sur la colonne du sous-menu */
text-decoration: none; /* Pas de soulignement des liens dans le sous-menu, ils sont déjà identifiables en tant que liens par le visiteur */
color: white; /* Le texte est orange */
padding-right: 40px;
padding-left: 80px;
padding-top: 35px;
margin: 0px 0; /* Espacer verticalement chaque bouton à l'intérieur du sous-menu */
}
#sous-menu a:hover, /* Au survol de la souris */
#sous-menu a:focus, /* Lorsque le lien a le focus, sous Firefox et autres navigateurs */
#sous-menu a:active /* Lorsque le lien a le focus, sous Internet Explorer */
{
color: white; /* Le fond devient orange, donc le texte doit être noir pour être visible */
/*background-color: #a59b8d; /* L'image de fond reste inchangée, mais si l'image n'a pas été chargée, s'assurer qu'il y ait un effet visible */
background-position: 0 -22px; /* =44 (la hauteur de l'image) / 2 : remonte l'image de fond de moitié vers le haut pour révéler sa partie orange */
}
#sous-menu .actuel { /* Indique au visiteur que ce lien est en fait la page actuellement affichée */
font-weight: bold; /* Gras... */
text-decoration: underline; /* ... et souligné */
}
/** Contenu : */
#contenu {
background: url('images/contenu.jpg') no-repeat;
background-position: top;
margin-left:237px;
padding-left:200px;
padding-right:35px;
}
p {
text-align: justify; /* Un long texte justifié est plus agréable à l'œil */
color: white;
}
#contenu h2
{
height: 20px;
/*background-image: url("images/titre.png");*/
background-repeat: no-repeat;
background-color: #5d5445;
padding-left: 100px;
padding-bottom: 7px;
padding-top: 2px;
color:white;
text-align: left;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
font-weight:12px;
}
p > img {
float: right;
}
p > img1 {
float: right;
}
/** Pied : */
#pied {
clear: both; /* Si le menu de gauche est plus haut que le contenu de la page, s'assurer de positionner le pied juste en dessous du menu */
/*border-top: 0px solid white; /* Séparer le pied du contenu de la page */
background: #9f9f9f url('images/footer.jpg'); /* (bandeau à rayures noir et orange, avec une barre grise juste en dessous) */
font-size: 12px; /* Un peut moins que les 19 pixels de line-height */
padding-top: 9px; /* = 8 (la hauteur de la partie hachurée noir / orange) + 1 (bordure noire) */
height: 96px; /* = 47 (hauteur de pied.png) - 9 (le padding-top que l'on vient de définir ci-dessus) */
line-height: 96px; /* = 38 (hauteur définie ci-dessus) / 2 (on veut deux lignes de texte dans le pied de page) */
text-align: center; /* Center le texte horizontalement sur tout le pied de page */
color: #444444; /* Texte gris foncé, se fondant avec le fond gris clair : moins lisible, car ce paragraphe est moins important */
/*border: 0px solid white; /* Encadrer toute la page par une bordure noire de 1 pixel */
}
#pied a {
color: black; /* Les liens du pied de page doivent ressortir du reste du pied de page. C'est chose faite avec des liens noirs */
}
fieldset
{
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px; /* Une marge pour séparer les fieldset */
border: 0px #fff;
padding-top: 0px;
padding-left: 0px;
padding-right: 10px;
}
input, textarea
{
font-family: Arial, "Arial Black";
}
label
{
color: #5e5345; /* Colorer en bleu tous les labels (bah oui, pourquoi pas en bleu ?) */
}
legend /* On met un peu plus en valeur les titres des fieldset */
{
font-family: Arial, "Arial Black";
color: #fff;
font-weight: bold;
}
/** Impression : */
@media print {
#menu, #sous-menu { /* Les menus et sous-menus ne servent à rien sur une feuille */
display: none; /* (en effet, on ne peut malheureusement pas les cliquer, c'est assez ballot !) */
}
body {
background: none; /* Enlever l'image de fond en forme de "grille" (au cas où le visiteur ai activé l'impression des images de fond) */
}
h1 {
background-image: none; /* On remet le texte à la place de l'image, car par défaut, les images de fond ne sont pas imprimées */
text-indent: 0; /* Annule la technique de remplacement de texte par une image, le texte redevient visible */
}
#page {
background: none; /* Enlever l'image de fond simulant le sous-menu de gauche, car on a caché ce sous-menu */
border: none; /* Ne plus entourer le contenu avec une bordure noire. Cela est moche sur une page imprimée, */
} /* et il n'y a plus besoin de séparation car on a enlevé l'image de fond en forme de grille */
#contenu {
margin: 0; /* Ne plus faire de place pour le menu de gauche, qui est supprimé */
} /* De plus, les 10px de marge ne sont plus nécessaire car on a enlevé les bordures de la page, */
/* et les feuilles imprimées ont déjà une marge */
#pied {
border: 1px solid black; /* Les bordures bas, droite et gauche étaient réalisées par la bordure de la page */
} /* Hors, on l'a enlevée la bordure de la page. Entourer tout le pied par une nouvelle bordure */
}
Voilà j'espère que cela peut te permettre d'y voir plus clair.
all html : Le portail des webmaster
Message publié le dimanche 21 septembre 2008 à 17 h 44 par renaudczerwiec. 
Message publié le dimanche 21 septembre 2008 à 18 h 09 par AdrienVH. L'informatique à portée de tous ! Une douce utopie ? Non... Un principe... /// http://www.adam-photographie.com