[Résolu] Bootstrap ne répond pas par laure79 - page 1

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

laure79

19 mars 2019 à 11:12:50

Charbon

19 mars 2019 à 11:29:12

Salut,

le cache du navigateur peut être?

Menu burger light sans JS

19 mars 2019 à 12:38:52

Bonjour Charbon,

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

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

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

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

19 mars 2019 à 16:04:29

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

Bootstrap ne répond pas

Bootstrap ne répond pas

Supprimer

Modérer

Signaler le message aux modérateurs