Images retour à la ligne puis images [Résolu]

proximacent · 05/11/2011, 19h01

Bonsoir à tous

J'ai un site en ligne et j'essaie de le ré-écrire selon les règles de l'art.

Je souhaite pouvoir mettre 4 images sur une ligne et repasser à la ligne et ce pour le nombre d'image que je voudrai afficher. Ex la page de mon site actuel :

http://sciencedesarts.pagesperso-ora...iePeinture.htm
HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div id="contenugalerie">
      <ul id="menu_horizontal"> 
        <posimages> <img src="images/ico_vertdespace.jpg"/></posimages>
        <posimages><img src="images/ico_la_Pouponniere.jpg"/></posimages>
        <posimages><img src="images/ico_nebuleuse.jpg" /></posimages>
        <posimages><img src="images/ico_ailleurs.jpg"/></posimages>
        <posimages><img src="images/ico_aube.jpg"/></posimages>
        <posimages><img src="images/ico_baalbeck.jpg"/></posimages> 
      </ul>
</div>

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
posimages{
    float:left;
    display:inline;
    margin-right:30px;
   }

je souhaite aussi aligner verticalement les images. Merci de la technique que vous pouvez m'apporter et bon week-end

franck31 · 05/11/2011, 19h21

Comment est généré ta page, par un fichier php?

Oups désolé c'est du front page.

proximacent · 05/11/2011, 19h25

Salut

Frontpage pour le site actuellement en ligne

Mais ce que j'ai copié et collé ds le message c'est du natif

HTML + CSS Notepad++

Merci

NoSmoking · 05/11/2011, 23h23

Bonsoir,
tu peux essayer cela

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
#conteneur {
  width : 900px;               /* 3 *fois 300px */
}
.photo {
  width : 298px;               /* 300px - 2px de bordure */
  line-height :150px;          /* fixe la hauteur => pour centrage vertical */
  border : 1px solid #e0e0e0;
  text-align : center;         /* centrage horizontal */
  float : left;                /* a la queue leu leu*/
}
.photo img {
  vertical-align : middle;     /* pour centrage vertical
}
</style>
</head>
<body>
<div id="conteneur">
  <div class="photo">
    <img src="http://www.developpez.net/template/images/logo.gif">
  </div>
  <div class="photo">
    <img src="http://www.developpez.net/template/images/logo.gif">
  </div>
  <div class="photo">
    <img src="http://www.developpez.net/template/images/logo.gif">
  </div>
</div>
</body>
</html>

proximacent · 06/11/2011, 09h46

Merci Nosmoking

J'ai adopté tes procédures qui m'ont fait bien avancé.
Seul problème dès que les images au format portrait ne permettent pas de repasser normalement à la ligne. Est-ce margin-bottom qui pénalise le positionnement ?

Mon code

HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div id="contenugalerie">
      <div class="posimage">
        <img src="images/ico_vertdespace.jpg">
      </div>
      <div class="posimage">
        <img src="images/ico_lapouponniere.jpg">
      </div>
      <div class="posimage">
        <img src="images/ico_nebuleuse.jpg">
      </div>
      <div class="posimage">
        <img src="images/ico_ailleurs.jpg">
      </div>
      <div class="posimage">
        <img src="images/ico_aube.jpg">
      </div>
      <div class="posimage">
        <img src="images/ico_baalbeck.jpg">
      </div>
      <div class="posimage">
        <img src="images/ico_futurenmarche.jpg">
      </div>
      <div class="posimage">
        <img src="images/ico_Reflets.jpg">
      </div>
      <div class="posimage">
        <img src="images/ico_naissance.jpg">
      </div>  
      <div class="posimage">
        <img src="images/ico_errance.jpg">
      </div> 
      <div class="posimage">
        <img src="images/ico_lasolitaire.jpg">
      </div>
      <div class="posimage">
        <img src="images/ico_confins.jpg">
      </div>
      <div class="posimage">
        <img src="images/ico_explorationI.jpg">
      </div>

Fichier CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
div#contenugalerie {
	margin-left: auto;
  margin-right: auto;
  width:900px;
	height:900;
	background-color:#616046;
	/*text-align:justify;*/
	padding:30px;
  }
 
 .posimage {                    /* paramètres positionnement des photos*/
  width : 190px;               
  /*line-height:150px;          /* fixe la hauteur => pour centrage vertical */
  text-align:left;         
  float:left;                /* a la queue leu leu*/
  margin-right:30px;
  margin-bottom:30px;
}

Voilà, ajouté à cela que je devrai mettre en texte le nom des photos sous chaque image comme dans mon site actuel

NoSmoking · 06/11/2011, 16h38

le CSS est comme un programme, certes valeurs ne valent que parce qu'il en existe d'autres.

j'ai repris ton cas, je te livre une possibilité de code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Galerie]</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
div#contenugalerie {
  position:relative;
  margin-left: auto;
  margin-right: auto;
  width:1008px;               /* 1000 +8 pour tenir compe des border 4*2 */
  height:870px;
  background-color:#616046;
  padding:30px;
}
.posimage {                    /* paramètres positionnement des photos*/
  width : 250px;
  height : 250px;              /* fixe la hauteur => pour centrage vertical */
  line-height : 250px;         /* fixe la hauteur => pour centrage vertical */
  text-align : center;         /* pour centrage horizontal */
  float : left;                /* a la queue leu leu*/
  margin-bottom : 40px;        /* laisse la place pour le texte */
  border : 1px solid white;    /* A SUPPRIMER */
}
.posimage img {
  vertical-align : middle;     /* pour centrage vertical*/
  max-width : 250px;           /* limite les images en largeur = largeur du conteneur */
  max-height : 250px;          /* limite les images en hauteur = hauteur du conteneur */
  /* effet d'ombre */
  border : 1px solid white;
  box-shadow : 1px 1px 12px #333;
  -moz-box-shadow : 1px 1px 12px #333;
  -webkit-box-shadow : 1px 1px 12px #333;
}
.posimage span {
  /* definition police */
  font-family : Verdana;
  font-size : 16px;
  color : #ff9;
  /* annule le line-height du parent */
  line-height : 40px;          /* correspond au margin-bottom du conteneur */
  /* placement du SPAN */
  position : relative;
  display  : block;            /* pour passage en dessous */
  border : 1px solid red;      /* A SUPPRIMER */
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
/* effet d'ombre pour IE */
.posimage img {
  filter :progid:DXImageTransform.Microsoft.Shadow(color='#333333', Direction=135, Strength=6);
  zoom : 1;
}
</style>
<![endif]-->
</head>
<body>
<div id="contenugalerie">
      <div class="posimage">
        <img src="http://sciencedesarts.pagesperso-orange.fr/images/Ico_vertdespace.jpg">
        <span>Vert d'Espace</span>
      </div>
      <div class="posimage">
        <img src="http://sciencedesarts.pagesperso-orange.fr/images/Ico_La_Pouponniere.jpg">
        <span>La Pouponnière</span>
      </div>
      <div class="posimage">
        <img src="http://sciencedesarts.pagesperso-orange.fr/images/Ico_Nebuleuse.jpg">
        <span>Nébuleuse</span>
      </div>
      <div class="posimage">
        <img src="http://sciencedesarts.pagesperso-orange.fr/images/Ico_Ailleurs.jpg">
        <span>Ailleurs</span>
      </div>
      <div class="posimage">
        <img src="http://sciencedesarts.pagesperso-orange.fr/images/Ico_Aube.jpg">
        <span>Aube</span>
      </div>
      <div class="posimage">
        <img src="http://sciencedesarts.pagesperso-orange.fr/images/Ico_Baalbeck.jpg">
        <span>Baalbeck</span>
      </div>
      <div class="posimage">
        <img src="http://sciencedesarts.pagesperso-orange.fr/images/Ico_Quasar.jpg">
        <span>Quasar</span>
      </div>
      <div class="posimage">
        <img src="http://sciencedesarts.pagesperso-orange.fr/images/Ico_Reflets.jpg">
        <span>Reflets</span>
      </div>
      <div class="posimage">
        <img src="http://sciencedesarts.pagesperso-orange.fr/images/Ico_Naissance.jpg">
        <span>Naissance</span>
      </div>
      <div class="posimage">
        <img src="http://sciencedesarts.pagesperso-orange.fr/images/Ico_Eerrance.jpg">
        <span>Errance</span>
      </div>
      <div class="posimage">
        <img src="http://sciencedesarts.pagesperso-orange.fr/images/Ico_LaSolitaire.jpg">
        <span>La Solitaire</span>
      </div>
      <div class="posimage">
        <img src="http://sciencedesarts.pagesperso-orange.fr/images/Ico_Confins.jpg">
        <span>Confins</span>
      </div>
</body>
</html>

Remarques :
- le CSS est abondamment commenté.
- les border sur DIV et SPAN ne sont là que pour visualiser l'espace occupé par ceux ci
- évites l'alternance des minuscules et majuscules dans les noms de fichier.

Voila à toi de jouer

proximacent · 06/11/2011, 18h49

Merci NoSmoking pour le temps que tu m'a prêté. Je suis preneur de ton code surtout que le code précédent m'a déjà pas mal dépanné. En effet, j'ai été voir quelques conseils que tu as prodigué dans le forum et je me suis empressé de tout passer en minuscule.

En ce qui concerne les images placées à la queue leu leu + retour à la ligne et on recommence, j'ai trouvé la solution. J'ai réduit la taille des images qui sont au format portrait car elles dépassaient sur la ligne du bas. Et comme dans ma classe j'avais attribué un margin-bottom à 30 px les images qui entamaient cet espace appartenant à l'image du dessus étaient chassées sur la ligne suivante, d'où une discontinuité de la ligne et un décalage d'images cahotique. Le redimensionnement des images a solutionné le problème.

Donc je prends ton code , je refais et je reviens pour mettre résolu.
Merci encore

NoSmoking · 06/11/2011, 19h20

Citation:

J'ai réduit la taille des images qui sont au format portrait car elles dépassaient sur la ligne du bas.

cela est pris en compte dans le CSS ici en vert

.posimage img {
  vertical-align : middle;     /* pour centrage vertical*/
  max-width : 250px;           /* limite les images en largeur = largeur du conteneur */
  max-height : 250px;          /* limite les images en hauteur = hauteur du conteneur */
  /* effet d'ombre */
  border : 1px solid white;
  box-shadow : 1px 1px 12px #333;
  -moz-box-shadow : 1px 1px 12px #333;
  -webkit-box-shadow : 1px 1px 12px #333;
}

proximacent · 06/11/2011, 19h28

En effet je viens de m'en apercevoir. Mais si je comprends bien les images sont reprises dus site ou je me trompe. Car les liens pointent sur le site en ligne.

Tu veux dire qu'illes sont redimensionnées automatiquement par le CSS : max-width et max-height ? Si c'est ça c'est super. J'en conclu que quelque soit la taille de l'image, le dimensionnement automatique résouds le problème.

proximacent · 07/11/2011, 20h33

Merci Nosmoking. Ton code m'a sorti d'affaire. Les carrés entourant les images donnent un beau style à la présentation de la galerie. J'ai adapté selon mes besoins. Je continue le reste en je m'attaque au pHp.

Très Bonne soirée

05/11/2011, 19h21	#2
franck31 Membre régulier franck franck Développeur Web Inscription : mai 2010 Messages : 98 Détails du profil Informations personnelles : Nom : franck franck Localisation : France Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : mai 2010 Messages : 98 Points : 91 Points : 91	Comment est généré ta page, par un fichier php? Oups désolé c'est du front page.
	00

05/11/2011, 19h25	#3
proximacent Membre du Club Inscription : septembre 2011 Messages : 71 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : septembre 2011 Messages : 71 Points : 53 Points : 53	Salut Frontpage pour le site actuellement en ligne Mais ce que j'ai copié et collé ds le message c'est du natif HTML + CSS Notepad++ Merci
	00

06/11/2011, 18h49	#7
proximacent Membre du Club Inscription : septembre 2011 Messages : 71 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : septembre 2011 Messages : 71 Points : 53 Points : 53	Merci NoSmoking pour le temps que tu m'a prêté. Je suis preneur de ton code surtout que le code précédent m'a déjà pas mal dépanné. En effet, j'ai été voir quelques conseils que tu as prodigué dans le forum et je me suis empressé de tout passer en minuscule. En ce qui concerne les images placées à la queue leu leu + retour à la ligne et on recommence, j'ai trouvé la solution. J'ai réduit la taille des images qui sont au format portrait car elles dépassaient sur la ligne du bas. Et comme dans ma classe j'avais attribué un margin-bottom à 30 px les images qui entamaient cet espace appartenant à l'image du dessus étaient chassées sur la ligne suivante, d'où une discontinuité de la ligne et un décalage d'images cahotique. Le redimensionnement des images a solutionné le problème. Donc je prends ton code , je refais et je reviens pour mettre résolu. Merci encore
	00

06/11/2011, 19h28	#9
proximacent Membre du Club Inscription : septembre 2011 Messages : 71 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : septembre 2011 Messages : 71 Points : 53 Points : 53	En effet je viens de m'en apercevoir. Mais si je comprends bien les images sont reprises dus site ou je me trompe. Car les liens pointent sur le site en ligne. Tu veux dire qu'illes sont redimensionnées automatiquement par le CSS : max-width et max-height ? Si c'est ça c'est super. J'en conclu que quelque soit la taille de l'image, le dimensionnement automatique résouds le problème.
	00

07/11/2011, 20h33	#10
proximacent Membre du Club Inscription : septembre 2011 Messages : 71 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : septembre 2011 Messages : 71 Points : 53 Points : 53	Merci Nosmoking. Ton code m'a sorti d'affaire. Les carrés entourant les images donnent un beau style à la présentation de la galerie. J'ai adapté selon mes besoins. Je continue le reste en je m'attaque au pHp. Très Bonne soirée
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email