bestmomo a écrit:

lafilledacote a écrit:

Oui je confirme qu'il vaut mieux prendre le CDN 3.2.0, car pour ma part, je n'arrive pas à reproduire les exemples à partir de Partie 1 "Premiers Pas" / Chapitre 2 "Une grille ?" / Exemple "Une seule rangée".

Bonjour,

La version 3.3 est récente et il faudra un peu de temps pour la mise à jour du cours...

Mais j'ai commencé à tester cette version (la 3.3.1) et pour moi tous les exemples des chapitres 2 et 3 fonctionnent parfaitement parce que la grille n'a pas été modifiée .

-
Edité par bestmomo 27 décembre 2014 à 11:30:02

compare un peu ce css au tien car tu as un pb de marging/padding pour les @madia(min-width:768px)

 <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 0 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;

        } 

      }

      .title{

        text-align: center;

      }

      footer{

        text-align: center;

        margin: 15px 0 10px;

      }

      footer .btn{

        border-radius: 50%;

      }

    </style>

Effectivement, rien ne servait de surcharger le CSS de départ. Il me reste 1 truc à régler. Mes boutons "redesignés" pour le téléphone restent en taille large. Pourtant le code est bien encapsulé. 

http://bootstrapoc.pagesperso-orange.fr/

Merci pour le coup de main 

Delgesu a écrit:

Effectivement, rien ne servait de surcharger le CSS de départ. Il me reste 1 truc à régler. Mes boutons "redesignés" pour le téléphone restent en taille large. Pourtant le code est bien encapsulé. 

http://bootstrapoc.pagesperso-orange.fr/

Merci pour le coup de main 

Tu n'as pas précisé le type de media, par exemple : 

@media screen and (min-width: 350px)
{
    …
}

Non, il faut savoir que dans l'exercice une grande partie du code est donnée et elle est bonne.

@media (min-width: 350px)

signifie "On prend tous les medias existants" comme expliqué dans le cours ici:

https://openclassrooms.com/courses/prenez-en-main-bootstrap/mise-en-route-8#/id/r-1888502

Je vois plutôt un problème de priorité dans les déclarations des media queries .

Delgesu a écrit:

Non, il faut savoir que dans l'exercice une grande partie du code est donnée et elle est bonne.

@media (min-width: 350px)

signifie "On prend tous les medias existants" comme expliqué dans le cours ici:

https://openclassrooms.com/courses/prenez-en-main-bootstrap/mise-en-route-8#/id/r-1888502

Je vois plutôt un problème de priorité dans les déclarations des media queries .

Ah ok, comme je le précise à chaque fois je pensais que c'était obligé. On en apprend tous les jours !

Il y a une accolade fermante qui se promène toute seule juste en dessous des styles de base .btn.

Ça peut venir de ça peut être.

-
Edité par n1col4s 22 mai 2017 à 18:20:40

Bonsoir,

J'ai un soucis avec l'exercice activité 2,j'ai pratiquement tout fait ,mais je bloque sur le titre H1.

De 992px à 1250px le titre ne tient pas sur une ligne,quelqu'un peut m'aider? merci.

Gilles GASSE a écrit:

Bonsoir,

J'ai un soucis avec l'exercice activité 2,j'ai pratiquement tout fait ,mais je bloque sur le titre H1.

De 992px à 1250px le titre ne tient pas sur une ligne,quelqu'un peut m'aider? merci.

 

il faut savoir qu'avec bootstrap on definit la rangée par la classe row et celle-ci peut être divisible en plusieurs colonne. dans cet exemple on  a le logo et le titre dans la 1ère rangé regarde ce bout code:

 <div class="row">

      <div class="hidden-xs col-md-1 pull-left">

           <a href="#"><img src="assets/img/maison.png" alt="logo"></a>

        </div>

        <div class="col-md-11 title">

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

         </div>  

  </div>    

Oui c'est ce que j'avais fait au départ,mais du coup le titre n'est plus centré malgré un text-center avec 11 1.Par contre avec 8 2 c'est bien centré mais sur 2 lignes!

par contre ton code présente le même problème lol! (je viens tout juste de le tester)

rolandabanda a écrit:

vérifie si tu as les mêmes propriétés car mon code fonctionne parfaitement!!

<!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%;

      }



      /* Bandeau */

      .jumbotron {

        background-color: #eef;

        margin-bottom: 0;

      }



      /* Footer */

      footer.row {

        margin: 20px 0 40px 0;

      }

      .btn {

        width: 50px;

        height: 50px;

        border-radius: 25px;

        padding-top: 10px;

      }



      /* Styles pour les smartphones */

      #left, #side1, #side2 {

        padding: 10px 10px 0 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;

        } 

      }



    </style>



  </head>



  <body>



    <div class="container-fluid">



      <header class="jumbotron row">

          <div class="col-sm-2 hidden-xs">

            <a href="#"><img src="assets/img/maison.png" alt="logo"></a>

          </div>

          <div class="col-sm-8 text-center">

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

          </div>

      </header>



      <nav class="row">

        <div id="left" class="col-md-8">

          <a href="#"><img src="assets/img/city1.jpg" alt="Nos réalisations"></a>

        </div>

        <div id="side1" class="col-sm-6 col-md-4">

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

        </div>

        <div id="side2" class="col-sm-6 col-md-4">

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

        </div>

      </nav>



      <footer class="row text-center">

        <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>

A partir de 992px jusqu'a 1250 px le titre h1 est sur deux ligne, exactement comme mon code

hors dans l'énnoncé il est dit : 

grand et moyen écran ça commence à partir de 992px et sur cette image le titre est bien sur une ligne! donc problème!

-
Edité par Gilles GASSE 24 mai 2017 à 22:14:29

Salut, bootstrap n'est pas magique, la classe text-center ne fait rien d'autre qu' un "text-align: center"..

Le texte de ton element est donc centré.. à l'interieur de celui-ci

> le titre n'est plus centré malgré un text-center avec 11 1.

Ton titre est centré dans une div de 11 "collones", il ne sera donc pas centré dans la page, mais un peu à droite faute à la colonne manquante à gauche.. essais 10 cols ? ( pour centrer avec une col manquante à gauche, pourquoi ne pas en laisser une à droite ? )

> Par contre avec 8 2 c'est bien centré mais sur 2 lignes!

'Fectivement', ta div est maintenant centrée, mais à une largeur max de 2/3 de son élement parent( mons son propre padding (colonne)).. soit du jumbotron qui à certainement un beau padding.

Mais comme c'est bien pensé, ton titre voulant rester visible, il se split en lignes des qu' il ne peut plus tenir en largeur..

Donc en solution possible, j' proposerai par exemple de reduire la police lorsque l'espace disponible deviens insuffisant ? ou elargir le conteneur ?

-
Edité par VoiDoS 25 mai 2017 à 10:47:55

Salut,

J'ai réduit la police et aussi les padding left,right  du jumbotron et la ça rentre nickel.

Dû coup j'ai fini mon devoir, ça ma quand même pris 2 semaines cette histoire!

Merci.

Félicitations n'hésite pas en cas de pb

Bonjour,

Je viens de finir le premier TP sur ce cours.

Par contre j'ai deux questions :

• Comment enlever la petite marge de droite qui fait apparaître une scroll-bar horizontale ? Je pense que ça vient du nav ou du footer mais je ne trouve pas ce qui cause ça.
• Pourquoi les 3 images passent en mode 100% de largeur à partir de 767px, alors que le logo lui, disparaît à partir de 766px ?

Voilà, le code.

Merci à vous !

<!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 0 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;
        } 
      }
 
    </style>

  </head>

  <body>

    <div class="container-fluide">

      <!-- HEADER -->
      <header class="jumbotron row">
        <div class="col-sm-2 hidden-xs text-center">
            <a href="#"><img src="assets/img/maison.png" alt="logo"></a>
        </div>
        <div class="col-sm-8 text-center">
            <h1>La maison de l'architecte</h1>
        </div>    
      </header>

      <!-- NAVIGATION -->
      <nav class="row">
        <div id="left" class="col-md-8 col-sm-12">
          <a href="#"><img src="assets/img/city1.jpg" alt="Nos réalisations"></a>
        </div>
        <div id="side1" class="col-md-4 col-sm-6">
          <a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a>
        </div>
        <div id="side2" class="col-md-4 col-sm-6">
          <a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a>
        </div>
      </nav>

      <!-- FOOTER -->
      <footer class="text-center row">
        <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>

      
      <!-- STYLE AJOUTES -->
      <style type="text/css">

        header{margin:0 !important; background-color: #eef !important;} 

        footer{margin:10px;}

          .btn {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            padding-top: 10px;}

      </style>

  </body>

</html>

-
Edité par Serelio 9 juin 2017 à 10:30:45

pour ta 2e question, dans ton code tu a bien spécifier que pour les tables:

l'image Nos réalisations occupe 100% de la ligne (col-sm-12) et 

les deux autres images occupent 50% chacun de la ligne suivant (col-sm-6).

Or d'après bootstrap 3, les tablettes ont une taille entre [768px - 991px] donc si l'écran a une taille inférieure à 768px, le contenu de col-sm-6 devient col-xs-12 soit 100% de l'écran 

pour le logo chez moi il disparait aussi lorsque l'écran devient inférieur à 768px car hidden-xs = taille < 768px

en ce qui concerne la 1ère question je ne sais pas ce qui cause le scroll-bar horizontale

Bonjour,

Je commence juste le cours et j'ai un petit soucis d'affichage. le popup sur "SAT" au chapitre 3 "Un peu de pratique" reste basic et sans fioritures. Je charge bien les css et js en début et fin de fichier mais la mise en forme ne se fait pas.

Le reste de la page est pourtant cohérent avec l'exemple du cours.

Voici le code (je vous passe le milieu de la page que vous connaissez tous ):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap - Prise en main</title>

    <!-- Bootstrap -->
    <!-- <link href="assets/css/bootstrap.min.css" rel="stylesheet"> -->
	<link <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Fonts -->
<!--     <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css"> -->
    
<!--     <link href="assets/css/tuto.css" rel="stylesheet"> -->
	<style type="text/css">
      [class*="col"] { margin-bottom: 20px; }
      img { width: 100%; }
    </style>
    
    <!-- HTML5 shim and Respond.js for 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.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
	<div class="container">
      <header class="page-header">
        <h1>Mon amour pour les tigres</h1>
      </header>
      <section class="row">
        <div class="col-lg-12">
          <p>
            Je suis passionné par les <strong>tigres</strong> depuis très longtemps. Ce site a été construit en <em>hommage à ces merveilleux félins...</em><br>
            Je fais partie de la <abbr title="Société des Amoureux des Tigres">SAT</abbr> qui a pour but de faire connaître ces splendides animaux. 
          </p>
          <p>Voici ce qu'en dit le wikipedia :</p>
          <blockquote>
            Le Tigre (Panthera tigris) est un mammifère carnivore de la famille des félidés (Felidae) du genre Panthera. 
...
            28645 Félins-sur-Loire<br>
          </address>
        </aside>
        <div class="col-sm-8">
          <img src="assets/images/photo-tigre.jpg" alt="Tigre">
        </div>
      </section>
    </div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- <script src="assets/js/jquery.min.js"></script> -->
    <!-- <script src="assets/js/bootstrap.min.js"></script> -->
	<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

-
Edité par rolandabanda 12 juin 2017 à 9:49:00

Bonjour,

J'ai un petit soucis avec l'installation d'un compilateur LESS.

Je suis sur Unbuntu16.04lts et aucun compilateurs ne veut se lancer (crunch2, koala) je ne sais même pas si le système le vois.

Du coup je ne peux pas continuer le cours bootstrap pour faire les exemples et aussi pour plustard.

Si quelqu'un peut m'aider?

Gilles GASSE a écrit:

Bonjour,

J'ai un petit soucis avec l'installation d'un compilateur LESS.

Je suis sur Unbuntu16.04lts et aucun compilateurs ne veut se lancer (crunch2, koala) je ne sais même pas si le système le vois.

Du coup je ne peux pas continuer le cours bootstrap pour faire les exemples et aussi pour plustard.

Si quelqu'un peut m'aider?

Bonsoir. Je pense que tu peux abandonner Crunch et Koala, je n'ai jamais réussi à les lancer. Tu peux installer le compilateur en ligne de commande avec npm : 

npm install -g less

Le lien du site officiel avec des exemples d'utilisation : lesscss.org

-
Edité par n1col4s 18 juin 2017 à 19:44:08

Bonjour,

J'ai 2 problèmes concernant le 2ème TP du cours.

Le 1er : Concernant le menu de navigation placé dans le "header" il faut le faire disparaitre pour les mobiles et faire apparaitre à la place un menu déroulante qui se rétracte. J'ai réussi à placé l'icône du menu déroulant cependant l'icône ne se place pas sur la même ligne que le titre de mon "header" il se place un peu plus bas, ce qui n'est pas du tout esthétique.

Le 2ème : Concernant le reste de la page il y a des marges à droite et à gauche que je n'arrive pas à supprimer. J'ai bien essayer de créer un style css : /* Enlever marges sur les cotés */
          .padding-left-right-0{
          padding-left: 0;
          padding-right: 0;
      }

Mais ça ne fonctionne pas.

   	<div class="container-fluid">
	    <header class="row">

	      <!-- Navigation
	      ================================================== -->
	      	<nav class="navbar navbar-inverse navbar-fixed-top">	      	
	      		<div class="container-fluid">
		      		<div class="navbar-header col-lg-push-1 col-lg-5 col-md-push-1 col-md-5 col-sm-5">
						<a class="navbar-brand" href="#page-top">La maison de l'architecture</a>
					</div>
					<ul class="nav navbar-nav hidden-xs col">
						<li class="hidden"><a href="#page-top"></a></li>
						<li><a href="#accueil">Accueil</a></li>
						<li><a href="#qui">Qui sommes-nous ?</a></li>
						<li><a href="#contact">Contact</a></li>
					</ul>

				
					<ul class="nav navbar-nav visible-xs pull-right">
						<li class="dropdown">
							<a data-toggle="dropdown" href="#"><i class="fa fa-th-list fa-3x" aria-hidden="true"></i><b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li class="hidden"><a href="#page-top"></a></li>
								<li><a href="#accueil">Accueil</a></li>
								<li><a href="#qui">Qui sommes-nous ?</a></li>
								<li><a href="#contact">Contact</a></li>
							</ul>
						</li>
					</ul>
				
			</nav>
		  	
	    </header>

	    <!-- Caroussel
	    ================================================== -->
	    <div class="container-fluid">
	    	<div class="row">
	    		
	    		<div id="carousel" class="carousel slide" data-ride="carousel">

	    			<ol class="carousel-indicators">
    					<li data-target="#carousel" data-slide-to="0" class="active"></li>
    					<li data-target="#carousel" data-slide-to="1"></li>
    					<li data-target="#carousel" data-slide-to="2"></li>
    					<li data-target="#carousel" data-slide-to="3"></li>
  					</ol>

	    			<div class="carousel-inner">
	    				<div class="item active"><img src="assets/img/archi1.jpg" alt="Architecture">
	    					<h1 class="carousel-caption">Un design futuriste</h1></div>
	    				<div class="item"><img src="assets/img/archi2.jpg" alt="Architecture">
	    					<h1 class="carousel-caption">Une équipe compétente</h1>
	    				</div>
	    				<div class="item"><img src="assets/img/archi3.jpg" alt="Architecture">
	    					<h1 class="carousel-caption">Une étude de qualité</h1>
	    				</div>
	 					<div class="item"><img src="assets/img/archi4.jpg" alt="Architecture">
	 						<h1 class="carousel-caption">Des prix attractifs</h1>
	 					</div>
	 				</div>

	    			<a class="left carousel-control" href="#carousel" data-slide="prev">
    					<span class="glyphicon glyphicon-chevron-left"></span>
 					</a>
  					<a class="right carousel-control" href="#carousel" data-slide="next">
    					<span class="glyphicon glyphicon-chevron-right"></span>
  					</a>
  				</div>
  			</div>
  		</div>

Bonjour à tous , j'ai un petit problème dans le tp2 des exercices sur bootstrap.

http://exercices.openclassrooms.com/assessment/213?login=8252563&tk=dd1e7721c3fcbc446ec033e0385069e8&sbd=2016-02-01&sbdtk=fa78d6dd3126b956265a25af9b322d55

En mode tablette, mon titre n'occupe pas deux ligne mais une seule.

Dois -je changer cela avec du style , en mettant une limite en pixel au titre pour le mode tablette, où y as-t-il une classe bootstrap pour arranger ça ?

mon code actuel est celui-ci :

<!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 0 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;
        } 
        header{
          margin-top: 50px;
          margin-bottom: 50PX;
        }
      }
      .btn-primary {
        width: 50px;
        height: 50px;
        border-radius: 25px;
      }
 
    </style>

  </head>

  <body> <container>

    <header class="col-lg-12 col-md12 col-sm-12 col-xs-12">
    <a class="pull-left col-lg-2 col-md-2 col-sm-2 hidden-xs" href="#"><img src="assets/img/maison.png" alt="logo"></a>
     <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12 text-center"> <h1>La maison de l'architecte</h1>       
    </header>

    <nav class="navbar">
      <div id="left" class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
        <a href="#"><img src="assets/img/city1.jpg" alt="Nos réalisations"></a>
      </div>
      <div id="side1" class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
        <a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a>
      </div>
      <div id="side2" class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
        <a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a>
      </div>
    </nav>

    <footer>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
      <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>
      </div>
    </footer>
</container>
  </body>

</html>

Merci d'avance pour votre aide .

Salut, au niveau de ton titre H1 commence par fermer ta balise </div> et pour modifier le fait que ton titre doit être sur deux lignes en mode tablette dans cette div tu changes la valeur de tes col-sm et col-xs en plus petit essaye avec 10 regarde puis 8 puis 6 etc jusqu'à ce que tu es un résultat concluant.

Cordialement Thomas.

Tom Martin a écrit:

Salut, au niveau de ton titre H1 commence par fermer ta balise </div> et pour modifier le fait que ton titre doit être sur deux lignes en mode tablette dans cette div tu changes la valeur de tes col-sm et col-xs en plus petit essaye avec 10 regarde puis 8 puis 6 etc jusqu'à ce que tu es un résultat concluant.

Cordialement Thomas.

Merci de votre réponse, j'ai bien fermé la div , et j'ai mis en col-sm-7 , mais le texte ne va pas aussi loin que dans l'exercice .

J'imagine qu'il faut que j'augmente la police de H1 dans le style ?

Bonjour il faut vraiment être précis dans quand chercher l'aide de la communauté je penses que c'est le TP3 et non TP2 hein

pour ta 1ère préoccupation:

tu n'a pas bien compris utilisation des classes bootstrap pour lanavigaion: y a trop d'erreurs 

<!-- Navigation
      ================================================== -->
      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header" <!-- ici on crée un bouton qui va faire apparaître et disparaître les éléments du menu pour les écrans >=768px -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#page-top">La maison de l'architecture</a>
          </div>
          <div class="collapse navbar-collapse"><!-- cette classe permet de cacher les éléments du menu pour les écrans >=768px -->
            <ul class="nav navbar-nav">
              <li class="hidden"><a href="#page-top"></a></li>
              <li><a href="#accueil">Accueil</a></li>
              <li><a href="#qui">Qui sommes-nous ?</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
        </div     
</nav> 

  pour ta 2e préoccupation:

il faut respecter les règles de l'art enlève la     <div class="container-fluid"> puis la classe '' row que tu as défini dans le header'' et aussi la <div class="container-fluid"> et la <div class="row"> dans la navigation

puis ajoute ceci dans le head <style>img{width:100%}</style> donc tu aura une structure comme celle-ci:

<head>
    <style type="text/css"> 
      /* Images */
      img {
        width: 100%;
      }

    </style>

</head>
<body>
    <header>

      <!-- Navigation
      ================================================== -->
      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#page-top">La maison de l'architecture</a>
          </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="hidden"><a href="#page-top"></a></li>
              <li><a href="#accueil">Accueil</a></li>
              <li><a href="#qui">Qui sommes-nous ?</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
        </div>
      </div>   

    </header>

    <!-- Caroussel
    ================================================== -->
    <div id="carousel" class="carousel slide" data-ride="carousel">
      <!-- Indicateurs -->
      <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
        <li data-target="#carousel" data-slide-to="3"></li>
      </ol>
      <!-- Diapositives -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="assets/img/archi1.jpg" alt="Architecture">
          <div class="carousel-caption">
            <h3>Un design futuriste</h3>
          </div>
        </div>
        <div class="item">
          <img src="assets/img/archi2.jpg" alt="Architecture">
          <div class="carousel-caption">
            <h3>Des formes sublimes</h3>
          </div>
        </div>
        <div class="item">
          <img src="assets/img/archi3.jpg" alt="Architecture">
          <div class="carousel-caption">
            <h3>Un élan vers le futur</h3>
          </div>
        </div>
        <div class="item">
          <img src="assets/img/archi4.jpg" alt="Architecture">
          <div class="carousel-caption">
            <h3>Une intégration aérienne</h3>
          </div>
        </div>
      </div>
      <!-- Contrôles -->
      <a class="left carousel-control" href="#carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>  
    </div>

</body>
 

bon courage!!

-
Edité par rolandabanda 23 juin 2017 à 12:54:51