Je n'arrive pas a mettre mes icones

Je n'arrive pas a mettre mes icones - HTML/CSS - Programmation

Marsh Posté le 22-02-2019 à 15:44:24    

Bonjour,
 
j'ai presque termier ma premiere page du site,
mais dans mon footer je n'arrive pas a afficher mes icones social
(facebook, twitter, etc)
 
https://codepen.io/Mtkuma/pen/exwKXX
 
avez vous une idée de se qui ne va pas ?
 
merci, Thibaut

Reply

Marsh Posté le 22-02-2019 à 15:44:24   

Reply

Marsh Posté le 22-02-2019 à 18:02:13    

Bonjour,
 
Tu as mis ton import de css dans une section réservée aux médias de largeur maximale 767 px. Si tu le mets en dehors de la condition, ça fonctionne.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 22-02-2019 à 19:04:41    

je viens d'essayer et ca ne fonctionne pas, (cest a jour sur le pen)
 
j'ai uniquement des losange mais sans le logo du media social


Message édité par monsterteenkuma le 22-02-2019 à 19:11:26
Reply

Marsh Posté le 22-02-2019 à 20:21:08    

Mets-le au début du css. ;)


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 22-02-2019 à 21:56:06    

je suis désolé mais... je n'y arrive pas

Reply

Marsh Posté le 23-02-2019 à 12:18:37    

:up:

Reply

Marsh Posté le 23-02-2019 à 13:43:42    

Ben là ça fonctionne sur ton codepen : https://codepen.io/Mtkuma/pen/exwKXX
Non ?


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 23-02-2019 à 15:30:36    

effectivement :o
mais quand j'ouvre mon fichier sur navigateur ça ne fonctionne pas (et la page mets vraiment longtemps a charger alors que avant pas)

Reply

Marsh Posté le 23-02-2019 à 15:40:15    

Utilise l'import avec une balise style html au pire.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 23-02-2019 à 17:03:31    

avec un  
 
<link url=("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" ) />
 
??

Reply

Marsh Posté le 23-02-2019 à 17:03:31   

Reply

Marsh Posté le 23-02-2019 à 17:47:32    

Oui link : https://www.w3schools.com/tags/tag_link.asp


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 23-02-2019 à 17:49:55    

ca ne fonctionne pas

Reply

Marsh Posté le 24-02-2019 à 11:02:48    

C'est quoi exactement tout le code de ta page ?


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 24-02-2019 à 20:35:25    

html:

Code :
  1. <!doctype html>
  2. <html lang="fr">
  3. <head>
  4.   <meta http-equiv="X-UA-Copatible" content="IE=edge,chrome=1">
  5.     <meta charset="utf-8">
  6.         <title>Gladion</title>
  7.       <link rel="icon" type="image/png" href=".../../../images/icon.png"/>
  8.           <link href='.../../../css/index.css' type='text/css' rel='stylesheet'/>
  9.           <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' type='text/css' rel='stylesheet'/>
  10.           <script src=".../../../java/index.js"></script>
  11. </head>
  12. <header>
  13.         <ul class="link">
  14.           <li><a href="#"> Panier </a></li>
  15.           <li><a href="#"> Recherche </a></li>
  16.               <ul class="lang">
  17.                 <li><a href="#"> FR </a></li>
  18.                 <li><a href="#"> EN </a></li>
  19.               </ul>
  20.         </ul>
  21.     <div class="header1">
  22.       <div class="titre"> <a href="index.html" title="Gladion SA"> <h1> Gladion </h1></a> </div>
  23.     </div>
  24.     <div class="navbar">
  25.         <ul class="nav">
  26.           <li><a href="../../communaute.html"> Communauté </a> </li>
  27.           <li><a href="../../synopsis.html"> Synopsis </a> </li>
  28.           <li><a href="../../monde.html"> Monde </a> </li>
  29.           <li><a href="../html/boutique/shop.html"> Boutique </a> </li>
  30.         </ul>
  31. </div>
  32.       </div>
  33.     </div>
  34.   </header>
  35. <body>
  36. <main>
  37. <body onload="ano()">
  38. <div class="main">
  39.     <ul class="cd-slider">
  40.       <li>
  41.         <div class="image"><img src="https://images.unsplash.com/photo-1421809313281-48f03fa45e9f?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000"></div>
  42.         <div class="content">
  43.           <h2><br>Jackets</h2>
  44.           <a href="#">View Gallery</a>
  45.         </div>
  46.       </li>
  47.       <li>
  48.         <div class="image"><img src="https://images.unsplash.com/uploads/1411724908903377d4696/2e9b0cb2?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000"></div>
  49.         <div class="content">
  50.           <h2><br>Accessories</h2>
  51.           <a href="#">View Gallery</a>
  52.         </div>
  53.       </li>
  54.       <li>
  55.         <div class="image"><img src="https://images.unsplash.com/photo-1416838375725-e834a83f62b7?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000"></div>
  56.         <div class="content">
  57.           <h2><br>Shoes</h2>
  58.           <a href="#">View Gallery</a>
  59.         </div>
  60.       </li>
  61.       <li>
  62.         <div class="image"><img src="https://images.unsplash.com/35/JOd4DPGLThifgf38Lpgj_IMG.jpg?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000"></div>
  63.         <div class="content">
  64.           <h2><br>Collection </h2>
  65.           <a href="#">View Gallery</a>
  66.         </div>
  67.       </li>
  68.       <li>
  69.         <div class="image"><img src="https://images.unsplash.com/photo-1453974336165-b5c58464f1ed?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000"></div>
  70.         <div class="content">
  71.           <h2><br>Photo</h2>
  72.           <a href="#">View Gallery</a>
  73.         </div>
  74.       </li>     
  75.     </ul>
  76.   </div>
  77. </main>
  78. </body>
  79. <footer class="footer">
  80.   <div class="footer-left col-md-4 col-sm-6">
  81.     <p class="about">
  82.       <span> About the company</span> Ut congue augue non tellus bibendum, in varius tellus condimentum. In scelerisque nibh tortor, sed rhoncus odio condimentum in. Sed sed est ut sapien ultrices eleifend. Integer tellus est, vehicula eu lectus tincidunt,
  83.       ultricies feugiat leo. Suspendisse tellus elit, pharetra in hendrerit ut, aliquam quis augue. Nam ut nibh mollis, tristique ante sed, viverra massa.
  84.     </p>
  85. <div class="footer-social-links">
  86.   <a href="#" title="Facebook" target="_blank"><i class="fa fa-facebook"></i></a>
  87.   <a href="#" title="Twitter" target="_blank"><i class="fa fa-twitter"></i></a>
  88.   <a href="#" title="Google+" target="_blank"><i class="fa fa-google-plus"></i></a>
  89.   <a href="#" title="LinkedIn+" target="_blank"><i class="fa fa-linkedin"></i></a>
  90.   <a href="#" title="Dribbble" target="_blank"><i class="fa fa-dribbble"></i></a>
  91. </div>
  92.   </div>
  93.   <div class="footer-center col-md-4 col-sm-6">
  94.     <div>
  95.       <i class="fa fa-map-marker"></i>
  96.       <p><span> Street name and number</span> City, Country</p>
  97.     </div>
  98.     <div>
  99.       <i class="fa fa-phone"></i>
  100.       <p> (+00) 0000 000 000</p>
  101.     </div>
  102.     <div>
  103.       <i class="fa fa-envelope"></i>
  104.       <p><a href="#"> contact@gladion.com</a></p>
  105.     </div>
  106.   </div>
  107.   <div class="footer-right col-md-4 col-sm-6">
  108.     <h2><span> Gladion</span></h2>
  109.     <p class="menu">
  110.       <a href="index.html"> Home</a> |
  111.       <a href="../../faq.html"> FAQ</a> |
  112.       <a href="contact.html"> Contact</a>
  113.     </p>
  114.     <p class="name"> Gladion SA &copy; 2019</p>
  115.   </div>
  116. </footer>
  117. </html>


 
 
Css:

Code :
  1. .footer-social-links{
  2.     font-size: 14px;
  3.   text-align: center;
  4.   margin-top: -22.5%;
  5.   margin-left: 25%;
  6. }
  7. .footer-social-links a{
  8.     width: 25px;
  9.     height: 25px;
  10.     line-height: 25px !important;
  11.     position: relative;
  12.     margin: 0 5px;
  13.     text-align: center;
  14.     display: inline-block;
  15.     color: #111;
  16.    
  17.     -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000); 
  18.     -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  19.     -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  20.     -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  21.     transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  22. }
  23. .footer-social-links a i,
  24. .footer-social-links a span{
  25.     position: relative;
  26.     top: 2px;
  27.     left: 1px;
  28. }
  29. .footer-social-links a:before{
  30.     content: "";
  31.     display: inline-block;
  32.     width: 100%;
  33.     height: 100%;
  34.     position: absolute;
  35.     top: 0;
  36.     left: 0;
  37.     border: 1px solid #111;
  38.    
  39.     -webkit-border-radius: 2px;
  40.     -moz-border-radius: 2px;
  41.     border-radius: 2px;
  42.    
  43.     -webkit-transform: rotate(45deg);
  44.     -moz-transform: rotate(45deg);
  45.     -o-transform: rotate(45deg);
  46.     -ms-transform: rotate(45deg);
  47.     transform: rotate(45deg);
  48.    
  49.     -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000); 
  50.     -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  51.     -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  52.     -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  53.     transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  54.    
  55. }
  56. .footer-social-links a:hover{
  57.     color: #fff;
  58. }
  59. .footer-social-links a:hover:before{
  60.     background: #111;
  61. }
  63. body{
  64. margin:0 auto; background: white; }
  66. html { overflow-x: hidden; }
  68. h1{font: variant; color: DarkOrange;}
  70. header a:link {
  71. text-decoration:none;
  72. color: white; }
  74. header a:link:hover {
  75.   color: darkorange; }
  77. header a:visited {
  78.   color: white; }
  80. header a:visited:hover {
  81.   color: darkorange; }
  84. /*Menu en haut a droite*/
  87. .link {
  88. list-style-type: none;
  89. display: flex;
  90. justify-content: flex-end;
  91. max-width: 100%;
  92. margin: 0 auto;
  93. padding: 0;
  94. background: black;
  95. font-size: 24px; }
  97. .link li{
  98. display: inline-block;
  99. padding: 1.5% 3%;
  100. transition: 0.5s;
  101. color: white; }
  103. .link ul li a{
  104. padding: 0 20px; }
  106. .lang{
  107. padding: 0.80% 2px; }
  110. /*Titre*/
  113. .header1 {
  114. display: flex;
  115. justify-content: center;
  116. background-color: black;
  117. color: darkorange;
  118. margin: 0 auto;
  119. margin-top: -85px;
  120. font-size: 45px;
  121. max-width: 100%;}
  124. /*Menu principale*/
  127. .navbar {
  128. display: flex;
  129. justify-content: center;
  130. max-width: 100%;
  131. margin-top: -5px;
  132. padding: 0;
  133. background: black;
  134. border-bottom:45px solid;}
  136. .nav {
  137. margin: 0;
  138. padding: 0;
  139. display: flex;
  140. }
  142. .nav li {
  143. list-style: none;
  144. margin: 0 175px;
  145. transition: 0.5s;
  146. }
  148. .nav li a{
  149. position: relative;
  150. text-decoration: none;
  151. padding: 5px;
  152. font-size: 27px;
  153. font-family: sans-serif;
  154. color: #fff;
  155. font-weight: bold;
  156. transition: 0.5s;
  157. }
  160. /*Slider*/
  163. * {
  164. box-sizing: border-box;}
  166. *:focus {
  167.   outline: 0;}
  169. /* Primary Style
  170. --------------------------------*/
  171. .main {
  172. max-width: 100rem;
  173. margin: 0 auto;
  174. padding: 0 2rem;
  175. margin-top: 5%;
  176. }
  178. .text {
  179. font-size: 2rem;
  180. padding: 2rem 0;
  181. -moz-columns: 3;
  182. -webkit-columns: 3;
  183. columns: 3;
  184. }
  186. .text p {
  187. margin-bottom: 2rem;
  188. }
  190. /* Slider Style
  191. --------------------------------------*/
  192. .cd-slider {
  193. position: relative;
  194. width: 100%;
  195. height: 50rem;
  196. overflow: hidden;
  197. margin-top: 6rem;
  198. margin-bottom: 7rem;
  199. }
  201. .cd-slider li {
  202. position: absolute;
  203. top: 0;
  204. left: 0;
  205. width: 100%;
  206. height: 100%;
  207. visibility: hidden;
  208. transition: visibility 0s 1s;
  209.   will-change: visibility;
  210. }
  212. .image {
  213. position: absolute;
  214. top: 0;
  215. left: 0;
  216. width: 70%;
  217. height: 100%;
  218. background-size: cover;
  219. background-position: 50% 50%;
  220. clip: rect(0, 80rem, 50rem, 80rem);
  221. transition: clip .5s cubic-bezier(0.99, 0.01, 0.45, 0.9) .5s;
  222.   will-change: clip;
  223. }
  225. .content {
  226. position: absolute;
  227. top: 0;
  228. right: 0;
  229. width: 100%;
  230. height: 100%;
  231. padding: 2rem 0 0 2rem;
  232. font-size: 9rem;
  233. text-align: right;
  234. }
  236. .content h2 {
  237. text-overflow: ellipsis;
  238. overflow: hidden;
  239. transform: translateY(-30%);
  240. opacity: 0;
  241. transition: transform .5s, opacity .5s;
  242.   will-change: transform, opacity;
  243. }
  245. .content a {
  246. display: inline-block;
  247. font-size: 2rem;
  248. text-transform: lowercase;
  249. padding: 1.5rem;
  250. opacity: 0;
  251. transform: translateY(-100%);
  252. transition: transform .5s .1s, opacity .5s .1s;
  253.   will-change: transform, opacity;
  254. }
  256. /* Current Slide  
  257. -------------------------------------*/
  258. li.current {
  259. visibility: visible;
  260. transition-delay: 0s;
  261. }
  262. li.current .image {
  263. clip: rect(0, 80rem, 50rem, 0);
  264. }
  265. li.current .content h2 {
  266. transform: translateY(0);
  267. opacity: 1;
  268. transition-delay: 1s;
  269. }
  270. li.current .content a {
  271. transform: translateY(0);
  272. opacity: 1;
  273. transition-delay: 1.1s;
  274. }
  275. /* Prev Slide  
  276. ------------------------------------*/
  277. li.prev_slide .image {
  278. clip: rect(0, 0, 50rem, 0);
  279. }
  280. nav {
  281. position: absolute;
  282. bottom: 0;
  283. right: 0;
  284. background: #fff;
  285. z-index: 2;
  286. }
  287. .prev, .next, .counter {
  288. vertical-align: middle;
  289. }
  291. .prev, .next {
  292. position: relative;
  293. display: inline-block;
  294. height: 5rem;
  295. width: 5rem;
  296.   border: 0;
  297.   cursor: pointer;
  298.   background: transparent;
  299. }
  301. .prev::before, .next::before {
  302. content: '';
  303. position: absolute;
  304. top: 50%;
  305.   left: 0;
  306. transform: translateY(-50%);
  307. border: .8rem solid transparent;
  308. border-right-width: 1rem;
  309. border-right-color: #000;
  310. border-left-width: 0;
  311. width: 0;
  312. height: 0;
  313. }
  315. .prev::after, .next::after {
  316. content: '';
  317. position: absolute;
  318. top: 50%;
  319. transform: translateY(-50%) translateZ(0);
  320. left: .5rem;
  321. background: #000;
  322. height: .1rem;
  323. min-height: 1px;
  324. width: 2.5rem;
  325. transition: width .3s;
  326. }
  328. .next::before {
  329. right: 0;
  330.   left: auto;
  331. border-left-width: 1rem;
  332. border-left-color: #000;
  333. border-right-width: 0;
  334. }
  336. .next::after {
  337. right: .5rem;
  338. left: auto;
  339. }
  341. .counter {
  342. display: inline-block;
  343. font-size: 4rem;
  344. font-family: serif;
  345. font-style: italic;
  346. }
  348. .counter span:last-child::before {
  349. content: '/';
  350. margin: 0 1rem;
  351. }
  353. .prev:hover::after, .next:hover::after {
  354. width: 3.5rem;
  355. }
  358. /*footer*/
  360. .footer {
  361.   background-color: black;
  362.   width: 100%;
  363.   text-align: left;
  364.   font-family: sans-serif;
  365.   font-weight: bold;
  366.   font-size: 16px;
  367.   padding: 50px;
  368.   margin-top: 50px;
  369. }
  371. .footer .footer-left,
  372. .footer .footer-center,
  373. .footer .footer-right {
  374.   display: inline-block;
  375.   vertical-align: top;
  376. }
  379. /* footer left*/
  381. .footer .footer-left {
  382.   width: 33%;
  383.   padding-right: 15px;
  384. }
  386. .footer .about {
  387.   line-height: 20px;
  388.   color: #ffffff;
  389.   font-size: 13px;
  390.   font-weight: normal;
  391.   margin: 0;
  392. }
  394. .footer .about span {
  395.   display: block;
  396.   color: #ffffff;
  397.   font-size: 14px;
  398.   font-weight: bold;
  399.   margin-bottom: 20px;
  400. }
  402. .footer .icons {
  403.   margin-top: 25px;
  404. }
  406. .footer .icons a {
  407.   display: inline-block;
  408.   width: 35px;
  409.   height: 35px;
  410.   cursor: pointer;
  411.   background-color: #33383b;
  412.   border-radius: 2px;
  413.   font-size: 20px;
  414.   color: #ffffff;
  415.   text-align: center;
  416.   line-height: 35px;
  417.   margin-right: 3px;
  418.   margin-bottom: 5px;
  419. }
  422. /* footer center*/
  424. .footer .footer-center {
  425.   width: 30%;
  426. }
  428. .footer .footer-center i {
  429.   background-color: #33383b;
  430.   color: #ffffff;
  431.   font-size: 25px;
  432.   width: 38px;
  433.   height: 38px;
  434.   border-radius: 50%;
  435.   text-align: center;
  436.   line-height: 42px;
  437.   margin: 10px 15px;
  438.   vertical-align: middle;
  439. }
  441. .footer .footer-center i.fa-envelope {
  442.   font-size: 17px;
  443.   line-height: 38px;
  444. }
  446. .footer .footer-center p {
  447.   display: inline-block;
  448.   color: #ffffff;
  449.   vertical-align: middle;
  450.   margin: 0;
  451. }
  453. .footer .footer-center p span {
  454.   display: block;
  455.   font-weight: normal;
  456.   font-size: 14px;
  457.   line-height: 2;
  458. }
  460. .footer .footer-center p a {
  461.   color: darkorange;
  462.   text-decoration: none;
  463. }
  466. /* footer right*/
  468. .footer .footer-right {
  469.   width: 35%;
  470. }
  472. .footer h2 {
  473.   color: white;
  474.   font-size: 36px;
  475.   font-weight: normal;
  476.   margin: 0;
  477. }
  479. .footer h2 span {
  480.   color: darkorange;
  481.   margin-left: 15%;
  482. }
  484. .footer .menu {
  485.   color: white;
  486.   margin: 20px 0 12px;
  487.   padding: 0;
  488. }
  490. .footer .menu a {
  491.   display: inline-block;
  492.   line-height: 1.8;
  493.   text-decoration: none;
  494.   color: inherit;
  495. }
  497. .footer .menu a:hover {
  498.   color: darkorange;
  499. }
  501. .footer .name {
  502.   color: darkorange;
  503.   font-size: 14px;
  504.   font-weight: normal;
  505.   margin: 0;
  506. }
  508. @media (max-width: 767px) {
  509.   .footer {
  510.     font-size: 14px;
  511.   }
  512.   .footer .footer-left,
  513.   .footer .footer-center,
  514.   .footer .footer-right {
  515.     display: block;
  516.     width: 100%;
  517.     margin-bottom: 40px;
  518.     text-align: center;
  519.   }
  520.   .footer .footer-center i {
  521.     margin-left: 0;
  522.   }
  523. }
  525. @media screen and ( max-width: 550px ) {
  526. .image { width: 100%; }
  527. .content { padding-right: 2rem; }
  528. nav { left: 0; right: auto; }
  529. }


 
 
java:

Code :
  1. function ano () {
  3.   function init(item) {
  4.     var items = item.querySelectorAll('li'),
  5.         current = 0,
  6.         autoUpdate = true,
  7.         timeTrans = 4000;
  8.        
  9.     //create nav
  10.     var nav = document.createElement('nav');
  11.     nav.className = 'nav_arrows';
  13.     //create button prev
  14.     var prevbtn = document.createElement('button');
  15.     prevbtn.className = 'prev';
  16.     prevbtn.setAttribute('aria-label', 'Prev');
  17.     //create button next
  18.     var nextbtn = document.createElement('button');
  19.     nextbtn.className = 'next';
  20.     nextbtn.setAttribute('aria-label', 'Next');
  22.     //create counter
  23.     var counter = document.createElement('div');
  24.     counter.className = 'counter';
  25.     counter.innerHTML = "<span>1</span><span>"+items.length+"</span>";
  27.     if (items.length > 1) {
  28.       nav.appendChild(prevbtn);
  29.       nav.appendChild(counter);
  30.       nav.appendChild(nextbtn);
  31.       item.appendChild(nav);
  33.     }
  35.     items[current].className = "current";
  36.     if (items.length > 1) items[items.length-1].className = "prev_slide";
  38.     var navigate = function(dir) {
  39.       items[current].className = "";
  41.       if (dir === 'right') {
  42.         current = current < items.length-1 ? current + 1 : 0;
  43.       } else {
  44.         current = current > 0 ? current - 1 : items.length-1;
  45.       }
  47.       var nextCurrent = current < items.length-1 ? current + 1 : 0,
  48.         prevCurrent = current > 0 ? current - 1 : items.length-1;
  50.       items[current].className = "current";
  51.       items[prevCurrent].className = "prev_slide";
  52.       items[nextCurrent].className = "";
  54.       //update counter
  55.       counter.firstChild.textContent = current + 1;
  57.  
  58.     }
  59.    
  60.     item.addEventListener('mouseenter', function() {
  61.       autoUpdate = false;
  62.     });
  64.     item.addEventListener('mouseleave', function() {
  65.       autoUpdate = true;
  66.     });
  68.     setInterval(function() {
  69.       if (autoUpdate) navigate('right');
  70.     },timeTrans);
  71.    
  72.     prevbtn.addEventListener('click', function() {
  73.       navigate('left');
  74.     });
  76.     nextbtn.addEventListener('click', function() {
  77.       navigate('right');
  78.     });
  80.     //keyboard navigation
  81.     document.addEventListener('keydown', function(ev) {
  82.       var keyCode = ev.keyCode || ev.which;
  83.       switch (keyCode) {
  84.         case 37:
  85.           navigate('left');
  86.           break;
  87.         case 39:
  88.           navigate('right');
  89.           break;
  91.       }
  92.     });
  94.     // swipe navigation
  95.     // from http://stackoverflow.com/a/23230280
  96.     item.addEventListener('touchstart', handleTouchStart, false);       
  97.     item.addEventListener('touchmove', handleTouchMove, false);
  98.     var xDown = null;
  99.     var yDown = null;
  100.     function handleTouchStart(evt) {
  101.       xDown = evt.touches[0].clientX;
  102.       yDown = evt.touches[0].clientY;
  103.     };
  104.     function handleTouchMove(evt) {
  105.       if ( ! xDown || ! yDown ) {
  106.         return;
  107.       }
  109.       var xUp = evt.touches[0].clientX;
  110.       var yUp = evt.touches[0].clientY;
  112.       var xDiff = xDown - xUp;
  113.       var yDiff = yDown - yUp;
  115.       if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
  116.         if ( xDiff > 0 ) {
  117.           /* left swipe */
  118.           navigate('right');
  119.         } else {
  120.           navigate('left');
  121.         }
  122.       }
  123.       /* reset values */
  124.       xDown = null;
  125.       yDown = null;
  127.     };
  130.   }
  132.   [].slice.call(document.querySelectorAll('.cd-slider')).forEach( function(item) {
  133.     init(item);
  134.   });
  136. }

Reply

Marsh Posté le 25-02-2019 à 11:49:11    

Cela fonctionne bien, je pense juste que tu as un problème avec le lien vers ton css. Tu demandes d'y accéder en local, il faut donc que tu télécharges le fichier chez toi et que tu adaptes le lien. Tu peux aussi l'utiliser en tant que ressource distante en précisant le protocole "http".

 

Sinon, body est une section un peu différente, c'est une section racine, c'est les autres sections qui doivent être placées dedans.

 

HTML corrigé :

 
Code :
  1. <!doctype html>
  2. <html lang="fr">
  3. <head>
  4.  <meta http-equiv="X-UA-Copatible" content="IE=edge,chrome=1">
  5.  <meta charset="utf-8">
  6.  <title>Gladion</title>
  7.  <link rel="icon" type="image/png" href=".../../../images/icon.png"/>
  8.  <link href='.../../../css/index.css' type='text/css' rel='stylesheet'/>
  9.  <link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' type='text/css' rel='stylesheet'/>
  10.  <script src=".../../../java/index.js"></script>
  11. </head>
  12. <body onload="ano()">
  13.  <header>
  14.   <ul class="link">
  15.    <li><a href="#"> Panier </a></li>
  16.    <li><a href="#"> Recherche </a></li>
  17.    <ul class="lang">
  18.     <li><a href="#"> FR </a></li>
  19.     <li><a href="#"> EN </a></li>
  20.    </ul>
  21.   </ul>
  22.   <div class="header1">
  23.    <div class="titre"> <a href="index.html" title="Gladion SA"> <h1> Gladion </h1></a> </div>
  24.   </div>
  25.   <div class="navbar">
  26.    <ul class="nav">
  27.     <li><a href="../../communaute.html"> Communauté </a> </li>
  28.     <li><a href="../../synopsis.html"> Synopsis </a> </li>
  29.     <li><a href="../../monde.html"> Monde </a> </li>
  30.     <li><a href="../html/boutique/shop.html"> Boutique </a> </li>
  31.    </ul>
  32.   </div>
  33.  </header>
  34.  <main>
  35.   <div class="main">
  36.    <ul class="cd-slider">
  37.     <li>
  38.      <div class="image"><img src="https://images.unsplash.com/photo-1421809313281-48f03fa45e9f?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000"></div>
  39.      <div class="content">
  40.       <h2><br>Jackets</h2>
  41.       <a href="#">View Gallery</a>
  42.      </div>
  43.     </li>
  44.     <li>
  45.      <div class="image"><img src="https://images.unsplash.com/uploads/1411724908903377d4696/2e9b0cb2?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000"></div>
  46.      <div class="content">
  47.       <h2><br>Accessories</h2>
  48.       <a href="#">View Gallery</a>
  49.      </div>
  50.     </li>
  51.     <li>
  52.      <div class="image"><img src="https://images.unsplash.com/photo-1416838375725-e834a83f62b7?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000"></div>
  53.      <div class="content">
  54.       <h2><br>Shoes</h2>
  55.       <a href="#">View Gallery</a>
  56.      </div>
  57.     </li>
  58.     <li>
  59.      <div class="image"><img src="https://images.unsplash.com/35/JOd4DPGLThifgf38Lpgj_IMG.jpg?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000"></div>
  60.      <div class="content">
  61.       <h2><br>Collection </h2>
  62.       <a href="#">View Gallery</a>
  63.      </div>
  64.     </li>
  65.     <li>
  66.      <div class="image"><img src="https://images.unsplash.com/photo-1453974336165-b5c58464f1ed?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1000"></div>
  67.      <div class="content">
  68.       <h2><br>Photo</h2>
  69.       <a href="#">View Gallery</a>
  70.      </div>
  71.     </li>   
  72.    </ul>
  73.   </div>
  74.  </main>
  75.  <footer class="footer">
  76.   <div class="footer-left col-md-4 col-sm-6">
  77.    <p class="about">
  78.    <span> About the company</span> Ut congue augue non tellus bibendum, in varius tellus condimentum. In scelerisque nibh tortor, sed rhoncus odio condimentum in. Sed sed est ut sapien ultrices eleifend. Integer tellus est, vehicula eu lectus tincidunt,
  79.    ultricies feugiat leo. Suspendisse tellus elit, pharetra in hendrerit ut, aliquam quis augue. Nam ut nibh mollis, tristique ante sed, viverra massa.
  80.    </p>
  81.    <div class="footer-social-links">
  82.     <a href="#" title="Facebook" target="_blank"><i class="fa fa-facebook"></i></a>
  83.     <a href="#" title="Twitter" target="_blank"><i class="fa fa-twitter"></i></a>
  84.     <a href="#" title="Google+" target="_blank"><i class="fa fa-google-plus"></i></a>
  85.     <a href="#" title="LinkedIn+" target="_blank"><i class="fa fa-linkedin"></i></a>
  86.     <a href="#" title="Dribbble" target="_blank"><i class="fa fa-dribbble"></i></a>
  87.    </div>
  88.   </div>
  89.   <div class="footer-center col-md-4 col-sm-6">
  90.    <div>
  91.     <i class="fa fa-map-marker"></i>
  92.     <p><span> Street name and number</span> City, Country</p>
  93.    </div>
  94.    <div>
  95.     <i class="fa fa-phone"></i>
  96.     <p> (+00) 0000 000 000</p>
  97.    </div>
  98.    <div>
  99.     <i class="fa fa-envelope"></i>
  100.     <p><a href="#"> contact@gladion.com</a></p>
  101.    </div>
  102.   </div>
  103.   <div class="footer-right col-md-4 col-sm-6">
  104.    <h2><span> Gladion</span></h2>
  105.    <p class="menu">
  106.    <a href="index.html"> Home</a> |
  107.    <a href="../../faq.html"> FAQ</a> |
  108.    <a href="contact.html"> Contact</a>
  109.    </p>
  110.    <p class="name"> Gladion SA &copy; 2019</p>
  111.   </div>
  112.  </footer>
  113. </body>
  114. </html>
 

Par contre, chez moi les icônes sont mal placées et apparaissent sur le texte en-dessous de "About the company".


Message édité par MaybeEijOrNot le 25-02-2019 à 11:49:48

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 26-02-2019 à 13:42:29    

:up:

Reply

Marsh Posté le 26-02-2019 à 13:44:32    

parfait mec! t'es un génie, (oui il faut que je fasse un @media pour tout placer sur chaque ecran) et merci beaucoup (c'etais quoi exactement l'erreur ? jai pas compris les section)

Reply

Marsh Posté le 26-02-2019 à 13:44:34    

Euh ma réponse na va pas ?


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed