faire dépendre la taille d'un cadre de la taille d'un autre cadre

**ANOVA** · 19/08/2006, 03h12

Je voudrais faire une page html avec un feuille de style en CSS. Dans cette page je voudrais que tous les cadres de la page soient à l'intérieur d'un autre cadre. Seulement, le cadre "conteneur" doit changer de taille suivant la taille des cadres "contenus" dont la taille est elle même fonction du texte contenu par ce cadre. C'est peut être pas simple à imaginer, c'est pour ça que j'ai fait un petit exemple, dont je vous met le code :

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
<html>
 
<head>
    <title>Exemple CSS</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
 
<body>
 
<div class="bordure">
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br>
<div class="texte">TEXTE A INSERER ICI</div>
 
</div>
</body></html>

Voilà le code html, et voici le code CSS de ma page :

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
html,body {
    background-color:#6274C8;
    font-family:"trebuchet ms";
}
 
.bordure {
    -moz-border-radius:15px;
    border-style:solid;
    border-width:1px;
    border-color:#31428c;
    background-color:white;
    margin-left:1%;
    margin-top:1%;    
    margin-right:1%;
    margin-bottom:1%;
}
 
.texte {
    position:absolute;
    background-color:#afb8e2;
    border-width:1px;
    border-style:solid;
    border-color:#31428c;
    -moz-border-radius:15px;
    margin-left:300px;
    top:300px;
    margin-right:40px;
    color:#31428c;    
    text-align:justify;
}

Les choses seront sûrement plus faciles à comprendre comme ça. Concrètement mon problème est qu'ici le cadre bleu est bien contenu par le cadre blanc, mais que si j'augmente la taille du texte du cadre bleu, il va déborder du cadre blanc, à moins que je ne mette des <br>.

J'imagine qu'il y a moyen de faire autrement, mais comment ?

Merci.

**Linaa** · 19/08/2006, 13h09

Salut,

Il faut que tu positionnes ton bloc .texte en position relative.
Et un moment tu as top:300px à remplacer plutôt par margin-top.
Ca donne ça, à priori ça ne dépasse pas

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.texte {
    position:relative;
    background-color:#afb8e2;
    border-width:1px;
    border-style:solid;
    border-color:#31428c;
    -moz-border-radius:15px;
    margin-left:300px;
    margin-top:300px;
    margin-right:40px;
    color:#31428c;    
    text-align:justify;
}

Sinon il y a toujours la solution du clear:both; dans le bloc contenant

**olive.m** · 19/08/2006, 13h09

Bonjour,

ce phénomène vient du fait que position:absolute fait sortir le div du flux. Donc sort du contenant.

Une des solutions si tu dois utiliser les position absolute est de passer ton conteneur en position relative puis de "jouer" sur les paddings.

@+

**ANOVA** · 19/08/2006, 18h26

ok, merci à vous deux. Mon problème est résolu.

faire dépendre la taille d'un cadre de la taille d'un autre cadre

HTML

Discussions similaires

Partager

Partager