28221 sujets

CSS et mise en forme, CSS3

C'est une peu dur d'expliquer en une phrase mon petit souci.

J'ai fait une petite recherche infructueuse dans le forum.

En fait, g une page avec des images et du texte.
Les deux s'alterne, un coup à gauche un coup à droite.

<div id="ligne1">
	
	<div class="illusD">
		<img src="../photos/image1.jpg" alt=""/>
	</div>
	
	<div class="texteG" id="textebarp1">
		<p>Paragraphe de texte assez long</p>
	</div>
</div>


.illusD {
	float:right;
	margin:10px;
}

.texteG {
	float:left;
}


Dans IE, pas de problème, le texte et la photo se mettent à côté et le paragraphe fait un retour à la ligne automatiquement.
Mais Mozilla, apparemment, comme je ne lui spécifie pas de largeur pour le texte, utilise la largeur maximale de la page, et la photo est en dessous.

pour voir : digistal.com/haraspeysselier2/FR/domaine-des-pins.php

Suis-je obligée de spécifier une largeur pour le texte?
Ou ai-je fait une bourde?
Modifié le 28 Jan 2005 - 14:42
Patience !!! Smiley cligne

Je regarde si je peux t'aider Smiley smile ... Mais si jamais ta question s'enfonce encore dans le forum, n'hésite pas à la faire remonter Smiley cligne

Editer : En attendant, regarde, en éditant ton message, pour mettre ton lien comme il convient, stp !
Modifié le 19 Jan 2005 - 13:30
Smiley eek ... heuuuuuuu !

Je ne comprend pas là, j'ai la même présentation de toutes tes pages sous Internet Explorer 6 et Firefox... J'ai testé en config 800x600.

Quel est ton problème exactement ??? stp Smiley cligne
Ma foi, écoute je ne peux pas vérifier, car le serveur est complètement dans les choux ce matin, mais hier, pour moi, ça ne donnait pas la même chose.

En attendant, si ça marche, c super, je suis désolée.

Pour le lien, c'est voulu.
Pas envie que dans les stats, alsacreations apparaissent.

Merci Smiley smile
Modifié le 20 Jan 2005 - 10:17
Lol Smiley smile

C juste que les stats, c super indiscret.
Le client a pas besoin de savoir que j'ai eu un problème avec son site et Mozilla...
Le serveur est réparé, j'ai retesté le site sous Mozilla, et je n'ai pas vraiment trouvé que c'était la même chose que dans IE.

*http://www.peysselier.com/FR/chateau-de-rouillac.php

Je rappelle mon pb : Dans Mozilla, les textes prennent la largeur maximale de la page, et donc, l'image qui à la base devrait être à droite du texte et le forcer à des retour à la ligne, passe en dessous.

PS: mais peut-être est-ce encore un des mystère de l'informatique qui fait que ya que chez moi que ça marche pas...
sous firefox, j'ai effectivement le texte sur toute la longueur du grand cadre noir (avec les marges que tuas définies, bien sûr) et les images positionnés à la suite des textes (en dessous).

sous IE, ça fonctionne comme tu l'expliques, c.a.d. que les images sont "en face" des textes.
Ma foi:

Essaye en donnant une lergeur fixe à tes DIV flotants. Je crois que le problème ici c'est que par défaut, FF donne une largeur 100% au div avec les paragraphes.

Autre solution, coder autrement. Qqch du genre, par exemple.
<div id="ligne1" class="lignes">
    <div class='illus">
      <img src="..." alt=" " /><br />légende
    </div>
    <p>blahblahblah blahblah</p>
</div>

avec un CSS genre
.lignes {
clear: both;
}

.illus {
width: 245px;
}

#ligne1 .illus, #ligne3 .illus {
   float: left;
}

#ligne1 P, #ligne3 P {
   margin-left: 250px;
}

#ligne2 .illus, #ligne4 .illus {
   float: right;
}

#ligne2 P, #ligne4 P {
   margin-right: 250px;
}


a priori, c'est comme ca que je ferrais. Mais j'ai pas vraimnet le temps de testé ca, donc c'est juste une idée, pas dit que ca marche, mais intuitivement, c'est la solution que je tenterai.
Modifié le 28 Jan 2005 - 10:51
Oki merci Smiley smile

Je vais essayer.

Néanmoins j'ai eu un problème similaire sur un site ce matin, et apparemment c'est le float left qui prend la largeur maximale.

J'ai un texte à gauche, une image à droite, je donnais un float au deux, alors que le float : left était superflu et en plus il créé des pbs.

Je vais tout d'abord essayer de supprimer les float left de mon code.