28173 sujets

CSS et mise en forme, CSS3

[Résolu] - Problème un peu spécial, placement div...

Salutations à toute la communauté,

Si je viens en ce lieu, c'est parce que je me retrouve face à un problème de taille dont la solution m'est introuvable... Je vais tenter de vous l'expliquer Smiley cligne

Je travaille actuellement sur un gabarit de page HTML/CSS généré par le CMS maison de la boîte dans laquelle je travaille actuellement (en tant que stagiaire Smiley biggrin )...

upload/12707-theatre.jpg
La zone 1 correspond au contenu de la page.
La zone 2 correspond au premier menu.
La zone 3 correspond au second menu.

Mon problème est le suivant:

Le script qui génère les pages effectue un premier jet et affiche les zone 1 et zone 2... La zone 3, pour des raisons que j'ignore (niveau programmation du CMS) est génèrée ensuite indépendamment des deux autres. Malheureusement je souhaitrais placer cette zone 3 sous la zone 2 et que cette zone 3 s'adapte au contenu de la zone 2 (alors qu'elles ne sont pas dans la même div global)... j'éspère avoir été clair Smiley lol

Merci à vous Smiley cligne

Cordialement.

Leptik
Modifié par Leptik (08 Jun 2007 - 11:43)
Salut,

En effet, c'est plutôt curieux. J'imagine que tu ne peux pas modifier le code pour ajouter un conteneur supplémentaire ?
Thomas D. a écrit :
Salut,

En effet, c'est plutôt curieux. J'imagine que tu ne peux pas modifier le code pour ajouter un conteneur supplémentaire ?


Non est c'est bien là le soucis, je dois faire ne sorte que le second menu se place sous la zone 2 (quelque soit sa hauteur) et ce alors qu'ils ne sont pas dans le même conteneur
Smiley confus
Bien sûr Smiley cligne

HTML

<body>
<div id="global">
	<div id="logo">
		
	</div>
	<div id="zone1">
		Contenu du site
	</div>
  <div id="zone2">
  		Menu du site 
  </div>
</div>
<div id="zone3">
	Deuxième partie du menu
</div>
</div>
</body>


CSS


/* CSS Document */
* {
	margin: 0px;
	padding: 0px;
	}

#global {
	position: relative;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	background-color: #E60042;
	}
	
#logo {
	width: 800px;
	height: 300px;
	background-color: #666666;
	}
	
/* ---------- Contenu textuel bloc gauche ---------- */	
	
#bloc_gauche {
	position: absolute;
	width: 600px;
	background-color:#ECF1F2;
	}
	
/* ---------- Menu bloc droit ---------- */	
	
#bloc_droit {
	position: absolute;
	left: 600px;
	width: 200px;
	background-color: #E60042;
}	
	
#menu_dynamique {
	position: absolute;
	margin: 0px auto 0px auto;
	width: 200px;
	height: 50px;
	background-color:#000033;
	}
Modérateur
Salut, Smiley smile

Je me trompe peut-être mais à priori, tu n'as pas d'autres choix que de passer par JS :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

		<title>Exemple</title>

		<style type="text/css"><!--

@media screen, projection
{
	#global
	{
		background-color: green;
		width: 400px;
		height: 400px;
		float: left;
	}
	#zone1
	{
		background-color: yellow;
		width: 200px;
		height: 400px;
		float: left;
	}
	#zone2
	{
		background-color: blue;
		width: 200px;
		height: 300px;
		float: right;
	}
	#zone3
	{
		position: relative;
		top: 300px;
		left: -200px;
		background-color: red;
		width: 200px;
		height: 200px;
		float: left;
	}
}

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

if(!window.oO)
{
	var oO =
	{
		connect: function(oElem, sEvType, fn, bCapture)
		{
			return document.addEventListener ?
				oElem.addEventListener(sEvType, fn, bCapture):
				oElem.attachEvent ?
					oElem.attachEvent('on' + sEvType, fn):
					false;
		},

		init: function()
		{
			var oZone1 = document.getElementById('zone1'),
			    oHeight1 = oZone1.offsetHeight,
			    oZone2 = document.getElementById('zone2'),
			    oHeight2 = oZone2.offsetHeight,
			    oZone3 = document.getElementById('zone3');

			oZone3.style.height = oHeight1 - oHeight2 + 'px';
			oZone3.style.top = oHeight2 + 'px';
		}
	};

	oO.connect(window, 'load', oO.init, false);
}

		//--></script>
	</head>
	<body>

<div id="global">
	<div id="logo">
	</div>

	<div id="zone1">
		Contenu du site
	</div>

	<div id="zone2">
		Menu du site 
	</div>
</div>

<div id="zone3">
	Deuxième partie du menu
</div>

	</body>
</html>


PS : Je précise quand même que ce genre de bidouille, c'est complètement boiteux. Smiley cligne
Modifié par koala64 (08 Jun 2007 - 10:34)
Mes différentes réflexions et recherches vont dans ton sens Koala, j'ai soumis la proposition d'utilisation du JS mais l'équipe de dév est aussi sceptique que moi Smiley lol
Tant pis trouveront autre chose Smiley cligne

Merci à vous !
Sujet clos
Aller à