Geckozone

Bonjour,
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 {

Et au cas où ce serait utile, le code de ma page :

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
l&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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>

J'espère que ma question est claire.
Si quelqu'un a une solution, ce serait super...

Bonjour,
Tu pourrais essayer l'astuce des colonne factices.
http://www.pompage.net/traduction/colonnesfactices
http://www.alsacreations.com/static/gab ... ele11.html

Super, les colonnes factices. J'ai essayé, ça marche. Par la même occasion, je viens d'apprendre qu'on pouvait imbriquer des <div> les unes dans les autres (je n'y avais pas pensé LOL)
Merci beaucoup Gagea

Par contre, j'ai un autre souci. J'ai déjà eu ça hier en travaillant avec ma feuille de style mais aujourd'hui, c'est tout le temps.
A certains moments, quand j'apporte une modif à un des id. dans la fenêtre css (par exemple changer les marges de la boite, la couleur de fond...), tout à coup, il me supprime tous mes règles concernant les id. de ma feuille de style. C-à-d que dans la colonne de gauche de la fenêtre css, il ne me reste que body et les h1, h2, etc qui eux restent intacts. Mais plus aucun id. Et évidemment, ma page ne ressemble plus à rien... Il faut alors que je recrée chaque règle manuellement !!!

Ce qui ma paraît très BIZARRE, c'est que quand j'ouvre le fichier css de ma feuille de style (ce matin c'est "feuilledestyleessai.css" mais hier, j'ai eu la même chose avec une autre, sur un autre groupe de pages) à partir de mon explorateur windows, toutes les id. sont bien dedans avec toutes leurs caractéristiques.

Code : Tout sélectionner

*|body {
  background-image: url('Images/bgsitegrisdegradevertical.jpg');
  background-repeat: repeat-y;
  background-position: center top;
  width: 840px;
  margin-right: auto;
  margin-left: auto
}
*|#banniere {
}
*|#menutop {
}
*|#global {
  background-color: white;
  background-image: url('Images/MenuLeft/BGMenuLeft.jpg');
  background-repeat: repeat-y
}
*|#menuleft {
  padding-left: 12px;
  width: 161px;
  padding-top: 12px;
  float: left;
}
*|#corps {
  margin-left: 173px;
  padding-top: 12px;
  padding-right: 12px;
}
*|#corpsbas {
  margin-left: 173px;
}
*|#pied {
  clear: left;
  width: 640px;
  background-color: white;
  margin-right: auto;
  margin-left: auto;
  margin-top: 12px;
  font-size: x-small;
  text-align: center;
}

Et dans la partie HEAD de la source de mes pages, l'url de ce fichier css est bien là.

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Essai</title>
<link rel="stylesheet" href="feuilledestyleessai.css" type="text/css">
</head>
<body>
<div id="banniere"><img style="width: 840px; height: 182px;"
alt="banniere" src="Images/bannierebruyerescurlup.png" align="top"></div>
<div id="menutop">menutop</div>
<div id="global">
<div id="menuleft">menuleft<br>
<br>
</div>
<div id="corps">corps<br>
</div>
<div id="corpsbas">corpsbas<br>
</div>
</div>
<div id="pied">pied<br>
</div>
<br>
<br>
</body>
</html>

J'ai essayé de fermer la page sans sauver et de la rouvrir. Pareil, plus aucun id. dans ma feuille de style. J'ai fermé le programme et l'ai relancé puis rouvert mes pages. J'ai même redémarré windows. Toujours pareil.
Il me semble que ça ressemble à un bug... Ou bien c'est moi qui fais une fausse manoeuvre ? En tout cas, ça m'est arrivé plusieurs fois ce matin et c'est vraiment ennuyeux.

(et pas très rassurant pour la suite du travail...)
Si qu'lqu'un a une idée...

Bonjour,

Il s'agit du fameux bogue des |*
Le logiciel capricieux place des |* devant les règles de styles.
Tu as quelle version de KompoZer? Il me semble que sur la dernière version, le problème est réglé (sous toutes réserves). Personnellement, je ne le rencontre pas.
Normalement, en fermant et rouvrant KompoZer, le problème disparait.

J'ai la version 0.8b3 (20100301). Je l'ai téléchargée il y a quelques jours à partir du site officiel donc j'imagine que c'est la dernière (?) Sinon, merci de me dire où je peux trouver la dernière version.

Normalement, en fermant et rouvrant KompoZer, le problème disparait.

Tu veux dire que quand je vois les l devant les id. dans la fenêtre css, je devrais fermer et rouvrir Kompozer et après, ils auront disparu ? Quand je verrai encore ça, j'essayerai ça, avant que ça ne me bousille tout à nouveau.

Merci Chinon
Fran

Bonjour fran330
Je confirme : les "|" apparaissent parfois dans les feuilles de style. A ce momemnt, tout est "bizarre. Il faut fermer Kompozer et tout redevient normal. Je constate souvent cet évènement si j'interviens, dans Kompozer, dans le code source de la page. Quand on connaît le "bug", on y pense dès que l'interprétation de la feuille de style ne se fait plus. C'est un peu gênant, mais facilement maîtrisable.
Bonne continuation

Merci Infomamy. Au moins on sait comment éviter le problème (fermer/rouvrir programme) avant que ça ne crashe tout un travail.

Aux auteurs de tutos, ça vaudrait la peine de prévenir de ce bug dans les tutos. Ca éviterait beaucoup de temps perdu.

bonsoir

"Tu as quelle version de KompoZer? Il me semble que sur la dernière version, le problème est réglé (sous toutes réserves). Personnellement, je ne le rencontre pas."

le problémes est toujours existant...et reproductible, donc bogue ultra connu.
Dés qu'on modifie quelque chose dans la source, et qu'on va voir dans une de ses CSS, on se ramasse les " |: "etc.

solution :
quand on bricole dans la source passer par un éditeur externe Notepad++ par exemple.
c'est vrai que c'est dommage...mais d'autre part ça permet de mettre les mains dans le cambouis de HTML

mais que fait Kaze ????

Pour ma part je me sers de la version 0.8b3 depuis quelques jours seulement; je l'ai téléchargée et installé sur ma nouvelle configuration Windows Seven.
J'ai constaté quelques bugs que je n'avais jamais vus avec la 0.7.10 sous XP, comme l'ajout de br dans les liens du menu, le menu déroulant Corps de texte bloqué. Je vais essayer de persévérer...

Bonjour Gagea

comme l'ajout de br dans les liens du menu, le menu déroulant

Hélas ! C'est aussi un bug connu qui a été évoqué dans ce forum. La solution est d'Intégrer ce menu dans un éditeur de texte comme Notepad++ ou autre et surtout ne pas rouvrir la page avec Kompozer.
Malgré ces bugs, Kompozer reste un logiciel bien utile !
Bonne soirée

Faudra que je creuse vos histoires de notepad++ au besoin parce que j'y comprends rien...

Bonjour Fran330
Il y a ce tuto, si tu veux
Bonne journée

Merci beaucoup, Infomamy. Je n'ai encore fait que le survoler mais ça m'a l'air bien expliqué et je commence à comprendre l'utilité de ce genre d'outil.

Au fait je voulais dire merci pour l'encouragement à utiliser notepad++. C'est incroyable comme ça aide à visuellement structurer le travail. Super !

Geckozone

Souci stucture de page avec blocs <div>

Souci stucture de page avec blocs <div>

Re: Souci stucture de page avec blocs <div>

Re: Souci stucture de page avec blocs <div>

Re: Souci stucture de page avec blocs <div>

Re: Souci stucture de page avec blocs <div>

Re: Souci stucture de page avec blocs <div>

Re: Souci stucture de page avec blocs <div>

Re: Souci stucture de page avec blocs <div>

Re: Souci stucture de page avec blocs <div>

Re: Souci stucture de page avec blocs <div>

Re: Souci stucture de page avec blocs <div>

Re: Souci stucture de page avec blocs <div>

Re: Souci stucture de page avec blocs <div>

Re: Souci stucture de page avec blocs <div>

Re: Souci stucture de page avec blocs <div>