Discussion :

[ickyknox]

bonjour,

sur chrome j'ai mon site qui fonctionne bien

site

pourtant sur firefox, les images du milieu sont immenses, et je ne sais pas comment les rétablir à la bonne taille.

Comment puis je faire s'il vous plais ?

je vous remercie

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
    <div class="box">
    <div class="vignette">
            <p><a>Découvrez notre centre de soins</a></p>
            <p style="width:178px;
            padding-right:25px;
           "><img style="padding-top:26px;" src="http://cerclehippiquechoukasserie.com/data/images/vignette1.png" alt="choukasserie care"></p>
            <p
            style="border-left:1px white solid; padding-left:25px;"><a>Découvrez notre centre équestre</a></p>
            <p><img src="http://cerclehippiquechoukasserie.com/data/images/vignette2.jpg" alt="cheval"></p>
          </div>
       </div>

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
.box{
   width:1300px;
  vertical-align:middle;
  display:inline-block;
  line-height:1.2; 
   border-left:3px rgba(44,80,34,1) solid;
border-right:3px rgba(44,80,34,1) solid;
border-bottom:3px rgba(44,80,34,1) solid;
padding:10px 20px;
}
 
.vignette { 
  display:table; 
  border-collapse:collapsed;
 
}
.vignette p {
  display: table-cell;
  vertical-align: middle;
      width:130px;
}
.vignette a{
	color: white;
}
 
.vignette a:hover{
	color: #D1B561;
}
 
 
.vignette a, .vignette img{
   display: block;
   border-radius:8px;
 
}

[mangasource]

J'ai deux solutions :

> SOLUTION I

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
 
    <div class="box">
    <div class="vignette">
            <p><a>Découvrez notre centre de soins</a></p>
 
            <p style="padding-right:25px;">
              <img style="padding-top:26px; width:178px;" src="http://cerclehippiquechoukasserie.com/data/images/vignette1.png" alt="choukasserie care" />
              </p>
 
              <p style="border-left:1px white solid; padding-left:25px;">
                <a>Découvrez notre centre équestre</a>
              </p>
            <p>
              <img src="http://cerclehippiquechoukasserie.com/data/images/vignette2.jpg" alt="cheval" />
              </p>
          </div>
       </div>

- Suppression du width:178px sur le <p>
- Rajout du width:178px sur <img>

> SOLUTION II
- Ou alors redimensionner ton image au même format que la seconde ^^


Ce ne sont peut-être pas les meilleures solutions, mais ça marche

Et pour tes images, pense à fermer les balises :

Mauvais

Code html :

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

1
2
 
<img src="http://cerclehippiquechoukasserie.com/data/images/vignette2.jpg" alt="cheval">

Correct

Code html :

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

1
2
 
<img src="http://cerclehippiquechoukasserie.com/data/images/vignette2.jpg" alt="cheval" />

[Bovino]

Et pour tes images, pense à fermer les balises

Ca dépend.
En HTML, il n'est pas nécessaire de fermer toutes les balises, donc dans ce cas,

Code html :

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

<img alt="..." src="...">

est suffisant.
En xhtml, il faut obligatoirement fermer toutes les balises (y compris les balises autofermantes comme les images), donc

Code html :

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

<img alt="..." src="..." />

est obligatoire.
HTML5 accepte aussi bien la syntaxe HTML que xhtml.

[mangasource]

Ah, je croyais pourtant .. Faut que je revois mes bases tiens !
Merci pour l'info

[ickyknox]

parfait ! merci beaucoup, c'est corrigé