Discussion :

[hedgehog]

Bonjour à tous,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[trotters213]

tu ne fixes aucune taille et ça devrait fonctionner.

[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.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
* {
  margin: 0;
  padding: 0;
}

[hedgehog]

J'ai testé ta solution mais apparemment ca ne régle pas mon probléme
( A quoi correspond * ? )

[trotters213]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

alors que dans ton CSS tu as

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#centre_droite {
...
}

[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.

[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).

[hedgehog]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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) .

[MasterOfChakhaL]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div id="news">
  <div class="content">
    bla bla bla
  </div>
</div>

et le css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...)

[hedgehog]

Je vais essayer ca et je vous tiens au courant

[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