18041 sujets

Questions générales et questions de débutants

Grid 960 - partie intégration

Salut tout le monde,

Je découvre actuellement ce principe de Grid System, et j'ai trouvé cette article sur le site:
http://www.alsacreations.com/article/lire/1196-grilles-framework-css-webdesign.html
Mais, il traite plutôt la partie design.
Puisque je travaille dans le côté intégration, si je reçois d'un designer une maquette faite avec grid960, et que je dois travailler avec ce système dans mon css, est ce que vous savez des ressources ou tutoriels intéressants dans ce côté? (je tombe toujours sur les sujets qui traite la partie design de grid plutôt que la partie intégration)

Merci d'avance pour votre aide.
Modifié par Youn (24 Sep 2011 - 00:08)
Pour ce qui est de l’intégration css de la grille, 960grid system te propose un générateur css de tes colonnes.
Je ne vois pas trop ce que tu cherches de plus, tout est là, c'est justement la partie "design" qui se complique par la suite. Parce que choisir le nombre de colonnes et les intégrer, çà va, mais le reste est moins évident.
Merci pour ta réponse.
J'ai trouvé ce css generator : http://grids.heroku.com/
Il me propose de remplir les valeurs suivantes:
- Column width
- Number of columns
- Gutter width

Comment je peux les connaître?

Merci d'avance.
En faisant un zoning.

En utilisant, photoshop pour maquetter ton site, tu peux avoir accès aux informations (menu i) concernant ces dimensions.


A lire aussi
Modifié par jmlapam (26 Sep 2011 - 02:18)
Merci pour ta réponse jmlapam.
Au final, je me suis contenté de copier le grid avec 16 colonnes, et je travaille avec.

Je me suis servi de ce tutoriel vidéo pour comprendre un peu plus le fonctionnement des grid960: http://www.grafikart.fr/tutoriels/html-css/grid-css-170

Par contre, je rencontre actuellement ce problème dans l'image:
upload/40436-ma001.png

J'aime savoir comment faire pour décaler "Accueil" pour qu'il commence avec la 1ère colonne, et faire avancer le "bouton like FB" comme dans la maquette.

J'utilise Grid960 avec 16 colonnes. J'ai donné grid_14 pur la liste et grid_2 pour le bouton.

Code HTML: 

<div id="min-nav" class="container_16">
    <div class="grid_14">
	<ul>
	    <li class="noborder"><a href="#" title="">Accueil</a></li>
	    <li><a href="#" title="">Plan de site</a></li>
	    <li><a href="#" title="">Recrutement</a></li>
	</ul>	
    </div>
    <div class="grid_2">
	<span class="like-fb">
	    <img src="img/like.png" alt=""/>
	</span>			
    </div>			
    <div class="clr"></div>	
</div>


Merci d'avance.
Sujet clos
Aller à