Discussion :

[zooffy]

Bonjour à tous.
Je ne maitrise pas le CSS comme il faut et là je sèche un peu.
J'ai un Div qui contient des chose que j'ai placé à l'intérieur avec un Position:Absolute;. Mon div ne s'étend pas verticalement mais je ne voudrais pas lui poser un Height car je ne connais pas à l'avance la taille du contenu.

Pourriez me dire s'il y a une possibilité pour remédier à ce problème et, si oui, comment faire ?

Voici mon code HTML actuel :

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
 
<div style="position:relative;width:707px;background-image:url('/App_Themes/ModuleNews/NewsRepetable.png');background-repeat:repeat-y;">
            <asp:Image ID="imgCategorie" runat="server" style="position:absolute;top:0px;left:5px;" />
            <asp:Image ID="imgSecteur" runat="server" style="position:absolute;top:55px;left:5px;"/>
            <div style="position:absolute;left:131px;width:565px;height:108px;background-image:url('/App_Themes/ModuleNews/bloctitrenews.png');background-repeat:no-repeat;">
                <asp:Label ID="lblTitreNews" runat="server" style="position:absolute;top:20px;left:50px;"></asp:Label><br />
                <asp:Label ID="lblSsTitreNews" runat="server" style="position:absolute;top:50px;left:50px;"></asp:Label>
            </div>
            <img alt="" src="/App_Themes/ModuleNews/postegauche.png" style="position:absolute;left:-8px;top:80px;" />
            <div style="position:absolute;top:80px;left:38px;width:200px;height:44px;background-image:url('/App_Themes/ModuleNews/posterepetable.png');background-repeat:repeat-x;">
                <asp:Label ID="lblDatePostage" runat="server" style="position:absolute;top:20px;"></asp:Label>
            </div>
            <img alt="" src="/App_Themes/ModuleNews/postedroite.png" style="position:absolute;left:250px;top:80px;"/>
            <asp:Label ID="lblTexteNews" runat="server" style="position:absolute;top:200px;left:30px;"></asp:Label>
 
            <asp:Image ID="imgimageTexteNews" runat="server" />
        </div>

Merci d'avance.

[Muchos]

Dans ton code actuel, toutes tes div en absolute ont une height.
Comme tu le dis, si tu ne mets pas de height ou seulement min-height, ta div s'étendra (d'autant que la div conteneur n'a pas de height limitée non plus).

[NoSmoking]

Bonjour,

Mon div ne s'étend pas verticalement ...

les éléments en position absolute sont sortis du flux et de par cela ils n'interviennent plus sur la "consistance" de leur conteneur.

Pourriez me dire s'il y a une possibilité pour remédier à ce problème et, si oui, comment faire ?

Changes ton approche, car des absolute dans des absolute c'est pour le moins très moyen.

[zooffy]

Merci pour votre aide.

Donc il faudrait que je passe mes éléments contenus en relative pour les remettre dans le flux, c'est bien ça ?

Le Min-height je connais pas. Vu son nom, ça doit être sympa si je le mets sur mon Div conteneur, non ?

[zooffy]

Alors j'ai modifié mon code en basculant la plupart des Absolute en Relative.
Mais pour conserver mon positionnement d'élément j'ai utilisé des Top négatif.

Du coup, maintenant, j'ai le problème inverse : le Div conteneur déborde de trop !!!

Désolé de faire ma chieuse blonde sur ce coup là..........

J'ai un peu de mal à m'en sortir et mon commanditaire est tellement exigeant sur le design que je n'ai pas le droit au moindre écart.
Est ce que j'ai une solution pour réduire le Div Conteneur ?

Voici mon code modifié :

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
 
<div style="position:relative;width:707px;background-image:url('/App_Themes/ModuleNews/NewsRepetable.png');background-repeat:repeat-y;">
            <asp:Image ID="imgCategorie" runat="server" style="position:relative;top:0px;left:5.5px;" />
            <asp:Image ID="imgSecteur" runat="server" style="position:relative;top:37px;left:-123px;"/>
            <div style="position:relative;top:-58px;;left:131px;width:565px;height:108px;background-image:url('/App_Themes/ModuleNews/bloctitrenews.png');background-repeat:no-repeat;">
                <asp:Label ID="lblTitreNews" runat="server" style="position:relative;top:20px;left:50px;"></asp:Label><br />
                <asp:Label ID="lblSsTitreNews" runat="server" style="position:relative;top:50px;left:50px;"></asp:Label>
            </div>
            <img alt="" src="/App_Themes/ModuleNews/postegauche.png" style="z-index:20;position:relative;left:-8px;top:-87px;" />
            <div style="z-index:20;position:relative;top:-131px;left:38px;width:300px;height:44px;background-image:url('/App_Themes/ModuleNews/posterepetable.png');background-repeat:repeat-x;">
                <asp:Label ID="lblDatePostage" runat="server" style="position:absolute;top:20px;"></asp:Label>
            </div>
            <img alt="" src="/App_Themes/ModuleNews/postedroite.png" style="z-index:20;position:relative;left:338px;top:-175px;"/>
            <div style="z-index:10;position:relative;background-image:url('/App_Themes/ModuleNews/ombreillustration.png');background-repeat:no-repeat;width:699px;height:136px;top:-188px;left:4px;">
                <asp:Image ID="imgIllustrationLarge" runat="server" />
                <div style="z-index:20;position:absolute;background-image:url('/App_Themes/ModuleNews/PseudoImagerepetable.png');background-repeat:repeat-x;top:100px;left:500px;">
                    <img alt="" src="/App_Themes/ModuleNews/gauchePseudoImage.png" style="z-index:inherit;position:absolute;top:0px;left:0px;"/>
                    <asp:Label ID="lblPseudoImage" runat="server" style="z-index:inherit;position:absolute;top:0px;left:50px;"></asp:Label>
                </div>
            </div>
            <asp:Label ID="lblTexteNews" runat="server" Width="660" style="position:relative;top:-170px;left:30px;"></asp:Label>
            <ajaxToolkit:TabContainer ID="tabOngletNews" runat="server" Width="660" style="position:relative;top:-150px;left:5px;" CssClass="CustomTabStyle">
            <ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
                <HeaderTemplate></HeaderTemplate>
                <ContentTemplate></ContentTemplate>
            </ajaxToolkit:TabPanel>
            </ajaxToolkit:TabContainer>
        </div>

[Invité]

Bonjour,
pour bien faire, il faudrait nous donner :
- le code source html généré (afin qu'on teste)
- une image (ou copie d'écran) pour visualiser le problème / ce que tu souhaites afficher