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 :
- <html>
- <head>
- <LINK REL="stylesheet" TYPE="text/css" HREF="test.css"/>
- </head>
- <body>
- <div class="banner">
- <img class="left" src="gauche.png" />
- <img class="right" src="droite.png" />
- </div>
- </body>
- </html>
|
et la feuille de style :
Code :
- body {
- position: absolute;
- top: 0px;
- left: 0px;
- bottom: 0px;
- right: 0px;
- min-height: 300px ;
- margin: 10px;
- padding: 0px;
- color: black;
- background: #DEDEDE;
- font-family: Arial,Verdana,sans-serif;
- font-size:11px;
- }
- .banner {
- position: absolute;
- top: 0px;
- left: 90px;
- right: 0px;
- margin: 0px;
- padding: 0px;
- height: 105px;
- background-image: url(centre.png) ;
- background-repeat: repeat-x ;
- }
- img.left {
- position: absolute;
- top: 0px;
- left: 0px;
- }
- img.right {
- position: absolute;
- top: 0px;
- right: 0px;
- }
|
Message édité par fabrice91 le 11-07-2007 à 15:25:12
