High-Tech Santé Médecine Droit-Finances

Réalisation

vidéo numérique

Rechercher : dans
Par :

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

Dernière réponse le 16 nov 2009 à 23:56:12 Koma777, le 16 nov 2009 à 22:38:26 
 Signaler ce message aux modérateurs

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!!!
Configuration: Windows 7
Firefox 3.5.5

Meilleures réponses pour « Problème pour répéter une image en css/html » dans :
Ombre aux bordures de la page web (CSS/HTML) Voir
CSS/HTML : positionner une image Voir
Les CSS pour présenter vos images Voir Pour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Javascript - Librairies d'effets pour vos images VoirAu gré de vos explorations du web, vous avez vu de superbes effets de présentation des images. Et ça vous plairaît bien de pouvoir proposer les mêmes à vos visiteurs. Voici quelques solutions en Javascript couplées à des CSS. Elles sont plus...
Gestion des images en HTML VoirComment afficher des images sur une page web? Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...
Posez votre question Répondre

1

superblitzcaro, le 16 nov 2009 à 23:17:51

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épondre à superblitzcaro

2

Koma777, le 16 nov 2009 à 23:29:04

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épondre à Koma777

3

superblitzcaro, le 16 nov 2009 à 23:38:17

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épondre à superblitzcaro

4

Koma777, le 16 nov 2009 à 23:52:47

Merci Superblitzcaro !
C'est effectivement bon !

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

Merci !

   
Répondre à Koma777

5

 superblitzcaro, le 16 nov 2009 à 23:56:12

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

   
Répondre à superblitzcaro
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net