Problème de positionnement

Bonsoir à tous,

J'ai un petit problème avec mon CSS, en effet, j'utilise un background-image mais le texte se "colle" par dessus ...

Par exemple:

http://guillaumelenoir5.free.fr/sisite/index.php

La tout va bien, mais là http://guillaumelenoir5.free.fr/sisite/divers.php?num=5

C'est la quata, comment je peux résoudre ce problème ? avec un float ?, voici mon css en question:

.centre {
padding:10px;
border:1px solid #F9EBC7;
background:#FEFCF1;
color:#777;
padding-left:10px;
border-radius: 6px;
-moz-border-radius: 6px;
background-image:url(../images/image.png);
background-repeat:no-repeat;
background-position:right top;
}

PS: l'image se positionne sur le coté droit au lieu du haut car tout simplement l'image mesure 70 pixels en hauteur et 150 en largeur ... je suis obligé de jouer sur ça pour pas que le texte ne passe par dessus mais il y a des pages ou ça ne passe pas ...

J'aimerais juste la positionner au centre à droite et que le texte ne passe pas par dessus ...

Je ne veux pas inclure une image avec la balise <img />, tous mes blocs en .centre doivent avoir cette image à droite ...


Merci à tous pour votre aide et bonne soirée
Modifié par guigui83 (29 Aug 2006 - 20:15)

salut ... t'es liens marchent pas

sisi il marche ...

Des fois le serveur de free bug, il suffit d'actualiser trois ou quatres fois, mais là c'est bon ...

ça marchait pas lorsque j'ai essayé la première fois que j'ai essayé

Oui en fait c'est le background de tes paragraphes qui ont la class .centre ... Si tu ne veux pas mettre d'images directement dans le code il ne te reste plus qu'à mettre un span ou un div qui aura l'image de bkg en question ...

ce span ou ce div sera float:right ...

Voilà ...

.. en background ça marche pas, je suis obligé d'utiliser un

<span class="droite_image"><img src="images/image.png" alt="" /></span>


.droite_image {
float: right;
}

Ui ça je sais que c'est bon j'ai déjà testé,
mais bon pour le :hover je ne peux pas ...

Auriez-vous une solution ?

Et si tu plaçais un span comme ceci ... dans ta boucle ... c'est pas super élégant mais ...

HTML:

<!-- ta boucle -->
<p class="centre">
<span class="icone">NON-BREAKING-SPAcE</span>
Un peu de prommagation PHP ne fait pas de mal ... je vais vous donner la définition de la boucle while !
</p>
<!-- FIN ta boucle -->

CSS:

span.icone {
background: transparent url(img/icone.png) no-repeat 0 0;
float:right;
margin:.5em;
height:30px;
width:30px;}

Ce genre de truc devrait fonctionner ...


non ...?
Modifié par yhugo (29 Aug 2006 - 22:09)

Euh bah écoute non ...


(merci de tes réponses en tout cas et de ton aide)

Voici mon CSS

span.droite_image {
background: transparent url(../images/image.png) no-repeat 0 0;
float:right;
margin:.5em;
height:30px;
width:30px;
}

Et dans le code html:

				<p class="centre">
				<span class="droite_image"></span>

** suite volontairement coupée (fin de balise avec) ***

Aucun résultat, l'image ne s'affiche pas ...
Modifié par guigui83 (29 Aug 2006 - 22:36)

hum ...

Je l'ai testé avant de te l'envoyer ... et ça marchait bien ...

As-tu mît un espace insécable entre tes span ?

Ton image pointe vers le bon répertoire ?

à la place de l'image essait seulement avec une couleur en background de ton span : background : yellow; ... De cette façon tu vas voir si c'est un problème de chemin ou autre ...

Et essait en enlevant le span devant span.droite_image ...

C'est probablement un détail qui nous échappe ...
Modifié par yhugo (29 Aug 2006 - 22:49)

Salut,

rapidement , je vois un truc qui me fait faire tilt :

Il m'arrive de temps en temps (trop souvent même) un soucis avec les background quand je spécifie des déclarations derrière celui ci et l'image n'apparaît pas...

span.droite_image {
background: transparent url(../images/image.png) [b]no-repeat 0 0[/b];
float:right;
margin:.5em;
height:30px;
width:30px;
}

Je doute que tu puisse dimensionner un span comme c'est une balise en ligne.
Passe la déjà en display:block.

Essayes de retirer ce qui est en gras dans le code.

Donc, quand ce soucis m'arrive , je suis obliger de faire comme ça :

background: transparent url(../images/image.png);
background-position: 0 0; /* (ça je pense que ça sert à rien...) */
background-reapet: no-reapet;

J'ai jamais compris pourquoi...
Des fois c'est même le validateur qui me dit que j'ai trop de déclarations derrière le chemin de l'image.

....essaye....
Modifié par Hum (29 Aug 2006 - 22:55)

Yhugo, c'est ce que j'ai regardé en premier ...


Le chemin d'accès est bon mais pas moyen d'afficher l'image :S

Même avec la méthode de "hum" ... tant pis je n'affiche pas d'image dans les blocs
Modifié par guigui83 (29 Aug 2006 - 23:24)

Il y a forcement quelque chose qui interfère ...

N'abandonne pas.

Dans des cas bloqué, prendre une page vierge et créer le comportement souhaité tout seul dans une page, si tu y arrives pas c'est que le problème se situe bien là.

Si tu y arrives , ben tu prends les éléments de ta page d'origine et tu les ajoute (copié collé) un par un en vérifiant a chaque insertion.
Au moment où ça coince, tu sais quel élément fait interférence : je fais comme ça en tout cas...

Simplifier aussi ton css au maximum et rajoute les déclarations une par une en controlant a chaque fois.

Edit : mince ! je viens de voir ça :

background: [b]transparent[/b] url(../images/image.png);

Enleve aussi le transparent en gras, je pense qu'il n'est de toutes façon pas à sa place...
Modifié par Hum (30 Aug 2006 - 15:56)