Hey hey hey !
Je suis actuellement en train de créer un site, et j'apprends au fur et à mesure Bootstrap pour pouvoir l'adapter à mon site. J'ai quelques petites questions de débutant, mais avant je vous file mon code :
<!DOCTYPE html>
<html>
<head>
<title>OV</title>
<meta charset="utf-8"?>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/tuto.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 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/libs/html5shiv/3.7.0/h
tml5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
respond.min.js"></script>
<![endif]-->
<style type="text/css">
body { padding: 0px; margin: 0px; }
[class*="col"] { margin-bottom: 30px;
}
.container {
padding-top: 20px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: 70px;
}
</style>
</head>
<body>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4 col-sm-3 col-md-2" ><img src="banniere.jpg" width="1200px" style="border-width: 1px; border-color: black; border-style: solid;"></div></div>
<div class="row">
<div class="col-md-offset-3 col-md-6" style="border-width: 1px; border-color: black; border-style: solid;">Menu</div></div>
<div class="row">
<div class="col-md-2" style="border-width: 1px; border-color: black; border-style: solid;"><p> Règles :
<li>Les réponses s'écrivent en minuscule. </li>
<br />
<li>Si vous voulez de l'aide à propos d'un niveau, n'hésitez pas à consulter la partie "Indices"
du site
</li>
</p></div>
<div class="col-md-offset-1 col-md-6" style="border-width: 1px; border-color: black; border-style: solid;"><p>Bienvenue sur OV</p></div>
<div class="col-md-offset-1 col-md-2" style="border-width: 1px; border-color: black; border-style: solid;">Dédicasses</div></div>
<div class="row">
<div class="col-md-12" style="border-width: 1px; border-color: black; border-style: solid;">Pied de page</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Et voici ce que cela rend :
http://puu.sh/bBxCh/7ad4f3adb2.jpg
Première question : Vous voyez dans mon code que, par exemple, pour le pied de page j'utilise bien les 12 colonnes, or on voit bien dans l'image que les limites du pied de page ne touchent pas les 2 extrémités de l'écran. Comment cela se fait ? Comment régler ça ? (Egalement, quand je rajoute des <div class="row"> au début du code, cela agrandit petit à petit les colonnes et au final j'arrive au résultat que je voulais mais... c'est étrange non ? oO)
Deuxième question : Vous voyez que ma bannière, je lui ai mit un width="1200px", mais quand je lui met un width="100%" cela réduit l'image à mort (on ne la voit presque pas). Comment faire pour qu'elle ai la "taille" des 12 colonnes en mettant "simplement" width="100%" ?
Troisième question : On voit bien que la partie "Règles" commence avant la "Bannière", ce n'est pas aligné, et de même avec la fin du pied de page, or dans le code on voit que j'utilise les "mêmes" colonnes. Est-ce un problème de ma part ? Un problème "normal" ? Comment le régler ?
Un GRAND merci à celui qui prendra le temps de répondre à mes questions. Bonne soirée/journée.
Avec bootstrap, t'as ça : http://puu.sh/bBxCh/7ad4f3adb2.jpg ?
Déjà ton HTML est loin d'être correct.
Tu as des balises </div> en excès à la fin du code.
Les balises <li> doivent être des enfants d'une balise <ol> ou <ul>.
Tu utilises du style dans l'HTML pour certains div, alors qu'ils ont une class.
Une 'class' définit un élément qui apparaît plusieurs fois, pour un élément unique il faut utiliser un 'id'.
Apprendre les bases de l'HTML/CSS ne serait pas du luxe je crois.
Tu peux te passer de bootstrap pour commencer je crois.