modification contenu div CSS BootStrap

Sujet résolu

26 mars 2020 à 0:32:55

Bonjour,

Voilà je me suis mis tout récemment à Bootstrap et je pense avoir compris l'essentiel mais voilà je rencontre tout de même un problème et je pense qu'il est lié au fait que j’utilise Bootstrap, dans mon code html j'ai crée différentes div, certaines avec des Id d'autres avec des class Bootstrap sauf que voilà je n'arrive pas à donner un style css au contenu de mes div par exemple mon problème en cours c'est le fait que l'image ayant pour id "marine" ait une bordure comme ceci "border: 2px solid green" alors dans mon css j'ai fait plusieurs chose, j'ai commencé par simplement "#marine" ensuite, "#images .container.text-center .row #img1 img" puis tout le chemin depuis ma section home mais rien y fait aucun style ne s'applique à l'image par contre si je le renseigne directement dans la balise cela fonctionne parfaitement mais moi ce que je souhaite c'est justement pouvoir mettre ce code dans un fichier css, quelqu'un aurait une idée de là ou cela pourrait venir ?

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<link href="https://fonts.googleapis.com/css?family=Abel&display=swap" rel="stylesheet">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	    <link rel="stylesheet" href="CSS/Index.css">
		<title>SITE ANTOINE V2</title>
    </head>
    <body>
		<section id="home">
<div id="images" data-spy>
				<div class="container text-center" style="background-color: #1A1A1D; width: 100%; padding-top: 15px; padding-bottom: 15px">
					<div class="row">
						<div id="img1" align="center">
							<div class="col-lg-2">
								<img id="marine" src="Media/logo marine spatiale.png">
							</div>
						</div>
						<div id="img2" align="center">
							<div class="col-lg-3">
								<!--<img src="Media/empty.png">-->
								<img src="Media/logo armée de terre.png" style="width: 65%; border: 2px solid red">
							</div>
						</div>
						<div id="img3" align="center">
							<div class="col-lg-2">
								<img src="Media/logo aerospatiale.png" style="width: 100%; border: 2px solid red">
							</div>
						</div>
						<div id="img4" align="center">
							<div class="col-lg-3">
								<img src="Media/logo logistique.png" style="width: 65%; border: 2px solid red">
							</div>
						</div>
						<div id="img5" align="center">
							<div class="col-lg-2">
								<img src="Media/logo service santé.png" style="width: 100%; border: 2px solid red">
							</div>
						</div>
					</div>
				</div>
			</div>
</section>
<script type="text/javascript" src="js/Index.js"></script>
</body>
</html>

#home  #images .container.text-center .row #img1 .col-lg-2 img{
    border: 2px solid green;
    width: 120px;
}

-
Edité par AbcAbc6 26 mars 2020 à 2:02:54

AbcAbc6

26 mars 2020 à 2:02:08

Bonjour,

Passer votre code au validateur pour voir et corriger vos erreurs => https://validator.w3.org/

la balise <img> ne sort jamais sans son attribut alt obligatoire.

L'attribut align est obsolète, c'est en CSS que l'on centre.

Pas d'espace ni de caractère accentuer dans les noms de fichiers et de répertoire.

Pour votre problème vous devez surcharger une déclaration de poids élever.

Lire : https://www.emmanuelbeziat.com/blog/principes-du-css-poids-des-declarations/

StephenFarnault1

27 mars 2020 à 13:43:10

J'ai passé mon code html sur le vérificateur et il n'a déceler aucune erreur, pareil pour le CSS (J'ai été sur la version CSS du verificateur), j'ai modifier mon code pour éviter la surcharge mais voila j'ai toujours un problème, en responsive lorsque je passe format mobile ma classe ne se change pas, voici mon code peut-être quelque chose m'a échappé ? (C'est la classe imgCenter qui ne change pas au passage sous responsive)

<div id="images" data-spy>
				<div id="containerImages" class="container text-center">
					<div class="row">
						<div id="img1" class="text-center textContainer">
							<div class="col-lg-2 text-center imgCenter">
								<img id="marine" class="ImgSize" src="Media/LogoMarineSpatiale.png" alt="Marine">
							</div>
						</div>
						<div id="img2" class="text-center textContainer">
							<div class="col-lg-2 text-center imgCenter">
								<!--<img src="Media/empty.png">-->
								<img id="terre" class="ImgSize" src="Media/LogoArmeeDeTerre.png" alt="Armee de terre">
							</div>
						</div>
						<div id="img3" class="text-center textContainer">
							<div class="col-lg-2 text-center imgCenter">
								<img id="aerospatial" class="ImgSize" src="Media/LogoAerospatial.png" alt="Aerospatial">
							</div>
						</div>
						<div id="img4" class="text-center textContainer">
							<div class="col-lg-2 text-center imgCenter">
								<img id="logistique" class="ImgSize" src="Media/LogoLogistique.png" alt="Logistique">
							</div>
						</div>
						<div id="img5" class="text-center textContainer">
							<div class="col-lg-2 text-center imgCenter">
								<img id="sante" class="ImgSize" src="Media/LogoServiceSante.png" alt="Service Sante">
							</div>
						</div>
					</div>
				</div>
			</div>

#images{
    background-color: #1A1A1D; 
    width: 100%; 
    padding-top: 15px; 
    padding-bottom: 15px;
    color: white;
}

#containerImages{
    margin: 0 auto;
    width: 100%;
}

.imgCenter{
    margin: 0 auto; 
    width: 20%;
    border: 2px solid red;
}

.ImgSize {
    width: 100%;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px){
    .imgCenter{
        margin: 0 auto; 
        width: 100%;
        border: 2px solid red;
    }
    #img1{
        padding-bottom: 15px;
    }
    #img2{
        padding-bottom: 15px;
    }
    #img3{
        padding-bottom: 15px;
    }
    #img4{
        padding-bottom: 15px;
    }
    #img5{
        padding-bottom: 15px;
    }

    #conditions{
        padding-bottom: 25px;
    }
    #discord{
        padding-bottom: 25px;
    }
    #rsi{
        padding-bottom: 10px;
    }

    #playPause.lecture img{
        padding-bottom: 25px;
        padding-left: 25px;
        margin-right: 15px;
    }
    #playPause.pause img{
        padding-bottom: 25px;
        padding-left: 25px;
        margin-right: 15px;
    }
    #muteUnMute.unMute img{
        padding-bottom: 25px;
        padding-left: 25px;
        margin-right: 15px;
    }
    #muteUnMute.mute img{
        padding-bottom: 25px;
        padding-left: 25px;
        margin-right: 15px;
    }

    .videoContainer video{
        display: none;
    }
    .videoContainer .videoControls{
        display: none;
    }
    .videoContainer{
        background-image: url("../Media/fondresponsive.jpg");
    }
    #videoIntro .videoContainer h1{
        display: block;
        font-size: 60px;
        color: rgba(255, 255, 255, 1);
        font-family: 'Abel', sans-serif;
        text-align: justify;
    }
}