28220 sujets

CSS et mise en forme, CSS3

Dimension automatique d'une div

Bonjour,

J'ai fait pour tout un site un cadre arrondi en utilisant ça: 

<div class ="ligne">
	<div id="hautG"></div>
	<div id="horizontal"></div>
	<div id="hautD"></div>

<div class="ligne">
	<div id="vertical"></div>
	<div id="bloc">
******ici ma page*****
	</div>
	<div id="vertical2"></div>
</div >

<div class="ligne"> 
	<div id="basG"></div>
 	<div id="horizontal2"></div>
	<div id="basD"></div>
</div >

et ce css:

/*Inclusion de toutes les images*/
#vertical
{
  background-image:url(../images/bordure/vertical.jpg);
}
/*Suppression des répétitions indésirables*/
#hautG,#hautD, #hautD2, #basG,#basD, #index, #autre
{
  background-repeat: no-repeat;
}

#horizontal, #horizontal2 
{
  background-repeat: repeat-x;
}

#vertical, #vertical2 
{
  background-repeat: repeat-y;
}

/*Positionnement de tout l'ensemble*/
#hautG,#hautD,#hautD2,#basG,#basD, #vertical, #vertical2, #horizontal,#horizontal2, #bloc, #index, #autre
{
 float: left;
}

Je ne donne pas tout le détail, mais aprés, je dimensionne tous mes blocs, car mes div vides n'apparaissent pas sinon.
Le souci, c'est que les barres verticales sont censés etre au dimension du bloc, qui lui est variable et s'adapte au contenu de ce que j'inclus.
Je passe par un JavaScript pour récuperer sa taille et l'affecter à la hauteur des barres verticales mais c'est pas terrible au chargement. Est ce qu'il y aurait moyen de faire ça via le css?
Désolé jp, c'est vrai que c'est pas super clair. En fait, je veux pas dimensionner le bloc mais les deux div #vertical et #vertical2. Je veux justement qu'elles aient la même hauteur que #bloc.
j'ai a peu pres le même probleme, sauf je suis passer par un tableau avec des divs internes.

Mon probleme c'est que j'ai fait un contour à la div et que ce contour doit s'adapter à la div. Ca marche mais uniquement au dessus et a gauche...

Je met mon code qui peut etre pourra t'aider coccimaster pour ta div automatique. moi elles marchent ^^ mais pas leurs contours Smiley decu

Rude



<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>
Sujet clos
Aller à