[CSS] Bloc qui ne s'agrandit pas

Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Entraide Développement Développement Langage PHP [CSS] Bloc qui ne s'agrandit pas

1 réponse

Rémi Héluin

26/12/2003 à 20:10

Bonjour à tous,

J'ai un gros problème avec mon code css.
J'ai trois blocs coté à coté dans un bloc conteneur.

Le troisième bloc est un bloc qui contiendra bcp de texte, donc s'agrandira.
Le problème, c'est que quand ce bloc s'agrandit, les deux autres ne suivent
pas ( ils ne s'agrandissent pas).

Comment faire pour qu'ils "suivent" le grand bloc ?

Sinon, je voudrais mettre en bloc tout en bas du bloc principal, comment
faire ?

Je vous joins le code concerné pour les 3 blocs

Le CSS :

#all {
display: block; /* BLOC CONTENEUR */
width: auto;
height: auto;
min-height: 600px;
}

.menu_v {
position: absolute; /* BLOC DEVANT SUIVRE LE GRAND */
top: 295px;
left: 0px;
width: 218px;
height: 100%;
background-color: #252424;
}

.barre_v {
position: absolute; /* IDEM QUE POUR L'AUTRE BLOC */
top: 274px;
left: 218px;
width: 12px;
height: 100%;
background-image:url(images/back_cote.gif);
}

.milieu {
position: absolute; /* GRAND BLOC QUI S'AGRANDIRA */
top: 274px;
left: 230px;
right: 0px;
bottom: 0px;
height: 100%;
}

Le html :

<div class="menu_v">
      
</div>

<div class="barre_v">
<img src="images/pnblack_17.gif" alt="" />
</div>

<div class="milieu"><p align="center">Hello world
!</p><p> </p><p> </p>
<p> </p><p> </p>
<p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p>
</div>

Voilà :)

Par avance merci

--
Rémi Héluin

1 réponse

Simon Denier

29/12/2003 à 11:39

En gros, si je comprends bien, tu veux une structure 3 blocs à suivre
avec un rendu "tableau à 3 colonnes". J'avais fait quelques recherches
sur la ml de pompage.net et ça revient assez souvent (en particulier
voir un fil d'août 2003 je crois).

Côté pratique, va voir
http://selfhtml.selfhtml.com.fr/css/proprietes/affichage/display2.htm
pour un aperçu de la technique de base (display:table ... dans le CSS

<html><head><title>display</title>
<style type="text/css">
div.table { display:table; border-collapse:collapse; }
div.tr { display:table-row; }
div.td { display:table-cell; border:thin solid red; padding:5px; }
</style>
</head><body bgcolor="FFFFFF" text="#000000">

<div class="table">
<div class="tr">
<div class="td">je</div>
<div class="td">suis</div>
<div class="td">un</div>

<div class="td">tableau</div>
</div>
</div>

</body></html>

Rémi Héluin wrote:

Bonjour à tous,

J'ai un gros problème avec mon code css.
J'ai trois blocs coté à coté dans un bloc conteneur.

Le troisième bloc est un bloc qui contiendra bcp de texte, donc s'agrandira.
Le problème, c'est que quand ce bloc s'agrandit, les deux autres ne suivent
pas ( ils ne s'agrandissent pas).

Comment faire pour qu'ils "suivent" le grand bloc ?

Sinon, je voudrais mettre en bloc tout en bas du bloc principal, comment
faire ?

Je vous joins le code concerné pour les 3 blocs

Le CSS :

#all {
display: block; /* BLOC CONTENEUR */
width: auto;
height: auto;
min-height: 600px;
}

.menu_v {
position: absolute; /* BLOC DEVANT SUIVRE LE GRAND */
top: 295px;
left: 0px;
width: 218px;
height: 100%;
background-color: #252424;
}

.barre_v {
position: absolute; /* IDEM QUE POUR L'AUTRE BLOC */
top: 274px;
left: 218px;
width: 12px;
height: 100%;
background-image:url(images/back_cote.gif);
}

.milieu {
position: absolute; /* GRAND BLOC QUI S'AGRANDIRA */
top: 274px;
left: 230px;
right: 0px;
bottom: 0px;
height: 100%;
}

Le html :

<div class="menu_v">
      
</div>

<div class="barre_v">
<img src="images/pnblack_17.gif" alt="" />
</div>

<div class="milieu"><p align="center">Hello world
!</p><p> </p><p> </p>
<p> </p><p> </p>
<p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p>
</div>

Voilà :)

Par avance merci

--
Simon

En gros, si je comprends bien, tu veux une structure 3 blocs à suivre
avec un rendu "tableau à 3 colonnes". J'avais fait quelques recherches
sur la ml de pompage.net et ça revient assez souvent (en particulier
voir un fil d'août 2003 je crois).

Côté pratique, va voir
http://selfhtml.selfhtml.com.fr/css/proprietes/affichage/display2.htm
pour un aperçu de la technique de base (display:table ... dans le CSS

<html><head><title>display</title>
<style type="text/css">
div.table { display:table; border-collapse:collapse; }
div.tr { display:table-row; }
div.td { display:table-cell; border:thin solid red; padding:5px; }
</style>
</head><body bgcolor="FFFFFF" text="#000000">

<div class="table">
<div class="tr">
<div class="td">je</div>
<div class="td">suis</div>
<div class="td">un</div>

<div class="td">tableau</div>
</div>
</div>

</body></html>

Rémi Héluin wrote:

Bonjour à tous,

J'ai un gros problème avec mon code css.
J'ai trois blocs coté à coté dans un bloc conteneur.

Le troisième bloc est un bloc qui contiendra bcp de texte, donc s'agrandira.
Le problème, c'est que quand ce bloc s'agrandit, les deux autres ne suivent
pas ( ils ne s'agrandissent pas).

Comment faire pour qu'ils "suivent" le grand bloc ?

Sinon, je voudrais mettre en bloc tout en bas du bloc principal, comment
faire ?

Je vous joins le code concerné pour les 3 blocs

Le CSS :

#all {
display: block; /* BLOC CONTENEUR */
width: auto;
height: auto;
min-height: 600px;
}

.menu_v {
position: absolute; /* BLOC DEVANT SUIVRE LE GRAND */
top: 295px;
left: 0px;
width: 218px;
height: 100%;
background-color: #252424;
}

.barre_v {
position: absolute; /* IDEM QUE POUR L'AUTRE BLOC */
top: 274px;
left: 218px;
width: 12px;
height: 100%;
background-image:url(images/back_cote.gif);
}

.milieu {
position: absolute; /* GRAND BLOC QUI S'AGRANDIRA */
top: 274px;
left: 230px;
right: 0px;
bottom: 0px;
height: 100%;
}

Le html :

<div class="menu_v">
      
</div>

<div class="barre_v">
<img src="images/pnblack_17.gif" alt="" />
</div>

<div class="milieu"><p align="center">Hello world
!</p><p> </p><p> </p>
<p> </p><p> </p>
<p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p>
</div>

Voilà :)

Par avance merci

--
Simon

Vous avez filtré cet utilisateur ! Consultez son message

En gros, si je comprends bien, tu veux une structure 3 blocs à suivre
avec un rendu "tableau à 3 colonnes". J'avais fait quelques recherches
sur la ml de pompage.net et ça revient assez souvent (en particulier
voir un fil d'août 2003 je crois).

Côté pratique, va voir
http://selfhtml.selfhtml.com.fr/css/proprietes/affichage/display2.htm
pour un aperçu de la technique de base (display:table ... dans le CSS

<html><head><title>display</title>
<style type="text/css">
div.table { display:table; border-collapse:collapse; }
div.tr { display:table-row; }
div.td { display:table-cell; border:thin solid red; padding:5px; }
</style>
</head><body bgcolor="FFFFFF" text="#000000">

<div class="table">
<div class="tr">
<div class="td">je</div>
<div class="td">suis</div>
<div class="td">un</div>

<div class="td">tableau</div>
</div>
</div>

</body></html>

Rémi Héluin wrote:

Bonjour à tous,

J'ai un gros problème avec mon code css.
J'ai trois blocs coté à coté dans un bloc conteneur.

Le troisième bloc est un bloc qui contiendra bcp de texte, donc s'agrandira.
Le problème, c'est que quand ce bloc s'agrandit, les deux autres ne suivent
pas ( ils ne s'agrandissent pas).

Comment faire pour qu'ils "suivent" le grand bloc ?

Sinon, je voudrais mettre en bloc tout en bas du bloc principal, comment
faire ?

Je vous joins le code concerné pour les 3 blocs

Le CSS :

#all {
display: block; /* BLOC CONTENEUR */
width: auto;
height: auto;
min-height: 600px;
}

.menu_v {
position: absolute; /* BLOC DEVANT SUIVRE LE GRAND */
top: 295px;
left: 0px;
width: 218px;
height: 100%;
background-color: #252424;
}

.barre_v {
position: absolute; /* IDEM QUE POUR L'AUTRE BLOC */
top: 274px;
left: 218px;
width: 12px;
height: 100%;
background-image:url(images/back_cote.gif);
}

.milieu {
position: absolute; /* GRAND BLOC QUI S'AGRANDIRA */
top: 274px;
left: 230px;
right: 0px;
bottom: 0px;
height: 100%;
}

Le html :

<div class="menu_v">
      
</div>

<div class="barre_v">
<img src="images/pnblack_17.gif" alt="" />
</div>

<div class="milieu"><p align="center">Hello world
!</p><p> </p><p> </p>
<p> </p><p> </p>
<p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p>
</div>

Voilà :)

Par avance merci

--
Simon

[CSS] Bloc qui ne s'agrandit pas

1 réponse

Veuillez sélectionner un problème