Positionnement en CSS sous forme page d'accueil Windows 8

**ramzi87** · 21/09/2015, 13h25

Bonjour chers développeurs,
Je suis en train de mettre en forme mon menu de la page d'accueil sous la forme de la page d'accueil de Windows 8 comme l'image ci-jointe, il s'agit donc du positionnement en CSS, mais j'ai pas pu le réaliser correctement.

Mon code (avec dossier Images/.. qui contient mes images que je veux les afficher)

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
<!DOCTYPE html>
<html lang="en">
 
<head>
 
 
    <title>WebWanter</title>
	<style type="text/css">
	#wrapper {
  text-align: center;
  height: 30%;
  width: 100%;
  box-sizing: border-box;
}
#wrapper1 {
  float: left;
  height: 30%;
  width: 30%;
  box-sizing: border-box;
}
#wrapper2 {
  text-align: center;
  height: 30%;
  width: 30%;
  box-sizing: border-box;
}
#wrapper3 {
  float: right;
  height: 30%;
  width: 30%;
  box-sizing: border-box;
}
</style>
 
</head>
 
<body>
 
<div id="wrapper">
 
		<div id="wrapper1">
			<img src="Images/webwanter0.png" height ="45%" width="55%" /><img src="Images/webwanter3-1.png" height ="35%" width="45%"/><br>
			<img src="Images/webwanter1.png" height ="65%" width="35%" /><img src="Images/webwanter2.png" height ="35%" width="65%"/>
		</div>
 
		<div id="wrapper2">
		       <img src="Images/webwanter04.png" height ="100%" width="100%" />
		</div>
 
		<div id="wrapper3">
			<img src="Images/webwanter06.png" height ="100%" width="100%"/><br>
			<img src="Images/webwanter7-1.png" height ="100%" width="100%"/><br>
			<img src="Images/webwanter8.png" height ="100%" width="100%"/>
		</div>
 
</div>
</body>
 
</html>

C'est mieux d'utiliser les div ou bien un tableau?

Nom : accueil_win8.png
Affichages : 151
Taille : 218,0 Ko

**Jacques Beauregard** · 21/09/2015, 14h25

Bonjour,

Une structure en <div> convient plus que la structure tableau.
Tu peux utiliser Bootstrap qui est parfait ici pour la structure en grille. Cela te facilitera pas mal la tâche.
Néanmoins :

Code :

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

<img src="Images/webwanter0.png" height ="45%" width="55%" />

Depuis HTML5 : ceci doit être exprimé en pixel. Si tu utilise HTML4.01 c'est bon

**ramzi87** · 21/09/2015, 17h24

J'ai ajouté ces deux links dans le head mais comment je vais lier l'affichage de ces div en pourcentage de ma page totale
et est ce qu'ils sont les bons links?

Code :

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

1
2
3
4
<!-- Bootstrap core CSS -->
        <link  rel="stylesheet" href="./css/bootstrap.min.css">
<!-- Datagrid -->
		<link rel="stylesheet" href="./css/jquery.bootgrid.min.css" media="all" />

**ramzi87** · 26/09/2015, 10h46

Bonjour, j'ai pas réussi à le faire.. Est ce qu'on peut écrire float: center ou il y a une autre méthode? Je veux centrer la div wrapper2 et la mettre au même niveau que les autres divs.

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
	<style type="text/css">
	#wrapper {
  text-align: center;
  height: 30%;
  width: 100%;
  box-sizing: border-box;
}
#wrapper1 {
  float: left;
  height: 30%;
  width: 30%;
  box-sizing: border-box;
}
#wrapper2 {
  text-align: center;
  height: 30%;
  width: 30%;
  box-sizing: border-box;
}
#wrapper3 {
  float: right;
  height: 30%;
  width: 30%;
  box-sizing: border-box;
}
</style>
 
</head>
 
<body>
 
<div id="wrapper" height ="35%" width="35%">
 
	<div id="wrapper1">
		<img src="Images/webwanter0.png" height ="45%" width="55%" /><img src="Images/webwanter3-1.png" height ="35%" width="45%"/><br>
		<img src="Images/webwanter1.png" height ="65%" width="35%" /><img src="Images/webwanter2.png" height ="35%" width="65%"/>
	</div>
 
	<div id="wrapper2">
		<img src="Images/webwanter04.png" height ="100%" width="100%" />
	</div>
 
	<div id="wrapper3">
		<img src="Images/webwanter06.png" height ="100%" width="100%"/><br>
		<img src="Images/webwanter7-1.png" height ="100%" width="100%"/><br>
		<img src="Images/webwanter8.png" height ="100%" width="100%"/>
	</div>
</div>
 
</body>
 
</html>

**NoSmoking** · 26/09/2015, 14h08

Bonjour,
• Tu n'as pas besoin de mixer les float:left et float:right, tu devrais pouvoir t'en sortir avec des float:left uniquement.

• Il te faut travailler par ligne ou par colonne pour décomposer ta page, tu t'y retrouvera mieux.

• Supprime le style "inline" de tes images et crée des "class" que tu mettra dans la partie style de ta page.

Est ce qu'on peut écrire float: center

• NON les valeurs existantes sont suffisantes, Propriétés d'affichage et de positionnement.

**ramzi87** · 28/09/2015, 09h46

Bonjour,
est ce qu'il est acceptable de travailler avec plusieurs liens dans une image en utilisant les coordonnées? il est un peu stressant de trouver les coordonnées exactes avec Paint. J'ai pas réussi à le faire.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<img src="Images/tables.jpg" height ="100%" width="100%" usemap="#map1"/>
		<map name="map1">
			<area href="#Ma Boutique" shape="rect" coords="340,320,680,490"/>
			<area href="#Marketing" shape="rect" coords="705,705,980,980"/>
			<area href="#Mes Ventes" shape="rect" coords="280,520,550,780"/>
			<area href="#Mes Clients" shape="rect" coords="580,580,980,980"/>
			<area href="#Ma Gestion" shape="rect" coords="1000,1000,1240,1240"/>
			<area href="#Mon Design" shape="rect" coords="0,0,120,120"/>
			<area href="#Mes Préférences" shape="rect" coords="0,0,120,120"/>
			<area href="#Mes Services" shape="rect" coords="0,0,120,120"/>
		</map>

**ramzi87** · 28/09/2015, 10h52

Le problème que la taille réelle de l'image est de (2000*1000)
2000 largeur et 1000 hauteur, Je veux que le width=100% et le height=100%
car si je mets width=2000 et le height=1000 ça marche nickel avec les coordonnées en pixels.
Si je connais la taille d'affichage du navigateur ça sera mieux.

**ramzi87** · 28/09/2015, 12h02

Bonjour,
J'ai réussi à redimensionner mon image merci.

**ramzi87** · 30/09/2015, 10h25

Bonjour,
Je veux changer le menu qui est sous forme de boutons comme celles de windows 8 ou 10, mais j'ai pas réussi à chager les formes des carrés comme l'image tables.jpg ci-jointe avec la page web.

Page web

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Page d'accueil de Web Wanter</title>
 
	<link type="text/css" href="styles.css" rel="stylesheet" />
 
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600" rel="stylesheet" type="text/css" />
 
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 
	<script type="text/javascript">
		$(document).ready(function() {		
			$('.menu a').hover(function() {
				$(this).stop().animate({							
					opacity: 1
				}, 300);		
				}, function() {			
				$(this).stop().animate({							
					opacity: 0.5
				}, 300);		
			});	
		});	
	</script>
</head>
 
<body>
 
<div style="text-align:center;margin-top:20px;">
 
<img src="bitmap.png"   height="100" width ="500"/><BR>
 
<h3>Page d'accueil de Web Wanter</h3>
 
<div class="menu">
	<a class="red" href="#"><h3>Ma Boutique</h3></a>
	<a class="green" href="#"><h3>Marketing</h3></a>
	<a class="purple" href="#"><h3>Ma Gestion</h3></a>
	<a class="blue1" href="#"><h3>Mes Ventes</h3></a>
	<a class="yellow" href="#"><h3>Mes Clients</h3></a>
	<a class="blue" href="#"><h3>Mon Design</h3></a>
	<a class="red1" href="#"><h3>Mes Pr&eacutef&eacuterences</h3></a>
	<a class="blue2" href="#"><h3>Mes Services</h3></a>
</div>
 
</body>
</html>

fichier style.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
* {
	margin: 0;
	padding: 0;
}
body {
	background: #111;
	color: #FFF;
	font-family:'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 16pt;
}
a {
	color: #FFF;
	text-decoration: none;
}
.menu {
	width: 900px;
	margin: 30px auto;
}
.menu a {
	width: 200px;
	line-height: 150px;
	display: block;
	margin: 4px;
	text-align: center;
	float:left;
	opacity: 0.5;
}
 
.yellow { background: #ff9900; }
.blue { background: #009fe3; }
.blue1 { background: #6666ff; }
.blue2 { background: #9999ff; }
.purple { background: #9900ff; }
.green { background: #009933; }
.red { background: #ff0000; }
.red1 { background: #9e0000; }

Cordialement.

**NoSmoking** · 03/10/2015, 15h00

C'est quoi ce H3 dans la balise A, tu peux obtenir le même rendu en CSS ?

Pour ta présentation, je préconise souvent de revenir au papier et au crayon pour visualiser la structure et dans ce cas il faut que tu raisonnes grille.

• Dans ton cas sépare la partie gauche de la droite au niveau de la cellule occupant la hauteur de l'élément principal, d'après ton 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
<div id="nav">
  <div id="gauche">
    <a href="lien_1.html">Ma Boutique</a>
    <a href="lien_2.html">Marketing</a>
    <a  href="lien_3.html">Ma Gestion</a>
    <a  href="lien_4.html">Mes Ventes</a>
  </div>
  <div id="droite">
    <a  href="lien_5.html">Mes Clients</a>
    <a  href="lien_6.html">Mon Design</a>
    <a  href="lien_7.html">Mes Préférences</a>
    <a  href="lien_8.html">Mes Services</a>
  </div>
</div>

• Si l'on considère que l'élément id="nav" fait 100% alors les éléments id="gauche" et id="droite" feront 50% de leur conteneur, id="nav" donc et pour la hauteur ces éléments feront 100%.

On peut le traduire en CSS de la façon suivante

Code :

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

1
2
3
4
5
6
7
8
9
.col_50 {
  width:50%;
}
.col_100 {
  width:100%;
}
.lig_100 {
  height:100%;
}

le code HTML en découlant devient

Code html :

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

1
2
3
4
5
6
<div id="nav">
  <div id="gauche" class="col_50 lig_100">
  </div>
  <div id="droite" class="col_50 lig_100">
  </div>
</div>

• Maintenant il suffit d'appliquer le même principe pour les liens A.
On ajoute, d'après ton besoin les classes suivantes

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.col_40 {
  width:40%;
}
.col_60 {
  width:60%;
}
.lig_33 {
  height:33.333%;
}
.lig_50 {
  height:50%;
}

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
<div id="nav">
  <div id="gauche" class="col_50 lig_100">
    <a class="col_60 lig_50 color_1" href="#">Ma Boutique</a>
    <a class="col_40 lig_50 color_2" href="#">Marketing</a>
    <a class="col_40 lig_50 color_3" href="#">Ma Gestion</a>
    <a class="col_60 lig_50 color_4" href="#">Mes Ventes</a>
  </div>
  <div id="droite" class="col_50 lig_100">
    <a class="col_40 lig_100 color_5" href="#">Mes Clients</a>
    <a class="col_60 lig_33  color_6" href="#">Mon Design</a>
    <a class="col_60 lig_33  color_7" href="#">Mes Préférences</a>
    <a class="col_60 lig_33  color_8" href="#">Mes Services</a>
  </div>
</div>

Voilà pour le principal, le reste n'étant que détails...

• Exemple qui devrait être proche de ce que tu souhaites...

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
<!doctype html>
<html lang="fr">
<head>
<meta charset = "UTF-8">
<title>Menu grille</title>
<meta name="Author" content="NoSmoking">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet" type="text/css">
<style>
html, body{
  margin:0;
  padding:0;
}
body {
  background: #111;
  color: #FFF;
  font-size:100%;
  font: 1em/1.5em 'Open Sans', sans-serif;
}
#main {
  width:80%;
  margin: auto;
}
#nav div {
  float:left;
}
#nav {
  width:80%;
  margin:auto;
  height:18em;
  box-sizing:border-box;    /* pour prendre en compte bordure et padding dans la dimension */
  text-align:center;
  font-size:1em;
  border:1px solid #888;
}
#nav a {
  float:left;
  display:block;
  color: #fff;
  font-size: 1.2em;         /* taille police H3 */
  font-weight: bold;
  text-decoration:none;
  box-sizing:border-box;    /* pour prendre en compte bordure et padding dans la dimension */
  border:.125em solid #000;
}
/**
* Définition des largeurs, celles ci s'entendent par rapport à leur conteneur
**/
.col_40 {
  width:40%;
}
.col_50 {
  width:50%;
}
.col_60 {
  width:60%;
}
.col_100 {
  width:100%;
}
/**
* Pour un centrage vertical, le calcul de line-height se fait suivant la formule suivante
* ( #nav_height / font-size ) * pourcentage
* exemple :  18em /1.2em * .33333 = 5em
**/
.lig_33 {
  height:33.333%;
  line-height:5em;
}
.lig_50 {
  height:50%;
  line-height:7.5em;
}
.lig_100 {
  height:100%;
  line-height:15em;
}
.color_1 { background-color:#ff0000;}
.color_2 { background-color:#009933;}
.color_3 { background-color:#9900ff;}
.color_4 { background-color:#6666ff;}
.color_5 { background-color:#ff9900;}
.color_6 { background-color:#009fe3;}
.color_7 { background-color:#9e0000;}
.color_8 { background-color:#9999ff;}
</style>
</head>
<body>
<div id="main">
  <h1>Construction en grille</h1>
  <div id="nav">
    <div id="gauche" class="col_50 lig_100">
      <a class="col_60 lig_50 color_1" href="#">Ma Boutique</a>
      <a class="col_40 lig_50 color_2" href="#">Marketing</a>
      <a class="col_40 lig_50 color_3" href="#">Ma Gestion</a>
      <a class="col_60 lig_50 color_4" href="#">Mes Ventes</a>
    </div>
    <div id="droite" class="col_50 lig_100">
      <a class="col_40 lig_100 color_5" href="#">Mes Clients</a>
      <a class="col_60 lig_33  color_6" href="#">Mon Design</a>
      <a class="col_60 lig_33  color_7" href="#">Mes Préférences</a>
      <a class="col_60 lig_33  color_8" href="#">Mes Services</a>
    </div>
  </div>
</div>
</body>
</html>

Pour le centrage vertical des liens il suffit de lire les commentaires dans la partie CSS, je pense qu'ils sont suffisants.

Bonne réflexion !

**CCyrillus** · 03/10/2015, 16h43

Bonjour,

l'option column-width est peut-etre aussi une piste a suivre : http://codepen.io/anon/pen/LpWQxr

Code :

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

1
2
3
4
5
6
7
8
9
<h1>TEST</h1>
<div>
  <h2>group 1</h2>
  <a href="#" class="w50"> boite 1</a>
  <a href="#" class="w50"> boite</a>
  <a href="#" class="w50"> boite</a>
  <a href="#" class="w50"> boite</a>
  <a href="#" class="w100"> boite</a>
....

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
html,
body {
  white-space: nowrap;
  box-sizing: border-box;
  height: 100%;
  padding: 0.5em 3% 0;
  background: darkblue;
}
 
body>h1 {
  margin: 0 0 2em;
}
 
body>div {
  white-space: normal;
  column-width: 150px;
  display: inline-block;
  vertical-align: top;
  height: 80%;
  position: relative;
}
 
body>div>h2 {
  position: absolute;
  bottom: 100%;
  color: white;
  white-space: nowrap;
}
 
body>div>a {
  display: inline-block;
  margin: 5px 4px;
  box-shadow: 0 0 1px white;
  color: white;
  text-align: center;
}
 
body>div>a:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 70px;
}
 
.w50 {
  width: 70px;
}
 
.w100,
.gap {
  width: 152px
}
 
.gap {
  margin-top: 100%;
}
 
a:nth-child(1n) {
  background: #009AAC;
}
 
a:nth-child(2n) {
  background: #A400AB
}
 
a:nth-child(3n) {
  background: #009800
}
 
a:nth-child(4n) {
  background: #DB552D
}
 
a:nth-child(5n) {
  background: #AD193E
}

**ramzi87** · 05/10/2015, 10h11

Bonjour,
pour NoSmoking merci pour le travail ça marche et j'ai bien assimilé le positionnement des divs, j'ai remarqué que lorsque je met le curseur entre les deux boutons le curseur reste comme lien et ne se change pas en flèche. De plus, je veux ajouter animate du bouton avec opacity lorsque je mets le curseur opacity devient à 1

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
		$(document).ready(function() {		
			$('.nav a').hover(function() {
				$(this).stop().animate({							
					opacity: 1
				}, 300);		
				}, function() {			
				$(this).stop().animate({							
					opacity: 0.8
				}, 300);		
			});	
	</script>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
#nav a {
  float:left;
  display:block;
  color: #fff;
  font-size: 1.2em;         /* taille police H3 */
  font-weight: bold;
  text-decoration:none;
  box-sizing:border-box;    /* pour prendre en compte bordure et padding dans la dimension */
  border:.125em solid #000;
  opacity: 0.8; //au début 0.8 si je mets curseur ça devient 1
}

**NoSmoking** · 05/10/2015, 22h22

j'ai remarqué que lorsque je met le curseur entre les deux boutons le curseur reste comme lien et ne se change pas en flèche.

si cela est vraiment gênant il va falloir changer légèrement la structure du document.

As tu testé la solution de CCyrillus ?

De plus, je veux ajouter animate du bouton avec opacity lorsque je mets le curseur opacity devient à 1

cela tu peux le faire en CSS avec un effet de transition CSS3 pour les navigateurs qui le supportent.

@CCyrillus je mets précieusement de coté ton code

Code :

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

1
2
3
4
5
6
body>div>a:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 70px;
}

pour le centrage vertical

Invité · 06/10/2015, 15h35

Bonjour,
fort du code de CCyrillus, j'ai tenté ma propre version responsive : http://codepen.io/jreaux62/pen/ojWwyv

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
<div class="wind8">
	<h2>group 1</h2>
	<a href="#" class="w1 h1">boite</a>
  <a href="#" class="w1 h1"><span>C'est la boite à coucou  !</span></a>
	<a href="#" class="w2 h1">boite</a>
	<a href="#" class="w3 h1">boite</a>
	<a href="#" class="w1 h1">boite</a>
	<a href="#" class="w2 h2">boite</a>
	<a href="#" class="w2 h2">boite</a>
</div>
 
<div class="wind8">
	<h2>group 2</h2>
	<a href="#" class="w1 h4">boite</a>
	<a href="#" class="w1 h1">boite</a>
	<a href="#" class="w1 h1">boite</a>
	<a href="#" class="w1 h1">boite</a>
	<a href="#" class="w1 h1">boite</a>
	<a href="#" class="w2 h1">boite</a>
	<a href="#" class="w2 h2">boite</a>
	<a href="#" class="w1 h1">boite</a>
	<a href="#" class="w1 h1">boite</a>
</div>
 
<div class="wind8">
	<h2>group 3</h2>
	<a href="#" class="w2 h1">boite</a>
	<a href="#" class="w1 h1">boite</a>
	<a href="#" class="w1 h1">boite</a>
	<a href="#" class="w3 h3">boite</a>
	<a href="#" class="w1 h1">boite</a>
<a href="#" class="w1 h1">boite</a>
<a href="#" class="w1 h1">boite</a>
</div>
 
<div class="wind8">
	<h2>group 4</h2>
	<a href="#" class="w4 h1">boite</a>
			<a href="#" class="w2 h3">boite</a>
<a href="#" class="w1 h1">boite</a>
	<a href="#" class="w1 h1">boite</a>
<a href="#" class="w2 h2">boite</a>
</div>

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
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
* { padding:0; margin:0; border:0; }
html,
body {
  white-space: nowrap;/* in case more than 1 div as child */
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding:0;
  background: darkblue;
}
 
.wind8 {
  height:400px; /* obligation de féfinir une hauteur */
  width:33.3%; /* 4 par ligne */
  padding:40px 0.5% 0; 
  position: relative;
  box-sizing: border-box;
  display:block; float:left; 
  /*background:grey;*/
}
 
.wind8 > h2 {
  position: absolute;
  top: 0.5%; left:0; width:100%;
  padding:0; margin:0.5%;
  color: white; text-align:center;
  white-space: nowrap;
}
 
.wind8 > a {
  display: block; float:left;
  box-sizing: border-box;
  margin:0.5%;
  box-shadow: 0 0 1px white;
  color: white;
  text-align: center;
  white-space: normal;
}
.wind8 > a:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height:100%; /* centrage vertical des textes */
}
.wind8 > a span { /* texte long */
  display:inline-block; padding:10px;
}
 
.w1 { width:24%; }
.h1 { height:24%; }
.w2 { width:49%; }
.h2 { height:49%; }
.w3 { width:74%; }
.h3 { height:74%; }
.w4 { width:99%; }
.h4 { height:99%; }
 
a:nth-child(1n) { background: #009AAC; }
a:nth-child(2n) { background: #A400AB; }
a:nth-child(3n) { background: #009800; }
a:nth-child(4n) { background: #DB552D; }
a:nth-child(5n) { background: #AD193E; }

De quoi bien s'amuser !

Positionnement en CSS sous forme page d'accueil Windows 8

Positionnement en CSS

Discussions similaires

Partager

Partager