"Problème" avec l'intégration de mon design
Bonjour,
Je viens de regarder le tutoriel "grille en css"; j'ai crée mon design 960px et 12 colonnes mais je n'arrive à l'intégrer au site.
( http://puu.sh/6WRjv.jpg )
J'aurai besoin de l'aide que quelqu'un qui puisse bien m'expliquer et répondre à mes questions malgré le bon tutoriel. ( je suis encore débutant )
Merci d'avance.
22 réponses
IL y a plein de sites qui se font sans grille, et certains trouvent même le systeme de grilles anti-HTML5/web sémentique.
L'important c'est que tu arrives a donner a ton site le look que tu veux.
Par contre ce n'est vraiment pas compliqué a comprendre, et je suis persuadé qu'avec 5 min de reflexion tu seras a l'aise. Ca vaut sans doute le coup d'essayer.
Si ca peut aider, voici les concepts majeurs associés a unsemantic:
1/ il y a une div qui va contenir l'ensemble des tes grilles, dont la taille max est de 1200px en largeur. Elle est de classe .grid-container.
<div class="grid-container">
// Tes div vont la.
</div>2/ Ensuite, pour chaque div ou élément que tu veux ajouter tu spécifies la largeur, en pourcentage (précis jusqu'a 5% ... donc 10%, 25%, 35% ... mais pas 31% ou 56%). Pour ce faire tu ajoutes simplement une classe grid-50 si tu veux qu'elle fasse 50%.
<div class="grid-container">
<div class="grid-50">
</div>
</div>3/Cette div va être collé sur la gauche, et tu pourrais en mettre une autre de 50%, ou deux autres de 25%, ou 10 autres de 5%, etc ... a coté
<div class="grid-container">
<div class="grid-50">
</div>
<div class="grid-30">
</div>
<div class="grid-20">
</div>
<div class="grid-50"
// Cette div sera en dessous des autres puisque la somme des div précédentes fait 100% ...
</div>
</div>4/ Mais si jamais tu veux décaller ta div vers la droite pour laisser un vide a gauche, alors tu peux ajouter une classe "prefix" qui contient cette info. De meme une classe suffix va laisser un vide a droite avant de placer la div suivante.
<div class="grid-container">
<div class="grid-50 prefix-10 suffix-40">
// Cette div fera 50% de la largeur de l'écran. Il y aura un vide de 10% a gauche, et un vide de 40% a droite.
// si tu continue a mettre un div a la suite, elle sera a la ligne.
</div>
</div>Fais les testes toi-même, tu verras que c'est hyper con.
Après une demi journée de développement j'en suis à ça.
J'aimerai que le planning (qui fait partis du header) soit à gauche, aligné avec les grilles sans toucher à la position de Bestream.
J'aimerai aussi que le logo + texte soit aligné au milieu de la page sans oublié que le footer n'est pas encore placé.
Et je voulais savoir si c'était possible de mettre le Bestream comme sur cette image
J'aurai apprécié une ressemblance avec ça
( description de l'image : l'illustration sera en réalité un fenêtre de live et à droite le chat )
Merci d'avance
Déja sur ton mockup l'image et le tchat ne sont pas alignés sur tes grilles.
Ensuite je pige pas bien pourquoi tu n'utilises pas 960.gs ou le bootstrap pour faire tes placements. Tu pourrai smettre tes div ou tu veux comme tu veux simplement en ajoutant quelques classes, plutot que de ré-inventer la roue ...
A la base je voulais utiliser 960.gs mais je trouve ça super compliqué. Tout s'embrouille dans ma tête quand je code mdr
Je doute que tu arrives a faire plus simple. La preuve: tu rames :p.
Regarde unsemantic, aussi. ca marche en %
- Mets une class grid-90 a une div qui doit faire 90% de la largeur de ton écran, par exemple.
- Ajoute une class prefix-5 et suffix-5 si tu veux 5% e part et d'autre
- Utilise mobile-grid-50% si tu veux réajuster ta div sur 50% en cas de mobile ...
hyper simple.
Par exemple sur ton mockup: l'image de l'hélico aura une class .grid-65, et le tchat une class .grid-35 (2/3 et 1/3 environ).
Si tu veux centrer quelque chose qui fait environ 30% de la largeur de ton design, tu fais une div .prefix-35 .suffix-35 .grid-30
etc ...
Tu me parles en chinois là. Je me désespère à pas comprendre, je pense que je vais laissé ça de côté pour quand j'aurai du temps libre pendant les vacances scolaires.
C'est pas important si je fais sans grille ?
Et j'ai une question, qui n'a aucun rapport mais est-ce qu'il faut connaître le php avant de développer en CakePHP ?
Là le code c'est sans 960.gs ? C'est que du fais maison ?
Et est-ce que tu peux répondre à ma question ? est-ce qu'il faut connaître le php avant de développer en CakePHP ?
En tout cas, merci de ton aide. Je vais dormir, je vois ça demain !
Ce que je te donne c'est avec unsemantic ( http://unsemantic.com/), qui est un équivlent de 960.gs (il est responsive alors que 960 ne l'est pas, il me semble).
Il serait sans doute mieux que tu fasses une petite formation PHP (grafikart, openclassroom, etc ...) avant d'attaquer avec cake. Une fois que tu as les bases en PHP, tu peux t'améliorer en apprenant cake.
Bonne continuation ;)
Donc si j'ai bien compris, je clique sur le bouton download sur unsemantic et après je mets le css dans mon dossier en le linkant dans le html ?
Merci de te réponse concernant le php. Je me "formerai" lors de mes vacances scolaires.
Regarde un peu la doc (perso j'ai jamais utilisé semantic). Tu as plusieurs options apparament, il semble que dans sa config la plus simple le css soit suffisant.
Au pire dans le package a downloader il y a des fichiers html types, dont tu peux te servir pour modifier le tiens.
I don't understand english very well lol.
D'accord je lirai ça demain en validant sûrement ta réponse :)
Et j'aurai aimé savoir comment je peux faire pour mettre mon "logo" comme sur la photo en css ?
Tu veux dire le centrer ? un margin: auto dans ton css devrait faire l'affaire, mais si tu pouvais nous mettre le code html avec le lien vers les images, ce serait plus simple ...
Voici le dossier dropbox
Le site est peu avancé, je ne peux coder que le week-end.
Vallyan est-ce que tu pourra me passer ton mail ? ce sera plus simple pour dialoguer. ;)
Oula, pas hyper académique ton css.
Au final on be sait plus trop ce que tu veux faire entre les images que tu postes et qui sont toutes différentes les unes des autre.
Je propose ceci (tes fichiers sont la), qui se rapproche plus ou moins d'une des images que tu avais donné. Par contre il est bien entendu hors de question que je te fasse ton html ou css chaque fois que tu veux y apporter une modification :p. Ce forum est la pour que tu poses des question <u>précises</u> sur un problème que tu rencontres, pour que les gens te donnes une réponse précise, pour a la fin que tu puisses te débrouiller.
Sers-toi ce que j'ai fait pour apprendre comment placer tes éléments, et obtenir ce que tu souhaites.
Je n'ai bien entendu pas tout refais, j'ai ajusté en fonction de ce qui était la. Si je peux suggérer une ou deux choses:
-
Un gros défaut de ton design est qu'il n'est pas du tout fait pour s'adapter a divers tailles d'écrans.
-
Lorsque tu veux ajouter des règles css a un objet en particulier, n'utilise pas sa class ".grid-xx" puisque tu peux très bien utiliser cette même classe pour un autre objet (auquel cas les regles css s'appliqueront aussi, ce qui n'est pas forcement désirable). ajoute d'autres classes a ton élément, ou donne-lui une id.
-
Il semble qu'avec unsemantic, il mette un float: right a toutes les div, bizarrement ... c'est un truc a savoir ...
C'est super sympa de ta part de m'avoir aidé/corrigé.
Quand tu dis les divers tailles d'écrans tu parles des tablettes et téléphones ? Ou des écrans de Pc ?
Et la notion de float est très flou pour moi, mdr, ça veut dire en clair ?
Je regarderai tout ça en détails le week end prochain. (la semaine je suis en famille d'accueil)
Oui, quand tu rétrécie ton navigateur tu vois ce qui se passe ... c'est un peu la zone.
le float, c'est simplement pour pousser ton élément d'un coté ou de l'autre.
float: right; veut dire que ta div (si c'est une div) sera droite. Du coup la suivante sera un peu plus a gauche, ce qui est contre-intuitif auqnd tu écris ton code.
Je pense qu'il te manque pas mal de concepts clé du css, peut-etre un peu trop encore pour te lancer directement dans un projet qui te tient a cœur sans risquer d'etre un peu dégouter que ca ne fonctionne pas exactement comme tu veux. Tu devrais sans doute faire une ou deux formation / tuto pour te mettre a jour. C'est pas bien compliqué et ca vaut très certainement l'investissement d etemps ...
Bonne continuation en tous cas ;) ...