Discussion :

[gabrielmoz]

Bonjour,

j'ai beaucoup de souci avec le responsive.

je m'explique, j'ai une div avec une image de fond (header)
dans cette div, j'y place une div qui renferme des liens (nav) et que je place en bas de la div header.

quand je réduis la fenêtre l'image se réduit mais le div nav sort de "header" et pour cause vu que sa hauteur ne bouge pas.

comment faire pour empecher cela?

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
#header{
    width:625px;
    height:351px;
    background-image:url(photo.jpg);
    margin:0 auto; 
 
}
 
 
#nav{
    width:100%;
    text-align:center;
    padding-top:250px;
    color:#FFF;
    font-size:36px;
 
 
}
 
 
 
@media all and (max-width: 625px)
{
 
#header {
    width: auto;
    background-size: contain;
    background-repeat:no-repeat;
    margin:0 auto;
    }
 
 
}

mon html

Code :

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

1
2
3
4
5
6
7
8
<div id="header"> 
 
   <div id="nav"> 
 
  Ici je place des liens
  </div>
 
  </div>

Je m'arrache les cheveux.

[Invité]

Bonjour,

1/ HTML5

• HTML5 : le guide du débutant (voir ici : <header> et <nav>)

2/ Responsive

En "responsive", on pense "mobile first".
Toi, tu fais le contraire.

3/ Merci de fournir un code CSS + HTML nécessaire et suffisant pour qu'on puisse tester.
Eventuellement, des copies d'écran / dessins de ce que tu obtiens, et de ce tu souhaite obtenir.

[gabrielmoz]

bonjour

merci pour ta réponse.
Effectivement le mobile first semble être une bonne approche.

A la base je suis codeur php et je me forme au CSS depuis peu.

Le code HTML et CSS que je t'ai fourni ne sont pas suffisants?

En fait, je osuhaite une image sur laquelle on puisse placer des liens et puis au fur et à mesure que l'on réduit la fenêtre de l'écran, l'image se réduit et les liens restent au bon endroit.

J'ai bien compris que le souci vient du padding-top de nav mais comment faire?

J'ai mis un test ici http://www.vgtv.fr/test222.html

[Invité]

Code css :

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

background-size: cover;

Ensuite, rien ne t'empêche d'ajuster la hauteur ou de changer d'image en fonction de la largeur du media.


Une solution :

Code html :

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

1
2
3
4
5
6
7
<header>
 
  <nav>
    Ici je place des liens
  </nav>
 
</header>

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
/* mobile first */
body > header {
  display: block;
  position: relative;
  height: 240px;
  background: url(http://www.vgtv.fr/photo.jpg) no-repeat;
  background-size: cover;
  margin: 0 auto;
}
 
body > header > nav {
  display: block;
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
  color: #FFF;
  font-size: 24px;
}
 
/* tablet */
@media all and (min-width: 625px) {
  body > header {
    width: 625px;
    height: 351px;
  }
  body > header > nav {
    font-size: 36px;
  }
}
 
/* desktop */
@media all and (min-width: 1025px) {
  body > header {
    width: 1000px;
    height: 351px;
  }
  body > header > nav {
    font-size: 48px;
  }
}

N.B. "body > ..." et "body > header > ...", car on pourrait très bien avoir d'autres balises <header> ou <nav> dans la suite du code.

[gabrielmoz]

ah oui je comprends mieux l'intérêt du mobile first.

je vais étudier ton code.
J'ai encore un peu de mal avec cette notion de position, surtout pour relative et absolute.

faut également je respecte la sémantique du HTML5.

c'est en bossant et rebossant dessus que je saisirai le mieux.

merci beaucoup.