28220 sujets

CSS et mise en forme, CSS3

[résolu] 2 colonnes alignés à droite, mais avec largeur variable

Bonjour à tous.

Ma mise en page est très simple : un cadre centré, de largeur 800px.
Seuleument, j'aimerai de temps en temps afficher une colonne sur la droite pour mon menu d'aide.
Cette colonne fait 200px de large. Seuleument, j'aimerai que mon contenu "normal" reste centré dans l'espace qu'il lui reste à l'écran (en gros : 100%-200px)

Mais plutôt qu'un long discours je vous propose de copier/coller ce code : ça marche dans IE, mais pas dans firefox : la colonne de droite "recouvre" celle du milieu.

Avez-vous une idée pour que ce code fonctionne partout ?

PS : je laisse volontairement le javascript pour que vous voyez clairement la différence, mais le problème réside seuleument dans la mise en page.

<html >
<head>
<title></title>
<script language="javascript">
function showHideHelp(element)
{
	var balise = document.getElementById(element);
	
	if (balise.className=="myHelpHidden")
	{
		balise.className="myHelp";
	}
	else
	{
		balise.className="myHelpHidden";
	}
}
</script>
<style type="text/css">

#main_container
{
	border : 1px solid #000000;
	background-color : #cccccc;
	width : 800px;
	right : 250px;
}


.myHelp
{
	float : right;
	background-color : #dddddd;
	border : 1px solid #000000;
	width : 250px;
	height : 100%;
}

.myHelpHidden
{
	visibility:  hidden;
	display : none;
}

</style>
<body>

	<div id="HelpMenu" class="myHelpHidden">
		Help!!
	</div>
	<div align="center">
		<div id="main_container">
			<a href="#" onclick="javascript: showHideHelp('HelpMenu')">Show / hide help menu</a>
		</div>
	</div>
</body>
</html>

Modifié par colin (16 Jan 2006 - 16:53)
Modérateur
bonjour,
ce n'est pas un souci de javascript !
en reprenant ta page et en incorporant myhelp dans le container, il y reste et diminue d'autant en largeur l'espace restant pour le contenu si deja present, ça risque de faire yoyo, ..


Je me suis permis de refaire une page , d'ajouter un doctype , d'enlever une balise et de modifier ton css, pour obtenir juste les 100% d'affichage en hauteur que tu laisse dans la demo de ton probleme ... attention ce n'est pas extensible dans firefoxe, prevoir de gerer eventuellement les min-heights si c'est ce que tu recherche aussi, la c'est juste pour la demo.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>help menu</title>
<script language="javascript">
function showHideHelp(element)
{
	var balise = document.getElementById(element);
	if (balise.className=="myHelpHidden")
	{
		balise.className="myHelp";
	}
	else
	{
		balise.className="myHelpHidden";
	}
}
</script>
<style type="text/css">
html, body {height:99%;}
#main_container
{
	border : 1px solid #000000;
	background-color : #cccccc;
	width : 800px;
	right : 250px;
	height : 100%;
	margin:auto;
}
.myHelp
{
	float : right;
	background-color : #dddddd;
	border : 1px solid #000000;
	border-top:0;
	border-bottom:0;
	width : 250px;
	height : 100%;
}
.myHelpHidden
{
	visibility:  hidden;
	display : none;
}
</style>
<body>

		<div id="main_container">
<div id="HelpMenu" class="myHelpHidden">
		Help!!
	</div>
			<a href="#" onclick="javascript: showHideHelp('HelpMenu')">Show / hide help menu</a>

		</div>
</body>
</html>


a plus
merci pour ton aide, mais ce n'est pas ça que je cherche à faire.

(désolé)

en fait je veux que ma colonne centrale garde toujours la même largeur (dans la mesure du possible) et que celle "help" vienne se mettre à droite.

enfin... l'exemple que j'ai mis au dessus montre parfaitement ce que je veux faire, seuleument ça ne fonctionne pas sur IE.

en fait je veux faire ça (faut cliquer sur le "x" ou sur le "i" rouges en haut à droite)

merci quand même, je suis désolé de t'avoir fait perdre du temps! (et pour le doctype, j'avais viré exprés les lignes en plus Smiley lol )
Modifié par colin (16 Jan 2006 - 15:48)
Modérateur
rebonjour,
toujours dans l'idée d'une imbrication de div pas la mieux adapter au probleme, revoici la page avec une modif d'imbrication, et un css supplementaire:
<html >
<head>
<title></title>
<script language="javascript">
function showHideHelp(element)
{
	var balise = document.getElementById(element);
	if (balise.className=="myHelpHidden")
	{
		balise.className="myHelp";
	}
	else
	{
		balise.className="myHelpHidden";
	}
}
</script>
<style type="text/css">
#main_container
{
	border : 1px solid #000000;
	background-color : #cccccc;
	width : 800px;
	right : 250px;
}
.un {width:1050px!important;width:1179px;position:relative;padding-right:129px!important;background:red;}
.myHelp
{
	position:absolute;
	right:0;
	background-color : #dddddd;
	border : 1px solid #000000;
	width : 250px;
	height : 100%;
}
.myHelpHidden
{
	visibility:  hidden;
	display : none;
}
</style>
<body>
	<div class="un" align="center">
	<div id="HelpMenu" class="myHelpHidden">
		Help!!
	</div>
		<div id="main_container">
			<a href="#" onclick="javascript: showHideHelp('HelpMenu')">Show / hide help menu</a>
		</div>
	</div>
</body>
</html>

Il va de soi , que selon le doctype ajouté, il y a des chances que le css ajouté est besoin d'etre modifie et ou les valeurs revues , selon le mode de rendu navigateur ... ça change , c'est pour ça que le dioctype me semblait important Smiley lol .
a plus
i shaw saum wispect!!

merci beaucoup pour ça, ça ressemble beaucoup plus à ce que je veux faire!
à+
Sujet clos
Aller à