j'aime

?

-
Edité par toudia122 23 mars 2017 à 17:41:55

Bonsoir RiwalennBas,

Je me souviens avoir légèrement modifié le code pour avoir dans un Ex. pour avoir exactement la même chose que sur la figure mais sinon, je peux t'assurer que tout fonctionne très bien pour l'avoir fait il y a 2-3 semaines.

Au début, c'est déroutant mais à force de pratique, on arrive facilement à placer ses objets comme il faut ... Courage !!!

Avec les émulateurs, il arrive parfois qu'il faille recharger la page et vérifie aussi que tu ai bien mis dans ton head cette balise Meta :

<meta name="viewport" content="width=device-width, initial-scale=1">

Sans elle, ça ne fonctionne pas sur certain navigateur.

-
Edité par florianboy01 23 mars 2017 à 21:44:20

Je te remercie florianboy01, on m'a expliqué sur un autre post que je n'avais pas la bonne version de bootstrap :), du coup j'ai mis une ligne de code CDN à la place et tout est redevenu normal, mis à part quelques exercices où j'ai pas le résultat escompté. L'essentiel étant que finalement, grâce à mon mentor, j'ai compris bootstrap.

RiwalennBas a écrit:

Je te remercie florianboy01, on m'a expliqué sur un autre post que je n'avais pas la bonne version de bootstrap :), du coup j'ai mis une ligne de code CDN à la place et tout est redevenu normal, mis à part quelques exercices où j'ai pas le résultat escompté. L'essentiel étant que finalement, grâce à mon mentor, j'ai compris bootstrap.

J'ai remarqué qu'il ne faut pas prendre la version de CDN proposé dans le cour car certaine class ne fonctionne pas par rapport à la version de Bootstrap que j'avais télécharger en suivant le lien donné.

J'ai donc modifié mon CDN en changeant la version, à la place de 3.3.1, j'ai mis 3.3.7 . C'est parce qu'il m'arrive de faire des recherches de class correspondant à mes besoins directement dans le fichier bootstrap.css que je me suis aperçu des différences.

C'est la version que j'ai prise (la 3.3.7), j'ai suivi le lien vers le site bootstrap où ils proposent la dernière version. Je ne savais pas qu'on pouvais changer la version dans le lien (je pensais qu'on avait accès qu'à la dernière version), c'est bon à savoir au cas où.

RiwalennBas a écrit:

Je te remercie florianboy01, on m'a expliqué sur un autre post que je n'avais pas la bonne version de bootstrap :), du coup j'ai mis une ligne de code CDN à la place et tout est redevenu normal, mis à part quelques exercices où j'ai pas le résultat escompté. L'essentiel étant que finalement, grâce à mon mentor, j'ai compris bootstrap.

bonjour,

Connaissez-vous quelques sites pour trouver des templates bootstrap GRATUITS stp ?

Bonjour j'ai un petit  groupe de développeurs  que  je gère sur facebook . Je voudrais savoir si je peut récupérer de temps en temps les cours que vous poster pou

Je voulais reagir a la question de RiwalennBas mais il y a deja pas mal de reponses et elles sont apparues lors de mon post. Je ne peux pas effacer ce message alors j'explique le pourquoi du comment. Bref, pas tres interessant : )

-
Edité par UchihaItachi 5 avril 2017 à 10:34:52

Bonjour,

J'ai du mal à comprendre le premier exercice pratique avec les photos de tigre à aligner sur une page en fonction des medias.

J'ai l'impression que parfois pour faire des rangées on utilise la classe "row" et dans ce cas là pour avoir les photos sur 2,3 ou 4 rangées il faut le gérer dans la classe "col-" qui est pourtant une gestion par colonne et pas par rangée.... bref ce n'est pas très clair et je ne comprends pas quand il faut utiliser row ou col.

Merci par avance et merci pour ce cours,

Il faut garder en tête qu'une ligne peut contenir [de base] 12 colonnes. Donc si tu veux afficher 6 photos sur ta ligne il faut que ces dernières aient une largeur de 2 colonnes (12/6=2).
Si tu veux afficher 4 photos alors même principe : 12/4=3 donc tes photos devront avoir une largeur de 3 colonnes.
Et ainsi de suite...

Il faut voir tes row non pas comme des lignes au sens visuel du terme mais plus au sens "bloc d'éléments", une row est un bloc contenant un certains nombre de colonnes. Ce même nombre de colonnes peut très bien être supérieur à 12 dans quel cas les colonnes 13 et suivantes s'afficheront en dessous, sur une deuxième ligne, mais toujours dans la même row.

-
Edité par SlawTech 6 avril 2017 à 14:15:31

Vraiment merci beaucoup Kingwals !  C'est beaucoup plus clair :)  Je file faire la suite !

Bonjour,

concernant l'activité partie 2,

j'essaie de comprendre dans quel ordre s'exécute la surchage de class au niveau des "media"

en effet, je m'arrache gentillement les cheveux pour ajuster les paddings et margins pour les side1 et side2.

Il semble que les effets s'additionnent plutôt que de s'alterner en fonction des médias query,

il y a peut être quelque chose que j'ai mal fait.

Aussi, peut on me confirmer ou m'infirmer l'ordre dans lequel pourrait s'additionner et comment y remédier.

Merci

EDIT : ma problèmatique est resolue, le soucis de compréhension est lié aux différents navigateurs et à la sémantique employée. Les formats smartphone, laptop et tablette ne correspondent pas au width des medias query d'où mes difficultés à adapter correctement les scopes et les largeurs avec les paddings. 

-
Edité par Amaury_Lille 17 avril 2017 à 20:33:00

Je pense que tu te complique la vie, il y a peu de chose à modifier . C'est pas facile de t'apporter une réponse clair sans te donner la solution mais se ne serai pas une aide à long terme ...

Un conseil, regarde bien ce que tes class contiennent, ça paraît complexe quand on débute mais c'est en réalité très simple ...

Courage !!

Bonjour,

Je suis dans les barres de navigation et la class "navbar-fixed-top" ne fonctionne pas chez moi (sur tous les navigateurs) alors que si je colle mon code dans CODPLY ça marche. Faut il déclarer quelque part une librairie ou autre pour avoir acces à cette fonctionnalité ?
Merci par avance.
EDIT : j'ai trouvé et je donne l'info ici au cas où ça servirait : En fait la class navbar-fixed-top a de base une position: fixed; donc si par ailleurs on a fait une class .navbar avec une surcharge où on a mis position: relative; celà écrase celle de navbar-fixed-top qui ne fonctionne donc pas.

-
Edité par LilyOC 11 avril 2017 à 8:30:27

Bonjour,

je rencontre deux difficultés concernant l'activité 3,

la première est mineur, quel sont les noms des images à appliquer pour le "caption" du carousel ?

la seconde est un peu plus complexe : la transparence.

J'ai consulté le forum et ce fils de discussion, ainsi que le cours de Mathieu Nebra, pour l'instant sans succès. L'application d'un paramètre opacity sur le jumbotron s'applique aussi aux enfants (titre, paragraphe, images et formulaire).

Je n'arrive pas à paramétrer correctement l'effet avec RGBa(r, g, b, opacity) qui est sans effet (sous IE, Chrome et FireFox).

Aussi, pourriez vous aimablement m'indiquer quelle partie du cours est concernée pour appliquer la transparence correctement et conserver un contenu sur lequel la transparence n'est pas appliquée ?

Autre note : le paramétrage de chrome donne parfois des effets étranges par rapport à la "taille" de type smartphone, tablette et laptop ou large qui ne correspondent visuellement pas aux effets et tailles attendues.

Merci de votre assistance.

Amaury

Amaury_Lille a écrit:

Bonjour,

je rencontre deux difficultés concernant l'activité 3,

la première est mineur, quel sont les noms des images à appliquer pour le "caption" du carousel ?

la seconde est un peu plus complexe : la transparence.

J'ai consulté le forum et ce fils de discussion, ainsi que le cours de Mathieu Nebra, pour l'instant sans succès. L'application d'un paramètre opacity sur le jumbotron s'applique aussi aux enfants (titre, paragraphe, images et formulaire).

Je n'arrive pas à paramétrer correctement l'effet avec RGBa(r, g, b, opacity) qui est sans effet (sous IE, Chrome et FireFox).

Aussi, pourriez vous aimablement m'indiquer quelle partie du cours est concernée pour appliquer la transparence correctement et conserver un contenu sur lequel la transparence n'est pas appliquée ?

Autre note : le paramétrage de chrome donne parfois des effets étranges par rapport à la "taille" de type smartphone, tablette et laptop ou large qui ne correspondent visuellement pas aux effets et tailles attendues.

Merci de votre assistance.

Amaury

Bonjour,

En effet, la propriété opacity affecte tout le contenu de l'élément sélectionné, il faut plutôt utiliser le rgba pour le background. Voici un lien vers la partie qui traite de la transparence dans le cours de Mathieu Nebra sur le html5/css3 :

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-couleur-et-le-fond#/id/r-1610599

Si ça ne marche toujours pas, il faudrait peut-être vérifier si vous avez bien déclaré la class, des fois c'est juste un problème de faute de frappe.

Pour la dernière note concernant le paramétrage de chrome, je n'ai pas bien compris, j'espère que quelqu'un d'autre pourra vous aider.

Sinon pour les "caption", vu qu'il n'y a aucune indication, et bien soyons créatifs!

Ryuusei a écrit:

Bonjour,

En effet, la propriété opacity affecte tout le contenu de l'élément sélectionné, il faut plutôt utiliser le rgba pour le background. Voici un lien vers la partie qui traite de la transparence dans le cours de Mathieu Nebra sur le html5/css3 :

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-couleur-et-le-fond#/id/r-1610599

Si ça ne marche toujours pas, il faudrait peut-être vérifier si vous avez bien déclaré la class, des fois c'est juste un problème de faute de frappe.

Pour la dernière note concernant le paramétrage de chrome, je n'ai pas bien compris, j'espère que quelqu'un d'autre pourra vous aider.

Sinon pour les "caption", vu qu'il n'y a aucune indication, et bien soyons créatifs!

Bonsoir Ryuusei

merci beaucoup

j'ai réussi à trouver quelques camarades pour m'expliquer,

en effet j'avais la bonne partie de cours,

ce qu'ils m'ont expliqué et qui pourra peut être servir pour d'autres :

afin d'appliquer correctement la surcharge de style sur la spécificité .jumbotron, il faut utiliser la classe ".container .jumbotron"

ce qu'ils m'ont expliqué consiste en :

.container .jumbotron est déjà défini en spécificité de "rang 2"

la spécificité css est à 3 niveaux

les ids, les classes et les éléments

<div id="toto" class="tutu">machin</div>

#toto a une spécificité de 1 0 0

.tutu a une spécifité de 0 1 0 (edited)

div a une spécificité de 0 0 1

.tutu.tutu a une spécificité de 0 2 0

c'est pourquoi .container .jumbotron a une spécificité de 0 2 0

il faut donc appliquer le style personnalisé en appliquer sur le bon "rang" de spécificité, autrement celle par défaut de bootstrap s'appliquera.

Belle soirée à toi

Amaury

///

-
Edité par mamjo 18 avril 2017 à 3:33:00

Amaury_Lille a écrit:

Bonjour,

...

Autre note : le paramétrage de chrome donne parfois des effets étranges par rapport à la "taille" de type smartphone, tablette et laptop ou large qui ne correspondent visuellement pas aux effets et tailles attendues.

Merci de votre assistance.

Amaury

Bonjour,

Je ne suis pas sur de bien comprendre ton problème mais avec Chrome, cette balise meta s'est avéré indispensable pour avoir un affichage en rapport avec le mode smartphone ou tablette chez moi

<meta name="viewport" content="width=device-width, initial-scale=1">

En plus, parfois, il est important de recharger la page (F5) lorsqu'on change de mode, surtout si des instructions Javascript doivent insérer des variables CSS dans ton code, mais même sans ça, ça coûte rien de recharger la page ...

Si ceci ne résout pas ton problème, merci de préciser un peu plus ta question ...

Bonjour à tous,

Existe t-il un logiciel permettant de generer automatiquement une page web bootstrap ?

Merci d'avance

Torvalds_77 a écrit:

Bonjour à tous,

Existe t-il un logiciel permettant de generer automatiquement une page web bootstrap ?

Merci d'avance

Bonjour, je connais ces sites là mais il y en a certainement d'autres : 

http://www.bootply.com/new

http://www.layoutit.com/

https://bootstrapstudio.io/

 salut j'ai realise la page exemple du cour d Boostrap   mais les bordures des  images  debordent je ne sais pas comment gerer cela

-
Edité par YanGer 22 avril 2017 à 12:43:31

Salut,

En analysant le problème avec les outils de développement présent sur tout bon navigateur

ok merci je vais essayer de le faire

n1col4s a écrit:

Torvalds_77 a écrit:

Bonjour à tous,

Existe t-il un logiciel permettant de generer automatiquement une page web bootstrap ?

Merci d'avance

Bonjour, je connais ces sites là mais il y en a certainement d'autres : 

http://www.bootply.com/new

http://www.layoutit.com/

https://bootstrapstudio.io/

Excellent, merci pour ces ressources,

avec l'essor de Flex également je m'interesse à ces "générateurs".

Lequel préférez vous et pour quels motifs ?

jai un exercice de pratique que classroom ma donne mais je n y ait pas acces

Bonjour,

Est-ce qu'il y aurait un souci pour valider l'activité 2 ? Depuis ce matin, à chaque fois que j'essaye de valider j'obtiens le message suivant sur une page blanche : "The file "" does not exist"

Du coup, impossible de valider l'activité et d'accéder aux corrections.

Merci pour votre retour. 

salut a tous s'ils vous plait au niveau de l'activite 1 portant sur boostrap j'ai inserer les 2 images mais mon 2eme image deborde un peu l'image nos realisation que puis je faire pour resoudre le probleme voici mon code :

<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>La maison de l'architecte</title>
<meta name="description" content="Le site de la maison de l'architecture">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->

<style type="text/css"> 

/* Styles de base */
body {
font-family: 'Bitter', serif;
background-color: #eef;
color: #259;
      }
nav img {
width: 100%;
      }

/* Styles pour les smartphones */
#left, #side1, #side2 {
padding: 10px 10px 10px 10px;
      }

/* Styles pour les tablettes */
@media (min-width: 768px) {
#left{
padding: 0;
        } 
#side1 {
padding: 10px 5px 0 0;
        } 
#side2 {
padding: 10px 0 0 5px;
        }
      }

/* Styles pour les écrans moyens et grands */
@media (min-width: 992px) {
#side1, #side2 {
padding: 0 0 10px 10px;
        } 
      }
footer{
text-align: center;
      }

</style>

</head>

<body class="responsive">
<div class="container-fluid">

<div>
<header class="row">
<div class="col-sm-12">
<div class="row">
<div class="jumbotron text-center">
<div class="col-lg-1 col-md-2">
<a href="#"><img src="assets/img/maison.png" alt="logo"></a>
</div>
<div class="col-lg-11 col-md-10 ">

<h1>La maison de l'architecte</h1>
</div>

</div>
</div>
</div>

</header>
</div>


<nav>
<div class="row">
<div class="class col-lg-8 col-md-8">
<div id="left">
<a href="#"><img src="assets/img/city1.jpg" alt="Nos réalisations"></a>
</div>
</div>
<div class="class-col-lg-4 col-md-4">
<div class="row">


<div id="side1">
<a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a>
</div>



<div id="side2">
<a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a>
</div>

</div>
</div>
</div>

</nav>



<footer >
<a class="btn btn-primary" href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-facebook fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-flickr fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-spotify fa-2x"></i></a>
</footer>
</div>

</body>

</html>