Partage
  • Partager sur Facebook
  • Partager sur Twitter

Bootstrap ne répond pas

Sujet résolu
    19 mars 2019 à 11:12:50

    Bonjour,

    J'ai créé une page en HTML. Je m'occupe de la mise en page avec Bootstrap. Je ne comprends pas un point. Tout semblait fonctionner jusqu'à présent comme je le souhaitais dans la partie supérieure de la page. Mais depuis quelques heures, je ne parviens pas à modifier la suite du document. Je travaille sur le header et quelle que soit la modification que j'apporte à mon css (aussi bien la taille que la couleur de la police, une marge entre deux éléments...), rien ne change à l'écran ! Je ne parviens pas à avancer depuis plusieurs heures. Je n'y vois peut être plus très bien. J'imagine que le problème n'est pas si complexe qu'il y parait mais je n'y comprends rien. Si quelqu'un pouvait jeter un oeil à mon code pour m'aiguiller sur ce qui me bloque, ce serait super sympas. Merci d'avance.

    HTML (début de la page) :

    <!DOCTYPE html>
    	<html lang="fr">
    		<head>
    			<meta charset="utf-8">
    			<meta name="viewport" content="width=device-width, initial-scale=1"/>
    			<link href="css/bootstrap.min.css" rel="stylesheet">
                <link rel="stylesheet" href="css/styleMaquetteVIDEO.css"/>
                <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
                <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
                <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
                <link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet">
                <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
                <link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet">
    			<title> VoyagesdeRêve : Bienvenue sur notre nouveau site ! </title>
                
    		</head>
    
    <!-- XS : smartphones /  SM : tablettes / MD : IPAD / LG : TV-->
    
    		<body>
                
                
    <!-- MENU NAVIGATION -->
                
                <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar">
                            <button type="button" class="navbar-toggle" data-togle="collapse" data-target="#navbar-collapse-main">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                                
                            <a class="navbar-brand" href="#" id="menu"> Voyages de Rêves </a>
                            <a class="right" href="#"> <img src="img/anglais_small.png" alt="Logo"/> </a>
                        </div>
                        
                        <div class="collapse navbar-collapse" id="navbar-collapse-main">
                            <ul class="nav navbar-nav navbar-left">
                                <li class="headnav"><a class="active" href="#"> Accueil </a></li>
                                <li class="headnav"> <a href="#"> Destinations</a></li>
                                <li class="headnav"> <a href="#"> Expériences</a></li>
                                <li class="headnav"> <a href="#"> Paroles de voyageurs</a></li>
                                <li class="headnav"> <a href="#"> Qui sommes nous ? </a></li>
                                <li class="headnav"> <a href="#"> Destinations sur-mesure du moment</a></li>
                                <li class="headnav"> <a href="#"> Contact</a></li>
                                <li class="headnav"> <a href="#"> Le Blog</a></li>
                            </ul>
                                
                        </div>
                    </div>    
                </nav>
                
    <!-- bloc -->
                
                <div class="bloc_page">
                
    <!-- MENU HEADER -->
                
                <header>
                    <div id="home">
                        <div class="landing-text">
                            <a href="#"><img src="img/logovoyagesderevespetit.jpg" alt="logo" id="logo" class="center-block"/> </a><br/>
                            <p class="accroche"> Et vos rêves se réalisent... </p> <br/>
                            <img src="img/icon.png" alt="Icone flèche pleine sur fond transparent dans un cercle" class="center-block" id="fleche"/> <br/>
                            <h1> Vivre l'Essentiel Oman : Au pays des Mille et Une Nuits <br/> </h1>
                            <p class="oman">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br/></p>
                            <a href="#" class="btn btn-default btn-lg"> Demandez un entretien gratuit </a>
                        </div>
                    </div>   
                </header>

    CSS : /*GLOBAL PAGE*/

    /*GLOBAL PAGE*/
    
    html, body
    {
        height: 100%;
        width: 100%;
        background: #000000;
    }
    
    .bloc_page
    {
        height: auto;
        width: auto;
        background: url(../img/essayonsv11.png) no-repeat center; 
        position: relative;
        min-height: 3620px;
        min-width: 1100px;   
    }
    
    /* MENU DE NAVIGATION */
    #menu
    {
        color: #58c4c4;
        font-family : "OpenSans-Regular";
        size: 24px;
        font-weight: bold;
        font-family: 'Open Sans', sans-serif;    
    }
    
    .right
    {
    
        position: absolute;
        right: 10px;
        top: 10px;
    }
    
    .headnav
    {
        font-family: 'Lato', sans-serif;
        font-size: 16px;
        font-weight: bold;
    }
    
    navbar-collapse-main
    {
        margin-bottom: 30px;
    }
    
    .navbar-brand 
    {
        min-height: 55px;
        padding: 15px 15px 15px; 
    }
    
    .navbar
    {
        margin-bottom: 0px;    
    }
    
    .navbar-inverse .navbar-nav li a 
    {
        color: #cfa9fc;
    }
    
    
    .navbar-inverse .navbar-nav li a:hover
    {
        color: #58c4c4;
        margin-left: 15px;
        text-decoration: underline;
    }
    
    
    .navbar-inverse .navbar-nav li a.active
    {
        color: #ffffff;
    }
    
    /* HEADER */
    
    #home
    {
        padding-top: 140px;
        margin: auto;
        width: 1000px;
    }
    
    #logo
    {
        min-height: 55px;
        margin-top: 10px;
        margin-bottom: 10px;  
    }
    
    .accroche
    {
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
        color: #713a84;
        text-align: center;
    }
    
    
    .oman
    {
           font-size: 12px;
           font-family: 'Open Sans', sans-serif;
           color: #ffffff; 
    }
    
    
    .fleche
    {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
        position: absolute;
    }
    
      
    .landing-text
    {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    
    h1
    {
        font-family: 'Open Sans', sans-serif;
        font-size: 20px;
        color: #b6a8be;
        font-weight: normal;
        margin-top: 14px;
          
    }
    
    .btn-default
    {
        height: 50px;
        width: 270px;
        position: absolute; 
        background-color: #58c4c4;
        text-align: center;
        padding-top: 12px;
        font-family: 'Roboto', sans-serif;
        font-style: normal;
        color: #ffffff;
        font-size: 18px;
    }
    
    /* SECTION 1 : BEST OF */
    
    h2
    {
        font-family: 'Open Sans', sans-serif;
        font-style: normal;
        font-size: 30px;
        color: #dcd7df;
    }
    
    h3
    {
        font-family: 'Lato', sans-serif;
        font-size: 20px; 
        color: #80578f;
        font-weight: bold;
        margin-bottom: 5px;
    }
    
    .voyage
    {
        font-family: 'Lato', sans-serif;
        font-size: 16px;
        font-weight: normal;
        color: #7a8387;
        text-align: justify; 
        line-height: 1.9;
    }
    
    h4
    {
        font-family: 'Lato', sans-serif;
        font-size: 16px;
        color: #9265a1;
        font-weight: bold;
        text-align: center;
    }
    
    .p_123
    {
        font-family: 'Lato', sans-serif;
        font-weight: normal;
        font-size: 16px;
        color: #828b8e;
        text-align:center;
    }
    
    
    





    Merci !

    -
    Edité par laure79 19 mars 2019 à 11:16:29

    • Partager sur Facebook
    • Partager sur Twitter
      19 mars 2019 à 12:38:52

      Bonjour Charbon, 

      Merci mais apparemment vider le cache ne change rien pour moi. 😣

      • Partager sur Facebook
      • Partager sur Twitter
        19 mars 2019 à 13:10:07

        Tu avais comme un problème de mise en forme du code CSS o_O, j'ai passé un coup de "beautifier" ça a regler le problème.

        -
        Edité par Charbon 19 mars 2019 à 13:12:51

        • Partager sur Facebook
        • Partager sur Twitter
          19 mars 2019 à 13:39:00

          Re bonjour Charbon,

          Je ne comprends pas où est le problème. J'ai utilisé Beautifier css et corrigé les doublons mais rien ne change. J'ai toujours le même problème...

          -
          Edité par laure79 19 mars 2019 à 14:10:46

          • Partager sur Facebook
          • Partager sur Twitter
            19 mars 2019 à 14:10:51

            LaureDevillers a écrit:

            Re bonjour Charbon,

            Je ne comprends pas où est le problème. Pourrais tu me dire à quel niveau tu l'as trouvé stp ? J'ai collé mon code dans Beautifier CSS mais ça ne me signale rien du tout. C'est la première fois que je l'utilise. Merci.

            -
            Edité par LaureDevillers il y a 28 minutes


            Tiens essaye de copier coller a partir d'ici et vérifie bien que tout tes fichiers existe.

            https://pastebin.com/gdy2pGbz

            -
            Edité par Charbon 19 mars 2019 à 14:10:58

            • Partager sur Facebook
            • Partager sur Twitter
              19 mars 2019 à 16:04:29

              Re bonjour Charbon,

              J'ai résolu mon souci ! Merci, c'était tout bête finalement. Bonne journée.

              • Partager sur Facebook
              • Partager sur Twitter

              Bootstrap ne répond pas

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              • Editeur
              • Markdown