Bonjour, je recherche à faire des divs adaptables suivant leurs contenu.
Je dispose donc d'un code html que voici :
accompagné d'un code CSS dans cette même page
[code]
<style type="text/css">
#out-min-height {
padding-left:200px; /* voici le min-height (200px) */
min-width: 1px; /* pour Opéra */
}
#in-min-height {
margin-left: -400px; /* pour compenser le padding-top */
max-width:350;
}
width:expression(document.body.clientWidth > 450 ? "350px" : "auto");
#out-min-height2 {
padding-left:500px; /* voici le min-height (200px) */
min-width: 1px; /* pour Opéra */
}
#out-min-width {
padding-left:200px; /* voici le min-height (200px) */
min-height: 1px; /* pour Opéra */
}
#in-min-width {
margin-left: -400px; /* pour compenser le padding-top */
}
width:expression(document.body.clientWidth > 450 ? "350px" : "auto");
#out-min-width {
padding-left:500px; /* voici le min-height (200px) */
min-height: 1px; /* pour Opéra */
}
</style>
[code]
La div se redimenssionne bien en hauteur mais pas en largeur. Et mon plus gros soucis est d'adapter mes images. J'arrive à faire la hauteur mais pour la largeur rien à faire.
Le problème est assez général, je ne peux pas vraiement vous expliquer, je suis plutôt à la recherche d'idée.
PS: je suis un débutant notoire
Modifié par ffwrude (09 Aug 2006 - 15:33)
Je dispose donc d'un code html que voici :
<div class="test">
<div style="position:absolute; width:5px; height:5px; top:30px; left:30px;background-image:url('./images/mod_hautg.gif'); background-repeat : no-repeat;">
</div>
<div style="position:absolute; width:5px; height:5px; top:30px; left:380px;background-image:url('./images/mod_hautd.gif'); background-repeat : no-repeat;">
</div>
<div style="position:absolute; width:5px; height:150px; top:35px; left:30px;">
<div style="background-image:url('./images/mod_vertical.gif'); background-repeat : repeat-y;" id="out-min-height">
<div style="margin-left:150; background-image:url('./images/mod_vertical.gif'); background-repeat : repeat-y;" id="out-min-height">
<div style="max-width:200;" id="in-min-height">gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa ahjg ygjkhg<br>gyhgkjghjgy gjkhg<br>gyhgkjg hjgygjkhg<br>gyhqqqqqqqqqqqqqqgkjg<br>gyhqqqqqqqqqqqqqqgkj
</div>
</div>
</div>
<div style="background-image:url('./images/mod_horizontal.gif'); width:350; max-width:350; background-repeat:repeat-x;" id="element">
<div id="in-min-height">
</div>
</div>
</div>
</div>
accompagné d'un code CSS dans cette même page
[code]
<style type="text/css">
#out-min-height {
padding-left:200px; /* voici le min-height (200px) */
min-width: 1px; /* pour Opéra */
}
#in-min-height {
margin-left: -400px; /* pour compenser le padding-top */
max-width:350;
}
width:expression(document.body.clientWidth > 450 ? "350px" : "auto");
#out-min-height2 {
padding-left:500px; /* voici le min-height (200px) */
min-width: 1px; /* pour Opéra */
}
#out-min-width {
padding-left:200px; /* voici le min-height (200px) */
min-height: 1px; /* pour Opéra */
}
#in-min-width {
margin-left: -400px; /* pour compenser le padding-top */
}
width:expression(document.body.clientWidth > 450 ? "350px" : "auto");
#out-min-width {
padding-left:500px; /* voici le min-height (200px) */
min-height: 1px; /* pour Opéra */
}
</style>
[code]
La div se redimenssionne bien en hauteur mais pas en largeur. Et mon plus gros soucis est d'adapter mes images. J'arrive à faire la hauteur mais pour la largeur rien à faire.
Le problème est assez général, je ne peux pas vraiement vous expliquer, je suis plutôt à la recherche d'idée.
PS: je suis un débutant notoire
Modifié par ffwrude (09 Aug 2006 - 15:33)