Un block qui suit la longueur d'un autre?

Bonjour,
Désolé pour le mauvais titre..
Je commence un site web sur les detecteurs de fumee:
J'ai un menu contenu dans un div et un block central lui aussi contenu dans un div.
J'aimerais que le block du menu puisse descendre aussi bas que le block central. Comment peut on faire ca ?
Le site afin de mieux comprendre : http://www.detecteurdefumee.eu

Merci pour votre aide
Modifié par Cygnus (04 Sep 2008 - 12:10)

Bonjour

Utilise l'option recherche avec les mots clés "colonne factice".

j'ai cherché mais je ne trouve pas vraiment de solution au problème.
L'un parlait de créé un block avec l image en background et de le faire repeter mais ca marche pas

conclusion : le tableau et sans prise de tete lol

rica a écrit :
L'un parlait de créé un block avec l image en background et de le faire repeter mais ca marche pas

Si si, ça marche.

Du coup j'ai besoin d'aide alors.. voila le code de mon menu

<table cellspacing="5" id="menu">
  <tr>
    <td class="texte-menu"><a href="http://www.detecteurdefumee.eu">Detecteurdefumee.eu</a></td>
  </tr>
  <tr>
    <td class="texte-menu"><hr />      D&eacute;tecteurs de fum&eacute;e Kidde 
      <hr /></td>
  </tr>
  <tr>
    <td class="texte-sous-menu">D&eacute;tecteur de fum&eacute;e Kidde 29-FR </td>
  </tr>
  <tr>
    <td class="texte-sous-menu">D&eacute;tecteur de fum&eacute;e Kidde 29H-FR</td>
  </tr>
  <tr>
    <td class="texte-sous-menu">D&eacute;tecteur de fum&eacute;e Kidde 29LD-FR</td>
  </tr>
  <tr>
    <td class="texte-sous-menu">D&eacute;tecteur de fum&eacute;e Kidde 29HLD-FR</td>
  </tr>
  <tr>
    <td class="texte-menu"><hr />      D&eacute;tecteur de fum&eacute;e EI-Electronics 
      <hr /></td>
  </tr>
</table>

Et voila le code css pour le menu

#menu {
	 width:220px;
	 border:0;
	 background-color:#B4E9C7;
	 position:absolute;
     left: 50%; 
	 top:140px;
     margin-left: -490px;

J'ai aussi réalisé une image de 220px de large sur 1px de haut nommée fond-menu.gif mais quand j'essaie de la mettre ca reste cantoné au contenu et ca ne va pas plus bas

rica a écrit :
J'ai aussi réalisé une image de 220px de large sur 1px de haut nommée fond-menu.gif mais quand j'essaie de la mettre ca reste cantoné au contenu et ca ne va pas plus bas

C'est normal, il ne faut pas l'appliquer au menu mais à son conteneur (qui n'existe pas dans ta page actuelle, je crois, vu que ton menu est un enfant direct de BODY).

Je crois que tu n'as pas saisi le principe de la technique des colonnes factices. Quel article ou tutoriel as-tu suivi pour tes essais?

je l ai appliqué à l'id du tableau de menu... c'est pas comme ca quil faut faire?
j ai lu un article et j suis tombé sur un site qui dit comment faire, faut que je retroue l'article

http://www.pompage.net/pompe/colonnesfactices/
celui la, j ai applique la meme chose mais ca ne fonctionne pas chez moi

Pourrais-tu nous montrer ton essaie de code avec les colonnes factices ?

Oui
Le tableau à un id

voila le css

#menu {
	 width:220px;
	 border:0;
	 background-image:url(images/detecteur-de-fumee-menu.gif);
	 background-repeat:repeat-y;
	 position:absolute;
     left: 50%; 
	 top:140px;
     margin-left: -490px;
} 

rica a écrit :
je l ai appliqué à l'id du tableau de menu... c'est pas comme ca quil faut faire?

Non.

Si tu appliques un fond rouge (ou autre couleur unie bien voyante) à ton menu, tu t'apercevras que ce menu ne prend que la hauteur de son contenu, ce qui est parfaitement normal. Par conséquent, ce n'est pas en ajoutant une image de fond en repeat-y à ce bloc qu'il va s'étendre pour prendre toute la hauteur que tu souhaites, comme par magie.

La technique des colonnes factices est une technique de type «trompe l'oeil», qui fait croire à des colonnes de même hauteur alors qu'on a deux blocs séparés prenant chacun la hauteur de leur contenu respectif, et pas plus.

Le principe est d'avoir un conteneur pour les deux colonnes:

<div id="conteneur">
	<div id="colonne-1"></div>
	<div id="colonne-2"></div>
</div><!-- #conteneur -->

Ensuite, tu appliques à div#conteneur une image de fond qui prendra toute la largeur de ce bloc, en repeat-y, et qui dessinera les colonnes.

Si tu utilises des blocs flottants pour #colonne-1 et #colonne-2 (ce qui sera probablement le cas), il faudra faire attention au dépassement des flottants.

Donc au final on aura sans doute un code CSS comme suit:

#conteneur {
	width: 100%; /* ou autre largeur (nécessaire pour IE6) */
	overflow: hidden; /* empêche le dépassement des flottants */
	background: url(img/colonnes.png) repeat-y;
}
#colonne-1 {
	float: left;
	width: 200px;
}
#colonne-2 {
	margin-left: 220px;
}

(Ce n'est bien sûr qu'un exemple et ça ne correspond pas forcément à ton design.)

merci je vais essayer

j suis desolee mais je n'y arrive pas ..
mon code css

#global-menu {
	 width: 100%; 
	 overflow: hidden; 
	 background-image:url(images/detecteur-de-fumee-menu.gif);
	 background-repeat:repeat-y;
}

#menu {
	 width:220px;
	 border:0;
	/* background-color:#B4E9C7;*/
	 position:absolute;
     left: 50%; 
	 top:140px;
     margin-left: -490px;
}  

#menu-bas {
}

et le code du menu

<div id="global-menu">
<table cellspacing="5" id="menu">
  <tr>
    <td class="texte-menu"><a href="http://www.detecteurdefumee.eu">Detecteurdefumee.eu</a></td>
  </tr>
  <tr>
    <td class="texte-menu"><hr />      D&eacute;tecteurs de fum&eacute;e Kidde 
      <hr /></td>
  </tr>
  <tr>
    <td class="texte-sous-menu">D&eacute;tecteur de fum&eacute;e Kidde 29-FR </td>
  </tr>
  <tr>
    <td class="texte-sous-menu">D&eacute;tecteur de fum&eacute;e Kidde 29H-FR</td>
  </tr>
  <tr>
    <td class="texte-sous-menu">D&eacute;tecteur de fum&eacute;e Kidde 29LD-FR</td>
  </tr>
  <tr>
    <td class="texte-sous-menu">D&eacute;tecteur de fum&eacute;e Kidde 29HLD-FR</td>
  </tr>
  <tr>
    <td class="texte-menu"><hr />      D&eacute;tecteur de fum&eacute;e EI-Electronics 
      <hr /></td>
  </tr>
</table>
<div id="menu-bas"></div>
</div>

arf, j suis vraiment nulle sorry

rica a écrit :
arf, j suis vraiment nulle sorry

Je pense surtout que tu as de grosses lacunes en CSS et en techniques de mise en page. Si jamais tu n'es pas à l'aise sur les notions de bases, il est toujours possible de réviser.

Le problème que tu as, c'est que tu tentes de corriger ton code en appliquant directement des portions de code qui sont à ta disposition (celles dans l'article sur les colonnes factices ou celle que je te propose dans mon message précédent), sans avoir compris comment fonctionnent ces codes! Donc, forcément, ce que tu tentes a peu de chance de réussir.

Par exemple, en lisant le code que j'ai proposé ci-dessus, avais-tu compris que #colonne-1 et #colonne-2 sont deux blocs placés côte à côte (par exemple un menu à gauche et un contenu principal à droite)? Il semblerait que non. Pourtant, en lisant ce code, ça devrait t'apparaitre clairement. Si ça n'est pas le cas, la démarche à suivre est de créer une page de test pour tester ce que donne le code proposé, afin de le comprendre par l'expérience.

Ou encore: le fait que ton image de fond se nomme "detecteur-de-fumee-menu.gif" montre que tu n'as pas compris le principe de la technique des colonnes factices.

Je te propose un exercice pratique:
1. aller sur le site pompage.net, par exemple sur la liste des articles;
2. rechercher sur quel est l'élément de la page qui a pour image de fond une image nommée "decodroite.gif" (les rayures de la colonne de droite, qui se répètent en hauteur).
Ce cas particulier (l'utilisation de cette image "decodroite.gif" dans le design de pompage.net) est un exemple d'utilisation de la technique des colonnes factices.

Je te remercie, mais effectivement ma connaissance css se limite à des choses bebetes.
je pense que je vais retourner aux tableaux, c'est 100000000 fois plus simple, et honnetement je ne vois meme pas l internet de le faire full css.. mais c petre parce que je n y comprends pas grand chose

a écrit :
je pense que je vais retourner aux tableaux, c'est 100000000 fois plus simple, et honnetement je ne vois meme pas l internet de le faire full css.. mais c petre parce que je n y comprends pas grand chose

Ne pas se décourager c'est toujours compliqué l'apprentissage ...

L'intérêt d'utiliser cette technologie (entre autres) :
- facilite la maintenance ;
- apporte une souplesse et une certaine flexibilité (évolutions futures) ;
- adaptée aux différents modes de navigation de tes visiteurs.

Bref persévère ...

Bonne continuation.
Romain

<edit>Et non les tableaux ne sont pas plus "simples" que les CSS ... </edit>
Modifié par yodaswii (22 Aug 2008 - 22:06)