Je parlais des media-queries. C'était bien ça le sujet de base ?
Il va de soit que ton Html doit lui aussi être parfaitement correct (rhô le gros pléonasme).
Qu'on ne mélange pas tout. Tu viens avec une question de Css, le Css se construit en aval du Html donc cela présuppose que ton Html est sur pied, tu l'a vérifié et est syntaxiquement correct autrement le Css, malgré ses super-pouvoirs, ne pourra rien pour toi l'ami.
Tu viens me parler de "div imbriquées"... Si elles sont bien formées, elles ne provoqueront aucune erreur. Seulement veille à ce qu'elles soient bien
toutes fermées.
Ceci est valable pour toute balise.
Attention toutefois<div>
<div>
</div>
</div>
<!-- est CORRECT -->
<div>
<div>
</div>
<div>
</div>
<!-- est INCORRECT : une div n'est pas fermée -->
<div>
<div>
</div>
</div>
<!-- est CORRECT : mais l'indentation est mal faite -->
<div>
<div>
</div>
</span>
<!-- est INCORRECT : une balise span fermante ne peut s'accoupler avec une div ouvrante -->
<div>
<div>
<div>
<div>
</div>
</div>
</div>
</div>
<!-- est CORRECT -->
<!-- => des exemples avec uniquement des Div mais ceci est valable pour toutes les autres balises : une balise ouvrante appelle une balise fermante de même type et de même niveau (j'en ouvre X, j'en ferme X et pas y. -->
Pour tes media-queries, tu devras avoir quelques chose qui ressemble à ceci (PS: les valeurs ne servent qu'à servir l'exemple, ce qui est important est la mécanique) :
- taille d'affichage < 320px (a)
- taille comprise entre 320 et 720px (b)
- taille comprise entre 720 et 1024px (c)
- taille comprise entre 1024 et 1550px (d)
- taille > 1550px (e)
Ca c'est ton schem de base. Ensuite bien sûr tu peux ajouter des media-querie qui vont chevaucher tes précédentes déclaration. Ceci est faisable si tant est que tu ne touche pas aux mêmes propriétés que précédemment.
Donc tu pourrais très bien ajouter un :
- taille comprise entre 400 et 800px Si tu ne vise pas les mêmes propriétés que (b) et (c).
Tu vois le principe ?
Bon aller je suis d'humeur je le transcris en css
@media all and (max-width: 320px) {
body { /* instructions */ }
}
@media all and (min-width: 321px) and (max-width: 720px) {
body { /* instructions */ }
}
@media all and (min-width: 721px) and (max-width: 1024px) {
body { /* instructions */ }
}
@media all and (min-width: 1025px) and (max-width: 1550px) {
body { /* instructions */ }
}
@media all and (min-width: 1551px) {
body { /* instructions */ }
}
/* Imaginons qu'à ce stade tu ai arrangé ton design général */
@media all and (min-width: 400px) and (max-width: 800px) {
.fioritures { /* instructions */}
}
<!-- rien ne t'empeche d'ajouter d'autre délimiteurs tant que tes instructions ne concernent pas ton design général -->
Modifié par Greg_Lumiere (29 Apr 2016 - 14:53)
).