28173 sujets

CSS et mise en forme, CSS3

Bonjour,

voilà je tente de faire un bloc qui s'aggandi automatiquement.
ça marche parfaitenment sur IE mais pas sur FF...

voic le code html :



<!-- Debut bloc-->
				<div class="bloc_out">
					<div class="bloc_in">
					
					<div class="spacer">&nbsp;</div>
					

						<div class="bloc01">	
						
						<div class="coteg_01">					
						</div>
								<div class="espace_cli01">
								<a href="coord_consul.html">Consulter mes coordonnées</a>
								</div>

						<div class="coted_01">					
						</div>

						</div>
								<div class="spacer">&nbsp;</div>
						
								<div class="spacer">&nbsp;</div>

						<div class="bloc01">	
						
						<div class="coteg_01">					
						</div>
								
								<div class="espace_cli01">
								<a href="coord_modif.html">Modifier mes coordonnées</a>
								</div> 

						<div class="coted_01">					
						</div>

						</div>
								
								<div class="spacer">&nbsp;</div>
						
								<div class="spacer">&nbsp;</div>

						<div class="bloc01">	
						
						<div class="coteg_01">					
						</div>
								
								<div class="espace_cli01">
								<a href="mdp_change.html">Modifier mon mot de passe</a>
								</div>

						<div class="coted_01">					
						</div>

						</div>
								
								<div class="spacer">&nbsp;</div>
						
								<div class="spacer">&nbsp;</div>

						<div class="bloc01">	
						
						<div class="coteg_01">					
						</div>
								
								<div class="espace_cli01">
								<a href="mdp_oubli.html">Mot de passe oublié? Cliquez ici</a>
								</div>

						<div class="coted_01">					
						</div>

						</div>
																									
					
								<div class="spacer">&nbsp;</div>
								<div class="spacer">&nbsp;</div>
				
									
						</div>						
				</div>



et la partie cs :



.bloc_out
{
background-color:white;
width: 764px;
border: 1px solid yellow;
padding-top:370px;          /* voici le min-height (356px) */
min-height: 1px;           /* pour Opéra */
}

.bloc_in
{
background-color:white;
width: 764px;
border: 1px solid black;
margin-top: -370px;         /* pour compenser le padding-top */ 
}

.bloc01
{
/*background-color:rgb(62,114,163);*/
width:300px;
margin-left:250px;
}





voilà, si vous pouviez me donner un coup demain...

Merci d'avance.
Modifié par samb01 (10 Jul 2006 - 13:55)
Administrateur
samb01 a écrit :
voilà, si vous pouviez me donner un coup demain...

Hmm, demain je n'aurais pas le temps, mais je veux bien te donner un coup après-demain Smiley biggol Smiley lol

(désolé, c'était tentant)
Bonjour,

Par définition, sauf si l'on précise une taille à un conteneur, celui-ci s'adapte automatiquement à son contenu.

Aussi j'avoue ne pas trop comprendre où se situe le problème Smiley ohwell
Raphael a écrit :

Hmm, demain je n'aurais pas le temps, mais je veux bien te donner un coup après-demain Smiley biggol Smiley lol

(désolé, c'était tentant)


J'ai failli la faire Smiley confused
Administrateur
samb01 a écrit :
voilà je tente de faire un bloc qui s'aggandi automatiquement.
ça marche parfaitenment sur IE mais pas sur FF...

C'est peut-être un problème de hauteur (height) mais vu que tu ne donnes aucune indication, on débat dans le vide Smiley decu

Si tu définis une hauteur (height) à un élément, celui-ci :
- va garder cette hauteur sur FF, le contenu - s'il dépasse - va donc s'afficher hors de ce bloc. C'est le comportement normal et prévu
- va s'agrandir selon le contenu sur IE. C'est un bug car ce comportement est celui de "min-height" et non "height".

En clair, ce que tu voudrait, c'est employer "min-height"
bon un problème d'espace ça arrive à tout le monde.
Mais je comprends, c'était trop tentant...
Ce qui se passe, c'est que sur FF, le bloc_out me prends toute la page au liue de s'adapter au contenu. tandis que sur IE ça s'adapte...

j'ai tenté le min-height sur bloc_out mais ça ne change rien.
samb01 a écrit :
Ce qui se passe, c'est que sur FF, le bloc_out me prends toute la page au liue de s'adapter au contenu.


Toute la place en largeur ou en hauteur ?!