Problème de superposition de texte sur image

Problème de superposition de texte sur image - HTML/CSS - Programmation

Marsh Posté le 24-08-2008 à 17:41:19    

Bonjour,  
 
j'ai ce problème de superposition :  
http://www.developpementphoto.net/V3/  
 
sur l'étoile bleu à droite "Gros consommateurs ? profitez des packs photo"  
 
J'ai sur l'image donné cette propriété :  
 
style="float:right; margin:10px; border:0"  
 
mais le texte de la liste dessous superpose l'image alors que j'aimerais un cadre autour de l'image de 10px.  
De plus la seconde ligne de la liste a un espace avec le premier élément, ce qui est du a l'image aussi.  
 
Pouvez vous m'aider ?  
 
Edit le résultat n'est pas le même sous internet explorer et firfox. .. je vous laisse voir de vous même.  
 
Merci
 


---------------
la vie à le goût qu'on lui donne !! Vive le photo numérique et le tirage photo
Reply

Marsh Posté le 24-08-2008 à 17:41:19   

Reply

Marsh Posté le 25-08-2008 à 02:42:15    

Salut à toi,  
 
Alors déja si tu veux un cadre autour de ton image met plutôt sa :
 
style="float:right; margin:10px; border:1"  
 
ou sinon tu enlève border:0" car il désactive les bordures ce code
 
Sinon pour le reste pourraît plus précis je n'arrive pas à tous bien comprendre
 
Amicalement Swink


---------------
L'amour ne se cherche pas, il éclot au détour d'un regard, au coin d'un sourire
Reply

Marsh Posté le 25-08-2008 à 19:11:30    

bonjour,
 
non en fait je désire que le texte de la liste contourne l'image, plutot épouse le cadre invisible de l'image afin d'éviter les espaces.
la ca fonctionne sous firefox mais pas internet explorer ..
Une idée ?


Message édité par mims1664 le 25-08-2008 à 19:12:14

---------------
la vie à le goût qu'on lui donne !! Vive le photo numérique et le tirage photo
Reply

Marsh Posté le 26-08-2008 à 01:01:02    

oui

 

ton code est crade
il devrait avoir la meme structure sur le papier et sur le web
ton image, le H1 et ta liste devraient etre dans le meme conteneur
tu enleves les styles en ligne de tes li (style="width:xxx" ) parce qu ie cherchera pas a comprendre (il pousse) et normalement ca marche tout seul

 

edit: arrange toi pour avoir les menus fermés quand on charge la page ca fait pas tres serieux


Message édité par mIRROR le 26-08-2008 à 01:01:55

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 26-08-2008 à 22:19:33    

ha ben ca c'est facile a dire tout ca ! moi je galère avec la css a croire que je fais un rebus dessus !
le faite de passer la taille du li en auto (car si ne met rien ca descend a gogo sous la side barre) ca me décale le <span class="first"> et le <span class="second"> dans le li !
 

Message cité 1 fois

---------------
la vie à le goût qu'on lui donne !! Vive le photo numérique et le tirage photo
Reply

Marsh Posté le 27-08-2008 à 00:00:51    

mims1664 a écrit :

ha ben ca c'est facile a dire tout ca ! moi je galère avec la css a croire que je fais un rebus dessus !
le faite de passer la taille du li en auto (car si ne met rien ca descend a gogo sous la side barre) ca me décale le <span class="first"> et le <span class="second"> dans le li !
 


 
j avais meme pas vu les faux a pour souligner un element [:prozac]
voila en gros, ca marche sur ie6 et ff
pas de styles en ligne tu bloques pas tes elements en pixels il faut les laisser respirer

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2.  
  3. <html> 
  4. <head> 
  5.     <title>Test</title> 
  6.     <style type="text/css" > 
  7.         ul, li {margin:0;padding:0;} 
  8.         .section {width:80%;} 
  9.         .section h1 {background: url(images/flechetitre.png) no-repeat center left;padding-left:25px;} 
  10.         .section .media {float:right;cursor:pointer;margin:30px 0;} 
  11.         #listeaccueil  {list-style-type:none;padding-left:20px;} 
  12.         #listeaccueil li, #listeaccueil div {overflow:auto;zoom:1;} 
  13.         #listeaccueil h3 {float:left;width:20%;margin:0;color:#06f;font-size:15px;text-decoration:underline;} 
  14.     </style> 
  15. </head> 
  16. <body> 
  17.  
  18. <div class="section"> 
  19.     <img alt="Pack photos" title="Pack photos pour les gros consommateurs de photos" src="images/etoile.png" class="media" /> 
  20.      
  21.     <h1>Les bons plans photos et les promotions</h1> 
  22.      
  23.     <ul id="listeaccueil"> 
  24.         <li> 
  25.             <h3>Les Accros 2 :</h3> 
  26.             <div><strong>10 €</strong> les <strong>200 photos</strong> (hors frais de port) </div> 
  27.         </li> 
  28.  
  29.         <li> 
  30.             <h3>Photobox :</h3> 
  31.             <div>40 tirages classic au format 10x15 ou 11x15 et 10 agrandissements format 15x20 ou 15x21 (hors frais de port) </div> 
  32.         </li> 
  33.  
  34.         <li> 
  35.             <h3> Photoways :</h3> 
  36.             <div> <strong>WAYSPRSAUG</strong>&nbsp;3€ de réduction sur le Livre Photo Prestige </div> 
  37.         </li> 
  38.  
  39.  
  40.         <li> 
  41.             <h3> Photoways :</h3> 
  42.             <div> <strong>WAYSPSTAUG </strong>15 % de réduction sur les posters. </div> 
  43.         </li> 
  44.  
  45.         <li> 
  46.             <h3> Les Accros 2 :</h3> 
  47.             <div><strong>200 </strong>tirages 10x13 à <strong>10 €</strong>, <strong>500 </strong>tirages à <strong>20 €</strong> hors frais de ports</div> 
  48.         </li> 
  49.     </ul> 
  50.  
  51. </div>  
  52.  
  53. </body> 
  54. </html>


 
 


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 27-08-2008 à 07:57:12    

lol non quand même pas ! les a seront des futures lien !!! LOL
 
bon j'ai regardé ce que tu as fait ! en effet c'est pas mal mais a la base si tu regarde bien ce qu'il y a en face des laboratoire s'aligne en fonction de la longueur du labo et cela sur 2 lignes si il le faut alors que ce que tu m'as proposé ne s'adapte pas a la longue du texte du labo si demain j'en ai un qui  s'appel : blabalbalbalbalbalbabref
 
bref trop long ca va tout me décaler et se sera pas beau alors qu'avec le système actuel la ou les lignes s'adapteront a sa longueur !
c'est pas simple (a expliquer et a comprendre je pense)


---------------
la vie à le goût qu'on lui donne !! Vive le photo numérique et le tirage photo
Reply

Marsh Posté le 27-08-2008 à 18:41:55    

si demain t as un nom de labo trop long ca sera un caractere ou deux a changer dans ta css, c est quand meme loin de ressembler a la fin du monde... au moins tu garderas un bel alignement, c ets nettement plus agreable pour ton visiteur
en bonus, tout ce qui est potentiellement modifiable est centré dans une seule css et pas 20 000 styles en ligne qui te feront perdre du temps
mais voila quoi, avant de se mettre a coder tete baissée il faut juste s arreter et prendre un peu de temps pour bien organiser le truc
non seulement tu y gagneras en temps de developpement et je te raconte meme pas le gain en maintenance


Message édité par mIRROR le 27-08-2008 à 18:43:00

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 27-08-2008 à 18:59:04    

LOL je crois que tu as totalement raison !! et je crois que je perds la raison !! je deviens fou avec cette css !!! LOL  
je vais faire 2 ou 3 test ! je te redis ca !


---------------
la vie à le goût qu'on lui donne !! Vive le photo numérique et le tirage photo
Reply

Marsh Posté le 27-08-2008 à 22:00:40    

pas de probleme
et si t as des question hesite pas


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 27-08-2008 à 22:00:40   

Reply

Marsh Posté le 27-08-2008 à 22:07:42    

ok ok merci mIRROR ;-) bonne soirée a toi !


---------------
la vie à le goût qu'on lui donne !! Vive le photo numérique et le tirage photo
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed