Problème pour répéter une image en css/html

Résolu/Fermé

Koma777 Messages postés 261 Date d'inscription mercredi 17 janvier 2007 Statut Membre Dernière intervention 16 février 2018 - 16 nov. 2009 à 22:38
superblitzcaro Messages postés 10 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 27 janvier 2010 - 16 nov. 2009 à 23:56

Bonjour tout le monde,

je viens vers vous suite à un problème que n'arrive pas à résoudre seul...

Je voudrais en faite répéter trois fois de suite: une photo avec une bordure sur un cadre excentré. (voir "schéma ci-dessous"...

  
                 _______________                    
                | ______bordure_|___
                | |                            |
                | |                            |
                | |        Photo            |
                | |        (encadré)      |
                | |                            |
                ---                             |
                   |________________|

Pour cela j'ai donc créé 2 class:

.images
{
margin: 60px 0 0 60px;
padding: 0 0 0 0;
background-image:url(../images/image.png);
height: 198px;
width:193px;
border: 6px solid #7bce32;
position: absolute;
}

.fond_photos
{
margin: 55px 0 0 55px;
padding: 0 O O 0;
background-color:#333333;
height: 205px;
width:200px;
}

Que j'ai mis dans deux divisions différentes:

<div class="images"> </div>
<div class="fond_photos"> </div>

Grâce à ce code j'ai donc le schéma du dessus...
Mais maintenant je ne sais pas comment répéter 3 fois de suite cela, sur la même ligne..

(Photo1)                      (Photo2)                       (Photo3)

Merci d'avance pour votre aide!!!

A voir également:

Problème pour répéter une image en css/html
Image iso - Guide
Editeur html - Télécharger - HTML
Légender une image - Guide
Transformer une image en icone - Guide
Comment agrandir une image - Guide

5 réponses

Réponse 1 / 5

superblitzcaro Messages postés 10 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 27 janvier 2010 1
16 nov. 2009 à 23:17

bonjour,

ça dépend vraiment de ce que tu veux faire!
voici une solution

un DIV "tout" contient les 3 autres DIV "un", "deux" et "trois" qui contiennent chacune image + cadre.
"tout" est placé en relatif au centre de la page mais si tu souhaites positionner la DIV #tout qq part de precis dans ta page, il te suffit d'indiquer pour #tout{ position:absolute; et donne left:..px; et top:...px;

voilá une possibilité:

<style type="text/css">
#un
{
position:relative;
width:200px;
float:left;

}

#deux
{
position:relative;
width:200px;
margin-left:30px;
float:left;

}

#trois
{
position:relative;
width:200px;
margin-left:30px;
float:left;

}

#tout
{
position:relative;
margin-left:auto;
margin-right:auto;
width: 800px;
height: 400px;
z-index:1;
}
</style>
</head>

<body>
<div id="tout">
<div id="un">
<div class="images"> </div>
<div class="fond_photos"> </div>
</div>

<div id="deux">
<div class="images"> </div>
<div class="fond_photos"> </div>
</div>

<div id="trois">
<div class="images"> </div>
<div class="fond_photos"> </div>
</div>

</div>
</body>
</html>

en espérant que ça aura pu te faire avancer

Réponse 2 / 5

Koma777 Messages postés 261 Date d'inscription mercredi 17 janvier 2007 Statut Membre Dernière intervention 16 février 2018 7
16 nov. 2009 à 23:29

Je ne te suis pas trop en faite...

Mes class sont mauvaises?

Car comme tu vois j'ai une class pour l'image, et une autre pour le fond (que je crée en faisant un background-color. )

Ce que je ne vois ni dans #1, #2, #3... ni #tout!

Réponse 3 / 5

superblitzcaro Messages postés 10 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 27 janvier 2010 1
16 nov. 2009 à 23:38

pardon, en fait tes class sont bonnes, j'avais juste écris ce qui te manquais en css et dans le body..
:-((
tu es juste pas obligé de mettre les padding..
j'espère que ça ira mieux comme ça..
après le DOCTYPE, et la balise <HEAD> tu mets ça:

<style type="text/css">
.images
{
margin: 60px 0 0 60px;
background-image:url(../images/image.png);
height: 198px;
width:193px;
border: 6px solid #7bce32;
position: absolute;
}

.fond_photos
{
margin: 55px 0 0 55px;
background-color:#333333;
height: 205px;
width:200px;
}

#un
{
position:relative;
width:200px;
float:left;

}

#deux
{
position:relative;
width:200px;
margin-left:30px;
float:left;

}

#trois
{
position:relative;
width:200px;
margin-left:30px;
float:left;

}

#tout
{
position:relative;
margin-left:auto;
margin-right:auto;
width: 800px;
height: 400px;
z-index:1;
}
</style>
</head>

<body>
<div id="tout">
<div id="un">
<div class="images"> </div>
<div class="fond_photos"> </div>
</div>

<div id="deux">
<div class="images"> </div>
<div class="fond_photos"> </div>
</div>

<div id="trois">
<div class="images"> </div>
<div class="fond_photos"> </div>
</div>

</div>
</body>
</html>

Réponse 4 / 5

Koma777 Messages postés 261 Date d'inscription mercredi 17 janvier 2007 Statut Membre Dernière intervention 16 février 2018 7
16 nov. 2009 à 23:52

Merci Superblitzcaro !
C'est effectivement bon !

Je n'ai plus qu'à potasser le tout maintenant!
:)

Merci !

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

superblitzcaro Messages postés 10 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 27 janvier 2010 1
16 nov. 2009 à 23:56

chouette si ça t'aide, avec plaisir!!
;-)

Discussions similaires

PIX

Bonjour,
Quelles sont les 2 orientations possibles d'une page d’un document numérique ?

Quel fonction faire en b1 par rapport à a1

Bonjour,

salut a tout le monde. J,ai un probleme en exel j,ai deux case A1etB1 je sais pas comment faire piur:si A1=1 alors dans b1 faut dois choisir de de 1 a6 et si a1 =2 alors dans b1il faut choisir de 7 a 8 .c,est comme je dois faire une liste deroulante .aidez moi svp

la balise <br> ou <br />

Bonjour,

Quelle est la difference entre la balise
et
?

Pourquoi utiliser l'un et pas l'autre ?

Merci d'avance,

Bonjour,

Comme on lit un peu tout et son contraire sur internet, je voudrais savoir quelle est la balise que l'on doit utiliser pour un retour à la ligne en HTML5.

Merci. :)

Configuration: Windows 7 / Chrome 22.0.1229.79