Css qui 'pousse'

[Siddartha]

Bonjour,

Dans cet exemple d'Alsacréation :

http://www.alsacreations.com/articles/modeles/g_fixe.htm

Sauriez comment faire pour que la hauteur de la colonne menu 'pousse' également le contenu ?

Je souhaitairais que quelque soit la hauteur du contenu de menu ou de la partie centrale, les css correspondantes permettent de mettre le footer aprés le calque qui a la hauteur la plus large (menu ou partie centrale).

Merci pour votre aide !

[Loupilo]

Si j'ai compris ta question, il te suffit d'ajouter clear:both; aux propriétés de ton footer : le calque se placera de manière à ne pas empiéter sur les autres, quelque soit leur hauteur...

Loupilo.

[Siddartha]

Hello Loupilo,

Le problème est plus complexe, j'ai un menu à gauche qui doit faire environ 600/700 px de hauteur avec le contenu que j'y ai mis, et la partie centrale contient à peine pour 200px de hauteur de contenu.

Le footer est ok, mais mon menu qui est en position absolute sort du cadre du conteneur global. J'ai essayé de mettre aussi du coup un clear:both; dans le css de la partie centrale, mais non

[ElMoustiko]

Ca ne sera pas possible avec la technique utilisée sur alsacreations.

Pour faire ce que tu veux, il faut utiliser le positionement flottant (que *je* trouve bien plus souple et efficace que le positionment absolu pour la mise en page)

Le principe général :

<div id="conteneur">
  <h1>Titre de la page</h1>
  <div id="menu">
    <h2>Titre de la rubrique</h2>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>

    <h2>Titre de la rubrique</h2>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  </div>

  <div id="contenu">
    <h2>Titre de la page</h2>
    <p>Ton contenu</p>
  </div>
  <p id="footer">Pied de page</p>
</div>

Voilà pour la structure HTML, qui doit être sensiblement identique sur alsacreations.

Ensuite pour le principe du code CSS, tu met les 2 parties menu et contenu en flottant (avec float: left elles se mettent ainsi en colone, et ensuite, tu applique la propriété clear: both; au pied de page pour le faire passer sous les éléments flottant.

Et voilà, ensuite si tu veux avoir un effet d'extension du fond identique pour le menu et le contenu, tu appliques une image de fond au conteneur avec la technique des fausses colones expliquée ici :

http://www.alistapart.com/articles/fauxcolumns/

Wala pour l'idée générale

-edit- en réponse à Loupilo, le clear: both; n'a d'utilité que pour les élément en float le précédent, pas pour le positionement absolu

[Siddartha]

Hello ElMoustiko,

La solution avec le float:left; semble bien fonctionner pour me créer les deux colonnes (comme l'ancienne d'ailleurs, mais j'ai plus de liberté on dirait pour positionner les élements).

Seul souci, l'affichage est différent avec entre ie et firefox ..

Je travaille en plus de mes calques de positionnement avec le css d'invision power board par défaut qui pourtant lui passe sur les deux. Je vais vérifier mes classes.

[ElMoustiko]

Pour la différence avec IE, ça vient peut être des marges utilisées ? IE double les marges sur les float va savoir pourquoi

Une solution parmi d'autre :

margin: VALEUR FIREFOX !important;
margin: VALEUR IE;

Mais c'est pas sûr que ça vienne de là, je te dis ça un peu à l'aveugle

[Loupilo]

Effectivement, j'avais pas vu le position:absolute

La différence avec IE peut venir de margin et de padding.

J'utilise toujours le * {margin:0;padding:0;} en début de CSS.

Certes, il faut redéfinir les marges ultérieurement pour les élements qui en ont besoin, mais cela élimine une grande partie des différences IE/FF/OP...

Quelle(s) différence(s) vois-tu ?

[Siddartha]

Génial, merci pour vos conseils, j'ai réussi à tout placer comme il faut avec des float:left.

Me reste plus qu'un petit probleme de centrage du calque global qui devrait se solutionner rapidement.

thx !

[Loupilo]

Me reste plus qu'un petit probleme de centrage du calque global qui devrait se solutionner rapidement.

<{POST_SNAPBACK}>

Il faut que tu spécifie une largeur déterminée à ce calque (width) et que tu lui appliques ensuite les propriétés margin-left:auto;margin-right:auto; en ayant au préalable attribué un text-align:center; au body (pour que ça fonctionne avec IE).

Pour annuler le text-align:center sur les autres calques, tu peux soit spécifier à chacun de ces calques text-align:right; soit transformer ta balise <body> en <body id="page"> et, en dessous de la règle de centrage du body, appliquer un text-align:right à #page.

a+

Loupilo.