CONNEXION
  • RetourJeux
    • Tests
    • Soluces
    • Previews
    • Sorties
    • Hit Parade
    • Les + attendus
    • Tous les Jeux
  • RetourActu
    • Culture Geek
    • Astuces
    • Réalité Virtuelle
    • Rétrogaming
    • Toutes les actus
  • RetourHigh-Tech
    • Actus JVTECH
    • Bons plans
    • Tutoriels
    • Tests produits High-Tech
    • Guides d'achat High-Tech
    • JVTECH
  • 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
    • Xbox Series
    • Overwatch 2
    • FUT 23
    • League of Legends
    • Genshin Impact
    • Tous les Forums
  • PC
  • PS5
  • Xbox Series
  • PS4
  • One
  • Switch
  • Wii U
  • iOS
  • Android
  • MMO
  • RPG
  • FPS
En ce moment Genshin Impact Valhalla Breath of the wild Animal Crossing GTA 5 Red dead 2
Etoile Abonnement RSS

Sujet : [Bootstrap] Quelques questions !

DébutPage précedente
1
Page suivantePage suivante
OVirtuels OVirtuels
MP
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
MP
Niveau 5
17 septembre 2014 à 14:29:12

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

Pseudo supprimé
Niveau 10
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
MP
Niveau 10
17 septembre 2014 à 22:46:09

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

DébutPage précedente
1
Page suivantePage suivante
Répondre
Prévisu
?
Victime de harcèlement en ligne : comment réagir ?
Infos 0 connecté(s)

Gestion du forum

Modérateurs : Thymotep
Contacter les modérateurs - Règles du forum

Sujets à ne pas manquer

La vidéo du moment