28172 sujets

CSS et mise en forme, CSS3

Quelques questions sur un site en bootstrap

Salut à tous ...

Je viens vers vous car je refais le site d'un ami et j'ai décidé de me lancer dans l'utilisation de Bootstrap pour son côté responsive. Je sais et j'ai lu qu'il existait d'autres framworks plus puissantes et plus concises et légères. Je compte supprimer les class qui ne me serviront à rien une fois finies.

Bref, voici l'adresse du site : http://concept-tech.lu/heberg/v2/index.html

J'ai plusieurs questions dont je ne trouve pas réponse :

- Est-ce que mon système pour faire une navigation "mono-page" est bonne ? Des ancres et des margin-bottom aux sections contenu ?? Ca marche mais est-ce que c'est optimal ?

- J'aimerais que les deux panneaux "contactez-nous et infos" restent figés pendant la navigation. J'ai donc fait ceci : <div class="col_contenu_infos col-lg-offset-5 col-lg-4 affix"> Ca me donne exactement ce que je veux mais par contre, niveau responsive, ça déconne grave. Ca passe sur la colonne de contenu et disparait totalement lorsqu'on réduit la taille de l'écran ... Je me plante donc dans la méthode mais où ? Une idée ? Une aide ?

- Sans la méthode pour figer le panneau, lorsque je passe en taille xs, la fin du formulaire est sous le menu. La seule solution que j'ai trouvé est d'englober le formulaire dans un div et d'y appliquer un margin-bottom:300px; pour que le scroll permette d'afficher tout le div. Une autre solution plus "logique" ?

J'aurai certainement d'autres questions mais je vais déjà vous laisser mijoter avec cela. Désolé d'inonder comme cela mais j'ai fait ma liste de questions et j'en ai supprimées plusieurs en testant et trouvant avant de venir vous voir. Il me reste celles-là Smiley cligne

Merci et à très vite
Bonsoir,

Il faut que tu joues avec les @media


@media (min-width : 1200px){

}


@media (min-width: 992px) and (max-width: 1200px) {

}


@media (min-width: 786px) and (max-width: 992px) {

}


@media (max-width: 768px) {

}


Donc pour chaque média, tu as une résolution d'écran!
Donc en gros, tu peux mettre ce que tu veux dans chaque média (margin, padding etc...)

Très petit format < 768 pixels ( Smartphone )
› Petit format = 786 px & < 992 px ( Tablette )
› Moyen format = 992 px & < 1200 px ( Petit écran )
› Large format = 1200 px ( Ecran standard )

Et il faut mettre un col-lg à la class bloc_contenu, là ==> 
bloc_contenu col-lg-9

Modifié par oceane751 (11 Feb 2015 - 22:18)
Ok ...

Je cerne le problème.

Je vais d'abord régler le souci du menu qui prend trop de place en xs. J'ai en tête de transformer le menu en îcone sur deux colonnes pour qu'il prenne moins de place ainsi que des titres qui deviendraient moins longs.

Je suppose que pour çà, je vais devoir mettre les mains dans du jquery afin qu'un bouton et son intitulé deviennent plus petits sous certaines résolutions ?

Merci du coup de main !

PS : niveau code, est-ce que je me plante (fait mal les choses) quelque part ?
Hep, je dois être un gros boulet mais je ne vois pas du tout où consulter mes MP ... Aucun averto nul part ...

J'ai réglé tous mes problèmes. Me reste plus que l'adaptation du menu maintenant ... Je vais tester ce que tu m'as donné !

Un tout grand merci en tout cas !
Et pis ton menu, en bas, utilise la classe .container-fluid (qui prend toute la longueur du site) au lieu de .container
C'est voulu ... On utilise cette classe lorsqu'on ne veut pas le centrage automatique de .container non ?

Je voulais que le menu prenne toute la largeur de l'écran.

Un autre souci est que lorsque je passe la colonne de droite (infos et contact) en affix. Elle chevauche la colonne de contenu lorsqu'on définit une petite taille d'écran.
Comment faire donc pour qu'une colonne en class affix se mettent en-dessous à partir d'une certaine résolution ?

Merci
Modifié par kisscool (13 Feb 2015 - 09:56)
Yep,

Je reviens vers vous après avoir eu plusieurs coups de main de Océane. Merci à elle d'ailleurs.

Cependant, il y a toujours un bug auquel on ne trouve pas de solution. Voici l'adresse du site.

http://concept-tech.lu/heberg/v2/

L'idée est que la colonne de droite (infos et contact) devrait être fixé pour que lorsqu'on scroll vers les autres sections, ça reste au même endroit (sinon ça fait ultra vide).
Lorsque je lui passe la class affix, ça marche super ! Puis je passe à des résolutions plus petites et là, la colonne se met carrément sur la colonne de contenu. Comment faire pour que infos et contact se mette à la fin du site lorsqu'on arrive à des petites résolutions ?

Merci du coup de main Smiley cligne
Sujet clos
Aller à