Discussion :

[oceane751]

Bonsoir à tous !

Suis en train de devenir dingue

Je me mets doucement au responsive design et dans mon cas ça ne fonctionne qu'à moitié !

Le code html5 :

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
<article>
    <h2>SURTITRE</h2>	
    <h1>TITRE</h1>
    <h2>SOUSTITRE</h2>
    	<p>Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita homines instar turbinis degressi montibus impeditis et arduis loca petivere mari confinia, per quae viis latebrosis sese convallibusque occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum solido splendore fulgente nauticos observabant quos cum in somnum sentirent effusos per ancoralia, quadrupedo gradu repentes seseque suspensis passibus iniectantes in scaphas eisdem sensim nihil opinantibus adsistebant et incendente aviditate saevitiam ne cedentium quidem ulli parcendo obtruncatis omnibus merces opimas velut viles nullis repugnantibus avertebant. haecque non diu sunt perpetrata.
 
Cum saepe multa, tum memini domi in hemicyclio sedentem, ut solebat, cum et ego essem una et pauci admodum familiares, in eum sermonem illum incidere qui tum forte multis erat in ore. Meministi enim profecto, Attice, et eo magis, quod P. Sulpicio utebare multum, cum is tribunus plebis capitali odio a Q. Pompeio, qui tum erat consul, dissideret, quocum coniunctissime et amantissime vixerat, quanta esset hominum vel admiratio vel querella.
 
</p>
 
   </article>
 
    <aside>IMPRIMER<br>
    Cum saepe multa, tum memini domi in hemicyclio sedentem, ut solebat, cum et ego essem una et pauci admodum familiares, in eum sermonem illum incidere qui tum forte multis erat in ore. Meministi enim profecto, Attice, et eo magis, quod P. Sulpicio utebare multum, cum is tribunus plebis capitali odio a Q. Pompeio, qui tum erat consul, dissideret, quocum coniunctissime et amantissime vixerat, quanta esset hominum vel admiratio vel querella.
     Cum saepe multa, tum memini domi in hemicyclio sedentem, ut solebat, cum et ego essem una et pauci admodum familiares, in eum sermonem illum incidere qui tum forte multis erat in ore. Meministi enim profecto, Attice, et eo magis, quod P. Sulpicio utebare multum, cum is tribunus plebis capitali odio a Q. Pompeio, qui tum erat consul, dissideret, quocum coniunctissime et amantissime vixerat, quanta esset hominum vel admiratio vel querella.
 
    </aside>

et le code css3 :

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
@media screen and (max-width: 769px) {
 
body {
	background-color:#000000;
	width:100%;
}
 
article {
	width:85%;
	width:auto;
}
 
aside {
	width:15%;
	width:auto;
}
 
}

Quelqu'un pourrait voir pourquoi ça ne se redimensionne pas au fur et à mesure que le rétréci la fenêtre?

Merci d'avance !

[oceane751]

J'ai trouvé une soluce

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
 
@media screen and (max-width: 1000px) {
  body {
    width: 100%;
	background-color:#000000;
  }
 
article {
	width:70%;
	width:auto;
	height:auto;
	float:none;
	display:block;
 
}
 
aside {
	width:30%;
	width:auto;
	height:auto;
	float:none;
	display:block;
}
 
}

Est ce bien?

[Muchos]

Tu veux faire quoi exactement ?

PS:

Code html :

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

1
2
3
4
 
    <h2>SURTITRE</h2>	
    <h1>TITRE</h1>
    <h2>SOUSTITRE</h2>

Ça ne se fait pas

Code css :

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

1
2
3
 
	width:30%;
	width:auto;

Ça ne se fait pas

[oceane751]

Ah?

[thelvin]

Bah, 'ya rien qui te choque dans l'idée "bon, d'abord je mets un titre de niveau 2. Puis juste ensuite un titre plus général. Puis encore un titre de niveau deux" ?

Quitte à faire du HTML5 ce serait

Code html :

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

1
2
3
4
5
<hgroup>
  <h1>Surtitre</h1>
  <h2>Titre</h2>
  <h3>Sous-titre</h3>
</hrgoup>

Et sinon, le principe, "alors pour width ce sera ça. Et puis non, tiens, ça à la place," ça t'inquiète pas plus que ça ?

[oceane751]

pas la peine d'être désagréable, j'apprends c'est tout et surtout grâce à mes erreurs

[rodolphebrd]

Bonjour,

N'oubliez pas le viewport.

[oceane751]

Ceci : <meta name="viewport" content="width=device-width"> ?

[thelvin]

Oui enfin, en l’occurrence on a toujours aucune idée de ce qu'il essaie de faire. Mais vu les dimensions proposées je pense qu'on parle d'un desktop pour l'instant.

Et j'avais pas spécialement l'impression d'être désagréable, j'essaie juste de pointer du doigt le genre de logique qu'on est censé avoir.

[oceane751]

J'essaie justement d'apprendre la logique.

[rodolphebrd]

Pour le choix du viewport voici une correction et son éclairage.

Je vous conseille de partir d'un framework comme 320 and up par exemple.

Pour déboguer utilisez des couleurs de police différentes en fonction des supports.

Testez-vous en réel? si oui sur quel support?

Sur Firefox maj ctrl M ou Mac : alt cmd M ---> un outil indispensable dans votre cas.