[Résolu] Problème de positionement de texte

Bonjours à tous,

Je suis entrain de réaliser un site dont voici l'adresse:
www.cabfisc.ch/?set

attention à ne pas oublier le ?set sinon vous n'arriverez pas au bon endroit, et ensuite cliquer sur news dans le menu.

J'ai mis mes divs qui posent problème en couleurs. Donc mon problème est que le texte du div de droit qui à un moment donné revient dessous le div de gauche. Et ces deux divs en float sont elle-mêmes entourée d'un div contenu pour maintenir tout ca ensemble.

J'ai égalment rajouté au a la fin du div contenu un clear:both mais ca n'a pas l'air de fonctionner et je ne trouve pas la solution.

HTML

<div id="content">
<div id="main_gauche">
<div class="main">
	<img src="img/img_test.jpg" alt="img_test">
</div>
</div>
<div id="main_droite">
<div class="main">
	<h2>Sous-titre 1</h2>

	<p>Consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate</p>
	<h2>Sous-titre 2</h2>
	<p>Consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate</p>
	<h2>Sous-titre 3</h2>
	<p>Consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate</p>
</div> 
<!-- fermeture div main -->

</div> 
<!-- fermeture div main_droite --></div> <!-- fermeture div content -->

<br class="spacer">
<div id="footer">
</div>

CSS

/* div qui maintien les deux colones principales ensemble */
#content {
	margin: 0px 0;
}

/* main_gauche est la colone de gauche qui accueille photos et autre */
#main_gauche {	
	width: 300px;
	float: left;
	margin-right: 15px;
	color: #333;
	text-align: center;
	padding: 15px 0 0 0;
	font-size: 12px;
	background: url(./img/back_gauche2.gif) no-repeat;
	background-color: red;
	/*filter:alpha(opacity=80);
	-moz-opacity:0.8;
	opacity: 0.8;*/
}

/* bordure blanche autour des images */
#content #main_gauche img {
	border: 1px solid #ffffff;
}

/* main_droite est la colone de droite qui accueille le texte */
#main_droite {
	color: #000;
	text-align: justify;
	font-size: 12px;
	margin-bottom:15px;
	background-color: #00FF00;
}

/* contient le pied de page avec credits, liens, etc. */
#footer {
	height: 10px;
	background-color: #CCC;
	width: 750px;
	font-size: 10px;
	}

/* evite au texte de toucher les bords, effet de marge */
.main {
	margin: 0 16px 0 8px;
}

/* ne pas toucher, corrige le bug des colones multiples */
.spacer {
	clear: both;
}

Voilà j'espère que j'ai été assez clair dans mes explication, merci de votre aide.

David
Modifié par Daweed (13 May 2005 - 14:08)

Salut,

Ce ne serait pas plutôt "menu_1" le lien sur lequel il faut cliquer ?

L'animation de ton menu est très joli mais , y a plus de javascript que de contenu de page !

J'ai désactiver Javascript pour voir ce que ça donnait... Et ben, ça donne rien du tout puisqu'il n'y a plus de menu du tout.

Maintenant je vais jeter un oeil à ton pb...

Excuse-moi mais #main-droite n'est pas en float...

Pour ton menu, tu peux réaliser sa structure en CSS (y a plein de tutos la-dessus) et rajouter certains effets graphiques en Javascript.
Ainsi, ton menu sera toujours visible.

Parce que actuellement, je ne sais pas quel est le pourcentage de gens qui désactivent Javascript, mais ça fait une clientèle potentielle en moins pour la société.

Merci Ricou13, je vais essayer de mettre tout ca en float et voir ce que ca donne, sinon pour le menu en java c'est imposé pas mon chef de projet, c'est vrai qu'il est pas du tout accessible et c'est ce qui me dérange, mais bon je ne fais qu'exécuter les ordres lol.

sinon pour le float de mon div droit je pensais que je n'avais pas besoin de la faire vu que j'ai déja mis un float:left à mon div de gauche. Faut-il donc également en mettre à mon div droit ?

a+ peut être
Modifié par Daweed (13 May 2005 - 12:54)

Je vois que tu as trouvé.

J'avais 2 pistes :

- Les deux blocs en float:left;
ou
- Le bloc de contenu avec une marge gauche

Quelle est ta solution ? (j'ai la flème de refouiller ton code )

hello dsl de pas avoir répondu plus vite

Ben en fait c'était tout bête, effectiment j'ai simplement mis mes deux blocs en float:left et comme par magie mon problème c'est envolé !

Merci encore d'avoir jeté un oeil à mon code en tout cas