galerie photo

**Auteur** · 20/05/2008, 10h33

Pour la barre de défilement du cadre qui contient les vignettes (id="Cvignettes") : j'ai fixé la hauteur du cadre. Mets la hauteur en commentaire et le cadre s'adaptera en hauteur (classe listeVignettes) :

Code css :

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

1
2
3
4
5
6
7
8
9
 
.listeVignettes{
  border: ridge #AAAAAA 5px;
  overflow: auto;
  width: 300px; 
 /* height: 100px;*/
  background-color: #000000;
  padding: 0px;
}

--------------------

-le pied de page semble collé au cadre contenant les vignettes (il se promène selon la taille des images) et il a perdu ses propriétés css il est gris au lieu de noir

-il faudrait que le corps de page s'adapte aux mouvements des images juste sur la hauteur car la largeur ne pose pas de soucis

ah je comprends le problème... tes images n'ont pas toutes les mêmes dimensions ?
Là ça va être problématique

Dans le code que j'ai donné j'ai fixé la largeur des images (classe .images), les images auront toutes la même largeur (dans l'exemple 80px), mais pas nécessairement la même hauteur (cela dépend du ratio hauteur/largeur).

Le problème est que si tu imposes à la fois la hauteur (heigth) et la largeur (width), certaines de tes images seront déformées....

Plusieurs possibilités :

soit tu édites tes images quitte à ajouter une bordure, pour qu'elles aient toutes les mêmes dimensions (long à faire ) ;
soit tu fixes la hauteur des images mais pas la largeur (classe .images) : ton contenu va varier en largeur mais pas en hauteur. Tu ne modifies pas les propriétés du conteneur (classe .conteneur), tu lui imposes une largeur au moins égale à la plus grande largeur de tes images.
c'est sans doute la meilleure solution. Les images seront à la fois centrées verticalement et horizontalement.

soit tu fixes la hauteur du conteneur (classe .conteneur) et tu caches l'éventuelle barre de défilement (l'image sera rognée mais pas déformée) :

Code css :

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

1
2
3
4
5
6
7
 
.conteneur{
  text-align: center;
  width: 300px;
  height: 200px; /* hauteur fixée */
  overflow: hidden; /*barre de défilement cachée */
}

Il faut que tu imposes une hauteur suffisamment grande pour éviter de trop couper les images.
Seul inconvénient : les images ne seront pas centrées verticalement dans le conteneur, elles seront toujours alignées en haut.

**pygoCENTRUS** · 20/05/2008, 15h14

je suis vraiment une quiche maintenant plus rien ne s'affiche,vignettes,images etc

mon pied de page se promène toujours bref j'ai tout foiré

même avec la solution j'arrive a me planter

**Auteur** · 20/05/2008, 15h27

montre nous ton code complet ou poste un lien vers la page en question

**pygoCENTRUS** · 20/05/2008, 19h14

j'ai tout repris a zéro

mon 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
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
  body
 
{
   width: 800px;
   margin: auto;
   margin-top: 10px;
   margin-bottom: 100px;    
   background-image: url("graphic/fond.jpg");
}
 
 
 
#en_tete
{
   width: 800px;
   height: 200px;
   background-image: url("insecte/banniere.jpg");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
 
#menu
{
   float: left;
   width: 120px;
 
}
 
 
 
 
ul#menu {
list-style-type: none;
width: 100%; /* précision pour Opera */
}
 
ul#menu li {
float: left;
}
 
ul#menu a {
 
float: left;
margin: 20 15px;
padding: 0px 23px;
text-align: center;
 
text-decoration: none;
color: #ffffff;
 
}
 
ul#menu a:hover {
color:black;
text-decoration:none;
}
A:hover
{
color:white;
text-decoration:none;
font-weight:bold;
 
} 
 
.element_menu
{
 
 
   background-repeat: repeat-x;
 
   border: 1px solid black;
 
   margin-bottom: 0px;
}
 
.element_menu h3
{    
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}
 
.element_menu ul
{
   list-style-image:none;
   padding: 0px;
   padding-left: 15px;
   margin: 0px;
   margin-bottom: 0px;
}
 
.element_menu a
{
   color: #B3B3B3;
}
 
.element_menu a:hover
{
   background-color: #B3B3B3;
   color: black;
}
 
 
/* Le corps de la page */
 
#corps
{  
   width: 659px;
   height: 450px;
   margin-left: 0px; 
   margin-bottom: 50px;
   padding: 70px;
 
 
 
   color: #B3B3B3;
 
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
 
   border: 1px solid grey;
 
}
ul#corps
{
    width: 500px;
   height:500px;
   margin-left: 0px;
   margin-bottom: 50px;
   padding:70px; 
 
   }
 
 
 
#corps h1
{
   color: #black;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   margin-top:10px
}
 
#corps h2
{
   height: 30px;
 
   background-image: url("images/titre.png");
   background-repeat: no-repeat;
 
   padding-left: 0px;
   color: #B3B3B3;
   text-align: left;
 
}
 
 
 
.element_corps
{
 
   margin-left: 0px;
   margin-bottom: 200px;
   padding: -10px;
   }
 
  ul#corps:hover
     {
   background-color: #B3B3B3;
   color: black;
   }
 
 
 
 
 
 
#pied_de_page
{
   padding:0px;
 
   text-align: center;
 
   color: #red;
 
   background-repeat: repeat-x;
 
   border: 1px solid grey;
}

l'idéal serait que les photos s'affichent dans un cadre a l'intérieur du corps comme dans l'index de mes galeries >>>http://www.moai.dafun.com/galerieindex.htm (que la grande photo et les vignettes s'affichent a la place des vignettes de mes galeries)

voici la page en question http://www.moai.dafun.com/mammiferes.htm

heureusement que j'ai bidouillé tout ca sur un site "test"

merci encore pour votre aide j'espère avoir donné toutes les infos nécessaire

**Auteur** · 20/05/2008, 22h59

Je suis allé sur ta page de test : http://www.moai.dafun.com/mammiferes.htm. J'ai donc corrigé cette page.

J'ai vu que ton div #corps avait une longueur de 659px. Donc les div id="conteneur" et id="CVignettes" doivent avoir la même longueur.

Quant au script, tu ne devrais pas le mettre dans la partie body mais dans le head de la page

tabImg a disparu

Voilà donc ce j'ai fait :

les conteneurs :
- j'ai mis en commentaire les dimensions du conteneur (classe conteneur).
- même chose pour les dimensions du conteneur des vignettes (classe listeVignette)
les div vont logiquement prendre automatiquement la largeur du conteneur supérieur (id="corps"). Si toutefois il y a un souci enlève les commentaires et donne un width de 659px (=largeur du conteneur id="corps")
pour les images qui sont en vignettes j'ai dû préciser à la fois la hauteur et la largeur : en effet sous IE si seule la largeur est précisée, la hauteur des vignettes n'est pas modifiée en conséquence
j'ai mis le script dans la partie head de la page HTML
j'ai recréé la variable tabImg qui avait disparue
j'ai supprimé quelques sauts de lignes (<br/>) pour que l'espace entre l'image en taille réelle et la liste des vignettes soit moins important
j'ai mis à jour la fonction afficheVignettes() pour que le scroll soit horizontal

Je n'ai pas touché à ta feuille de style mammiferes.css. J'ai adapté mon code en fonction de tes besoins

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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Alexandre Letertre photographie</title>
 
 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="mammiferes_fichiers/mammiferes.css">
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="alternate" type="application/rss+xml" href="http://www.pyg0pixxx.com/flux.xml" title="pyg0pixxx news">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="fr">
<meta name="Author" content="Auteur - www.developpez.com">
 
<style type="text/css">
<!--
.conteneur{
  text-align: center;
  /*width: 659px;*/
}
 
.bouton{
  text-align: center;
  width: 50px;
  height: 30px;
}
 
.image{
  height: 150px;
}
 
 
.listeVignettes{
  border: ridge #AAAAAA 5px;
  overflow: auto;
  /*width: 659px;*/
  height: 80px;
  background-color: #000000;
  padding: 0px;
}
 
.vignettes{
  width: 40px;
  height: 40px;
  margin: 4px;
  background-color: #FFFFFF;
  border: ridge #FFFFFF 2px;
  cursor: pointer;  
}
-->
</style>
 
<script type="text/javascript">
<!--
var chemin = "graphic/"; 
var tabImg = new Array("bouton animal.jpg", "bouton autres.jpg", "bouton liquide.jpg", "bouton modele.jpg", "bouton paysage.jpg", "bouton vegetaux.jpg"); //liste des images
 
var i;
 
 
function defileImage(arg)
{
  if (!isNaN(arg) && arg!=null)
  {
    i = arg;
  }
 
  if (arg==null)
    i = 0;
  else
  {  
    switch (arg.id)
    { 
      case "btn1":    // id du bouton "première image"
          i = 0;
          break;
      case "btn2":    // id du bouton "image précédente"
          i--;
          break;
      case "btn3":    // id du bouton "image suivante"
          i++;
          break;
      case "btn4":    // id du bouton "dernière image"
          i = tabImg.length-1;
          break;
      /*default:
          i=0;*/
    }  
  }
 
  document.getElementById("btn1").disabled = (i==0);
  document.getElementById("btn2").disabled = (i==0);    
 
  document.getElementById("btn3").disabled = (i==tabImg.length-1);
  document.getElementById("btn4").disabled = (i==tabImg.length-1); 
   
  document.getElementById("idImage").src = chemin + tabImg[i];
}
 
function afficheVignettes()
{
  var j, objImg, nobr;
  var c;
  
  c = document.getElementById("Cvignettes");
  nobr = document.createElement("nobr");
  
  for (j=0; j<tabImg.length; j++)
  {  
    objImg = document.createElement("img");
    objImg.src = chemin + tabImg[j];
    objImg.className="vignettes";
    
    objImg.n = j;
    objImg.onclick = function(){defileImage(this.n)}
        
    nobr.appendChild(objImg); 
  }
  c.appendChild(nobr); 
}
 
//-->
</script>
 
 
</head>
<body onload="afficheVignettes(); defileImage(null)">
 
       <p><!--texte--></p>
 
 
 
 
 
 
       <!-- L'en-tête -->
 
       <div id="en_tete">
 
       </div>
	   <hr color="#ffffff" noshade="noshade"> 
 
       <!-- Les menus -->
 
 
	<ul id="menu">
	<li><a href="http://www.moai.dafun.com/accueil.htm">Accueil</a></li>
    <li><a href="http://www.moai.dafun.com/galerieindex.htm">Galeries</a></li>
    <li><a href="#">Présentation</a></li>
	<li><a href="#">Boutique</a></li>
	<li><a href="#">contact</a></li>
	<li><a href="http://www.swisstools.net/guestbook.asp?numero=113111" target="_top">Livre d'or</a></li>
    <li><a href="#">Liens</a></li>
 
  </ul>
 
  <!-- Le corps -->
 
	 <!-- Le corps -->
	<div id="corps">
 
 
 
 
 
 
<div class="conteneur">
  <img src="" id="idImage" class="image" alt="image"><br>
  <input class="bouton" id="btn1" value=" |&lt; " onclick="defileImage(this)" type="button">
  <input class="bouton" id="btn2" value=" &lt; " onclick="defileImage(this)" type="button">
  <input class="bouton" id="btn3" value=" &gt; " onclick="defileImage(this)" type="button">
  <input class="bouton" id="btn4" value=" &gt;| " onclick="defileImage(this)" type="button">
</div>
<div>
  <br/>
</div>
 
<div id="Cvignettes" class="listeVignettes">
</div>
 
<hr color="#ffffff" noshade="noshade"><a href="" align="left=&quot;http://www.pyg0pixxx.com/flux.xml&quot;"><img src="mammiferes_fichiers/rss.gif" border="0"></a>
 
       <!-- Le pied de page -->
 
       <div id="pied_de_page">
           <p>©Copyright Alexandre Letertre propriétaire de Pyg0pixxx.com-2007/2008 tous droits réservés</p>
       </div>
 
 
 
</div>
 
</body>
</html>

ce code doit normalement répondre à tes attentes

Tu as juste à copier-coller le code... Pour les images, j'ai considéré qu'elles était dans le dossier graphic et j'ai pris les images de ton site à savoir :
bouton animal.jpg, bouton autres.jpg, bouton liquide.jpg, bouton modele.jpg, bouton paysage.jpg, bouton vegetaux.jpg

Petite remarque :
pour la balise <meta name="Author"....../>, mets ton nom. Ce n'est pas moi qui ai construit ton site

**pygoCENTRUS** · 20/05/2008, 23h48

wow merci beaucoup pour tout ce travail c'est vraiment super sympa,encore un soucis

mon css est inactif j'ai une page blanche avec les différent élément en désordre

une petite question que dois-je modifier dans le script pour insérer des photos de 800x600? 600 est la hauteur de toute mes images

edit:j'ai voulu changer les photos,donc j'ai mis le nom de la source et le nom des images et la plus aucunes image ne s'affiche

je précise que je n'ai rien modifié dans le script

edit2:j'ai récupéré mon css en remplaçant

Code :

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

href="mammiferes_fichiers/mammiferes.css">

par

Code :

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

href="mammiferes.css" />

c'est le code que j'avais mis a la base comme direction vers mon css

mais!!!! car il y'a un mais,mon pied de page est encore collé au cadre des vignettes

je désepere

**Auteur** · 21/05/2008, 00h49

oui je n'ai pas fait attention, il y a un problème d'imbrication des éléments

Tu as mis ton pied de page dans le corps

Je regarde ça à nouveau....

**pygoCENTRUS** · 21/05/2008, 01h00

je tente de remettre des images car j'ai résolu le problème de css.

le problème est le suivant>

première image en cadrage vertical c'est nikel j'ai mis la classe image a 600px l'image sort du corps mais ca c'est juste un probleme de hauteur du corps donc pas grave du tout

deuxième image en cadrage horizontal (600x426) l'image n'est plus centrée et déborde a droite

le script redimensionne automatiquement par 600 (valeur de la classe)??? dans ce cas je passe a 800 de largeur

pour être a 600px de hauteur il faut que je sois en 800 de largeur,dois-je passer le conteneur a 800? ou va t'il modifier la largeur des cadrages verticaux (400px)?

c'est pas tres clair désolé

**pygoCENTRUS** · 21/05/2008, 01h13

en fait je voudrais un truc dans ce genre la http://aquamacro.oxydes.net/galerie/...rosas-voluptee ou comme ça http://fatamorgana.oxydes.net/galeri...ba-de-la-pampa quand on fait défiler les images le corps s'adapte tout entier y'a rien qui bouge ou qui déborde. comment avoir ce résultat?

désolé je suis très chiant

pour séparer mon pied de page je dois refermer le "body" avant ce dernier,c'est bien ca?

**Auteur** · 21/05/2008, 02h28

j'ai un peu modifié ta feuille de style et ton code HTML.

En CSS ton corps fait exactement 759px (contre 659px auparavant). J'ai diminué le padding-left et le padding-right pour augmenter la largeur d'affichage. Je n'ai pas pu monter à 800px comme tu le souhaites sinon ton cadre n'était plus de la même dimension que l'image d'entête.
Regarde donc #corps dans mammiferes.css pour comprendre ce que j'ai fait (j'ai mis en commentaire les anciennes valeurs).

Comme tu peux le voir la largeur d'affichage ne peux dépasser en largeur 759px sinon ton image déborde.

Toutefois, comme il y a un padding-left et un padding-right de 20px, cela réduit encore la largeur d'affichage

Dans le code du diaporama, j'ai imposé une largeur max de 700px (classe image). Tu perds donc 100px, désolé

La hauteur s'ajustera automatiquement, donc les images ne seront pas déformées.

La pièce jointe contient, le code HTML, le CSS (dans le dossier mammiferes_fichiers) et un dossier "images" qui est vide : place dans ce dernier dossier tes images et modifie le contenu de tabImg dans le code JS (tu y places le nom de tes images).
Tu n'as pas à modifier le contenu de la variable chemin qui est : chemin="images/"

**pygoCENTRUS** · 21/05/2008, 03h31

encore une fois plus de css

je vais tenter d'y remédier tout seul pour une fois

encore et encore merci a toi pour l'attention que tu portes a mon problème et pour le travail que tu as fourni t'es un chef

**pygoCENTRUS** · 21/05/2008, 03h50

le css est revenu

mais (et oui encore un

) j'ai inséré une photo de 434x600 et le script me l'a redimensionnée en 700x968 de ce fait la qualité est médiocre

comment y remédier?

edit:encore une erreur de crétin il suffit juste que toutes mes images fassent 700px de large.

encore un tout petit bug,le bouton pour aller a la dernière image ne fonctionne pas.

et enfin quelques dernières questions:

comment modifier la largeur fixée? (c'est tout con mais je préfère demander)

comment placer les boutons de navigation en dessous de l'image et non au dessus?

comment avoir un background qui s'adapte a la taille de la page? pour éviter d'avoir une barre noire ou une trace de répétition de celui ci

sur cette page http://www.moai.dafun.com/mammiferes.htm j'aimerai avoir les mêmes espaces entre : bannière-corps-pied de page comme sur celle ci http://www.moai.dafun.com/galerieindex.htm sachant que j'ai tenté de modifier les paramètres habituels sans résultat.

et pour finir mon pied de page sur cette page http://www.moai.dafun.com/mammiferes.htm perd ses fonctionnalités rss pas moyen d'enlever le cadre même en mettant 0px

**Auteur** · 21/05/2008, 10h29

Envoyé par pygoCENTRUS

encore un tout petit bug,le bouton pour aller a la dernière image ne fonctionne pas.

si il marche c'est ton image qui n'existe pas

(regarde les miniatures, elle n'apparait pas, il a juste un cadre blanc). Sans doute une faute de frappe dans le nom de l'image.

Envoyé par pygoCENTRUS

comment modifier la largeur fixée? (c'est tout con mais je préfère demander)

largeur de quoi ?
La largeur des images affichées

classe images
La largeur du corps

#corps (il faut manipuler les padding-rigth, padding-left et width. Regarde : width+padding-left+padding-top = 799px c'est à dire les 800px que tu as définis dans la propriété width de body

)

Envoyé par pygoCENTRUS

comment placer les boutons de navigation en dessous de l'image et non au dessus?

arf et moi qui croyais que tu les voulais au dessus

bon dans la page HTML recherche le div id="conteneur", tu as ceci :

Code html :

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

1
2
3
4
5
6
7
8
9
 
    <div class="conteneur">
      <input class="bouton" id="btn1" value=" |&lt; " onclick="defileImage(this)" type="button">
      <input class="bouton" id="btn2" value=" &lt; " onclick="defileImage(this)" type="button">
      <input class="bouton" id="btn3" value=" &gt; " onclick="defileImage(this)" type="button">
      <input class="bouton" id="btn4" value=" &gt;| " onclick="defileImage(this)" type="button">
      <br>
      <img src="" id="idImage" class="image" alt="image">
    </div>

tu as les boutons (input); un saut de ligne (br) et l'image (img). Inverse les positions du br et de la balise img pour avoir ceci :

Code html :

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

1
2
3
4
5
6
7
8
9
 
<div class="conteneur">
      <img src="" id="idImage" class="image" alt="image">
      <br>
      <input class="bouton" id="btn1" value=" |&lt; " onclick="defileImage(this)" type="button">
      <input class="bouton" id="btn2" value=" &lt; " onclick="defileImage(this)" type="button">
      <input class="bouton" id="btn3" value=" &gt; " onclick="defileImage(this)" type="button">
      <input class="bouton" id="btn4" value=" &gt;| " onclick="defileImage(this)" type="button">      
    </div>

Envoyé par pygoCENTRUS

sur cette page http://www.moai.dafun.com/mammiferes.htm j'aimerai avoir les mêmes espaces entre : bannière-corps-pied de page comme sur celle ci http://www.moai.dafun.com/galerieindex.htm sachant que j'ai tenté de modifier les paramètres habituels sans résultat.

- J'ai modifié la hauteur de l'entête -trop grande- (#entete) : je l'ai mise à 150px qui est la hauteur de l'image qui fait le background, j'ai supprimé les marges.
- J'ai fixé les marges (top et bottom) du #corps à 10px.
- J'ai fixé les marges du #pied_de_page à 0px

tout est dans la CSS, j'ai ajouté les commentaires

----- Voir la pièce jointe pour les corrections décrites ci-dessus -----

Envoyé par pygoCENTRUS

comment avoir un background qui s'adapte a la taille de la page? pour éviter d'avoir une barre noire ou une trace de répétition de celui ci

pour éviter la répétition du bakground c'est :

Code css :

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

1
2
 
background-repeat: no-repeat;

par contre pour qu'il s'adapte au contenu de la page, c'est une colle

Je ne sais pas.

Envoyé par pygoCENTRUS

et pour finir mon pied de page sur cette page http://www.moai.dafun.com/mammiferes.htm perd ses fonctionnalités rss pas moyen d'enlever le cadre même en mettant 0px

euh

quel cadre ?
par contre si tu as perdu les fonctionnalités RSS, euh là je sèche

Dans la barre de navigation de FF j'ai bien l'icône RSS.

[edit]
pour éviter les "le CSS ne s'applique, il a disparu" puis "c'est bon il est revenu"... Vide régulièrement le cache de ton navigateur

[/edit]

**pygoCENTRUS** · 21/05/2008, 15h36

bon et bien cette fois ci c'est quasiment parfait

juste une toute dernière question

comment rendre les boutons transparents? je voudrais juste des flèches blanches

sinon j'ai beaucoup avancé le site sera fini dans quelques jours merci beaucoup

**Auteur** · 21/05/2008, 17h43

regarde la classe bouton et ajoute ces 3 lignes :

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
.bouton{
  text-align: center;
  width: 50px;
  height: 30px;
  
  background-color: transparent;  /* fond transparent */ 
  border: none;   /* on enlève les bordures */
  font-weight: bold; /* on met le texte en gras (plus visible) */
}

- background-color:transparent

le fond des boutons est transparent, il prendra la couleur du fond de la page ;

- border: none

J'ai supprimé la bordure des boutons. Toutefois, j'avoue que je préfère les boutons avec la bordure (qui est en 3D). Si tu veux les bordures, mets cette ligne en commentaires

- font-weight: bold

Je me suis permis de mettre le texte en gras (font-weight). J'ai remarqué que les flèches étaient moins visibles une fois le fond devenu transparent.
Tu peux aussi changer la couleur du texte (qui est noir par défaut) grâce à l'attribut color.

J'espère que ça avance comme tu veux

**pygoCENTRUS** · 21/05/2008, 17h58

pour la énième fois merci beaucoup

ouaip ça avance vraiment bien c'est PARFAIT

**le_chomeur** · 21/05/2008, 18h57

juste une remarque PERSONNELLE

, je n'aime pas le fait de voir les images en taille réelle lorsque l'on navigue ....
il aurait été plus sympa d'avoir une miniature , puis lors du click , un agrandissement de l'original

mais bon

**pygoCENTRUS** · 21/05/2008, 19h06

je suis d'accord avec toi le chomeur mais pour commencer j'ai préféré choisir quelque chose de simple,par la suite je changerai surement le mode d'affichage (pas tout de suite hein

)

hop ptite question > peut on "modifier" une scrollbar (couleur taille etc) ????

**Auteur** · 21/05/2008, 21h55

Envoyé par le_chomeur

juste une remarque PERSONNELLE

, je n'aime pas le fait de voir les images en taille réelle lorsque l'on navigue ....
il aurait été plus sympa d'avoir une miniature , puis lors du click , un agrandissement de l'original

mais bon

En fait sous l'image en taille réelle, tu as un diaporama contenant les miniatures. Tu peux donc cliquer sur ces miniatures pour les afficher en taille réelle sans devoir passer en revue les autres photos

Envoyé par pygoCENTRUS

hop ptite question > peut on "modifier" une scrollbar (couleur taille etc) ????

La taille de la scrollbar est proportionnelle à la taille de l'élément et son contenu donc tu ne peux pas modifier sa longueur ni sa largeur.

Je crois que tu peux modifier la couleur, mais j'avoue que je ne connais pas la CSS qu'il faut appliquer.

[edit]
pygoCENTRUS :
Je viens de visiter ton site. J'ai remarqué que dans plusieurs pages contenant ce diaporama, une des images est manquante. J'ai cru à une faute de frappe dans le nom de l'image ou une image qui n'existait pas. En regardant le code j'ai remarqué que l'image en question avait ce nom : "*****.jpg".

Dans le diaporama, tu n'es pas limité en nombre d'images : tu peux mettre entre 1 et autant d'images que tu veux

[/edit]

**pygoCENTRUS** · 21/05/2008, 23h12

pour l'image *****.jpg ça va je gère (genre je m'y connait

)

je me demande encore un truc> est il possible d'inclure en tout petit a gauche en dessous de chaque photo un lien "taille réelle" vers la photo en grande taille?

j'abuse peut être un peu la dsl

galerie photo

JavaScript

Discussions similaires

Partager

Partager