Génial Kompozer et ses tutos ! Ca fait un moment que je joue à faire des sites (pas avec Kompozer) sans y comprendre grand-chose et là, je commence à piger la logique du html et la force des feuilles de styles. J'ai encore beaucoup de chemin à faire mais j'ai l'impression d'avoir fait des pas de géant en quelques jours grâce à Kompozer. Merci
Voici mon souci : j'ai créé une page qui servira de modèle aux autres pages du site que je construis. Pour ma feuille de style et notamment la division de la page en bloc <div>, j'ai suivi les instructions des tutoriels. Presque tout a super bien marché sauf un truc.
Voici l'aperçu de ma page (thumbnail) :
Je voudrais que le bloc <div> de gauche (appelé "menuleft") descende jusqu'au bord inférieur du bloc contenant le texte ("corps"). En effet, "menuleft" a son propre fond (qui se répète verticalement). Il faudrait qu'il descende jusqu'en bas bien qu'il ne contient que 2 lignes.
De plus, sur chaque page, sa hauteur sera différente, en fonction de la hauteur du bloc "corps".
Y a-t-il une commande, un moyen pour faire çà ?
Voici le fichier css de ma feuille de style :
Code : Tout sélectionner
body {
background-image: url('Images/bgsitegrisdegradevertical.jpg');
background-repeat: repeat-y;
background-position: center top;
color: #333333;
text-align: justify;
font-family: Arial;
font-size: 12px;
width: 840px;
margin-right: auto;
margin-left: auto
}
h1 {
font-family: Arial;
font-size: x-large;
color: #00779f;
font-weight: bold;
}
h2 {
font-family: Arial;
font-size: medium;
color: #00779f;
font-weight: bold;
}
a:link {
color: #1355b9;
}
a:hover {
text-decoration: none;
color: #1355b9;
}
a:visited {
color: #1355b9;
}
#banniere {
}
#menutop {
background-color: white;
}
#menuleft {
float: left;
background-image: url('Images/MenuLeft/BGMenuLeft.jpg');
background-repeat: repeat-x;
width: 161px;
font-size: x-small;
line-height: 10px;
padding-left: 12px;
padding-top: 12px
}
#corps {Code : Tout sélectionner
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>pagebruyeresmodele1</title>
<style type="text/css"></style>
<link media="all" rel="stylesheet" href="feuilledestylebruyeres.css"
type="text/css">
</head>
<body
style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);"
alink="#000088" link="#1355b9" vlink="#5390ed">
<div id="banniere"><img style="width: 840px; height: 182px;"
alt="banniere" src="Images/bannierebruyerescurlup.png" align="top"></div>
<div id="menutop"><a href="index.html"><img
onmouseover="javascript:this.src='Images/MenuTop/BoutonAccueilOver.jpg'"
style="border: 0px solid ; width: 96px; height: 30px;"
onmouseout="javascript:this.src='Images/MenuTop/BoutonAccueil.jpg'"
alt="bouton_accueil" src="Images/MenuTop/BoutonAccueil.jpg" align="top"></a><a
title="Bref historique / L'équipe / L'ASBL" href="Qui_sommes_nous.html"><img
onmouseover="javascript:this.src='Images/MenuTop/BoutonQuisommesnousOver.jpg'"
onmouseout="javascript:this.src='Images/MenuTop/BoutonQuisommesnous.jpg'"
style="border: 0px solid ; width: 211px; height: 30px;"
alt="bouton_quisommesnous" src="Images/MenuTop/BoutonQuisommesnous.jpg"
align="top"></a><a
title="Mission générale & public-cible / Mandat / Procédure d'admission / Action éducative / Fin de mandat / Evaluation continue & formative"
href="Projet_pedagogique.html"><img
onmouseover="javascript:this.src='Images/MenuTop/BoutonProjetpedaOver.jpg'"
onmouseout="javascript:this.src='Images/MenuTop/BoutonProjetpeda.jpg'"
style="border: 0px solid ; width: 215px; height: 30px;"
alt="bouton_projetpeda" src="Images/MenuTop/BoutonProjetpeda.jpg"
align="top"></a><a title="Contact / Accès" href="Infos_pratiques.html"><img
onmouseover="javascript:this.src='Images/MenuTop/BoutonInfospratiquesOver.jpg'"
onmouseout="javascript:this.src='Images/MenuTop/BoutonInfospratiques.jpg'"
style="border: 0px solid ; width: 184px; height: 30px;"
alt="bouton_infospratiques"
src="Images/MenuTop/BoutonInfospratiques.jpg" align="top"></a><a
title="Documents téléchargeables / Liens utiles" href="Ressources.html"><img
onmouseover="javascript:this.src='Images/MenuTop/BoutonRessourcesOver.jpg'"
onmouseout="javascript:this.src='Images/MenuTop/BoutonRessources.jpg'"
style="border: 0px solid ; width: 133px; height: 30px;"
alt="bouton_ressources" src="Images/MenuTop/BoutonRessources.jpg"
align="top"></a></div>
<div id="menuleft"><br>
<a title="Mises à jour du site" href="Mieses_a_jour.html">Mises
à jour</a>
<br>
<br>
<a title="Outils et images utilisés pour créer le site"
href="Credits.html">Crédits</a><br>
</div>
<div id="corps">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Mauris aliquet malesuada luctus. Nunc interdum, massa nec
lobortis venenatis, orci dui tincidunt magna, id egestas metus metus
non velit. Aenean sit amet aliquet dolor. Mauris ornare lectus vel nibh
ullamcorper nec consequat nisl varius. Duis sed scelerisque diam.
Aenean vestibulum convallis arcu, non gravida ipsum egestas nec. Duis
vestibulum pellentesque leo in vulputate. Nam ligula nulla, ultrices eu
facilisis id, auctor porttitor sem. Vestibulum auctor ultrices nulla,
at facilisis risus rhoncus ullamcorper. Donec nulla elit, luctus ac
fermentum ut, interdum id lorem. Etiam gravida vestibulum turpis at
sollicitudin.<br>
</div>
<div id="pied">Web design : <a style="font-weight: bold;"
href="http://www.ajwan.net/" target="_blank">atelier AJWAN</a>
l Créé avec <a
href="http://kompozer.net/" target="_blank"><img
style="border: 0px solid ; width: 80px; height: 15px;"
src="http://kompozer.sourceforge.net/images/kompozer_80x15.png"
alt="Document made with KompoZer" align="top"></a></div>
<span style="text-decoration: underline;"></span>
</body>
</html>
Si quelqu'un a une solution, ce serait super...
(et pas très rassurant pour la suite du travail...)
