[Résolu] Inverser le fonctionnement de mon gabarit

Bonjour à tous et à toutes !

Je me suis fait mon gabarit div/css, mais il ne fonctionne pas comme je le souhaite.

Voici le code

<style type="text/css">
.floatbox {
	float: left;
	background: silver;
	border: 0;
}

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0px; 
	clear: both; 
	visibility: hidden;
}

* html .clearfix {
height: 1%;
}

.clearfix {
display: block;
}

</style>
<div class="clearfix" style="background-color:lightblue;"> 
	<div class="floatbox" style="width:127px;">
		menu gauche...
	</div>
	<div class="floatbox" style="width:127px; float:right;">
		menu droite...
	</div>
	Ma page qui s'étire à la longueur du menu le plus long.
</div>

Ce code permet de réaliser un gabarit du genre :
|menu| |page qui s'adapte à la longueur du menu le plus long| |menu|

Et j'aimerais simplement inverser ce phénomène pour faire ceci :
|menu qui sétire en fonction de la page| |page| |menu comme à gauche|

Vola, je ne pense pas que ça soit très compliquer pour des athlètes du css comme vous , en revanche, moi je débute ...

A vous de jouer

Merci d'avance à tous et à toutes !!
Bonne journée.
FluidBlow.
Modifié par FluidBlow (25 May 2006 - 17:04)

salut,

bon je débute aussi donc je n'ai pas de réponse adéquate.
Par contre, je pense que pour plus de lisibilité dans ton code, du style :

<style type="text/css">
 
 /* menu gauche */
.floatbox1 { 
        width:127px;
	float: left;
	background: silver;
	border: 0;
}

/* menu droit*/
.floatbox2 { 
        width:127px;
	float: right;
	background: silver;
	border: 0;
}

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0px; 
	clear: both; 
	visibility: hidden;
}

* html .clearfix {
        height: 1%;
}

.clearfix {
        background-color:lightblue;
        display: block;
}

</style>

<div class="clearfix"> 

	<div class="floatbox1">	menu gauche...	</div>

	<div class="floatbox2">	menu droite...	</div>

	Ma page qui s'étire à la longueur du menu le plus long.

</div>

Sinon, avec un exemple en ligne, ce serait plus facile...

Re !!

Voila, je réedit mon code suite au conseil de hophop !

<style type="text/css">

/* menu */
.boite_flottante {
	background: silver;
	border: 0;
	float:left;
}

.clearfix:after {
	content: ""; 
	display: block; 
	height: 0px; 
	clear: both; 
	visibility: hidden;
}

/* Hack i.e. qui permet d'afficher pareil que sous ff. */
* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

</style>
<div class="clearfix" style="background-color:lightblue; width:400px;"> 
	<div class="boite_flottante">Menu gauche...<br />étirable...</div>
	
	Ma page qui s'adapte à la longueur du menu	
</div>

Et le résultat du code suivant sur mon site perso : http://fluidblow.free.fr/temp.html

Je répète ce que je voudrais : sur l'exemple, la partie qui commande la longueur de l'autre partie, est le menu (en gris) , moi, j'aimerais avoir un menu à gauche(en gris) qui prend la longueur de la page(en bleu) et à coté un menu(donc qui serra à droite) qui s'adaptera aussi à la longueur de la page(en bleu).

Par exemple :
Si le contenu de ma page (en bleu) fais 5 lignes, j'aimerais que les deux colonnes sur les cotés (une à droite et une à gauche de la page(en bleu)) fassent 5 lignes.

J'espere avoir été clair !

Merci à tous de m'aider !
FluidBlow.
Modifié par FluidBlow (25 May 2006 - 15:09)

salut,
j'ai fait un grand changement. je ne sais pas si c'est ce que tu veux, un peu archaïque mais ça marche.

<style type="text/css">

/*page entière*/
#global { 
	width: ...px; /* taille de ta page entière menu+page */
	display:block;
	background: silver; 
	position:absolute;
}

/*page*/
.contenu {
	float:right;
	background-color:lightblue;
	width:400px;
}
	
/* menu */
.boite_flottante {
	float:left;	
}
</style>




<div id="global"> 

	<div class="boite_flottante">Menu gauche...<br />étirable...</div>

	
	<div class="contenu">
	Ma page qui s'adapte à la longueur du menu<br />étirable...</div>	

</div>

pour 2 menus (1 à gauche et 1 à droite), tu places "contenu" en float: left et tu créer une deuxième <div> pour ton menu à droite en float: right.

j'espère que cela te va....
Modifié par hophop (25 May 2006 - 16:51)

Oui, merci beaucoup !!

Il ne reste plus qu'une seule étape, créer une deuxieme colone (type menu) à droite, et ce serait parfait !!

Merci beaucoup déjà, et bientôt plus encore !
FluidBlow

je répète mon précédent message pour tes deux menus.

<style type="text/css">

/*page entière*/
#global { 
	width: ...px; /* taille de ta page entière menu+page */
	display:block;
	background: silver;
	position:absolute;
}

/*page*/
.contenu {
	float: left;
	background-color:lightblue;
	width:400px;
}
	
/* menu */
.boite_flottante {
	float:left;	
}

.boite_flottante2 {
	float:right;	
}
</style>

<div id="global"> 

	<div class="boite_flottante">Menu gauche...<br />étirable...</div>

	
	<div class="contenu">
	Ma page qui s'adapte à la longueur du menu<br />étirable...<br />étirable...<br />étirable...<br />étirable...<br />étirable...<br />étirable...</div>
	
	<div class="boite_flottante2">Menu droit...<br />étirable...</div>	

</div>

Modifié par hophop (25 May 2006 - 17:05)

Oui, je venais juste de comprendre une fraction de seconde avant ta réponse !!

Tu es un dieu du css !!
Je te remercie !

FluidBlow.