[CSS] Bloquer la superposition d'images

Le
fabrice91
Pas trouvé de newsgroup css alors:/

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 superposerje
voudrais que mes 2 images ne puissent pas se superposer.
Merci


Voici le code html que j'utilise :


<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 :


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;
}
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
O.L.
Le #748281
Pas trouvé de newsgroup css alors...:/

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 :
[snip]


C'est le position:absolute qui t'empêche de faire ça.

Perso j'aurais fait ça avec un petit TABLE, ça devrait passer tout seul
:

<table width0% height5 cellpadding=0 cellspacing=0><tr>
<td style="background-image:url(centre.png);
background-repeat:repeat-x;">&nbsp;</td>
</tr></table>

--
Olivier Ligny
www.virgal.net (Monde persistant)

fabrice91
Le #748280

Perso j'aurais fait ça avec un petit TABLE, ça devrait passer tout seul :


ah oui, je voulais éviter une table...

<table width0% height5 cellpadding=0 cellspacing=0><tr>
<td style="background-image:url(centre.png);
background-repeat:repeat-x;">&nbsp;</td>
</tr></table>


ça marche pas mal...
A quoi sert le width=1 ? enfin je sais qu'il sert à positionner la
taille de la cellule à 1 mais pourquoi y en a-t-il besoin ? j'ai vu que
sans le width, l'effet est différent pourtant l'image est bien là...j'ai
le background-repeat qui disparaît...
autre effet, l'image du background repeat est décalée d'1 pixel vers le
haut par rapport aux images droite et gauche...bizarre je n'avais pas
cet effet précédemment...
merci en tout cas de t'être penché sur mon problème ?

fabrice91
Le #748279
Ne plus répondre à ce post svp, je le transfère sur
fr.comp.infosystemes.www.auteurs qui semble plus approprié ( faut le
savoir...:-( )
Merci
Publicité
Poster une réponse
Anonyme