Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript [CSS] Bloquer la superposition d'images

[CSS] Bloquer la superposition d'images

3 réponses
Avatar
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 superposer...je
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;
}
Signaler un problème avec ce contenu

3 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
O.L.
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 width=1><img src="gauche.png"></td>
<td style="background-image:url(centre.png);
background-repeat:repeat-x;">&nbsp;</td>
<td width=1><img src="gauche.png"></td>
</tr></table>

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

Avatar
fabrice91

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 width=1><img src="gauche.png"></td>
<td style="background-image:url(centre.png);
background-repeat:repeat-x;">&nbsp;</td>
<td width=1><img src="gauche.png"></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 ?

Avatar
fabrice91
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