[Resolu]Texte se superposant à un lien flottant

Bonjour,

je pense qu'une image vous sera bien plus parlant pour vous exposer mon problème.
dans une div j'ai un lien (image) flottant ainsi q'un texte(balise p), le texte suis bien les contour de l'image mais le "block" <p></p>, lui, englobe malheureusement une partie de mon image sans la contournée.
ce qui provoque l'impossibilité de cliquer sur le lien qui correspond à l'image.


Voici le code html du cette partie, suivi du css y fesant référence.

<div class="journal">
        <p id="coordonnées_journal">Songe publié par plou -toujours stagiaire- le 07/05/2008:</p>
        <hr>
        <a href="./images/GPPP05-048.jpg" id="img_journal"><img src="./images/mini_GPPP05-048.jpg" Alt="illustration du songe" width="300" height="200" /></a>
        <p id="texte_journal">Depuis huit a....mps…</p>
</div>

.journal{
	display: block;
	margin-bottom: 40px;
	padding-bottom: 30px;
	position: relative;
	top: 100px;
	left: 75px;
	overflow:hidden
}


#coordonnées_journal{
	background-color: #FFFF99;
	font-family: Arial, Helvetica, sans-serif;

	color: #111100;
	font-size:14px;
	position: relative;

}

#img_journal{
	float: left;
}

#texte_journal{
	font-family: Arial, Helvetica, sans-serif;

	color: #000000;
	font-size:14px;
	position: relative;
	left: 40px;
	width: 550px;
	padding-right:40px;
}

j'éspère avoir été suffisemment clair dans l'exposition de mon problème.
Modifié par Plou (14 May 2008 - 17:55)

Bonjour,

Supprimer le position: relative pour le paragraphe. Il ne sert à priori à rien ici, et les navigateurs font passer au premier plan un élément positionné (le paragraphe) tandis que les éléments non positionnés (image) restent au second plan.

En gros tu as ceci:

#texte_journal{
	position: relative;
	left: 40px;
	width: 550px;
	padding-right:40px;
}

alors qu'il suffirait d'avoir ceci:

#texte_journal{
	margin-left: 40px;
	width: 550px;
}

(Quoique je ne suis pas sûr que la largeur soit nécessaire ici. En général ce n'est pas le cas, mais ça dépend de ton intégration...)

Florent V. a écrit :


Supprimer le position: relative pour le paragraphe. Il ne sert à priori à rien ici, et les navigateurs font passer au premier plan un élément positionné (le paragraphe) tandis que les éléments non positionnés (image) restent au second plan.
...

je ne suis pas sûr que la largeur soit nécessaire ici. En général ce n'est pas le cas, mais ça dépend de ton intégration...

J'ignorai cette priorité donné aux éléments placés, merci pour la réponse qui règle effectivement mon problème.
la position relative me permettait de créer une marge à gauche du texte, qu'il soit a droite de l'image ou en-dessous de celle-ci, j'ai donc utilisé un margin-left: sur l'image à la place de la position relative du texte.
La largeur du texte est obligatoire si on veut que la largeur du bloc reste fixe quelque soit le contenu (taille du texte dans ce cas).

Merci pour tes lumières sur un problème beaucoup plus bête que je ne pensais.