28220 sujets

CSS et mise en forme, CSS3

Bonjour, je recherche à faire des divs adaptables suivant leurs contenu.

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"> &nbsp;
                     </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)
j'ai tout recommencer pour faire avec un tableau d'une ligne et d'une colone pour mettre ma div dedans.

Lorsque je met une image ou du texte le tableau se redimensionne (ca c'est normal) et c'est ce que je cherche.

MAIS !

je cherche à faire un contour grace à des images. Les images doivent elles aussi pouvoir suivre la taille de la div.

ca marche MAIS ! uniquement en haut et a gauche. Impossible de mettre ces jjerzioajrioapjra d'images pour contourner la div complete (c a dire : a droite et en bas)

Si vous avez une idée...



<script type="text/javascript">
if (navigator.appName == 'Microsoft Internet Explorer'){

document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"temp_ie.css\" />");


}
</script>


	<title></title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />

<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;
  }
  #out-min-height2 {
  padding-left:500px;          /* voici le min-height (200px) */
  min-width: 1px;              /* pour Opéra */
  }

  #out-min-width {
  padding-left:500px;          /* voici le min-height (200px) */
  min-height: 1px;             /* pour Opéra */
  }
  #in-min-width {
  margin-left: -400px;         /* pour compenser le padding-top */
  }
  #out-min-width {
  padding-left:0px;          /* voici le min-height (200px) */
  min-height: 1px;
              /* pour Opéra */
  }
</style>


<body>
<table id="element" class="png" background="" width="100"  max-width="350" border="10">
  <tr>
<td>
  <div>
  <div style="position:absolute; width:5px; height:5px; top:0px; left:0px;background-image:url('./images/mod_hautg.gif'); background-repeat : repeat-y;">
	   	     </div>	
  <div> <div style="background-image:url('./images/mod_horizontal.gif'); background-repeat : repeat-x;" id="out-min-width">
	
   	  <div style="background-image:url('./images/mod_vertical.gif'); background-repeat : repeat-y;" id="out-min-height">
	   
	   <div style="bottom:0px;background-image:url('./images/mod_horizontal.gif'); background-repeat : repeat-x;" id="out-min-width">
	
	     <img src="">
    	 </img>
    	
  </div>