JeuWeb Créez votre jeu par navigateur !

Allwise · 04-05-2009, 11:11 PM

En fait, il faut clear une seule fois, et pas dans les boîtes flottantes.
Je te renvoie un schéma + complet. Admettons que t'aies un conteneur et 3 boîtes, dont le contenu de la plus grande influe sur celui du conteneur :

[Image: clipboard01vsi.jpg]

Après le clear, les boîtes se repositionnent normalement. Donc admettons que t'aies 3 "étages", avec plusieurs divs dans chaque étage : le header, le contenu, le footer.
T'aurais 3 clear:both; un pour chaque étage ( placé après le dernier élément de l'étage, et non pas un pour chaque élément de l'étage ).

Mais en fait, ça ne résoudra pas ton problème, parce qu'avec ça tu peux redimensionner le div parent, mais pas les autres divs de même niveau.

Avec le framework ExtJs, on peut lier deux éléments pour que lorsque l'un d'eux est redimensionné, l'autre le soit d'autant. Avec JQuery, je sais pas, y a peut-être l'équivalent

Donc finalement, le faire en restant propre, y a peut-être un truc mais je vois pas. Pour ma part, soit je choisirais la solution va-vite des tableaux, soit je continuerais dans la direction du calcul des dimensions. ( en fait je choisirai la solution offerte par ExtJs :p )

Bonne chance en tout cas.

jo_link_noir · (Modification du message : 05-05-2009, 08:11 PM par jo_link_noir.)

Thedeejay si t'arrives à le faire avec le css je serais intéressé, y a pas mal de temps j'ai voulu le faire mais j'ai pas réussi :/ Sur firefox les div prennent la hauteur de la page et sur opera il en ce passe rien... pas regardé sur d'autre navigateur.

Phenix, pour être franc je suis un peu perdu avec le resultat que j'ai avec t'es page, alors je te passe le fichier que j'ai fait. Suffi de l'adapter.
A la place de livequery j'ai juste mi live, mais si tu met livequery ça fonctionne quand même.

<html>

<head>

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

<script type="text/javascript"><!--



(function($) {

	size = function()

	{

		/* Modicateurs des hauteurs des Div principal*/



		$div = $("div.Xgauche, div.table_gauche, div.gauche, div.table_center, div.Xdroite, div.table_droite, div.droite");



		/* Réinitialise la hauteur des divs pour qu'ils prennent le minimum de place (équivaut à une hauteur non spécifier en css)*/

		$div.height("");



		/* Récupére la div la plus grande en hauteur*/

		var h = Math.max(Math.max($("div.table_gauche").height(), $("div.table_center").height()), $("div.table_droite").height());



		/*On applique la plus grande hauteur a toutes les div désign */

		$div.height(h);

	}

})(jQuery);



$(document).ready(function(){

	$("a.Ajax").live('click', function(){

		$.ajax({

			url : this.href,

			dataType : "html",

			beforeSend : function(){

				$("div.table_center").append("<p>Chargement...</p>");

			},

			success : function(reponse){

				$("div.table_center").html(reponse);

				size();

			},

			error : function(){

				$("div.table_center").html("<p>Erreur.</p>");

			}

		});

		return false;

	});



	$("a.empty").click(function(){

		$("div.table_center").html("<p>contenu effacer</p>");

		size();

		});

	//live pour que ça soit utiliser dans les paragraphe de la page charger en ajax

	$("p").live("click", function(){$(this).css("color","yellow");});

});

--></script>



<style>

	div{

		margin-left:10px;

		padding:2px;

		background:#000;

	}

	#contener div, #contener{

		float:left;

	}

	.table_droite{

		background:#ccc;

		margin-right:10px;

	}

	.table_center{

		background:#ddd;

	}

	.table_gauche{

		background:#eee;

	}

	.stopf{

		clear:both;

	}

</style>

</head>

<body>



<div id=contener>

	<div class="table_gauche">

		<p>Je suis un p<br /> qui s'étend sur<br />plusieus ligne</p>

		<p>Je suis un p<br /> qui s'étend sur<br />plusieus ligne</p>

	</div>

	<div class="table_center">

		<p>Je suis un p<br /> qui s'étend sur<br />plusieus ligne</p>

		<p>Je suis un p<br /> qui s'étend sur<br />plusieus ligne</p>

		<p>Je suis un p<br /> qui s'étend sur<br />plusieus ligne</p>

	</div>

		<div class="table_droite">

		<p>Je suis un p<br /> qui s'étend sur<br />plusieus ligne</p>

	</div>

</div>

<p class="stopf"><a class="Ajax" href="text.txt">clic</a> <a class="empty" href="#">effacer</a></p>

</body>

</html>

Bonne nuit

phenix · 05-05-2009, 11:35 AM

j-12, ton script fonctionne à merveille. Merci beaucoup.

Cela me permet de mieux comprendre comment fonction Ajax et jQuery :p.

De même, je ne connaissant pas .live, pourtant sa a la même fonction que livequery. Du coup je peux virer un plugin :p

Merci beaucoup pour ton aide.

OncleJames · 10-05-2009, 11:05 PM

Il y a quelques temps j'ai eu affaire a ce problème, j'ai aussi opté pour la solution javascript/jquery .. malheureusement pas compatible avec tout les navigateurs.

Un grand esprit ma suite à cela parlé de la fonction overhide en CSS, et tout s'est arrangé Smile

Je n'ai plus le fonctionnement exact, mais il utiliser une hauteur fixe couplé avec la propriété overhide.

jo_link_noir · 11-05-2009, 02:24 PM

Ça me rappelle qu'on peu aussi le le faire avec un display. Le jour où j'avais essayé, impossible de le faire marché autre part que sur safari, mais je vient de le refaire et maintenant ça marche sous ff, opera et ie8 avec une bonne doctype.
Mise en page Css avancée grâce à la propriété display (alsacreations)
valeur possible d'un display

OncleJames, t'es sûr pour overhide ? je ne le voit pas dans cette liste :/

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	Adapter un jeu html au format android ?	starmindfr	6	4 668	13-09-2013, 09:05 PM Dernier message: starmindfr
	[Résolu] jQuery et l'ajout de contenu dans une formulaire	supermeganono	11	5 540	06-04-2012, 02:28 PM Dernier message: Maks
	Simuler min-height sans hack CSS ni Javascript	php_addict	12	5 129	22-02-2011, 10:48 PM Dernier message: php_addict
	[Résolu][JavaScript & jquery] Affichage contenu DIV	tog84	4	3 234	07-08-2008, 06:00 PM Dernier message: tog84