1485 sujets

Web Mobile et responsive web design

Premier pas en responsive

Bonjour,

Je débute complètement en responsive design, sur des bases CSS encore hésitantes.

Bref, je suis en train de me contruire une grille responsive. Je sais qu'il existe plein de grilles "toute faites" sur le web, mais je souhaite construire la mienne au départ d'une page blanche : il me semble que c'est le meilleur moyen de comprendre pas à pas comment ça marche, et donc d'apprendre de manière pérenne.

Je suis encore peu avancée dans le travail mais je me heurte déjà à une difficulté. Après avoir passé la journée dessus à tourner en rond, je me décide à vous demander du renfort.

Dans Dreamweaver, mes colonnes refusent catégoriquement de se placer l'une à côté de l'autre malgré un "display: inline-block".

upload/25032-Screenshot.png

Dans un navigateur, c'est encore pire ! Elles ne prennent même pas le look défini dans les styles.
Vous pouvez voir ça ici : http://mydisk.com/crazyb13/webpage/grille-responsive/__Grille-fluide.html

Si quelqu'un avait la gentillesse de jeter un oeil sur ma CSS...
D'avance un grand merci.
Modifié par crazyweb (19 May 2013 - 20:00)
bonsoir,

sauf erreur tes classes "1col", ..."ncol" n'ont pas de style dans le css qui est fourni, il est donc normal que çà s'affiche comme du pur texte.

Même si tu veux faire ta propre grille, inspires-toi des boites à outils css existantes, voici un bon exemple

tu verra qu'il faut ... entre autres .. définir une largeur pour les classes que tu appelles col, et leur appliquer une rêgle "float:left", pour le reste je te laisse chercher.
Bonsoir,

Grand merci pour ta réponse. Je réponds à tes réflexions dans l'ordre.

Pour les classes purement graphiques des "ncol" (hors définition des width, donc), elles sont déclarées dans une autre feuille de style (styles-visuels-grid.css). J'ai procédé comme cela parce que le look graphique est juste destiné, pour le moment, à visualiser mes colonnes tant que j"y travaille; ça me permet de garder la css de la grille la plus pure possible pour utilisation futures.

Il leur manque peut-être juste un signe de ponctuation ou qqch de ce genre pour fonctionner. Mais je ne m'explique pas, alors, pourquoi ces styles visuels apparaissent dans Dreamweaver et pas dans les navigateurs.

Peux-tu y jeter à nouveau un coup d'oeil ?

Le float left... bien vu, merci ! Il a disparu dans mes multiples manipulations et je ne m'en était pas rendu compte. C'est maintenant OK dans... Dreamweaver : les colonnes se mettent côte à côte.

Merci pour le lien. J'ai lu des tonnes de sites et de livres sur le RWD et j'ai téléchargé pas mal d'exemples de grilles sur le web, et je pense en avoir compris les principes. Mais passer de la théorie à la pratique... dur, dur ! Smiley smile
premièrement les noms de classes ne peuvent pas commencer par un chiffre, il faut que tu transforme tes classes 1col en col1 par exemple, ensuite il faut que tu affectes une largeur à ta grille, un type block et un float:left.


.col1, .col2 {
    background: none repeat scroll 0 0 #801255;
    color: #FFFFFF;
    padding: 20px 0;
    text-align: center;
    width: 50px;
    float: left;
    display: block;
}
Bonsoir Zebrou,
Un grand merci pour ton suivi ! Smiley biggrin
Zebrou a écrit :
premièrement les noms de classes ne peuvent pas commencer par un chiffre

Et bien ça j'ignorais complètement ! Smiley eek A mon avis, l'erreur vient de là. Pour le reste (largeur, float) c'est OK. J'essaie des "renommages" de suite !
Je confirme : en renommant 1col en col1, etc. ça fonctionne ! Encore un grand merci à toi.
Je peux m'ateler à la phase suivante : régler les cafouillages de fluidité qui merdouille grave !

C'est vraiment étonnant qu'après tant de lectures de livre et d'articles web, je n'ai jamais croisé (autant que je me souvienne) cette info qu'un nom de classe ne peut pas commencer par un chiffre. J'ai le livre de Raphaël (CSS2 - 3e éd) sous les yeux et il ne me semble pas que l'info y soit reprise non plus. Si tel est le cas, voilà peut-être une petite suggestion pour la prochaine édition ? Smiley cligne

Raphaël, si tu m'entends...
Soyons honnête, je ne le savais pas non plus avant hier, c'est un sujet à creuser un peu car à priori c'est CSS1 qui ne reconnait pas les noms de classes commençant par un chiffre, faudrait relire les normes CSS2 et 2.1

mais de par expérience, dans tout langage il y a des caractères interdits dans les noms de variables, fonctions
c'est en ne voyant pas tes déclarations 1col ... dans mon débugger que j'ai pensé à çà, çà voulait dire que mon navigateur n'interprétait pas ces lignes.

Comme quoi on apprend un tas de choses sur les forums, même en essayant d'aider les autres, et des choses qu'on apprend pas dans les livres ( tu as tout de même fait le bon choix, les ouvrages de Raphael sont les plus complets et didactiques que j'ai touvé).
Modifié par Zebrou (21 May 2013 - 08:10)
Et bien si ma "bête" question t'a permis aussi d'apprendre quelque chose, tant mieux. Vive les échanges win-win !

D'acc' avec toi concernant les ouvrages de Raphaël. Ce sont des références à toujours avoir à portée de main. Disons que Raphaël est aux CSS ce que Larousse est à la langue française (et tant pis pour sa modestie s'il me lit, il n'avait pas besoin de venir fouiner par ici Smiley biggrin )

Pour qui débute en responsive design comme moi, j'ai une affection toute particulière pour le livre d'Etan Marcotte, dans la collection "A book apart" : simple, progressif, très didactique et bourré d'humour (nostalgiques d'IE6 s'abstenir, mais il ne doit pas y en avoir beaucoup par ici). Je l'ai lu quasi comme un roman.
Modifié par crazyweb (21 May 2013 - 21:48)
Zebrou a écrit :
Soyons honnête, je ne le savais pas non plus avant hier, c'est un sujet à creuser un peu car à priori c'est CSS1 qui ne reconnait pas les noms de classes commençant par un chiffre, faudrait relire les normes CSS2 et 2.1

En HTML 4, il n'est pas interdit de commencer le nom d'une classe par un chiffre, contrairement à la valeur d'un attribut id. Du coup, pas de répercussion sur le sélecteur de classe.
non la norme HTML ne l'interdit pas mais la norme CSS si, donc tu peux avoir un nom de classe qui commence par un chiffre mais pas pour l'utiliser comme référence dans une feuille de style, en essayant de valider le site de CRAZYWEB par le service de validation CSS du W3C on obtient les erreurs suivantes (n fois):

En CSS1, il était possible d'avoir un nom de classe commençant par un chiffre (".55xx") sauf s'il s'agissait d'une dimension (".55cm"). En CSS2, de tels noms sont analysés comme étant des dimensions inconnues, pour permettre l'ajout de nouvelles unités). Pour que "1col" soit un nom de classe CSS2 valide, le premier chiffre doit être échappé ".\31 col" [1col]
Modifié par Zebrou (22 May 2013 - 21:00)
Sujet clos
Aller à