Salut tout le monde, c'est michelD225 j'ai un soucis concernant le cours PRENEZ EN MAIN BOOTSTRAP à l'étape 2 où il est question d'avoir ce rendu (déclarer une seule rangée avec deux éléments qui occupent tout l'espace)
Si je fais appel à vous aujourd'hui, c'est parce que je me retrouve confronté à un problème que je ne parviens pas à résoudre concernant Bootstrap.
Comment fais t'on pour qu'une image prenne la totalité de l'espace (hauteur et largeur) des colonnes qui la contienne? Cela peut paraître idiot mais je ne parviens pas, malgré mes nombreuses recherches, à comprendre la logique de Bootstrap concernant la taille des images.
J'ai besoin de cette info afin de parvenir à rendre le travail de l'activité 2 du cours. Afin de vous aider à comprendre mon problème, je vais transmettre ci-dessus l'ébauche de mon code (j'ai encadrer les container afin de mieux me repérer visuellement, d'ailleurs je ne comprends pas non plus pourquoi, si on applique un container à body ce dernier est décaler vers la droite par rapport à ceux du header nav et footer). Je pense avoir saisi l'utilisation des colonnes (dites le moi, si ce n'est pas le cas), mais je ne parvients jamais à obtenir le rendu attendu concernant les images, elles se mettent à l'endroit voulu mais leurs tailles n'est pas la bonne. Je vais vous fournir également une copie du travail attendu(moyens et grands écrans, tablettes, téléphones).
Je vous serait vraiment reconnaissante de bien vouloir prendre quelques minutes pour m'aider.
<!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%;
height: auto;
}
.btn-lg {
width: 50px;
height: 50px;
border-radius: 25px;
}
.container{
text-align: center;
border: 5px blue inset;
}
/* 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>
<header>
<div class="container">
<div class="hidden-xs col-sm-1 col-md-1"><a href="#"><img src="maison.png" alt="logo"></a></div>
<div class="col-xs-12 col-sm-11 col-md-11"><h1>La maison de l'architecte</h1></div>
</div>
</header>
<nav>
<div class="container">
<div id="left"><div class="col-xs-12 col-sm-12 col-md-8"><a href="#"><img class="photo" src="city1.jpg" alt="Nos réalisations"></a></div></div>
<div id="side1"><div class="col-xs-12 col-sm-6 col-md-4"><a href="#"><img class="photo" src="side1.jpg" alt="Nos projets"></a></div></div>
<div id="side2"><div class="col-xs-12 col-sm-6 col-md-4"><a href="#"><img class="photo" src="side2.jpg" alt="Notre ambition"></a></div></div>
</div>
</nav>
<footer>
<div class="container">
<a class="btn btn-primary btn-lg" href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a class="btn btn-primary btn-lg" href="#"><i class="fa fa-facebook fa-2x"></i></a>
<a class="btn btn-primary btn-lg" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
<a class="btn btn-primary btn-lg" href="#"><i class="fa fa-flickr fa-2x"></i></a>
<a class="btn btn-primary btn-lg" href="#"><i class="fa fa-spotify fa-2x"></i></a>
</div>
</footer>
</body>
</html>
image correspondante mauvais rendu (marge au-dessous des images de droite) (le vert correspond aux colonnes, le gris et l'encadrement bleu au container):
image correspondante bon rendu :
Et encore une fois merci à toi Valentino, même s'il ne me donnait pas la réponse, ton message m'a permis de voir les choses différemment et de trouver la solution.
- Edité par amandine alenda 27 juin 2018 à 18:35:12
bonjour a tout et à toutes, je suis un nouveau dans la forum. j'ai besoin de vos aides pour mieux comprendre la fonctionnalité des cours et exercices. svp aidez moi vivement. merci d'avance
je suis en train de suivre la 3eme partie du cours sur Bootstrap. Dans la section "Boutons pour attente de processus", j'ai testé le code donné et ça ne marche pas.
je dois intégrer une maquette (ci-dessous) avec bootstrap.
J'ai fais mon wireframe et je me demandais comment faire pour la navigation. Doit elle faire partit des grilles ? Qui sont actuellement uniquement sur la "partie grise" avec tous les éléments ?
Après plusieurs heures de recherches et de tests je viens chercher de l'aide. Je suis en train de faire la 1ere activité du cours prenez en main Bootstrap et je n'arrive pas à supprimer la marge de droite, elle a bien disparue à gauche mais reste toujours à droite. Pouvez-vous m'aider??
code html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-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]-->
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<div class="container-fluid">
<header class="row">
<div class="jumbotron">
<div class="hidden-xs col-md-1">
<a href="#"><img src="assets/img/maison.png" alt="logo"></a>
</div>
<div class="col-md-10">
<h1 class=text-center>La maison de l'architecte</h1>
</div>
</div>
</header>
<nav class="row">
<div id="left">
<div class="col-xs-12 col-sm-12 col-md-8"><a href="#"><img src="assets/img/city1.jpg" alt="Nos réalisations"></a></div>
</div>
<div id="side1">
<div class="col-xs-12 col-sm-6 col-md-4"><a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a></div>
</div>
<div id="side2">
<div class="col-xs-12 col-sm-6 col-md-4"><a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a></div>
</div>
</nav>
<footer class="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>
</body>
</html>
Par contre fait attention, ton code est mal indenté. Tu risques d'avoir des problèmes pour t'y retrouver et en plus, dans le barème, il y a des points pour l'indentation
Merci beaucoup James mais ça ne change rien ,toujours cette marge à droite uniquement
Pour l'indentation j'essaie de faire attention à chaque fois mais j'ai tellement refait ce code pour supprimer cette marge que je dois avoir les yeux qui se croisent
Besoin de conseils sur l'activité 2 de Bootstrap, après pas mal de temps passé, je n'arrive pas à centrer le titre, créer les marges entres les images, et virer les marges extérieures, voici mon code.
Merci d'avance pour votre aide précieuse...
<!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;
}
/* harmonisation couleur fond */
.jumbotron {
background-color: #eef;
}
/* centrage titre */
h1 {
text-align: center;
}
nav img {
width: 100%;
}
.btn-circle {
width: 50px;
height: 50px;
border-radius: 25px;
padding: 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 {
padding: 0 0 10px 10px;
}
#side2 {
padding: 0 0 10px 10px;
}
}
</style>
</head>
<body>
<!-- utilisation jumbotron -->
<div class="jumbotron">
<header class="container-fluid">
<div class="row">
<div class="col-sm-1 col-lg-1 hidden-xs">
<a href="#"><img src="assets/img/maison.png" alt="logo"></a>
</div>
<div class="col-xs-12 col-sm-11 col-lg-11">
<h1 class="text-center">La maison de l'architecte</h1>
</div>
</div>
</header>
</div>
<div class="container-fluid">
<div class="row">
<nav>
<div id="left">
<div class="col-xs-4 col col-sm-3 col-md-8">
<a href="#"><img src="assets/img/city1.jpg" alt="Nos réalisations"></a>
</div>
</div>
<div id="side1">
<div class="col-xs-4 col-sm-3 col-md-4">
<a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a>
</div>
</div>
<div id="side2">
<div class="col-xs-4 col-sm-3 col-md-4">
<a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a>
</div>
</div>
</nav>
</div>
<footer class="row">
<div class="col-xs-4 col-sm-3 col-md-12">
<button class="center-block">
<a class="btn btn-primary btn-circle" href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a class="btn btn-primary btn-circle" href="#"><i class="fa fa-facebook fa-2x"></i></a>
<a class="btn btn-primary btn-circle" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
<a class="btn btn-primary btn-circle" href="#"><i class="fa fa-flickr fa-2x"></i></a>
<a class="btn btn-primary btn-circle" href="#"><i class="fa fa-spotify fa-2x"></i></a>
</button>
</div>
</footer>
</div>
</body>
</html>
Le cours est top, c'est dommage que le quiz 1 soit un peu piégeux sur les 3 premières questions, c'est un peu décourageant, ce n'est pas le but je pense
Besoin de conseils sur l'activité 2 de Bootstrap, après pas mal de temps passé, je n'arrive pas à centrer le titre, créer les marges entres les images, et virer les marges extérieures, voici mon code.
Merci d'avance pour votre aide précieuse...
<!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;
}
/* harmonisation couleur fond */
.jumbotron {
background-color: #eef;
}
/* centrage titre */
h1 {
text-align: center;
}
nav img {
width: 100%;
}
.btn-circle {
width: 50px;
height: 50px;
border-radius: 25px;
padding: 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 {
padding: 0 0 10px 10px;
}
#side2 {
padding: 0 0 10px 10px;
}
}
</style>
</head>
<body>
<!-- utilisation jumbotron -->
<div class="jumbotron">
<header class="container-fluid">
<div class="row">
<div class="col-sm-1 col-lg-1 hidden-xs">
<a href="#"><img src="assets/img/maison.png" alt="logo"></a>
</div>
<div class="col-xs-12 col-sm-11 col-lg-11">
<h1 class="text-center">La maison de l'architecte</h1>
</div>
</div>
</header>
</div>
<div class="container-fluid">
<div class="row">
<nav>
<div id="left">
<div class="col-xs-4 col col-sm-3 col-md-8">
<a href="#"><img src="assets/img/city1.jpg" alt="Nos réalisations"></a>
</div>
</div>
<div id="side1">
<div class="col-xs-4 col-sm-3 col-md-4">
<a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a>
</div>
</div>
<div id="side2">
<div class="col-xs-4 col-sm-3 col-md-4">
<a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a>
</div>
</div>
</nav>
</div>
<footer class="row">
<div class="col-xs-4 col-sm-3 col-md-12">
<button class="center-block">
<a class="btn btn-primary btn-circle" href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a class="btn btn-primary btn-circle" href="#"><i class="fa fa-facebook fa-2x"></i></a>
<a class="btn btn-primary btn-circle" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
<a class="btn btn-primary btn-circle" href="#"><i class="fa fa-flickr fa-2x"></i></a>
<a class="btn btn-primary btn-circle" href="#"><i class="fa fa-spotify fa-2x"></i></a>
</button>
</div>
</footer>
</div>
</body>
</html>
L'internet c'est parti pour 1000 ans !
greffe de cheveux lipofilling mammaire tunisie bypass tunisie implant dentaire tunisie