[css][résolu] bloquer la superposition d'images

bloquer la superposition d'images [css][résolu] - HTML/CSS - Programmation

Marsh Posté le 10-07-2007 à 16:49:49    

Bonjour,
 
J'ai une bannière en haut de mon site et je veux qu'elle soit redimensionnable en fonction du redimensionnement de la fenetre du navigateur elle-même.
Pour ceci j'ai coupé ma bannière en 3 parties :
une image gauche
une image droite
une image centre
Je crée un div pour cette banniere
J'y mets un background-repeat: repeat-x; pour mon image centrale.
J'y mets mes 2 images gauche et droite
Chaque image a un style css, ayant un postionnement left pour l'une et right pour l'autre.
Tout fonctionne bien sauf lorsque je reduis la taille de la fenetre et lorsque mes 2 images gauche et droite viennent se superposer...je voudrais que mes 2 images ne puissent pas se superposer.
Merci
 
Voici le code html que j'utilise :

Code :
  1. <html>
  2. <head>
  3. <LINK REL="stylesheet" TYPE="text/css" HREF="test.css"/>
  4. </head>
  5. <body>
  6. <div class="banner">
  8.     <img class="left" src="gauche.png" />
  9.     <img class="right" src="droite.png" />
  11. </div>
  12. </body>
  13. </html>


et la feuille de style :

Code :
  1. body {
  2. position: absolute;
  3.   top: 0px;
  4.   left: 0px;
  5.   bottom: 0px;
  6.   right: 0px;
  7.   min-height: 300px ;
  8.   margin: 10px;
  9.   padding: 0px;
  10.   color: black;
  11.   background: #DEDEDE;
  12.   font-family: Arial,Verdana,sans-serif;
  13.   font-size:11px;
  14. }
  16. .banner {
  17.   position: absolute;
  18.   top: 0px;
  19.   left: 90px;
  20.   right: 0px;
  21.   margin: 0px;
  22.   padding: 0px;
  23.   height: 105px;
  24.   background-image: url(centre.png) ;
  25.   background-repeat: repeat-x ;
  26. }
  28. img.left {
  29.   position: absolute;
  30.   top: 0px;
  31.   left: 0px;
  32. }
  34. img.right {
  35.   position: absolute;
  36.   top: 0px;
  37.   right: 0px;
  38. }


Message édité par fabrice91 le 11-07-2007 à 15:25:12
Reply

Marsh Posté le 10-07-2007 à 16:49:49   

Reply

Marsh Posté le 11-07-2007 à 15:10:25    

Après tatonnage, il faut ajouter dans la règle css de "banner" un min-width minimal pour le bloc en dessous duquel on ne veut pas aller...
et ça marche...
en tout cas sous Firefox 1.5

Reply

Sujets relatifs:

Leave a Replay

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