Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
294 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  aide pour intégration d'une maquette psd avec bootstrap

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

aide pour intégration d'une maquette psd avec bootstrap

n°2309776
ptimimi05
Id PSN : Noobarus
Posté le 12-01-2018 à 08:24:21  profilanswer
 

Hello,
 
je suis actuellement un parcours sur openclassroom pour devenir dvp web junior, après avoir compris les bases de HTML/CSS et Bootstrap on me demande d'intégré une maquette .psd https://dribbble.com/shots/3367102- [...] D-Template
et je galère un peu car c'est une sacré étape et en particulier sur un élément : le bandeau en background, et le logo et la citation par dessus mais pas aligné a gauche, on m'a conseiller de mettre le bandeau en background sous CSS mais le soucis c'est que je n'ai sais pas ou placer ma div pour qu'il soit libre d'etre déplacé a droite sans bouger l'ensemble logo+citation
 
https://image.noelshack.com/fichiers/2018/02/5/1515741508-maquette.png
 
voila ou j'en suis:
https://image.noelshack.com/fichiers/2018/02/5/1515742074-alignement-header.png
 
et mon code:

Code :
  1. <!--container centrer sur la page de 12col-->
  2.             <header  class="container">
  3.                 <!-- contient le logo a gauche a 1col du bord du conteneur et une citation de 4 col-->
  4.                 <div class="row">
  5.                     <div id="logo" class="col-md-offset-1 col-md-2">
  6.                     <img src="images/logo.png" alt="logo" />
  7.                     </div>
  8.                    
  9.                     <div id="citation" class="col-md-4" >
  10.                         <h1>Our work is not about form follows function but <div id="underline"> form follows beauty</div></h1>
  11.                     </div>
  12.                 </div>
  13.                
  14.                 </header>


               
Si vous avez une idée je suis preneur :)


Message édité par ptimimi05 le 12-01-2018 à 10:24:46

---------------
WorkBlog :http://forum.hardware.fr/hfr/Overc [...] 7507_1.htm
mood
Publicité
Posté le 12-01-2018 à 08:24:21  profilanswer
 

n°2309819
gelatine_v​elue
Posté le 12-01-2018 à 14:46:30  profilanswer
 

1. Mets ton bandeau dans une div a part que tu positionneras a la troisieme colonne grace aux classes css de bootstrap.

 

2. Essaie de reproduire ton pb sur jsfiddle et de nous donner l'url ensuite, ca permet pour nous de voir le probleme et de te montrer la correction.

Message cité 1 fois
Message édité par gelatine_velue le 12-01-2018 à 14:47:31

---------------
RIP Firefox OS :'(
n°2309823
ptimimi05
Id PSN : Noobarus
Posté le 12-01-2018 à 14:55:32  profilanswer
 

gelatine_velue a écrit :

1. Mets ton bandeau dans une div a part que tu positionneras a la troisieme colonne grace aux classes css de bootstrap.
 


J'avais testé mais je n'arrivai pas a avoir 2 colonnes l'une dans l'autre ça me mettait mon bandeau en haut et le reste à la ligne :s  
 
La j'ai réussi en mettant le bandeau en Background sous CSS et en lui définissant des paramètre avec background-size et background-position et comme ça j'ai pu mettre une div qui s'affiche par dessus mais c'est pas super responsive car quand je réduit la fenêtre le bandeau se positionne mal et son aspect change
https://image.noelshack.com/minis/2018/02/5/1515781258-reussite-header.png
 


Message édité par ptimimi05 le 12-01-2018 à 19:37:19

---------------
WorkBlog :http://forum.hardware.fr/hfr/Overc [...] 7507_1.htm
n°2309839
ptimimi05
Id PSN : Noobarus
Posté le 12-01-2018 à 19:37:23  profilanswer
 

Ce que je pense qui pourrait fonctionner c'est le schema suivant vous en pensez quoi ?
Mon soucis c'est que je n'arrive pas a mettre mes  div les une sur les autres en 1er plan et 2eme plan, elles se mettent à la suite, est ce que je doit utiliser des z-index ? si oui comment ?
https://image.noelshack.com/fichiers/2018/02/5/1515781888-schema-maquette-psd.png

Message cité 1 fois
Message édité par ptimimi05 le 12-01-2018 à 19:37:59

---------------
WorkBlog :http://forum.hardware.fr/hfr/Overc [...] 7507_1.htm
n°2309851
gelatine_v​elue
Posté le 12-01-2018 à 21:40:30  profilanswer
 

ptimimi05 a écrit :

Ce que je pense qui pourrait fonctionner c'est le schema suivant vous en pensez quoi ?
Mon soucis c'est que je n'arrive pas a mettre mes  div les une sur les autres en 1er plan et 2eme plan, elles se mettent à la suite, est ce que je doit utiliser des z-index ? si oui comment ?
https://image.noelshack.com/fichier [...] te-psd.png


 
 Tu peux utiliser une div englobante en position:relative et caler les divs a l'interieur en utilisant position: absolute par ex.
Maintenant sur la maquette psd on voit bien que tt est cale sur les colonnes bootstrap, donc je pense qu'il vaut mieux utiliser le css bottstrap.
J'insiste, fais un jsfiddle, la comme ca a expliquer c'est tres chiant sinon.
 
Edit: t'as gagne, je l'ai fait pour toi: https://codepen.io/anon/pen/wpXdrN

Message cité 1 fois
Message édité par gelatine_velue le 12-01-2018 à 21:57:43

---------------
RIP Firefox OS :'(
n°2309860
ptimimi05
Id PSN : Noobarus
Posté le 13-01-2018 à 09:57:57  profilanswer
 

gelatine_velue a écrit :


 
 Tu peux utiliser une div englobante en position:relative et caler les divs a l'interieur en utilisant position: absolute par ex.
Maintenant sur la maquette psd on voit bien que tt est cale sur les colonnes bootstrap, donc je pense qu'il vaut mieux utiliser le css bottstrap.
J'insiste, fais un jsfiddle, la comme ca a expliquer c'est tres chiant sinon.
 
Edit: t'as gagne, je l'ai fait pour toi: https://codepen.io/anon/pen/wpXdrN


je te remercie, je vais analyser et comprendre le code
je vais me mettre a jsfiddle, désolé si je ne l'ai pas fait directement mais ayant débuté il y a peu j’essaie de pas trop m'éparpiller sur les outils mais je vais le prendre en main :)


---------------
WorkBlog :http://forum.hardware.fr/hfr/Overc [...] 7507_1.htm
n°2309864
gelatine_v​elue
Posté le 13-01-2018 à 10:33:42  profilanswer
 

ptimimi05 a écrit :


je te remercie, je vais analyser et comprendre le code
je vais me mettre a jsfiddle, désolé si je ne l'ai pas fait directement mais ayant débuté il y a peu j’essaie de pas trop m'éparpiller sur les outils mais je vais le prendre en main :)


 
C'est simplement que jsfiddle ou codepen ca permet de montrer un probleme aux autres en mettant juste le code qui pose probleme, pour eviter aux intervenants de lire tout le code du projet.


---------------
RIP Firefox OS :'(
n°2309865
ptimimi05
Id PSN : Noobarus
Posté le 13-01-2018 à 11:13:42  profilanswer
 

oui j'ai vu ça c'est assez puissant comme outil ;) la je bosse sur ton code je l'ai un peu simplifié et adapter a ma page.
 
Par contre concernant l'intégration est ce que je doit considéré les 12 colonnes de photoshop comme étant ma page web dans toutes sa largeur ou alors comme le centre de la page avec les marges de chaque cotés dans lesquels dépasse le bandeau ?


---------------
WorkBlog :http://forum.hardware.fr/hfr/Overc [...] 7507_1.htm
n°2309871
gelatine_v​elue
Posté le 13-01-2018 à 16:01:55  profilanswer
 

C'est une bonne question. Je pense qu'elles representent les 12 colonnes de bootstrap en mode non fluid, mais je suis pas sur.


---------------
RIP Firefox OS :'(
n°2309888
pjulienne
Posté le 13-01-2018 à 20:50:17  profilanswer
 

Bonjour  
je n'ai jamais travailler avec Bootstrap, mais est ce que c'est une bibliothèque  de HTML/CSS et JS ?


---------------
Comment regarder la TV sans le câble ?  https://how-to.watch/fr/tv-sans-cable/
mood
Publicité
Posté le 13-01-2018 à 20:50:17  profilanswer
 

n°2309901
gelatine_v​elue
Posté le 14-01-2018 à 01:16:55  profilanswer
 

pjulienne a écrit :

Bonjour  
je n'ai jamais travailler avec Bootstrap, mais est ce que c'est une bibliothèque  de HTML/CSS et JS ?


 
C'est un ensemble de classes css facilitant la mise en page responsive + une collection de widgets pour faciliter la presentation (cards, carousel, etc.). Ces derniers widgets necessitent quelquefois un peu de js pour fonctionner, mais bootstrap n'offre pas de librairie js generaliste comme jquery, ou de framework comme angular.


---------------
RIP Firefox OS :'(
n°2309908
ptimimi05
Id PSN : Noobarus
Posté le 14-01-2018 à 11:06:04  profilanswer
 

gelatine_velue a écrit :

C'est une bonne question. Je pense qu'elles representent les 12 colonnes de bootstrap en mode non fluid, mais je suis pas sur.


c'est ce que je pense aussi, en tout cas je vais faire le choix d'intégrer la maquette comme ça.
Merci pour ton aide en tout cas je vais poursuivre mon intégration et je reviendrais si je rencontre d'autre soucis (ce dont je ne doute pas ^^)


---------------
WorkBlog :http://forum.hardware.fr/hfr/Overc [...] 7507_1.htm
n°2309923
potemkin
Optimisateur relativiste.
Posté le 14-01-2018 à 22:38:05  profilanswer
 

ptimimi05 a écrit :


je te remercie, je vais analyser et comprendre le code
je vais me mettre a jsfiddle, désolé si je ne l'ai pas fait directement mais ayant débuté il y a peu j’essaie de pas trop m'éparpiller sur les outils mais je vais le prendre en main :)


Tu peux aussi remplacer les fake div col-sm-x par un col-sm-offset-x dans la div enfant, ça allègera un peu :jap:

 

Autre option un poil allégée, mais ça n'utilise pas Bootstrap pour le décalage (après avis perso, du Bootstrap pour du Bootstrap ça peut vite devenir emmerdant dans certains cas :o):

https://jsfiddle.net/m1gh4ech/13/

 

edit: retropédalage :whistle: en revoyant la maquette en effet c'est prévu strictement pour de l'offset Boostrapien :/

Message cité 2 fois
Message édité par potemkin le 14-01-2018 à 23:54:36
n°2309925
gelatine_v​elue
Posté le 14-01-2018 à 23:36:19  profilanswer
 

potemkin a écrit :


Tu peux aussi remplacer les fake div col-sm-x par un col-sm-offset-x dans la div enfant, ça allègera un peu :jap:
 
Autre option un poil allégée, mais ça n'utilise pas Bootstrap pour le décalage (après avis perso, du Bootstrap pour du Bootstrap ça peut vite devenir emmerdant dans certains cas :o):

https://jsfiddle.net/m1gh4ech/8/
 
edit: retropédalage :whistle: en revoyant la maquette en effet c'est prévu strictement pour de l'offset Boostrapien :/


 
C'est mieux en effet, merci.


---------------
RIP Firefox OS :'(
n°2309928
potemkin
Optimisateur relativiste.
Posté le 14-01-2018 à 23:53:08  profilanswer
 

:jap: edition de l'url, j'avais pas enregistré les dernières modifs

n°2309932
ptimimi05
Id PSN : Noobarus
Posté le 15-01-2018 à 08:46:52  profilanswer
 

potemkin a écrit :


Tu peux aussi remplacer les fake div col-sm-x par un col-sm-offset-x dans la div enfant, ça allègera un peu :jap:
 
Autre option un poil allégée, mais ça n'utilise pas Bootstrap pour le décalage (après avis perso, du Bootstrap pour du Bootstrap ça peut vite devenir emmerdant dans certains cas :o):

https://jsfiddle.net/m1gh4ech/13/
 
edit: retropédalage :whistle: en revoyant la maquette en effet c'est prévu strictement pour de l'offset Boostrapien :/


 
salut, c'est ce que j'ai fait j'ai remplacer toutes les div vide par des offset sa allège beaucoup le code, en effet le tien est encore plus épuré :)
voila ma version pour le moment :
https://jsfiddle.net/m1gh4ech/15/
 
Sinon la j'utilise Bootstrap car c'est l'objet du TP :)


Message édité par ptimimi05 le 15-01-2018 à 08:58:42

---------------
WorkBlog :http://forum.hardware.fr/hfr/Overc [...] 7507_1.htm
n°2309945
ptimimi05
Id PSN : Noobarus
Posté le 15-01-2018 à 16:45:37  profilanswer
 

potemkin a écrit :

:jap: edition de l'url, j'avais pas enregistré les dernières modifs


j'ai essayé d'adapter ton code avec ma maquette mais je pense que l'utilisation du container-fluid n'est pas adapté car en plein écran le background se répétait ou alors si je lui fixais une dimension avec width il se décalait trop a droite. Du coup sa me conforte dans le choix d'intégrer la maquette en prenant en compte seulement les 12 colonnes centrale et sans tenir compte des débordement sur les cotés


Message édité par ptimimi05 le 15-01-2018 à 18:15:47

---------------
WorkBlog :http://forum.hardware.fr/hfr/Overc [...] 7507_1.htm
n°2309950
potemkin
Optimisateur relativiste.
Posté le 15-01-2018 à 21:00:49  profilanswer
 

Oula pas de div pour l'underline! :D Utilises directement le tag <u> (quitte à laisser seulement la règle pour la coloration).
 
2/3 bidouilles encore:
https://jsfiddle.net/m1gh4ech/18/
 
le container-fluid est adapté pour occuper 100% de la largeur, dans ce cas précis l'image se répète si trop petite pour occuper 100% de l'écran, mais normalement t'es censé prévoir un bandeau assez large (mini 1920px). Autrement tu ajoutes "no-repeat" après le fixed que j'ai ajouté, tu verras :D
 
Ça semble pas trop mal mais un truc me chagrine dans l'idée d'imbriquer 2 div censées se superposer gérées par bootstrap :/
 
Là où un margin-left negatif sur la div intérieure comportait moins de risques.  
Ici si tu réduis la largeur de l'écran, t'as les 3 div qui wrappent et s'empilent, c'est dégueu.
 
J'ai ajouté la gestion du body, et la remplacé ton top:100px par 25%, j'éviterais au max les dimensions absolues sur des propriétés de positionnement, sur un resize vertical ton bloc logocitation se berrerait loin en bas :D
 

n°2309970
gelatine_v​elue
Posté le 16-01-2018 à 11:19:50  profilanswer
 

potemkin a écrit :

Oula pas de div pour l'underline! :D Utilises directement le tag <u> (quitte à laisser seulement la règle pour la coloration).
 
2/3 bidouilles encore:
https://jsfiddle.net/m1gh4ech/18/
 
le container-fluid est adapté pour occuper 100% de la largeur, dans ce cas précis l'image se répète si trop petite pour occuper 100% de l'écran, mais normalement t'es censé prévoir un bandeau assez large (mini 1920px). Autrement tu ajoutes "no-repeat" après le fixed que j'ai ajouté, tu verras :D
 
Ça semble pas trop mal mais un truc me chagrine dans l'idée d'imbriquer 2 div censées se superposer gérées par bootstrap :/
 
Là où un margin-left negatif sur la div intérieure comportait moins de risques.  
Ici si tu réduis la largeur de l'écran, t'as les 3 div qui wrappent et s'empilent, c'est dégueu.
 
J'ai ajouté la gestion du body, et la remplacé ton top:100px par 25%, j'éviterais au max les dimensions absolues sur des propriétés de positionnement, sur un resize vertical ton bloc logocitation se berrerait loin en bas :D
 


 
 
Je ne peux qu'appuyer tout ce que tu dis, c'est en effet mieux. Je m'étais arrété à du quick qnd dirty.  
Juste un truc : nn offset négatif a en effet moins d'effets de bord, mais il ne permet pas de se caler sur les colonnes de bootstrap comme c'était le cas sur la maquette, et j'aime pas l'idée de coder une valeur en dur qui coïncide.


---------------
RIP Firefox OS :'(
n°2309981
ptimimi05
Id PSN : Noobarus
Posté le 16-01-2018 à 12:49:49  profilanswer
 

potemkin a écrit :

Oula pas de div pour l'underline! :D Utilises directement le tag <u> (quitte à laisser seulement la règle pour la coloration).


En effet c'est plus simple et moins chargé
 
 

potemkin a écrit :


le container-fluid est adapté pour occuper 100% de la largeur, dans ce cas précis l'image se répète si trop petite pour occuper 100% de l'écran, mais normalement t'es censé prévoir un bandeau assez large (mini 1920px). Autrement tu ajoutes "no-repeat" après le fixed que j'ai ajouté, tu verras :D


Alors mon soucis c'est que le bandeau que j'ai extrait de la maquette fait 1345px du coup soit il se répète et il prend la dimension de la div ou alors no-repeat mais du coup le positionnement sur la page n'est pas bon :s
clairement je pense que la maquette n'a pas été faite pour être intégré dans des container-fluid.  
 

potemkin a écrit :


Ça semble pas trop mal mais un truc me chagrine dans l'idée d'imbriquer 2 div censées se superposer gérées par bootstrap :/
 
Là où un margin-left negatif sur la div intérieure comportait moins de risques.  
Ici si tu réduis la largeur de l'écran, t'as les 3 div qui wrappent et s'empilent, c'est dégueu.


En effet c'est pas super propre sinon il y a la solution de masqué certain élément sur très petit écran ce qui ne me semble pas aberrant d'autant que je débute.
 
 
 
 


---------------
WorkBlog :http://forum.hardware.fr/hfr/Overc [...] 7507_1.htm
n°2310142
ptimimi05
Id PSN : Noobarus
Posté le 19-01-2018 à 17:22:01  profilanswer
 

Il y a encore du boulot niveau du design responsivit et quelques détails manquant mais j'ai pas mal avancer je l'ai mis en ligne pour tester en condition réel :)
http://julemane.alwaysdata.net/


Message édité par ptimimi05 le 19-01-2018 à 17:26:55

---------------
WorkBlog :http://forum.hardware.fr/hfr/Overc [...] 7507_1.htm
n°2310159
potemkin
Optimisateur relativiste.
Posté le 19-01-2018 à 21:27:41  profilanswer
 

Pas si mal, on trouve bien bien pire côté responsive :D

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  aide pour intégration d'une maquette psd avec bootstrap

 

Sujets relatifs
[Unity3D] Besoin d'aide en UI sur Unity 3D[Résolu] HTML aide pour bout de code
A l'aide !!!Re cherche aide HTML pour corriger un fichier
Besoin d'aide en VBA Excel Concatener + déplacement de donnée[Résolu] Aide URL Rewriting
Demande d'aide pour projet persoPetite aide sur du code HTML
Besoin d'une petite aide pour un novice.AtmelStudio Aide Informatique Embarquée
Plus de sujets relatifs à : aide pour intégration d'une maquette psd avec bootstrap


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR