Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème CSS en Localhost

    27 mai 2017 à 12:44:32

    Hello à Tous !! 

    Voilà je me permet de venir vous posez une petite question.

    J'utilise Wamp Server 2.5 Pour Dev en Local. J'ai un soucis quand je demande au css de me mettre une couleur en Background-color rien ne ce passe en localhost .... :(

    Par contre si je me prend mon fichier dans le dossier c/wamp/www/style.css et que je fait un glisser déposer sa marche .... 

    je vous joints les fichiers pour que vous puisez voir mon soucis 

    #actu_1 {
    	width: 200px;
    	height: 200px;
    	background-color: blue;
    	margin-left: 20px;
    	margin-top: 30px;
    }
    	<section id="actu_1">
    		<?php
    		@mysql_connect("localhost", "root", "");
    		mysql_select_db("lafamillebdlr");
    		// On récupère les cinq dernières news.
    		$retour = mysql_query('SELECT * FROM actu_bdlr ORDER BY id DESC LIMIT 0, 1');
    		while ($donnees = mysql_fetch_array($retour))
    		{
    		?>
    	<div id="actu_1">
    
        <h3 style="color: red;">
            <?php echo $donnees['Titre']; ?>
        </h3>
    
        <p>
        <?php
        // On enlève les éventuels antislashs, PUIS on crée les entrées en HTML (<br />).
        $contenu = nl2br(stripslashes($donnees['Sous_Titre']));
        echo $contenu;
        ?>
        </p>
    	</div>
    	<?php
    	} // Fin de la boucle des <italique>news</italique>.
    	?>
    • Partager sur Facebook
    • Partager sur Twitter
      27 mai 2017 à 13:06:34

      Bonjour,

      si ce que tu nous montres, c'est tout ton code, alors tu as simplement oublié de lier le CSS au HTML :)

      • Partager sur Facebook
      • Partager sur Twitter

      Pas d'aide concernant le code par MP, le forum est là pour ça :)

        27 mai 2017 à 13:20:12

        <!DOCTYPE html>
        <html lang="fr">
        <head>
        	<title>Bruno dans la Radio - on Officiel</title>
        	<meta charset="utf-8">
        	<link rel="stylesheet" type="text/css" href="style.css">
        	<?php $bdd = new PDO('mysql:host=localhost;dbname=lafamillebdlr', 'root', ''); ?>
        </head>
        
        <body>
        <main id="bloc_centrale">
        	<!-- Haut de Page -->
        	<header id="header">
        			<img src="img/18192749_1277155685738166_7573985723461262686_o.jpg" alt="defit XXL eliot osera t-il relever avec listerine" width="1200" height="400"><!-- Baniere Promotionnel -->
        	<!-- Logo de la Radio + Rsx Soscio + Zone Menbres -->
        	</header>
        	<!-- Fin Haut de Page -->
        	<!-- Menu Navigation -->
        	<nav id="menu_navigation">
        		<ul>
        			<li>
        				<a href="index.php">Acceuil</a>
        			</li>
        		</ul>
        		<ul>
        			<li>
        				<a href="#">Les Chroniques</a>
        				<ul>
        					<li><a href="pages/chroniques/page-bruno-paie-vos-factures.php">Il paie vos Factures</a></li>
        					<li><a href="pages/chroniques/page-le-vacher-time.php">Le Vacher Time</a></li>
        					<li><a href="pages/chroniques/page-le-chiffre-du-jour.php">Le Chiffre du jour</a></li>
        					<li><a href="pages/chroniques/page-le-jeux-des-30-secondes.php">Le Jeux des 30 Sec</a></li>
        					<li><a href="pages/chroniques/page-la-chanson-du-jour.php">La chanson du Jour</a></li>
        					<li><a href="pages/chroniques/page-le-defi-eliot.php">Le defi d'éliot</a></li>
        					<li><a href="#">Le JPI</a></li>
        				</ul>
        			</li>
        		</ul>
        		<ul>
        			<li>
        				<a href="#">La Famille</a>
        				<ul>
        					<li><a href="pages/equipes/page-bruno-guillon.php">Bruno</a></li>
        					<li><a href="pages/equipes/page-christina.php">Christina</a></li>
        					<li><a href="pages/equipes/page-eliot.php">Eliot</a></li>
        					<li><a href="pages/equipes/page-vacher.php">Vacher</a></li>
        					<li><a href="pages/equipes/page-eliot.php">Le JPI</a></li>
        				</ul>
        			</li>
        		</ul>
        		<ul>
        			<li>
        				<a href="http://www.dailymotion.com/video/xxtuy6_live-dans-les-studios-de-fun-radio_music" target="_blank">Live Video</a>
        			</li>
        		</ul>
        		<ul>
        			<li>
        				<a href="pages/page-blog-bruno-dans-la-radio.php">Actu</a>
        			</li>
        		</ul>
        		<ul>
        			<li>
        				<a href="index.php">Week La Famlille</a>
        			</li>
        		</ul>
        		<ul>
        			<li>
        				<a href="#">Contacter</a>
        				<ul>
        					<li><a href="pages/contact-equipes/page-contact-bruno-guillon.php">Bruno</a></li>
        					<li><a href="pages/contact-equipes/page-contact-christina.php">Christina</a></li>
        					<li><a href="pages/contact-equipes/page-contact-eliot.php">Vacher</a></li>
        					<li><a href="pages/contact-equipes/page-contact-vacher.php">Eliot</a></li>
        					<li><a href="pages/contact-equipes/page-contact-vacher.php">Le JPI</a></li>
        				</ul>
        			</li>
        		</ul>
        	</nav>
        	<!-- Fin Menu Navigation -->
        	<!-- Slider Image qui défile -->
        	<section id="slider">
        	<img src="img/fun-brunoradio.png" alt="Bruno Dans La Radio" >
        	</section>
        	<!-- Fin Slider Image qui défile -->
        	<!-- Section Radio -->
        	<section id="radio">
        		<a href="#">
        			<img alt="Bruno Dans Ton Salon" class="bruno_dans_ton_salon" src="img/Ckj-j_bWsAA6D_a.jpg" width="380" height="397">
        		</a>
        			<div id="inscription">
        				<a href="#"><p id="titre-inscription">INSCRIPTION</p></a>
        			</div>
        	</section>
        	<!-- Fin Section Radio -->
        	<section id="logo">
        		<p id="on-air">ON AIR</p>
        		<img alt="boutton play" class="logo-play" src="img/play-309041_960_720.png" width="20" height="20"></a>
        	</section>
        
        	<!-- Actualiter A La Une -->
        	<section id="actualite">
        	<a href="pages/actu/blog_la_famille_bdlr"><h3 style="color: #ea0180;" id="titre_actu_bruno_dans_la_radio">ACTU BRUNO DANS LA RADIO</h3></a>
        	<!-- Actualité Une -->
        	<section id="actu_1">
        		<?php
        		@mysql_connect("localhost", "root", "");
        		mysql_select_db("lafamillebdlr");
        		// On récupère les cinq dernières news.
        		$retour = mysql_query('SELECT * FROM actu_bdlr ORDER BY id DESC LIMIT 0, 1');
        		while ($donnees = mysql_fetch_array($retour))
        		{
        		?>
        	<div id="actu_1">
        
            <h3 style="color: red;">
                <?php echo $donnees['Titre']; ?>
            </h3>
        
            <p>
            <?php
            // On enlève les éventuels antislashs, PUIS on crée les entrées en HTML (<br />).
            $contenu = nl2br(stripslashes($donnees['Sous_Titre']));
            echo $contenu;
            ?>
            </p>
        	</div>
        	<?php
        	} // Fin de la boucle des <italique>news</italique>.
        	?>
        	</section>
        	<!-- Fin Actualité Une -->
        	</section>
        	<!-- Fin Actualiter A La Une -->
        	<!-- Podcast Bruno dans la Radio -->
        	<section id="dernier_clip">
        	<a href="pages/chroniques/Podcast-bdlr-a-emporter/page-podcast-bdlr-a-emporter.php"><h3 style="color: #ea0180;" id="titre_podcast_bdlr">EMPORTE AVEC TOI LE MEILLEUR DE BDLR</h3></a>
        	<!-- Podcast Bruno dans la Radio Podcast-1 -->
        	<div id="artiste_1">
        	  <img alt="vignette podcast bdlr un" class="vignette_podcast_bdlr_un" src="img/175x175bb.jpg" width="100" height="100">
        	 	<a href="pages/chroniques/Podcast/page-podcast-bdlr.php"><h4 style="color: #ea0180;">#BDLR</h4></a>
        	 	<a href="pages/chroniques/Podcast/page-podcast-bdlr.php"><p style="color: #007fc6;">11.05.2017</p></a>
        	</div>
        	<!-- Fin Podcast Bruno dans la Radio Podcast-1 -->
        	<!-- Podcast Bruno dans la Radio Podcast-2 -->
        	 <div id="artiste_2">
        		<img alt="vignette podcast bdlr deux"  class="vignette_podcast_bdlr_deux" src="img/images.jpg" width="100" height="100">
        	 	<a href="pages/chroniques/Podcast/page-podcast-bdlr.php"><h4 style="color: #ea0180;">#BDLR</h4></a>
        	 	<a href="pages/chroniques/Podcast/page-podcast-bdlr.php"><p style="color: #007fc6;">10.05.2017</p></a>
        	 </div>
        	<!-- Fin Podcast Bruno dans la Radio Podcast-2 -->
        	<!-- Podcast Bruno dans la Radio Podcast-3 -->
        	 <div id="artiste_3">
        	  <img alt="vignette podcast bdlr trois" class="vignette_podcast_bdlr_trois" src="img/175x175bb.jpg" width="100" height="100">
        	 	<a href="pages/chroniques/Podcast/page-podcast-bdlr.php"><h4 style="color: #ea0180;">#BDLR</h4></a>
        	 	<a href="pages/chroniques/Podcast/page-podcast-bdlr.php"><p style="color: #007fc6;">09.05.2017</p></a>
        	 </div>
        	<!-- Fin Podcast Bruno dans la Radio Podcast-3 -->
        	<!-- Podcast Bruno dans la Radio Podcast-4 -->
        	 <div id="artiste_4">
        		<img alt="vignette podcast bdlr quatre" class="vignette_podcast_bdlr_quatre" src="img/images.jpg" width="100" height="100">
        	 	<a href="pages/chroniques/Podcast/page-podcast-bdlr.php"><h4 style="color: #ea0180;">#BDLR</h4></a>
        	 	<a href="pages/chroniques/Podcast/page-podcast-bdlr.php"><p style="color: #007fc6;">08.05.2017</p></a>
        	 </div>
        	<!-- Fin Podcast Bruno dans la Radio Podcast-4 -->
        	<!-- Podcast Bruno dans la Radio Podcast-5 -->
        	 <div id="artiste_5">
        		<img alt="vignette podcast bdlr cinq" class="vignette_podcast_bdlr_cinq" src="img/175x175bb.jpg" width="100" height="100">
        	 	<a href="pages/chroniques/Podcast/page-podcast-bdlr.php"><h4 style="color: #ea0180;">#BDLR</h4></a>
        	 	<a href="pages/chroniques/Podcast/page-podcast-bdlr.php"><p style="color: #007fc6;">07.05.2017</p></a>
        	 </div>
        	<!-- Podcast Bruno dans la Radio Podcast-5 -->
        	</section>
        	<!-- Fin Podcast Bruno dans la Radio -->
        	<!-- Le Meilleur de Bruno Guillon dans VETP -->
        	<section id="dernier_podcast">
        	<a href="index.html"><h3 style="color: #ea0180;" id="titre_podcast_bruno_vetp">LE MEILLEUR DE BRUNO DANS VTEP EN VIDEO</h3></a>
        	<!-- Podcast-1 VTEP -->
        	<section id="test">
        	 	<a href="pages/chroniques/Podcast-VTEP-bruno-guillon/podcast-VTEP-bruno-guillon-un.php"><img alt="bruno guillon dans VTEP" class="bruno_guillon_dans_VTEP" src="img/vendredi-tout-est-permis-420x470.jpg" width="220" height="220"></a>
        		<!-- Boutton Partage -->
        		<div class="rsxsocio">
        		<iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fwww.facebook.com%2FFansbrunoguillon%2F&layout=button&size=small&mobile_iframe=true&appId=234106863305470&width=75&height=20" width="75" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
        		<a href="https://twitter.com/share" class="twitter-share-button" data-text="#lafamillebdlr" data-via="bdlr">Tweet</a>
        		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        		</div>
        		<!-- Fin Boutton Partage -->
        	 	<a href="pages/chroniques/Podcast-VTEP-bruno-guillon/podcast-VTEP-bruno-guillon-un.php"><h3 style="color: #ea0180;">BRUNO VTEP 21/05/17</h3></a>
        	 	<a href="pages/chroniques/Podcast-VTEP-bruno-guillon/podcast-VTEP-bruno-guillon-un.php"><p style="color: #007fc6;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></a>
        	</section>
        	<!-- Fin Podcast-1 VTEP -->
        	<!-- Podcast-2 VTEP -->
        	<section id="test_1">
        	 	<a href="pages/chroniques/Podcast-VTEP-bruno-guillon/podcast-VTEP-bruno-guillon-deux.php"><img alt="bruno guillon dans VTEP deux" class="bruno_guillon_dans_VTEP_deux" src="img/vendredi-tout-est-permis-420x470.jpg" width="220" height="220"></a>
        		<!-- Boutton Partage -->
        		<div class="rsxsocio">
        		<iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fwww.facebook.com%2FFansbrunoguillon%2F&layout=button&size=small&mobile_iframe=true&appId=234106863305470&width=75&height=20" width="75" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
        		<a href="https://twitter.com/share" class="twitter-share-button" data-text="#lafamillebdlr" data-via="bdlr">Tweet</a>
        		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        		</div>
        		<!-- Fin Boutton Partage -->
        	 	<a href="pages/chroniques/Podcast-VTEP-bruno-guillon/podcast-VTEP-bruno-guillon-deux.php"><h3 style="color: #ea0180;">BRUNO VTEP 03/02/17</h3></a>
        	 	<a href="pages/chroniques/Podcast-VTEP-bruno-guillon/podcast-VTEP-bruno-guillon-deux.php"><p style="color: #007fc6;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></a>
        	</section>
        	<!-- Fin Podcast-2 VTEP -->
        	<!-- Podcast-3 VTEP -->
        	<section id="test_2">
        	 	<a href="pages/chroniques/Podcast-VTEP-bruno-guillon/podcast-VTEP-bruno-guillon-trois.php"><img alt="bruno guillon dans VTEP trois" class="bruno_guillon_dans_VTEP_trois" src="img/vendredi-tout-est-permis-420x470.jpg" width="220" height="220"></a>
        		<!-- Boutton Partage -->
        		<div class="rsxsocio">
        		<iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fwww.facebook.com%2FFansbrunoguillon%2F&layout=button&size=small&mobile_iframe=true&appId=234106863305470&width=75&height=20" width="75" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
        		<a href="https://twitter.com/share" class="twitter-share-button" data-text="#lafamillebdlr" data-via="bdlr">Tweet</a>
        		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        		</div>
        		<!-- Fin Boutton Partage -->
        	 	<a href="pages/chroniques/Podcast-VTEP-bruno-guillon/podcast-VTEP-bruno-guillon-trois.php"><h3 style="color: #ea0180;">BRUNO VTEP 31/12/16</h3></a>
        	 	<a href="pages/chroniques/Podcast-VTEP-bruno-guillon/podcast-VTEP-bruno-guillon-trois.php"><p style="color: #007fc6;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></a>
        	 </section>
        	 <!-- Fin Podcast-3 VTEP -->
        	</section>
        	<!-- Fin Le Meilleur de Bruno Guillon dans VETP -->
        	<!-- Cotes Droit site web -->
        	<!-- Module Facebook -->
        	<section id="facebook">
        		<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FFansbrunoguillon%2F&tabs=timeline&width=380&height=600&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=234106863305470" width="380" height="600" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
          </section>
        	<!-- Fin Module Facebook -->
        	<!-- -->
        	<section id="bloc_blanc">
        		<a href="https://www.lafamilleofficiel.fr/" target="_blank">
        		<video id="promo_lafamille"muted loop autoplay="true" src="video/promo_lafamille.mp4" type="video/mp4" width="380"></video>
        		<p style="color: white; margin-left: 50px; margin-top: 0px;" >#LaFamille + Qu'une marque un mode de vie</p></a>
        	</section>
        	<!-- -->
        	<section id="bloc_blanc_bis">
        		<h3 id="titre_bruno_paie_vos_factures" style="color: #ea0180;">BRUNO PAIE VOS FACTURES</h3>
        		<img id="bruno_paie_vos_factures" src="img/bruno_paie_vos-facture.jpg" alt="Bruno Paie Vos Factures">
        		<a href="http://www.funradio.fr" target="_blank"><img id="logo_funradio" src="img/Fun_Radio.png" alt="logo fun radio" width="200" height="75"></a>
        	</section>
        	<!-- Fin Cotes Droit site web -->
        	<!-- Bas de Page -->
        	<footer id="footer">
        		<!-- Section Footer une -->
        		<section id="section_footer_une">
        			<a href="#"><p style="color: #007fc6;" id="">Plan du Site</p></a>
        			<a href="#"><p style="color: #007fc6;" id="">Nous Rejoindre</p></a>
        			<a href="#"><p style="color: #007fc6;" id="">Newsletters</p></a>
        			<a href="#"><p style="color: #007fc6;" id="">Fréquences</p></a>
        		</section>
        		<!-- Fin Section Footer une -->
        		<!-- Section Footer deux -->
        		<section id="section_footer_deux">
        			<a href="#"><p style="color: #007fc6;" id="">Blog La Famille</p></a>
        			<a href="#"><p style="color: #007fc6;" id="">Forum la Famille</p></a>
        			<a href="#"><p style="color: #007fc6;" id="">Nous rejoindre</p></a>
        			<a href="admin/index_admin_log.php"><p style="color: #007fc6;" id="">Admin</p></a>
        		</section>
        		<!-- Fin Section Footer deux -->
        		<!-- Section Footer trois -->
        		<section id="section_footer_trois">
        			<a href="https://www.facebook.com/Fansbrunoguillon/" target="_blank"><p style="color: #007fc6;" id="">Nous suivre sur @Facebook</p></a>
        			<a href="https://twitter.com/" target="_blank"><p style="color: #007fc6;" id="">Nous suivre sur #Twitter</p></a>
        			<a href="https://www.instagram.com/" target="_blank"><p style="color: #007fc6;" id="">Nous suivre sur Instagram</p></a>
        			<a href="#"><p style="color: #007fc6;" id="">Le Staff</p></a>
        		</section>
        		<!-- Fin Section Footer trois -->
        		<section id="section_resseaux-socio">
        			<a href="https://www.facebook.com/Fansbrunoguillon/" target="_blank"><img class="mini-logo-facebook" src="img/mini-logo.png" alt="logo Facebook" width="25" height="25"></a>
        			<a href="https://twitter.com/" target="_blank"><img class="mini-logo-twitter" src="img/logotwitter.png" alt="logo Twitter" width="25" height="25"></a>
        			<a href=""><img class="mini-logo-snapchat" src="img/Logo-Snapchat.png" alt="logo Snapchat" width="25" height="25"></a>
        			<a href=""><img class="mini-logo-instagram" src="img/instagram-Logo-PNG.png" alt="logo Instagram" width="25" height="25"></a>
        		</section>
        
        		<p id="plus" style="color: #ea0180;">Création site web Elly Koop - Contacter le développeur Web</p>
        
        	</footer>
        	<!-- Fin de Page -->
        </main>
        </body>
        </html>
        
        /* Declaration de base css pour le site Famille BDLR */
        body {
        	background-color: #007fc6;
        	width: 1280px;
        	height: 1000px;
        }
        a {
        	text-decoration: none;
        }
        h1 {
        	color: black;
        }
        /* Declaration de base css pour le site Famille BDLR */
        
        /* Media - Responsive disegne */
        @media screen and (max-width: 1920px) {
        	#bloc_centrale {
        	margin-left: 130px;
        	}
        }
        @media screen and (max-width: 1600px) {
        	#bloc_centrale {
        	margin-left: 20px;
        	}
        }
        @media screen and (max-width: 1280px){
        	#bloc_centrale {
        	margin-left: -150px;
        	}
        }
        /* Fin Media - Responsive disegne */
        
        /* _______________________________________________________  Menu Header  _______________________________________________________ */
        #header {
        	position: absolute;
        	top: 0px;
        	width: 1200px;
        	height: 400px;
        	margin-left: 170px;
        }
        #on-air {
        	position: absolute;
        	color: red;
        	font-size: 25px;
        	margin-top: 393px;
        	margin-left: 1235px;
        }
        /* _______________________________________________________  Menu Navigation  _______________________________________________________ */
        #menu_navigation {
        	position: absolute;
        	top: 148px;
        	margin-top: 251px;
        	margin-left: 170px;
        	width: 1280px;
        	z-index: 1;
        }
        #menu_navigation ul {
        	margin:0px;
        	padding:0px;
        	line-height: 30px;
        }
        #menu_navigation li {
        	 list-style-type:none;
        	 float: left;
        	 position: relative;
        	 background-color: #ea0180;
        	 border-right: :0px solid #fff;
        	 margin-top: 1px;
        }
        #menu_navigation ul li a {
        	color: #FFFFFF;
        	text-decoration:none;
        	width: 150px;
        	height: 30px;
        	float: left;
        	text-align: center;
        	border-right:0.5px solid #fff;
        	font-size: 18px;
        }
        #menu_navigation ul ul {
        	position: absolute;
        	top: 30px;
        	visibility: hidden;
        }
        #menu_navigation ul li:hover ul {
        	visibility: visible;
        	margin-top: 0px;
        }
        #menu_navigation li:hover li {
        	background-color: #007fc6;
        	border: 0px solid #007fc6;
        	margin-top: 0px;
        }
        #menu_navigation li li:hover {
        	background-color: #ea0180;
        	border: 1px solid #ea0180;
        }
        #menu_navigation li li:hover ul {
        	background-color: #5c722c;
        }
        /* _______________________________________________________  Fin Menu Navigation  _______________________________________________________ */
        /* _______________________________________________________  Slider  _______________________________________________________ */
        #slider {
        	position: absolute;
        	top: 180px;
        	margin-top: 250px;
        	margin-left: 170px;
        	width: 816px;
        	height: 500px;
        	background-color: #007fc6;
        }
        #slider img { /* On cible l'image du Slider */
        	width: 816px;
        	height: 500px;
        }
        /* _______________________________________________________  Fin Slider  _______________________________________________________ */
        #logo .logo-play { /* Logo play pour lancer la radio */
        	position: absolute;
        	margin-top: 396px;
        	margin-left: 1338px;
        }
        /* _______________________________________________________  Section Radio  _______________________________________________________ */
        #radio {
        	position: absolute;
        	width: 400px;
        	height: 520px;
        	margin-left: 980px;
        	margin-top: 422px;
        }
        #radio-page {
        	position: absolute;
        	width: 400px;
        	height: 520px;
        	margin-left: 990px;
        	margin-top: 450px;
        }
        #radio  .bruno_dans_ton_salon {
        	margin-left: 10px;
        	margin-top: 0px;
        }
        #inscription {
        	width: 300px;
        	height: 50px;
        	color: white;
        	margin-left: 50px;
        	background-color: #ea0180;
        	margin-top: -10px;
        }
        #titre-inscription {
        	color: white;
        	margin-left: 100px;
        	padding-top: 15px;
        }
        #fb-login-button {
        	position: absolute;
        	width: 300px;
        	height: 300px;
        
        }
        #logo-rsx-socio {
        	margin-left: 100px;
        	margin-top: 10px;
        }
        #logo-rsx-socio  .logo-facebok {
        	margin-right: 10px;
        }
        #logo-rsx-socio  .logo-twitter {
        	margin-right: 10px;
        }
        #logo-rsx-socio  .logo-instagram {
        	margin-right: 10px;
        }
        #logo-rsx-socio  .logo-snapchat {
        	margin-right: 10px;
        }
        #logo-rsx-socio  .logo-youtube {
        	margin-right: 10px;
        }
        /* _______________________________________________________ Fin Section Radio  _______________________________________________________ */
        /* _______________________________________________________  Bloc Actualite  _______________________________________________________ */
        #actualite {
        	position: absolute;
        	margin-top: 925px;
        	margin-left: 170px;
        	width: 815px;
        	height: 600px;
        	background-color: white;
        }
        #actualite-page {
        	position: absolute;
        	margin-top: 420px;
        	margin-left: 170px;
        	width: 815px;
        	height: 1105px;
        	background-color: white;
        }
        #fiche_technique_animateur {
        	margin-left: 260px;
        	margin-top: -250px;
        }
        #titre_actu_bruno_dans_la_radio {
        	font-weight: bold;
        	margin-left: 20px;
        }
        #titre_actu_bruno_dans_la_radio-page {
        	font-weight: bold;
        	margin-left: 260px;
        }
        #actualite h1 {
        	width: 600px;
        	padding-left: 20px;
        	margin-top: 0px;
        	background-color: #007fc6;
        	margin-left: 0px;
        }
        /* _______________________________________________________  Actu 1  _______________________________________________________ */
        #actu_1 {
        	width: 200px;
        	height: 200px;
        	background-color: blue;
        	margin-left: 20px;
        	margin-top: 30px;
        }
        #actu_1 .rsxsocio {
        	margin-left: 630px;
        	margin-top: -40px;
        }
        #actu_1 img {
        	width: 180px;
        	height: 128px;
        	margin-top: 10px;
        }
        #actu_1 h3 {
        	width: 400px;
        	margin-left: 190px;
        	margin-top: -135px;
        }
        #actu_1 p {
        	margin-left: 190px;
        	margin-top: 10px;
        	width: 550px;
        	color: black;
        }
        /* _______________________________________________________ Fin Actu 1  _______________________________________________________ */
        /* _______________________________________________________  Actu 2  _______________________________________________________ */
        #actu_2 {
        	margin-left: 20px;
        	margin-top: 50px;
        }
        #actu_2 .rsxsocio {
        	margin-left: 630px;
        	margin-top: -40px;
        }
        #actu_2 img {
        	width: 180px;
        	height: 128px;
        	margin-top: 10px;
        }
        #actu_2 h3 {
        	margin-left: 190px;
        	margin-top: -135px;
        	width: 400px;
        	color: red;
        }
        #actu_2 p {
        	margin-left: 190px;
        	margin-top: 10px;
        	width: 550px;
        	color: black;
        }
        /* _______________________________________________________ Fin Actu 2  _______________________________________________________ */
        /* _______________________________________________________  Actu 3  _______________________________________________________ */
        #actu_3 {
        	margin-left: 20px;
        	margin-top: 30px;
        }
        #actu_3 .rsxsocio {
        	margin-left: 630px;
        	margin-top: -40px;
        }
        #actu_3 img {
        	width: 180px;
        	height: 128px;
        	margin-top: 10px;
        }
        #actu_3 h3 {
        	margin-left: 190px;
        	margin-top: -135px;
        	width: 400px;
        	color: red;
        }
        #actu_3 p {
        	margin-left: 190px;
        	margin-top: 10px;
        	width: 550px;
        	color: black;
        }
        /* _______________________________________________________  Fin Actu 3  _______________________________________________________ */
        /* ____________________________________________  Actu Bloc actualite page animateur  _______________________________________________________ */
        
        #conteneur_principal_page {
        	margin-left: 50px;
        }
        #baniere-bdlr {
        	margin-left: 70px;
        }
        /* ////////////////////////////////////////////////////////////////// */
        #dernier_clip { /*___ Bloc Artiste ___*/ /* On declare les valeur de la Div pour y mettre les élements Artiste */
        	position: absolute;
        	margin-top: 1530px;
        	margin-left: 170px;
        	width: 815px;
        	height: 250px;
        	background-color: white;
        }
        /* ////////////////////////////////////////////////////////////////// */
        #dernier_clip .podcast { /* On modifie le titre de la Section Bloc Artiste */
        	width: 800px;
        	margin-left: -20px;
        	padding-left: 40px;
        	margin-top: -25px;
        	background-color: #007fc6;
        }
        #titre_podcast_bdlr {
        	margin-left: 20px;
        }
        /* ////////////////////////////////////////////////////////////////// */
        /* ///////// */
        /* ARTISTE 1 */
        #artiste_1 {
        	width: 100px;
        	height: 170px;
        	margin-left: 20px;
        }
        #artiste_1 .twitter-share-button {
        	margin-left: 15px;
        	margin-top: -5px;
        }
        
        #artiste_1 img {
        	width:100px;
        	height:100px;
        }
        #artiste_1 h4 {
        	color: black;
        	margin-top: -5px;
        	margin-left: 20px;
        }
        #artiste_1 p {
        	color: black;
        	margin-top: -20px;
        	margin-left: 15px;
        }
        /* FIN ARTISTE 1 */
        /* ///////// */
        /* ARTISTE 2 */
        #artiste_2 {
        	width: 100px;
        	height: 170px;
        	margin-top: -170px;
        	margin-left: 180px;
        }
        #artiste_2 .twitter-share-button {
        	margin-left: 15px;
        	margin-top: -5px;
        }
        #artiste_2 img{
        	width: 100px;
        	height: 100px;
        }
        #artiste_2 h4 {
        	margin-left: 20px;
        	margin-top: -5px;
        }
        #artiste_2 p {
        	color: black;
        	margin-top: -20px;
        	margin-left: 15px;
        }
        /* FIN ARTISTE 2 */
        /* ///////// */
        /* ARTISTE 3 */
        #artiste_3 {
        	width: 100px;
        	height: 170px;
        	margin-top: -170px;
        	margin-left: 340px;
        }
        #artiste_3 .twitter-share-button {
        	margin-left: 15px;
        	margin-top: -5px;
        }
        #artiste_3 img{
        	width: 100px;
        	height: 100px;
        }
        #artiste_3 h4 {
        	margin-left: 20px;
        	margin-top: -5px;
        }
        #artiste_3 p {
        	color: black;
        	margin-top: -20px;
        	margin-left: 15px;
        }
        /* FIN ARTISTE 3 */
        /* ///////// */
        /* ARTISTE 4 */
        #artiste_4 {
        	width: 100px;
        	height: 170px;
        	margin-top: -170px;
        	margin-left: 500px;
        }
        #artiste_4 .twitter-share-button {
        	margin-left: 15px;
        	margin-top: -5px;
        }
        #artiste_4 img{
        	width: 100px;
        	height: 100px;
        }
        #artiste_4 h4 {
        	margin-left: 20px;
        	margin-top: -5px;
        }
        #artiste_4 p {
        	color: black;
        	margin-top: -20px;
        	margin-left: 15px;
        }
        /* FIN ARTISTE 4 */
        /* ///////// */
        /* ARTISTE 5 */
        #artiste_5 {
        	width: 100px;
        	height: 170px;
        	margin-top: -170px;
        	margin-left: 650px;
        }
        #artiste_5 .twitter-share-button {
        	margin-left: 15px;
        	margin-top: -5px;
        }
        #artiste_5 img{
        	width: 100px;
        	height: 100px;
        }
        #artiste_5 h4 {
        	margin-left: 20px;
        	margin-top: -5px;
        }
        #artiste_5 p {
        	color: black;
        	margin-top: -20px;
        	margin-left: 15px;
        }
        #brunopaievosfactures {
        	margin-left: 225px;
        	margin-top: 20px;
        }
        #baniereburnodanslaradio {
        	margin-left: 125px;
        	margin-top: 20px;
        }
        /* FIN ARTISTE 5 */
        /* ///////// */
        /* ////////////////////////////////////////////////////////////////// */
        /*___ Bloc Podcast VETP ___ */
        #dernier_podcast {
        	position: absolute;
        	margin-top: 1785px;
        	margin-left: 170px;
        	width: 815px;
        	height: 530px;
        	background-color: white;
        }
        #titre_podcast_bruno_vetp {
        	margin-left: 20px;
        }
        #test {
        	width: 200px;
        	height: 400px;
        	margin-top: 50px;
        	margin-left: 20px;
        }
        #test img {
        	width: 200px;
        	height: 200px;
        }
        #test .date {
        	margin-top: -5px;
        	margin-left: 10px;
        }
        #test h3 {
        	margin-top: -3px;
        }
        #test p{
        	width: 200px;
        	margin-top: -10px;
        }
        #test_1 {
        	width: 200px;
        	height: 400px;
        	margin-top: -400px;
        	margin-left: 290px;
        }
        #test .rsxsocio {
        	margin-left: 25px;
        }
        #test_1 img {
        	width: 200px;
        	height: 200px;
        }
        #test_1 .date {
        	margin-top: -5px;
        	margin-left: 10px;
        }
        #test_1 h3 {
        	margin-top: -3px;
        }
        #test_1 p{
        	width: 200px;
        	margin-top: -10px;
        }
        #test_1 .rsxsocio {
        	margin-left: 25px;
        }
        #test_2 {
        	width: 200px;
        	height: 400px;
        	margin-top: -400px;
        	margin-left: 550px;
        }
        #test_2 img {
        	width: 200px;
        	height: 200px;
        }
        #test_2 .date {
        	margin-top: -5px;
        	margin-left: 10px;
        }
        #test_2 h3 {
        	margin-top: -3px;
        }
        #test_2 p{
        	width: 200px;
        	margin-top: -10px;
        }
        #test_2 .rsxsocio {
        	margin-left: 25px;
        }
        #actualite_musical {
        	position: absolute;
        	margin-top: 940px;
        	margin-left: 990px;
        	width: 380px;
        	height: 1410px;
        	background-color: white;
        }
        
        #actualite_musical .bruno_paie_vos_factures {
        	margin-left: 55px;
        	margin-top: 90px;
        }
        
        #titre-bruno-guillon-vtep {
        	width: 800px;
        	font-size: 25px;
        	position: absolute;
        	margin-left: 190px;
        	margin-top: 1790px;
        }
        #titre-bruno-guillon-vtep-page-equipes {
        	width: 800px;
        	font-size: 25px;
        	position: absolute;
        	margin-left: 190px;
        	margin-top: 1335px;
        }
        #facebook {
        	position: absolute;
        	margin-left: 990px;
        	margin-top: 925px;
        }
        #bloc_blanc {
        	position: absolute;
        	width: 380px;
        	height: 250px;
        	margin-top: 1530px;
        	margin-left: 990px;
        }
        #promo_lafamille {
        
        }
        #bloc_blanc_bis {
        	position: absolute;
        	width: 380px;
        	height: 530px;
        	margin-top: 1785px;
        	margin-left: 990px;
        	background-color: white;
        }
        #logo_funradio {
        	margin-left: 80px;
        	margin-top: 50px;
        }
        #bruno_paie_vos_factures {
        	margin-left: 35px;
        }
        #titre_bruno_paie_vos_factures {
        	margin-left: 40px;
        }
        /*___ Pide de Page ___ */
        #footer {
        	position: absolute;
        	background-color: white;
        	width: 1200px;
        	height: 220px;
        	margin-left: -820px;
        	margin-left: 170px;
        	margin-top: 2320px;
        }
        #section_footer_une {
        	width: 150px;
        	margin-left: 20px;
        }
        #section_footer_deux {
        	width: 150px;
        	margin-left: 280px;
        	margin-top: -145px;
        }
        #section_footer_trois {
        	width: 250px;
        	margin-left: 550px;
        	margin-top: -144px;
        }
        #section_resseaux-socio {
        	margin-top: -38px;
        	margin-left: 910px;
        }
        #section_resseaux-socio .mini-logo-facebook {
        	margin-right: 20px;
        }
        #section_resseaux-socio .mini-logo-twitter {
        	margin-right: 20px;
        }
        #section_resseaux-socio .mini-logo-snapchat {
        	margin-right: 20px;
        }
        #plus {
        	margin-top: 40px;
        	margin-left: 380px;
        }
        
        voici tous le code 

        • Partager sur Facebook
        • Partager sur Twitter
          28 mai 2017 à 19:31:26

          ton fichier css et bien a la racine de ton www ?

          si oui je te conseille déjà de créer un dossier de travail pour y déposer ton projet dedans et de reliée ton fichier css a ton fichier html

          exemple : /projet/style.css

          si se n'est pas le cas tu as donc oublié de préciser l'emplacement exact de ton fichier css

          • Partager sur Facebook
          • Partager sur Twitter

          Problème CSS en Localhost

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur
          • Markdown