Bonjour,

je rencontre un problème au niveau du chargement d'une page html dans une fenêtre modale. Cela fonctionne très bien sur firefox mais pas sur Chrome. 

Quelqu'un aurait il une explication?

Je vous remercie par avance

-
Edité par Anonyme 3 septembre 2017 à 0:38:25

Merci je pense pouvoir bien me sentir dans ces cours de decembre !on va bien se former...

merci

-
Edité par WalidNegra 13 septembre 2017 à 15:25:34

Bonjour,

Pour l'activité partie 3 j'ai un petit doute :

Pour l'affichage tab et smartphones dans l'exemple il n'y a pas le jumbotron "Une équipe efficace" est ce qu'il faut l'enlever ou non ?

• Sur tablettes et smartphones, la barre de navigation et le carrousel restent inchangés à la seule différence que la barre doit se rétracter sur smartphone :

Pour le reste, les blocs texte et image doivent s'empiler comme suit :

Le formulaire doit aussi s’empiler :

Vous devez évidemment utiliser au maximum Bootstrap pour cette réalisation et établir des règles de style particulières lorsque vous atteignez les limites des classes de Bootstrap.

y a personne?? je suis bloqué à cause de ça!

Bonjour,

L'équipe efficace doit rester dans toutes les résolutions.

ah ok merci pour la réponse

Salut à tous,

je viens vous demander des conseils. En fait je ne trouve pas dans le zip téléchargé les fichiers jquery.js et bootstrap.js avec la version 3.3.7 de Bootstrap.

Comment faire pour les avoir car le cours les utilisent?

S'il vous plait faites vite.

Merci d'avance.

Merci

Bonjour, je travaille sur l'activité_3 et je ne trouve pas les titres à mettre pour les photos du carrousel,

Si vous pouviez me dire ou les trouver, merci 

Bonjour,

Dans la partie concernant les offsets, dans les débuts du cours, quand je fais :

<div class="container">
            <div class="row">
                <div class="col-lg-3">3 colonnes</div>
                <div class="col-lg-6">6 colonnes</div>
                <div class="col-lg-3">3 colonnes</div>
            </div>
            <div class="row">
                <div class="col-lg-3">3 colonnes</div>
                <div class="col-lg-offset-6 col-lg-3">3 colonnes</div>
            </div>
        </div>

Les sauts de colonnes ne fonctionnent pas.

J'ai essayé celui d'après avec plusieurs sauts, même chose.

Cdt,

Gilles

Ça ne fonctionne pas comment ? Tes trois colonnes sont collées au 3 premières ou retournent à la ligne ?

EDIT : J'ai fais un simple copier/coller de ton code et tout à l'air de fonctionner de mon coté... Question bête mais as tu pensé à vérifier le niveau de zoom de ta fenêtre ? Ce sont des col-lg donc il suffit que la fenêtre soit rétrécie ou zoomé et cela peut changer l'affichage.

-
Edité par SlawTech 26 octobre 2017 à 14:20:42

Bonjour,

Les colonnes sont collées, même en plein écran.

J'ai essayé sur 2 ordi sous Windows 10, c'est le même problème.

Je viens d'essayer sur un en Windows 8 et le problème est le même donc c'est pas Windows 10 le soucis.

Cdt,

Glles

-
Edité par Gillout 28 octobre 2017 à 10:34:59

Quelle est la définition de ton écran ? Peux tu poster une capture d'écran du résultat stp ?

Bonjour,

Ecran en résolution 1920 x 1080.

Cdt,

Gilles

Je vois vraiment pas... D'autant plus que quand je copie/code ton code chez moi ça marche nickel !

Bonjour,

A tout hasard, j'ai supprimé la ligne qui déclare Bootstrap dans le fichier html et je l'ai entièrement réécrite, cela fonctionne.

J'ai ensuite fait un copier coller dans les autres fichiers avec des sauts et cela fonctionne également dans les autres fichiers.

A ne rien y comprendre mais le principal est que tout fonctionne.

Cdt,

Gilles

meerci  pour votre aide !!

Bonjour,

pouvez vous m'aider?

je n'arrive pas à faire l'exercice "pratiquez!".

Cdt,

-
Edité par MathieuSimoumousse 7 novembre 2017 à 14:03:30

voici un site grace aux cours de open j'ai pu réaliser http://www.ivoiregospel.com/AUDIOS/index.php

merci a vous

-
Edité par IvoireIvoireGospel 26 novembre 2017 à 2:47:36

webcode a écrit:

Salut

bestmomo a écrit:

Salut webcode

webcode a écrit:

Merci pour ces informations très intéressantes, sur le lien de material design j'ai aperçu le menu de navigation est-ce qu'il est possible de faire cela avec materialize ? Si c'est possible comment ? Ou si vous avez un lien comment réaliser ce genre d'effet ça me ferait plaisir !

La barre de navigation est celle des composants de Material Design, la documentation est sur leur site.

webcode a écrit:

Quand tu dis je n'ai pas encore une vue suffisamment globale pour me faire une opinion tranchée, tu parles entre Bootstrap et Materialize ? Donc comme je peux comprendre tu comptes faire un cours pour la version 4 ?

Je parle de Bootstrap et je compte bien faire un cours sur la version 4. J'ai d'ailleurs pratiquement achevé la partie qui concerne la grille. En fait j'en ai écrit un l'an dernier en pensant qu'ils iraient plus vite dans le développement mais je m'y suis pris finalement trop tôt et plein de choses ont bien changé entre temps. C'est le cas aussi pour les intrépides qui ont publié des bouquins (essentiellement en anglais) qui sont tous devenus obsolètes.

Il faut se méfier du traducteur de Google pour les documents technique, il vaut mieux faire l'effort de la langue.

Il aura la vesrion 4 que bestmomo va faire  Que veut tu dire 

AJOOC a écrit:

Bonjour,
Etant donné tout ce qui s'écrit dans ce forum ... ne serait-il pas judicieux de faire un cours "perfectionnement Bootstrap"  ? car pour ma part j'ai fini par  abandonner bootstrap ne réussisant pas à obtenir ce que je voulais...

-
Edité par AJOOC hier à 11:22

Pas arriver a faire quoi ?

Depuis j'y suis finalement  parvenu mais à force de multiples essais  ... mais un grand oui pour une formation bootstrap 4  car je trouve très intéressant de pouvoir utiliser les flexbox ( vu en cours html/css3 ) et donc un peu frustrant que cela ne le soit pas dans bootstrap,  et une formation sass ne serait vraiment  pas de trop non plus... et si possible avec beaucoup de  vidéos ...quelle est la date prévue pour cette formation ?

Bonjour, je suis actuellement sur l'activité 3 du cours. 

J'ai un problème de mise en page de ma section header avec Chrome (je n'ai pas ce problème avec Firefox) :

Lorsque j'ouvre le fichier index.html, mon header s'affiche comme ceci :

Et lorsque je refresh la page, le header s'affiche comme il devrait l'être initialement : 

Débutant en la matière, je ne comprends, du coup, donc pas ce que je fais de mal ?

Pour info, voici mon code relatif au header :

<header>
      <nav class="container">
        <div class="row">
          <a href="#page-top" class="col-md-3 col-sm-9 col-xs-9">La maison de l'architecture</a>
          <ul>
            <li class="col-md-1 hidden-xs hidden-sm"><a href="#accueil">Accueil</a></li>
            <li class="col-md-2 hidden-xs hidden-sm"><a href="#qui">Qui sommes-nous ?</a></li>
            <li class="col-md-1 hidden-xs hidden-sm"><a href="#contact">Contact</a></li>
          </ul>
            <div class="btn-group hidden-lg hidden-md col-sm-2 col-xs-2 pull-right"> 
              <button type="button" class="glyphicon glyphicon-align-justify visible-xs visible-sm hidden-md hidden-ld" data-toggle="collapse" data-target="#collapse-menu"></button>
            </div>
      </nav>
      <nav class="container">
        <div id="collapse-menu" class="collapse">
          <ul class="nav nav-pills nav-stacked">
            <li class="hidden-md hidden-lg"><a href="#accueil">Accueil</a></li>
            <li class="hidden-md hidden-lg"><a href="#qui">Qui sommes-nous ?</a></li>
            <li class="hidden-md hidden-lg"><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </nav>
    </header>

Ainsi que mon CSS additionnel :

header { background-color: #222222; font-weight: bold; font-size: 1.5em; font-family: 'Bitter'; margin-bottom: -30px;}
nav, ul { list-style-type: none; display: inline; flex-direction: column; }
nav a { color: gray; text-decoration: none; }
nav a:visited { color: gray; text-decoration: none; }
nav a:hover { color: white; text-decoration: none; }
nav a:active { color: white; text-decoration: none; }
.nav-pills a:hover { color: #080808; }
[class*="col-md"] { text-align: center; }; 

Merci d'avance à ceux qui prendront le temps d'éclairer ma lanterne

Bonjour à tous,

je suis nouveau alors je sollicite l'aide des devanciers,

notamment pour ce qui concerne la formation. En fait je me suis inscris sur ce site sans quelque chose en contre parti; je veux donc savoir si la formation continuellement gratuite ou payante plu-tard ?

merci.

Bonjour, 

Je suis en train de tester l'injection de page html avec les fenêtres modales sur mon ordinateur. J'ai le même problème que maped...

Quelle est la solution?

Merci

Bonjour,

je viens vers vous car je n'ai pas trouver de solution à mon soucis sur l'activité 2

mon image de gauche déborde sur celle de droite, pourtant j'ai vérifié sur le forum et plusieurs personne on fait ce code et visiblement il fonctionne.

<div class="container-fluid">
  <body>
      <header class="jumbotron">
          <div class="row">
            <div class="col-md-2 col-sm-2 hidden-xs">
              <a href="#"><img src="assets/img/maison.png" alt="logo"></a>
            </div>
            <div class="col-md-8 col-sm-8 text-center">
              <h1>La maison de l'architecte</h1> 
            </div>
          </div> 
      </header>
      
    
   
    <nav class="row">
   
               
        <div class="col-md-8 col-sm-12 col-xs-12">
          <a href="#"><img src="assets/img/city1.jpg" alt="Nos réalisations"></a>
        </div>
         <div class="col-md-4 col-sm-6 col-xs-12"> 
            <a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12 pull-right">
            <a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a>
        </div>
       
    </nav>
 
    <footer class="row">
      <div class="col-md-12 col-sm-12 text-center">
        <a class="btn btn-primary btn-circle  btn-lg btn-xl" href="#"><i class="fa fa-twitter fa-2x"></i></a>
        <a class="btn btn-primary btn-circle  btn-lg btn-xl" href="#"><i class="fa fa-facebook fa-2x"></i></a>
        <a class="btn btn-primary btn-circle  btn-lg btn-xl" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
        <a class="btn btn-primary btn-circle  btn-lg btn-xl" href="#"><i class="fa fa-flickr fa-2x"></i></a>
        <a class="btn btn-primary btn-circle  btn-lg btn-xl" href="#"><i class="fa fa-spotify fa-2x"></i></a>
      </div>
    </footer>
    </body>
   </div>

J'ai aussi essayer d'ajouter

class=img-responsive

Ça apporte du mieux mais mon image de gauche ne s'aligne pas en bas par rapport au 2 de droite :s

-
Edité par Julemane 5 janvier 2018 à 12:42:20

Personne pour un petit coup de main ?

Salut,

Et si tu mets ton container-fluid dans le body ?

ça ne change rien, toujours le même problème

edit: j'ai trouvé, dans le code css 

nav img
      {
       width: 100%;
      }

ne fonctionnai pas, je l'ai supprimer et remis plus haut dans le code et ça l'a pris en compte...

-
Edité par Julemane 7 janvier 2018 à 18:18:22