Discussion :

[vbaguet]

Bonjour à tous,

Alors voilà j'ai un petit soucis. Je viens de commencer la partie responsive de mon site, et je m'attaque à la version Ipad Mini en paysage.

La résolution étant de 1024x768, je veux diviser ma galerie d'image en 3 colonnes...

Mes images font du 333px en width avec chacune un padding de 4px, ce qui fait (333 x 3) + (4 x 6) = 1023px.

Donc ca devrais parfaitement coller, or mes 3 images par ligne, n'occupent pas toute la largeur de l'Ipad en paysage..., 3/4 à peine.

Quel peut-être le problème ?

Voici le site

Si vous avez une meilleur façon de procéder, je suis preneur...

[rodolphebrd]

Bonjour, je n'ai pas l'impression qu'il y ait de viewport sur votre site.

[vbaguet]

Comment dois-je l'implémenter ? Parce qu'en mettant le meta viewport, cela n'a rien changé... Quelle valeur ?

<meta name="viewport" content="width=device-width, maximum-scale=1.0" /> ?

[NoSmoking]

Bonsoir,

Mes images font du 333px en width

Code :

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

1
2
3
4
5
.category img {
    border: medium none;
    height: 130px;
    width: 200px;
}

[rodolphebrd]

@NoSmoking: je crois qu'effectivement une règle a été créée pour Ipad avec les dimensions qu'il indique.

Testé sur Ipad.

Il faudrait une version zip car il manque des éléments et c'est difficile de tester dans le vide.

Je verrais une solution via la propriéré table.

[vbaguet]

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
 
<!-- START CONTAINER -->
<nav id="second-navigation">
	<ul>
		<li><a href="#french">FR</a></li>
		<li><a href="#english">EN</a></li>
	</ul>
</nav>
 
<article id="french">
	<section class="container">
		<a href="#fineart" class="category"><img src="images/vignettes/products.jpg" alt="Products" /><span></span></a>
		<a href="#fineart" class="category"><img src="images/vignettes/corporate.jpg" alt="Corporate" /><span></span></a>
		<a href="#fineart" class="category"><img src="images/vignettes/events.jpg" alt="Events" /><span></span></a>
		<a href="#fineart" class="category"><img src="images/vignettes/fine-art.jpg" alt="Fine Art" /><span></span></a>
		<a href="#fineart" class="category"><img src="images/vignettes/architecture.jpg" alt="Architecture" /><span></span></a>
		<a href="#fineart" class="category"><img src="images/vignettes/food.jpg" alt="Food" /><span></span></a>
		<a href="#fineart" class="category"><img src="images/vignettes/reportages.jpg" alt="Reportages" /><span></span></a>
		<a href="#fineart" class="category"><img src="images/vignettes/weddings.jpg" alt="Weddings" /><span></span></a>
		<a href="#fineart" class="category"><img src="images/vignettes/people.jpg" alt="People" /><span></span></a>
	</section>
</article>
 
<article id="home">
	<section class="container">
		<nav id="main-navigation">
			<ul>
				<li><a href="#french">Français</a></li>
				<li><a href="#english">English</a></li>
			</ul>
		</nav>
	</section>
</article>
 
<article id="english">
	<section class="container">
		<a href="#fineart" class="category"><img src="images/vignettes/products.jpg" alt="Products" /><span></span></a>
		<a href="#fineart" class="category"><img src="images/vignettes/corporate.jpg" alt="Corporate" /><span></span></a>
		<a href="#fineart" class="category"><img src="images/vignettes/events.jpg" alt="Events" /><span></span></a>
		<a href="#fineart" class="category"><img src="images/vignettes/fine-art.jpg" alt="Fine Art" /><span></span></a>
		<a href="#fineart" class="category"><img src="images/vignettes/architecture.jpg" alt="Architecture" /><span></span></a>
		<a href="#fineart" class="category"><img src="images/vignettes/food.jpg" alt="Food" /><span></span></a>
		<a href="#fineart" class="category"><img src="images/vignettes/reportages.jpg" alt="Reportages" /><span></span></a>
		<a href="#fineart" class="category"><img src="images/vignettes/weddings.jpg" alt="Weddings" /><span></span></a>
		<a href="#fineart" class="category"><img src="images/vignettes/people.jpg" alt="People" /><span></span></a>
	</section>
</article>
<!-- END CONTAINER -->

Code css :

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
 
/*
MEDIA QUERIES
-----------------------------------------------------------------*/					
/* iPad Mini in landscape only */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
 
body { overflow:hidden; }
 
article {
	width:1024px;
	height:768px;
	position:absolute;
	overflow:hidden;
}
 
article#home { background:url(images/logo.png) center center  no-repeat; }
article#english { display:none; height:768px; width:1024px; position:absolute; overflow:hidden; }
 
.category { display:block; width:333px; float:left; padding:4px; filter: none; -webkit-filter: grayscale(0); position:relative; text-decoration:none; }
	.category a { display:block; width:333px; outline:none; }
		.category img { width:333px; border:none; }
		.category span { display:block; position:absolute; bottom:4px; left:4px; background: rgba(0, 0, 0, 0.8); color:#FFFFFF; font-size:1em; font-family:Helvetica, Arial, sans-serif; width:333px; height:30px; line-height:30px; text-transform:uppercase; text-align:center; }
 
}