en fonction de son contenu

Version imprimable

Bonjour à tous,

Mon site est structuré via HTML et CSS ( <div> ).
Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#conteneur {
   width:900px;
   height:600px;
}
#banniere {
   width:900px;
   height:150px;
   float:none;
}
#centre {
   width:900px;
   height:450px;
   float:none;
}
#centre_gauche {
   background-image:url(image1);
   width:15px;
   height:450px;
   float:left;
}
#centre_centre {
   width:870px;
   height:450px;
   float:left;
}
#centre_droite {
   background-image:url(image2);
   width:15px;
   height:450px;
   float:left;
}

Code:

1
2
3
4
5
6
7
8
9
10
<div id="conteneur">
   <div id="banniere"></div>
   <div id="centre">
       <div id="centre_gauche"></div>
       <div id="centre_centre">
          .Contenu variable.
       </div>
       <div id="center_droite"></div>
   </div>
</div>

Je souahite en fait que le

Code:

1
2
3
<div id="centre_centre">
   .Contenu variable.
</div>

s'agrandisse en fonction de son contenu ( sachant qu'il est variable ), ainsi que les deux div l'entourant ( centre_gauche et centre_droite ) contenant chacun une image.

Comment faire ?

Merci d'avance. ;)

12/12/2006, 17h18
trotters213

:salut:
tu ne fixes aucune taille et ça devrait fonctionner.
12/12/2006, 22h57
hedgehog

Apparemment ca ne marche pas ... :(

Mon texte dépasse et passe au dessus des autres cadres.

Pour info, avec le code fourni, cela fonctionne sous IE.
12/12/2006, 23h31
MasterOfChakhaL
au feeling, je dirais que tu as des marges et/ou des padding par défaut qui se rajoutent à tes divs. Donc la largeur totale de ce que tu mets dans ton div (id=centre) est 870 + 15 + 15 + nn px, nn étant la somme de toute les marges de tes trois div et du padding de ton div qui porte l'id=centre.

essaye de mettre ceci dans ton css:
Code:

1 2 3 4 5 * { margin: 0; padding: 0; }
13/12/2006, 10h16
hedgehog

J'ai testé ta solution mais apparemment ca ne régle pas mon probléme :?
( A quoi correspond * ? )
13/12/2006, 10h30
trotters213
Citation:

Envoyé par hedgehog

A quoi correspond * ?

c'est un selecteur "général", c'est comme si tu disais d'appliquer le style à toutes les balises.

Je viens de voir une erreur :

Code:

<div id="center_droite"></div>

alors que dans ton CSS tu as
Code:

1 2 3 #centre_droite { ... }
13/12/2006, 10h45
hedgehog

Merci ;)

Mais en fait cet exemple n'est pas exactement le même que ma page, j'ai affiché celui-ci qui est une représentation simplifiée pour ne pas afficher trop de code.
13/12/2006, 11h12
trotters213

tu peux utiliser max-width sur ta div du milieu et sont équivalent IE (je te laisse chercher sur le Net, il y en a à foison).

max-height tu veux dire, non ?

J'ai essayé mais toujours le même résultat ...

Je mets la partie du code original concernée, ca facilitera peut etre plus les choses :

CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
...
 
#nouvelles_block_centre {
   width:950px;
   float:none;
}
#nouvelles_centre_gauche {
   background-image:url(images/nouvelles_centre_gauche.jpg);
   width:16px;
   float:left;
}
#nouvelles_centre {
   width:918px;
   float:left;
}
#nouvelles_centre_droite {
   background-image:url(images/nouvelles_centre_droite.jpg);
   width:16px;
   float:left;
}
 
...

HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
...
 
<div id="nouvelles_block_centre">
   <div id="nouvelles_centre_gauche"></div>
   <div id="nouvelles_centre">
      .Contenu Variable.
   </div>
   <div id="nouvelles_centre_droite"></div>
</div>
 
...

En espérant que cela puisse aider :roll:

13/12/2006, 12h17
trotters213

Ah mais c'est la hauteur qui te déranges, je croyais que c'était la largeur.
Bè alors c'est encore pire, je ne vois vraiment pas où est ton problème, tu ne fixes pas de hauteur et puis c'est terminé.
je vois pas où est ton problèlme franchement (j'ai surement pas compris en fait) .

Salut,

De ce que j'ai compris en voyant ton code, ton but est d'avoir un bloc avec des images pour tes bordures verticales.

Si c'est le cas, je pense que tu peux faire beaucoup plus simple:
Code:

1 2 3 4 5 6 <div id="news"> <div class="content"> bla bla bla </div> </div>
et le css:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 * { margin: 0; padding: 0; } #news { background: transparent url(image_de_gauche.gif) top left repeat-y; /* definir les dimensions sur cet élément */ } #news .content { padding: 0 20px; background: transparent url(image_de_droite.gif) top right repeat-y; }
Voilà, si je suis à côté de la plaque, je pense qu'une capture d'écran sera nécessaire à une meilleure compréhension de ton problème (en ce qui me concerne en tout cas...)

14/12/2006, 18h35
hedgehog

Je vais essayer ca et je vous tiens au courant ;)
14/12/2006, 18h57
hedgehog

Ta solution marche à merveille, MasterOfChakhaL.

Je débute dans l'utilisation des <div> et CSS pour la mise en page et je vous remercie de vos conseils ;)

Résolu :D