28173 sujets

CSS et mise en forme, CSS3

Chevauchement où une image float est par dessus le texte

Bonjour,

Je crois avoir bien suivi le guide avant de poster. Je suis loin d'être un expert CSS même si je m'y connais un peu.

Voici donc mon problème. Je nettoie présentement un site en "purifiant" le code CSS et en le rendant vraiment compatible XHTML 1.0. J'ai voulu faire en sorte que la silhouette que l'on voit dans le site, dans la partie droite, soit mieux découpée. Elle était auparavant découpée en deux parties et tout fonctionnait très bien. Je l'ai redécoupée en cinq parties et maintenant ça ne va plus.

Le problème vient du fait que sur certaines pages l'image passe au-dessus du texte. Dans IE6 la silhouette apparaît parfois avec un espace en plein milieu (i.e. entre des tranches de la silhouette). J'ai ajouté un padding, un margin, j'ai agrandi la taille du bloc parce que je me disais que peut-être le navigateur ne voyait pas correctement sa taille mais rien n'y fait.

S'agit-il d'un problème de conception (i.e. cela ne se fait pas) ou bien d'exécution (i.e. je suis trop ignorant pour régler le problème moi-même) ?

Toute aide est la bienvenue. Ah oui, le CSS est ici.

(Mise à jour: j'ai corrigé les liens, qui pointaient vers un domaine incorrect)
Modifié par Saeletra (26 Nov 2006 - 04:32)
Bonjour,

Ton lien n'est pas bon...
Jetes un oeil là //ghost-pc-buster.com/mas2/chambre.php
css: //ghost-pc-buster.com/mas2/general.css
Modifié par ghost (24 Nov 2006 - 22:29)
Merci du coup de pouce. J'ai regardé ton site et je ne comprends pas vraiment comment tu fais pour aligner toutes tes images. Dans mon cas j'ai une image à gauche et j'aimerais faire flotter les images à droite. Mon problème est surtout que la silhouette chevauche le texte. Devrais-je créer, comme je crois comprendre que c'est le cas sur ton site, un contenant (div) pour toute la zone de texte et inclure dans ce contenant les images? Parce que le contenant existe déjà et j'ai malgré tout un problème. En fait ce que je ne comprends pas, c'est ce que tu as dans ta feuille de style qui fait toute la différence. Serait-ce la marge de droite de 25px? La marge de gauche de 5px? J'ai déjà mis une marge de 10px à ma silhouette sans que ça ne change rien.

Merci de ton aide.
Bonjour,

Pour que ça fonctionne correctement le block qui contient ton image doit rester dans le flux.
Il est plus simple de laisser les images dans le code et de renseigner au moins un alt (pour l'accessibilité et le référencement)


		<style type="text/css">

#conteneur{
   width: 760px;
   margin: auto;
   border: 1px solid #000;
   overflow: hidden;
}
	
#block{	 /* -- Il faut laisser ce block dans le flux (pas de float ni absolute sinon ton texte est chevauché par l'image à part cela je pense que tu avais tout bon */

   line-height: 20px;
   margin-bottom: 10px;
   margin-top: 10px;
}

#block img{
   float: right;
   clear: right;
   margin: 0 25px 0 5px ;

}

.kwan{
   float: left;
   padding: 10px;

}
		</style></head>

	<body>
<div id="conteneur">
	<img src="image_maitre_kwan.jpg" class="kwan" alt="" />
	<div id="block"> 
		<img src="partie_1.png"  alt="bla bla bla" />
		<img src="partie_2.png"  alt="" />
		<img src="partie_3.png"  alt="" />
		<img src="partie_4.png"  alt="" />
		<img src="partie_5.png"  alt="" />
		<p>C'est à l'adolescence que maître Kwan débute l'apprentissage du Tang Lang Quan sous la
supervision de Li You Yun qui, pour sa part, avait appris le style d'un disciple du très renommé Luo Guang Yu de Shanghai. Après une dizaine d'années d'apprentissage, maître Li meurt. Maître Kwan, alors jeune adulte, devient élève auprès de Li Pei Xian, également étudiant de Luo Guang Yu, disciple de Chen Zi Zheng du style de kung fu des serres d'aigle (Eagle Claw) et vice-président de l'association Jing Wu de Canton.
		</p>
		<p>C'est avec Li Pei Xian que maître Kwan passera les 25 prochaines années. À ses côtés il approfondira ses connaissances du Tang Lang Quan, maîtrisera le Ying Zhao Quan, le Tai Ji Quan de la famille Wu, certaines formes de bâton, d'épée, de sabre et de lance. C'est aussi avec lui qu'il apprendra la médecine traditionnelle chinoise. En 1978, maître Kwan quitte la Chine pour venir s'établir ici à Montréal et y ouvre un modeste cabinet de massage thérapeutique chinois. Aujourd'hui il est retraité mais continue d'enseigner le kung fu.
		</p>   
	</div>
</div>


Bonne continuation
bonjour je souhaitais savoir comment procéder pour faire le contraire, faire déborder légèrement l'image sur le texte comme le fait cet exemple :

http://www.djleo.fr/toto.JPG

En prenant en compte que mon image est transparente au niveau du cadre noir
Bonjour,

Le plus simple tu positionnes un gif avec un fond transparent en absolute sur ton texte ...
Je reviens à la charge avec mon problème. ghost, tout d'abord merci pour ton aide. J'ai fait comme tu as proposé et j'ai laissé le bloc dans le flux, sans float et sans position absolue.

Voici ce que ça donne en gros:


<body et tout le tralala>
<div id="contenant_principal"> /* pour centrer toute la page */
  en-tête et menu
  <div id="contenant_zone_principale"> /* pour éviter que la silhouette ne dépasse par le bas, donc avec overflow: hidden */
  image située dans la partie gauche
	  <div id="contenant_texte"> /* ce qui contiendra la silhouette et le texte */
	  	texte et silhouette
	  </div>
	</div>
</div>
</body et tout le tralala>


Ceci étant j'ai toujours un problème où ma silhouette chevauche (voire écrase) du texte. Le problème ne survient pas toujours; en fait si je place ma silhouette à certains endroits elle se place correctement mais selon moi ce n'est qu'un coup de chance parce que dès la taille de la police de caractère change la silhouette revient chevaucher.

J'ai essayé plusieurs choses, dont le fait de changer toutes mes tailles de police de caractère de em à px, d'enlever le font-size: 75% de la balise body mais rien n'y fait. Ai-je fait une erreur dans l'ordre dans le flux? Est-ce que la silhouette devrait être placée à un endroit fixe?

Le site est ici et le CSS est ici. Toute aide est, encore une fois, plus que bienvenue Smiley smile
Bonjour,

En fait, je pense que ce n'est pas une erreur de choix de police, de code ou de em ou px. Ton texte s'aligne et se positionne sur tes découpes d'image en fonction du margin-left des images. Plus tes découpes seront nombreuses plus fine sera l'adaptation à des variations de taille d'affichage. Tu peux aussi jouer sur le line-height de ton texte et en associant les nombres de découpes et un line-height correct avoir une fourchette de tolérance et d'adaptabilité suffisante. A savoir que ce n'est pas une technique à 100% efficace...

Dans ton cas, il vaudrait mieux avoir une découpe plus fine et plus régulière, ce qui limiterait un peu les dégats.

Bonne continuation
Sujet clos
Aller à