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 :
Et les propriétés CSS suivantes :
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 !
Merci d'avance
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 !

Merci d'avance