Positionnement responsive difficile

**poneyz** · 04/08/2015, 13h23

Bonjour,
J’essaye désespérément de positionner et dimensionner mes éléments indépendamment de la taille de l'écran.

J'y arrive un peu, mais pas trop.

Voici la base du problème :
HTML

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
 
<!doctype html>
<html lang="fr">
 
	<head>
		<link rel="stylesheet" href="principale.css">
	</head>
 
	<body>
		<header>
 
			<div id="haut">
				<a href="lienfou.php"><div class="bouton">Clique ici</div></a>
				<a href="lienfou.php"><div class="bouton">Non ici</div></a>
				<a href="lienfou.php"><div class="bouton">Non ici</div></a>
 
				<a href="lienfou.php"><div class="bouton"></div>Non ici</a> <!--!damn!-->
			</div>
 
		</header>
 
		<div id="corpintro">
 
			<h1>TITRE</h1>
		<p>
			Lorem ipsum etc...
			<br />
			etc...
			<br/>
			etc...
		</p>
 
		</div>
		<!--Un bon gros espace sortis de nulepart-->
		<footer>
 
		<div id="bas">
			<a href="lienfou.php">Epona</a>
			<a href="lienfou.php">Ponyta</a>
			<a href="lienfou.php">Agro</a>
			<a href="lienfou.php">Poney perdu</a>
			<a href=".lienfou.php">Retrouvé</a>
		</div>
 
		</footer>
 
	</body>
 
</html>

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
 
@charset "UTF-8";
/*initialisation et prérequis____________________________________________________________*/
html /*ecran de 1920 px */
{ 
  margin:0;
  padding:0;
  background: url('../images/arriere_plan.jpg') repeat-y center top;
  background-size: 100%;
  overflow-y: scroll; /*force la scrollbar, passe le 1920 en 1903*/
}
body
{ 	
	position: relative;
	width:733px;/*la taille du fond d'ecran, mais pas bon*/
	margin-top: 13%;
	margin-left: auto; /*Ici c'est pas bon*/
	margin-right: auto;
	margin-bottom: 0;
}
/*centrage menu haut*/
#haut
{
	/*??*/
}
/*fin initialisation et prérequis_________________________________________________*/
/*menu haut_______________________________________________________________________*/
#haut a /*parametrage du texte*/
{
	text-decoration: none;
	color: #FFFFFF;
}
.bouton  /*4 bouttons légerement espacés*/ 
{
	float: left;
    width: 24.465240642%; /**/
    padding-top: 1%; /*permet le centrage vertical*/
    text-align: center;
 
	margin-right: 0.71301247733%; /*espace entre les bouttons*/
 
	background: linear-gradient( to top, rgba(255,255,255,0), rgba(61,61,61,65), rgba(25,25,25,100), rgba(61,61,61,35), rgba(255,255,255,0));
	border-radius: 10%;
}
#last .bouton /*bricolage de centrage dans l'entéte pour le dernier element*/
{
	margin-right: 0;
}
/*fin menu haut___________________________________________________________________*/
/*corp____________________________________________________________________________*/
#corpintro
{
	text-align: center;
	color: rgb(153,153,153);
	width: 100%;
	height: auto;
	background-color: rgb(00,00,51);
}
/*fin corp________________________________________________________________________*/
/*menu bas________________________________________________________________________*/
footer
{
 
}
#bas a
{
	background-color: rgb(187,187,187);
	float: left;
	width: 20%;
	text-align: center;
}

Je voudrais que ça ressemble à cela :
Nom : Schema_succin.png
Affichages : 69
Taille : 29,8 Ko

Merci de votre aide

**NoSmoking** · 04/08/2015, 14h05

Bonjour,
avant d'aller plus loin reprends ta copie concernant le menu dans ton <header>.

Code html :

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

1
2
3
4
5
6
7
8
<header>
	<div id="haut">
		<a href="lienfou.php"><div class="bouton">Clique ici</div></a>
		<a href="lienfou.php"><div class="bouton">Non ici</div></a>
		<a href="lienfou.php"><div class="bouton">Non ici</div></a>
		<a href="lienfou.php"><div class="bouton"></div>Non ici</a> <!--!damn!-->
	</div>
</header>

utilise une liste <ul><li> par exemple en limitant les conteneurs qui ne servent à rien. Fais de même pour les autres menus.

Regarde également du coté des fusions de marge liées aux valeurs par défaut sur les H1 notamment.

**poneyz** · 05/08/2015, 12h21

Hello,

Envoyé par NoSmoking

utilise une liste <ul><li>

Initialement j'avais bien mis des listes, mais un amis m'a affirmé que qu’étais plus la bonne façon de positionner, m'a dit n’importe quoi

.

Envoyé par NoSmoking

par exemple en limitant les conteneurs qui ne servent à rien.

Je suppose que tu veux dire : "qui n'ont pas de valeur sémantique".

Envoyé par NoSmoking

Regarde également du coté des fusions de marge liées aux valeurs par défaut sur les H1 notamment.

Fait pour le H1 mais pour le haut, j'y arrive pas

CA donne :
HTML:

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
<!doctype html>
<html lang="fr">
 
	<head>
		<link rel="stylesheet" href="principale.css">
	</head>
 
	<body>
		<header>
 
			<div id="haut">
			<ul>
				<li><a href="lienfou.php">Clique ici</a></li>
				<li><a href="lienfou.php">Non ici</a></li>
				<li><a href="lienfou.php">Non ici</a></li>
				<li><a href="lienfou.php">Non ici</a></li>
			</ul>
			</div>-
 
		</header>
 
		<div id="corpintro">
 
			<h1>TITRE</h1>
			<p>
				Lorem ipsum etc...
				<br />
				etc...
				<br/>
				etc...
			</p>
 
		</div>
		<!--Un bon gros espace sortis de nulepart-->
		<footer>
 
		<ul>
			<li><a href="lienfou.php">Epona</a><li>
			<li><a href="lienfou.php">Ponyta</a><li>
			<li><a href="lienfou.php">Agro</a><li>
			<li><a href="lienfou.php">Poney perdu</a><li>
			<li><a href=".lienfou.php">Retrouvé</a><li>
		</ul>
 
		</footer>
 
	</body>
 
</html>

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
@charset "UTF-8";
/*initialisation et prérequis____________________________________________________________*/
html /*ecran de 1920 px */
{ 
  margin:0;
  padding:0;
  background: url('arriere_plan.jpg') repeat-y center top;
  background-size: 100%;
  overflow-y: scroll; /*force la scrollbar, passe le 1920 en 1903*/
}
body
{ 	
	position: relative;
	margin-top: 13%;
	width:auto;/*la taille du fond d'ecran, mais pas bon*/
	margin-left: 20%;
	margin-right: 20%;
	margin-bottom: 0;
}
/*centrage menu haut*/
/*fin initialisation et prérequis_________________________________________________*/
/*menu haut_______________________________________________________________________*/
#haut
{
 
}
ul
{
	padding:0;
	margin:0;
	list-style:none;
}
#haut li a /*parametrage du texte*/
{
	text-decoration: none;
	font-size: 1.4em;
	color: #FFFFFF;
 
}
#haut li /*4 bouttons légerement espacés*/ 
{
	float: left;
    width: 24.465240642%; /**/
    padding-top: 1%; /*permet le centrage vertical*/
	padding-bottom: 0.3%;
    text-align: center;
 
	margin-left: 0.534759358%; /*espace entre les bouttons*/
 
	background: linear-gradient( to top, rgba(255,255,255,0), rgba(61,61,61,65), rgba(25,25,25,100), rgba(61,61,61,35), rgba(255,255,255,0));
	border-radius: 10%;
}
/*fin menu haut___________________________________________________________________*/
/*corp____________________________________________________________________________*/
#corpintro
{
	text-align: center;
	color: rgb(153,153,153);
	width: 100%;
	height: 15em;
	background-color: rgb(00,00,51);
}
#corpintro h1
{
	margin-top: 0;
	padding-top: 40px;
}
/*fin corp________________________________________________________________________*/
/*menu bas________________________________________________________________________*/
footer a
{
	background-color: rgb(187,187,187);
	float: left;
	width: 20%;
	text-align: center;
}

si non
-J'ai réussi à centré mon corps face au tire suivant la résolution

.

en transformant ça

Code :

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

1
2
3
4
5
6
body
{ 	
	width:733px;
	margin-left: auto;
	margin-right: auto;
}

En ça :

Code :

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

1
2
3
4
5
6
body
{ 	
	width:auto;
	margin-left: 20%;
	margin-right: 20%;
}

C'est pas parfait mais je me rapproche du but !

Sincerment merci de ton aide, c'est enorme pour moi.

**NoSmoking** · 05/08/2015, 15h01

• Nous allons nous concentrer sur cette partie du code

Code html :

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

1
2
3
4
5
6
7
8
9
10
<header>
    <div id="haut">
        <ul>
            <li><a href="lienfou.php">Clique ici</a></li>
            <li><a href="lienfou.php">Non ici</a></li>
            <li><a href="lienfou.php">Non ici</a></li>
            <li><a href="lienfou.php">Non ici</a></li>
        </ul>
    </div>
</header>

et regarder la dimension/positionnement des éléments

La hauteur de ton <header> est égale à 0, oui mais pourquoi ?
La hauteur de ta <div id="haut"> est égale à 0, oui mais pourquoi ?
La hauteur de ta <ul> est égale à 0, oui mais pourquoi ?

...parce que les <li> sont en float:left et qu'un élément flottant est partiellement retiré du flux et n'influe aucunement sur les dimensions de son parent, donc par cascade et en remontant <header> se retrouve avoir une hauteur égale à 0.

L'influence de tout cela est que ta <div id="corpintro"> ce place au même niveau que <header>, d'où ton besoin de mettre un padding-top:40px sur le <h1>.

En conclusion il te faut déclarer une hauteur quelle que part pour éviter ce chevauchement.

• Je te propose de déclarer cette hauteur sur la <ul>, ce qui permettra également de centrer le texte verticalement en mettant une déclaration comme suit

Code :

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

1
2
3
4
#haut ul {
  height:2.75em;        /* 2.75 x 16 = 44px */
  line-height:2.75em;   /* assure le centrage vertical */
}

• Maintenant tes <li> n'ont plus besoin de padding approximatif et le CSS peut se résumer à cela

Code :

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

1
2
3
4
5
6
7
8
9
10
#haut ul li{
  float:left;
  padding:0;
  margin:0;
  width:24.25%;         /* 4x24.25% + 3x1% = 100% */
 
  text-align:center;
  background:linear-gradient( to top, rgba(255,255,255,0), rgba(61,61,61,65), rgba(25,25,25,100), rgba(61,61,61,35), rgba(255,255,255,0));
  border-radius:1em;
}

• Il reste à tenir compte de l'espace entre chaque <li>, indiqué dans le commentaire à 1% dans le CSS ci dessus, pour se faire on va applique un padding sur tous les <li> sauf le premier

Code :

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

1
2
3
4
/*-- tous sauf le 1st LI --*/
#haut ul > li +li{
  margin-left:1%;
}

• Ceci étant fait, tu peux supprimer le padding-top:40px de ton <h1>.

J’espère que cela est assez clair !

**poneyz** · 07/08/2015, 12h25

Merci pour tout !

Edit : Ne fonctionne pas sur IE8.

Positionnement responsive difficile

Responsive design en CSS

Discussions similaires

Partager

Partager