28172 sujets

CSS et mise en forme, CSS3

J'ai découvert il y a peu ce système de construction (http://960.gs/) de structure de page sous forme de grille. Le concept:
Deux grilles de base 12 et 16 colonnes de 960px de large. Pour juxtaposer trois blocs dans un système 12 colonnes, rien de plus simple:
...

<div class="container_12>
<div id="bloc1" class="grid_4">...</div>
<div id="bloc2" class="grid_4">...</div>
<div id="bloc3" class="grid_4">...</div>
</div>

... le css fourni 960.css fait le reste.
Je bloque cependant sur des classes supplémentaires .prefix_#, .suffix_#, .push_#, .pull_#...

Merci de votre aide.
Modifié par betrained (20 Oct 2009 - 09:08)
Bonjour aussi...

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Concernant ton problème, il va être difficile voir impossible de t'aider avec si peu d'informations.
Tu bloques, ok... mais sur quoi, comment, as tu une page en ligne, ou au moins l'intégralité du code, ou des schémas, enfin quelque chose qui aidera à prendre la mesure de ton problème pour pouvoir y répondre. Smiley cligne
Bonjour,

Sur la page de démo tu peux voir la plupart des classes que tu mentionnes utilisées. À coup de Firebug (ou directement en regardant la source) tu peux voir ce que fait chaque classe.

Donc à ce que j'ai vu:
- les classes prefix_N rajoutent un padding-left de largeur N unités de grille;
- les classes suffix_N rajoutent un padding-right de largeur N unités de grille;
- les classes push_N déplacent le bloc vers la droite de N unités de grille (via du positionnement relatif);
- les classes pull_N déplacent le bloc vers la gauche de N unités de grille (via du positionnement relatif).

Voilà.
Mikachu a écrit :
Bonjour aussi...

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif


Quel accueil pour mon 1er poste sur ce forum !...
Mikachu a écrit :
Concernant ton problème, il va être difficile voir impossible de t'aider avec si peu d'informations.
Tu bloques, ok... mais sur quoi, comment, as tu une page en ligne, ou au moins l'intégralité du code, ou des schémas, enfin quelque chose qui aidera à prendre la mesure de ton problème pour pouvoir y répondre. Smiley cligne


Je pensais avoir été explicite quant à la nature de ma demande:
Je recherche un utilisateur averti de 960 Grid System, qui, connaissant cet outil, pourrait m'aiguiller sur ces préfixes et suffixes de classe sus-nommés (.prefix_#, .suffix_#, .push_#, .pull_#)
Florent V. a écrit :
Bonjour,

Sur la page de démo tu peux voir la plupart des classes que tu mentionnes utilisées. À coup de Firebug (ou directement en regardant la source) tu peux voir ce que fait chaque classe.

Donc à ce que j'ai vu:
- les classes prefix_N rajoutent un padding-left de largeur N unités de grille;
- les classes suffix_N rajoutent un padding-right de largeur N unités de grille;
- les classes push_N déplacent le bloc vers la droite de N unités de grille (via du positionnement relatif);
- les classes pull_N déplacent le bloc vers la gauche de N unités de grille (via du positionnement relatif).

Voilà.


Merci Florent V. pour cette aide précieuse. J'avais bien repéré le .push_4 sur la balise H1, mais sans réellement comprendre à quoi cela pouvait servir.

Merci encore!
Modifié par betrained (19 Oct 2009 - 21:59)