28172 sujets

CSS et mise en forme, CSS3

Float en-dessous du texte

Bonjour à tous,

J'ai un petit souci avec une image que je veux positionner à droite d'un texte. Ce texte doit se terminer juste avant l'image.

Or quand j'utilise la propriété position absolute pour l'image, le texte est en-dessous de l'image.
Quand j'utilise la propriété float right pour l'image, le texte est au-dessus de l'image.
(ci-joint copie écran avec les deux cas)

J'ai bien pensé à la balise z-index pour définir l'ordre des éléments mais cela ne fonctionne pas.

Le code html

<html>
            <div id="contenu2">
            	<h1>titre</h1>
                <h2>titre2</h2>
                	<p>texte</p>
               	<div id="fom1"><a href="#">Find out more</a></div>
			  <h2>titre2</h2>
                	<p>texte</p>
                <div id="fom2"><a href="#">Find out more</a></div>
           	  <h2>titre 2</h2>
                	<p>texte</p>
               	<div id="fom3"><a href="#">Find out more</a></div>
          </div>
</html>


Et le code CSS

#contenu2
{
	background:url("../Images/milieu-bas-accueil.jpg") no-repeat;
	width:616px;
	height:246px;
	position:absolute;
	margin-top:382px;
	z-index:1;
}

#fom1
{
	background:url("../Images/fom.jpg") no-repeat;
	width:113px;
	height:28px;
	float:left;
	margin-left:495px;
	margin-top:-50px;
	padding-left:10px;
	text-indent:-5000px;
	display:block;
	z-index:3;
}

#fom2
{
	background:url("../Images/fom.jpg") no-repeat;
	width:113px;
	height:28px;
	position:absolute;
	margin-left:495px;
	margin-top:-50px;
	padding-left:10px;
	text-indent:-5000px;
	display:block;
	z-index:3;
}

h1
{
	font-size:2em;
	font-weight:bold;
	color:#eb6909;
	margin-left:7px;
	margin-right:8px;
	line-height:25px;
}

h2
{
	font-size:1.2em;
	font-weight:bold;
	color:#002f60;
	margin-left:7px;
	margin-right:8px;
	line-height:10px;
	margin-top:20px;
}

p
{
	font-size:0.9em;
	text-align:justify;
	line-height:20px;
	margin-left:7px;
	margin-right:8px;
	z-index:2;
}


Pensez-vous que c'est à cause du texte défini dans p ? Il est censé prendre toute la largeur du contenu2.
Devrais-je mettre auto comme propriété au texte pour que celui-ci respecte les balises float ?

Merci pour votre aide ! Smiley smile
Modifié par Florent V. (08 Jul 2009 - 13:57)
désolée pour la qualité du message j'ai un problème avec mon compte !
je ne peux pas joindre d'image et éditer le message pour le remettre correctement !

toutes mes excuses

je vais essayer de remettre le message comme il doit être présenté
Bonjour,

Quand tu parles d'images, tu fais bien référence aux images de fond définies dans les CSS ? (car je n'en vois pas d'autres). Si c'est le cas, il est normal qu'en les faisant flotter elles se retrouvent sous le texte, puisqu'elle sont après le texte dans le HTML, les éléments flottants doivent être placés avant l'élément non flottat.

Tu devrais lire ces articles sur le positionnement CSS.
Non ce sont des images qui vont servir de boutons pour aller sur une autre page.
Ces images ("boutons") doivent être situées à côté du texte pour pouvoir accéder au détail du contenu (le texte n'étant qu'une partie du contenu d'une autre page).

En gros c'est comme quand tu écris le début d'un article et que tu dois cliquer sur "En savoir plus" pour connaître la suite.

Et j'ai déjà une autre image en arrière-plan placée derrière le texte et les "images-boutons".

Je vais potasser l'article cependant Smiley ravi

Merci pour ta réponse ! Smiley smile
Sujet clos
Aller à