28220 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un problème de décalage et j'ai besoin d'aide.
En effet, pour construire une page avec un menu sur le côté droit (comme DotClear par exemple), j'utilise le code suivant :

<div id="main">
			
			<div id="sidebar">
				<div id="id1">
					<h2>Premier menu</h2>
					<p>Bla bla bla</p>
					<p>Bla bla bla</p>
				</div>
				<div id="id2">
					<h2>Deuxième menu</h2>
					<p>Bla bla bla</p>
					<p>Bla bla bla</p>
				</div>
				<div id="id3">
					<h2>Troisième menu</h2>
					<p>Bla bla bla</p>
					<p>Bla bla bla</p>
				</div>
			</div>
			
			<div id="content">
				<h1>Titre de ma page</h1>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris
						fringilla orci at lacus. Vestibulum risus velit, volutpat ut, ultricies
						nec, volutpat ac, sapien. Proin ultrices. Aliquam id neque. Vivamus
						augue wisi, dapibus vitae, molestie vel, volutpat non, erat. Phasellus
						scelerisque, diam mollis porta egestas, enim velit ullamcorper diam,
						quis accumsan sem diam congue sem. Fusce sollicitudin. Maecenas varius
						metus ac nisl pellentesque porttitor. Nullam facilisis vehicula erat.
						Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
						inceptos hymenaeos. Maecenas eu nulla suscipit odio commodo viverra.
						Mauris varius diam ut diam. Phasellus a metus.</p>
						<p>Cras sed dolor. Suspendisse vulputate, elit vel feugiat nonummy,
						elit massa sollicitudin nisl, ut consectetuer nunc mi sodales nibh.
						Etiam mauris. Curabitur in turpis a nibh pulvinar auctor. Duis
						ultricies. Duis nonummy metus et est. Quisque massa. Vestibulum
						ultrices odio eget lectus. Cras luctus, libero a lobortis ornare, lacus
						risus blandit lectus, a aliquet nulla nisl quis odio. Sed mattis, urna
						ut rutrum ultricies, erat urna ornare wisi, ut posuere neque urna in
						erat. In volutpat, nibh sed rutrum sagittis, nunc turpis ultrices
						ligula, sit amet ullamcorper nibh mauris id sem. Aliquam fermentum
						est eu augue. Integer congue.</p>
				
				<h2>Premier sous titres</h2>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris
						fringilla orci at lacus.</p>
				<hr class="clear"/>
				
				<h2>Premier sous titres</h2>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris
						fringilla orci at lacus.</p>
				<hr class="clear"/>
			</div>
		</div>


Et les propriétés CSS suivantes :

#main { margin: 2px; width:100%; clear:both; overflow: hidden;}
#content { position:relative; margin-right:25%; clear:left;}
#sidebar { margin:0.2ex 2px 0 0; float: right; width:25%;}
.clear{	clear: both;}


Le problème est qu'avec la classe "clear" je reviens à la ligne forcément (et c'est ce que je veux) mais si le contenu après le clear passe également après le menu de droite... donc au final j'ai la première partie de mon contenu en face du menu (normal) et dès que je met le "clear" alors tout passe en dessous du menu... c'est assez génant !

Si quelqu'un peut m'aider ça serait super ! Smiley biggrin

Merci d'avance
En fait, tu vois le problème lorsque tu réduis la quantité de texte comme suit :

<div id="main">

<div id="sidebar">
	<div id="id1">
		<h2>Premier menu</h2>
		<p>Bla bla bla</p>
		<p>Bla bla bla</p>
	</div>
	<div id="id2">
		<h2>Deuxième menu</h2>
		<p>Bla bla bla</p>
		<p>Bla bla bla</p>
	</div>
	<div id="id3">
		<h2>Troisième menu</h2>
		<p>Bla bla bla</p>
		<p>Bla bla bla</p>
	</div>
</div>

<div id="content">
	<h1>Titre de ma page</h1>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris
	fringilla orci at lacus. Vestibulum risus velit, volutpat ut, ultricies
	nec, volutpat ac, sapien. </p>

	<h2>Premier sous titres</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris
	fringilla orci at lacus.</p>
	<hr class="clear">

	<h2>Premier sous titres</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris
	fringilla orci at lacus.</p>
	<hr class="clear">
	
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris
	fringilla orci at lacus. Vestibulum risus velit, volutpat ut, ultricies
	nec, volutpat ac, sapien. Proin ultrices. Aliquam id neque. Vivamus
	augue wisi, dapibus vitae, molestie vel, volutpat non, erat. Phasellus
	scelerisque, diam mollis porta egestas, enim velit ullamcorper diam,
	quis accumsan sem diam congue sem. Fusce sollicitudin. Maecenas varius
	metus ac nisl pellentesque porttitor. Nullam facilisis vehicula erat.
	Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
	inceptos hymenaeos. Maecenas eu nulla suscipit odio commodo viverra.
	Mauris varius diam ut diam. Phasellus a metus.</p>
	<p>Cras sed dolor. Suspendisse vulputate, elit vel feugiat nonummy,
	elit massa sollicitudin nisl, ut consectetuer nunc mi sodales nibh.
	Etiam mauris. Curabitur in turpis a nibh pulvinar auctor. Duis
	ultricies. Duis nonummy metus et est. Quisque massa. Vestibulum
	ultrices odio eget lectus. Cras luctus, libero a lobortis ornare, lacus
	risus blandit lectus, a aliquet nulla nisl quis odio. Sed mattis, urna
	ut rutrum ultricies, erat urna ornare wisi, ut posuere neque urna in
	erat. In volutpat, nibh sed rutrum sagittis, nunc turpis ultrices
	ligula, sit amet ullamcorper nibh mauris id sem. Aliquam fermentum
	est eu augue. Integer congue.</p>
</div>
</div>


Désolé pour la confusion Smiley decu
J'vois toujours pas désolée lol. Pour moi, rien ne passe sous le menu de droite même avec moins de texte.

On va voir si j'ai bien compris. Ton problème c'est que le texte qui se trouve après un hr avec une class "clear" repasse sous le menu de droite ?
Non, mais quand le texte avant le clear est plus petit que le menu le contenu qui suit passe après le menu comme dans l'image suivante :

upload/363-decalage.png
C'est la page que tu as sur ton site avec juste le code que j'ai modifié dans mon deuxième message... rien de plus ou de moins... je suis sous firefox et j'ai même testé sous IE et j'ai toujours la même erreur.

La zone en rouge "décalage" dans le screenshot c'est ça mon problème je comprend pas pourquoi elle est là, pourquoi elle passe après le menu de droite !
Ben déjà si ça passe après le menu de droite, c'est logique. La propriété clear:both en css empêche un élément d'avoir quoi que ce soit en flottant à droite et à gauche. Enlève la class clear sur le hr et ça devrait aller.
Modifié par LittleBlackCat (14 Jun 2005 - 14:45)
Au début j'ai fait comme ça, mais j'ai besoin d'aller à la ligne après mon HR et dans certains cas, selon mon contenu, si je fais pas ça j'ai des décalages autres...
Comment je peut faire un retour à la ligne systèmatique après mon HR ?
Ca depend ce que tu entends par décalage autre. A priori si avant et après ton hr tu as des éléments type bloc (comme h1, h2, p...) il ne devrait pas y avoir de soucis. Tout devrait revenir à la ligne.

Peut-être qu'il faudrait que tu nous montres un souci que tu as eu (autre type de décalage) en virant la propriété clear.
Même problème dans ce thread .

Apparemment c'est un problème qui emmerde pas mal de monde !!! Quand je vous disais que le CSS n'avait pas tout prévu et qu'il n'était pas abouti...

Bref je réitère ma question (on ne sait jamais) : quelqu'un aurait-il une solution miracle ?
C'est vrai que lorsqu'on fait une recherche sur le net on voit beaucoup de monde ayant ce problème... c'est un peu énervant quand même.

J'ai oublié les clear:both mais j'ai de gros problèmes d'affichages comme je le disais avant lorsque je met des images en float pour illustrer du texte, si elle sont plus grande que la div qui la contient, l'image sort de cette div et vient empietter sur les autres...

Il y a des tutoriaux sur ces positionnement (pas ceux d'openweb je les ai lu), des exemples concrets de positionnement d'image avec le texte qui ne perturbe pas la mise en page ???
Jusqu'à présent personne sur ce forum n'a su apporter de solution à ce problème...

Il faudrait qu'on puisse dire au clear d'avoir un champ d'application local, et de ne "clearer" que les éléments flottants appartenant au même père.