28172 sujets

CSS et mise en forme, CSS3

Problemes avec les flux

Bonjour a tous

Je vous expose mon problème :

Je souhaite faire une mise en page avec
- Une colonne de gauche avec une largeur fixe
- Une colonne de droite avec une largeur fluide ( tout le reste de l'ecran )

Jusque la aucun problème, ensuite a l'intérieur de cette colonne de droite, je suis amené à utiliser les flux pour la mise en page.
Je me suis dit flaot:left, float:right et clear:both juste en dessous devrait être suffisant.

Mais ce qui suit le clear:both se trouve en dessous de tous les flux gauche et droite, par conséquent en dessous du premier flux gauche ( ma colonne de gauche ).
Cela crée un gros décalage et c'est assez embêtant Smiley confus

http://s.k2.free.fr/float_bug/

Voila ce qui se trouve entre mes balises <body>


<div id="left">
	<ul id="menu_left">
		<li><a href="#">Menu 1</a></li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a></li>
		<li><a href="#">Menu 4</a></li>
		<li><a href="#">Menu 5</a></li>
		<li><a href="#">Menu 6</a></li>
		<li><a href="#">Menu 7</a></li>
		<li><a href="#">Menu 8</a></li>
		<li><a href="#">Menu 9</a></li>
		<li><a href="#">Menu 10</a></li>
	</ul>
</div>

<div id="right">
	<p class="align_left">Text1</p>
	<p class="align_right">Text2</p>
	<div class="clear"></div>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a diam. Curabitur eget elit. Fusce turpis. Nullam vestibulum massa vitae diam. Nam lectus mauris, rhoncus eu, condimentum vitae, tempor eget, lorem. Sed sapien. Fusce volutpat sapien nec neque. Suspendisse et eros. Morbi ut lacus et risus adipiscing mollis. Pellentesque pellentesque urna a lectus. </p>
</div>


ainsi que ma feuille de style :


div#left {
	float:left;
	margin:0;
	padding:0;
	width:300px;
	background-color:#292929;
}

div#right {
	margin-left:300px;
	background-color:#666666;
}

p.align_left {
	float:left;
}

p.align_right {
	float:right;
}

div#left ul li {
	list-style-type:none;
	margin:20px 0;
}

div#left ul li a {
	color:#FFFFFF;
	text-decoration:none;
}

div.clear {
	clear:both;
}


Je ne trouve pas de solution alternative malheureusement si ce n'est d'appliquer un
overflow:hidden;

sur ma colonne de droite qui règle le problème uniquement sur Firefox mais cela cache les éléments en overflow Smiley confus

Merci pour votre aide! Smiley smile
Modifié par Salah (21 Jul 2008 - 11:00)
salut,
pas sur d'avoir bien compris ce que tu cherches mais a priori je te suggère de définir ton clear en hauteur ( <div class="clear" style="height:1px; overflow:hidden; float:left; width:100%"></div> ) et de mettre ton <p> de dessous en float avec une width:100% egalement ...
Quant au background, englobe les right et left dans un container global a 100% avec une ligne noir et 'longuement' grise en repeat-y.'
Apres fixe tes paddings ...cela devrait le faire.
Cela ne marche pas, je vais essayer d'être plus clair

http://s.k2.free.fr/float_bug/
La tu vois une colonne a gauche et une autre a droite
Dans cette colonne de droite, sur la partie gauche il ya un <p> en float:left; et dans la partie de droite un autre en float:right;
Puis en dessous ( avec une grosse marge ), il ya un <p> sans float.

Le problème est justement cette grosse marge que j'aimerai ne pas voir apparaitre.

Merci de te pencher sur mon problème Smiley cligne
:) peut etre faut il etre juste un petit peu plus bavard, defini tes paddings et tu as raison le clear ne sert vraiment a rien :

div#left {

	float:left;

	margin:0;

	padding:0;

	width:300px;

	background-color:#292929;

}



div#right {

	margin-left:300px;

	
	padding:4px;
	
	display:block
	


}



p.align_left {

	float:left;
	padding:0;
	margin:0;

}



p.align_right {

	float:right;
	padding:0;
	margin:0;

}
p.full
{
float:left;
width:100%; 
padding:10px 0 0 0;	
margin:0;
}


div#left ul li {

	list-style-type:none;

	margin:20px 0;

}



div#left ul li a {

	color:#FFFFFF;

	text-decoration:none;

}






<div id="left">

	<ul id="menu_left">

		<li><a href="#">Menu 1</a></li>

		<li><a href="#">Menu 2</a></li>

		<li><a href="#">Menu 3</a></li>

		<li><a href="#">Menu 4</a></li>

		<li><a href="#">Menu 5</a></li>

		<li><a href="#">Menu 6</a></li>

		<li><a href="#">Menu 7</a></li>

		<li><a href="#">Menu 8</a></li>

		<li><a href="#">Menu 9</a></li>

		<li><a href="#">Menu 10</a></li>

	</ul>

</div>



<div id="right">

	<p class="align_left">Text1</p>

	<p class="align_right">Text2</p>


	<p class="full">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a diam. Curabitur eget elit. Fusce turpis. Nullam vestibulum massa vitae diam. Nam lectus mauris, rhoncus eu, condimentum vitae, tempor eget, lorem. Sed sapien. Fusce volutpat sapien nec neque. Suspendisse et eros. Morbi ut lacus et risus adipiscing mollis. Pellentesque pellentesque urna a lectus. </p>

</div>


et pour les bg englobe le toutim dans un container avec image en repeat-y de 1 px de haut.. ca marche mieux comme ca ?
Bonjour à toi,

Je ne suis pas très compétent en CSS mais pourquoi ne pas enlever le div #clear et ajouter:

- une propriété clear: right à ton div p.align_right
- une propriété clear: left à ton div p.align_left

Ainsi:


p.align_left {
	float:left;
	background: #CC9900;
	clear: left;
}

p.align_right {
	float:right;
	background: #CC66FF;
	clear: right;
}


J'ai ajouté une couleur de fond pour voir le résultat.

Et peut-être qu'il serait bon d'englober p.align_left et p.align_right dans un div...

J'espère que ça peut aider!

Bonne chance,

Battyboy
Modifié par Battyboy (21 Jul 2008 - 12:40)
zincou, ta technique fonctionne plutot bien, je te remercie.

Battyboy, si je clear les flux gauche et droite, je me retrouve avec le meme problème qui vient du fait qu'il y a déjà un premier flux a gauche, le problème reste donc le même, merci tout de même Smiley cligne

Entre temps j'ai trifouillé de mon côté et j'ai finalement décidé de mettre ma colonne de gauche en position absolute, ce qui enlève le flux gauche, le clear:both redevient donc possible.
Après quelle méthode est la plus conseillée entre la mienne et la tienne zincou, je n'en ai aucune idée.

Merci !!
Modifié par Salah (21 Jul 2008 - 14:59)
Sujet clos
Aller à