CONNEXION
  • RetourJeux
    • Sorties
    • Hit Parade
    • Les + populaires
    • Les + attendus
    • Soluces
    • Tous les Jeux
    • Gaming
  • RetourActu Gaming
    • News
    • Astuces
    • Tests
    • Previews
    • Toute l'actu gaming
  • RetourBons plans
    • Bons plans
    • Bons plans Smartphone
    • Bons plans Hardware
    • Bons plans Image et Son
    • Bons plans Amazon
    • Bons plans Cdiscount
    • Bons plans Decathlon
    • Bons plans Fnac
    • Tous les Bons plans
  • RetourJVTech
    • Actus High-Tech
    • Intelligence Artificielle
    • Smartphones
    • Mobilité urbaine
    • Hardware
    • Image et son
    • Tutoriels
    • Tests produits High-Tech
    • Guides d'achat High-Tech
    • JVTech
  • RetourCulture
    • Actus Culture
    • Culture
  • RetourVidéos
    • A la une
    • Gaming Live
    • Vidéos Tests
    • Vidéos Previews
    • Gameplay
    • Trailers
    • Chroniques
    • Replay Web TV
    • Toutes les vidéos
  • RetourForums
    • Hardware PC
    • PS5
    • Switch 2
    • Xbox Series
    • Switch
    • Pokemon pocket
    • FC 25 Ultimate Team
    • League of Legends
    • Tous les Forums
  • PC
  • PS5
  • Xbox Series
  • Switch 2
  • PS4
  • One
  • Switch
  • iOS
  • Android
  • MMO
  • RPG
  • FPS
En ce moment Genshin Impact Valhalla Breath of the wild Animal Crossing GTA 5 Red dead 2
Liste des sujets

[Bootstrap] Quelques questions !

OVirtuels
OVirtuels
Niveau 4
16 septembre 2014 à 20:14:11

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. :)

Mystogrey
Mystogrey
Niveau 5
17 septembre 2014 à 14:29:12

Avec bootstrap, t'as ça : http://puu.sh/bBxCh/7ad4f3adb2.jpg ? :rire2:

Pseudo supprimé
Pseudo supprimé 17 septembre 2014 à 15:53:16

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.

Kimpeek
Kimpeek
Niveau 10
17 septembre 2014 à 22:46:09

Tu peux te passer de bootstrap pour commencer je crois. :noel:

Sous forums
  • Aide à l'achat Mac
  • Création de Jeux
  • Linux
  • Programmation
  • Création de sites web
  • Internet
  • Steam Deck
  • Macintosh
  • Hardware
La vidéo du moment