Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1499 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Je n'arrive pas a mettre mes icones

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Je n'arrive pas a mettre mes icones

n°2329579
monstertee​nkuma
Posté le 22-02-2019 à 15:44:24  profilanswer
 

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

mood
Publicité
Posté le 22-02-2019 à 15:44:24  profilanswer
 

n°2329595
MaybeEijOr​Not
but someone at least
Posté le 22-02-2019 à 18:02:13  profilanswer
 

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.
n°2329602
monstertee​nkuma
Posté le 22-02-2019 à 19:04:41  profilanswer
 

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
n°2329605
MaybeEijOr​Not
but someone at least
Posté le 22-02-2019 à 20:21:08  profilanswer
 

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


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2329609
monstertee​nkuma
Posté le 22-02-2019 à 21:56:06  profilanswer
 

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

n°2329636
monstertee​nkuma
Posté le 23-02-2019 à 12:18:37  profilanswer
 

:up:

n°2329638
MaybeEijOr​Not
but someone at least
Posté le 23-02-2019 à 13:43:42  profilanswer
 

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.
n°2329639
monstertee​nkuma
Posté le 23-02-2019 à 15:30:36  profilanswer
 

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)

n°2329640
MaybeEijOr​Not
but someone at least
Posté le 23-02-2019 à 15:40:15  profilanswer
 

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


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2329648
monstertee​nkuma
Posté le 23-02-2019 à 17:03:31  profilanswer
 

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

mood
Publicité
Posté le 23-02-2019 à 17:03:31  profilanswer
 

n°2329650
MaybeEijOr​Not
but someone at least
Posté le 23-02-2019 à 17:47:32  profilanswer
 

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


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2329651
monstertee​nkuma
Posté le 23-02-2019 à 17:49:55  profilanswer
 

ca ne fonctionne pas

n°2329661
MaybeEijOr​Not
but someone at least
Posté le 24-02-2019 à 11:02:48  profilanswer
 

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


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2329678
monstertee​nkuma
Posté le 24-02-2019 à 20:35:25  profilanswer
 

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. }

n°2329683
MaybeEijOr​Not
but someone at least
Posté le 25-02-2019 à 11:49:11  profilanswer
 

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.
n°2329701
monstertee​nkuma
Posté le 26-02-2019 à 13:42:29  profilanswer
 

:up:

n°2329702
monstertee​nkuma
Posté le 26-02-2019 à 13:44:32  profilanswer
 

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)

n°2329703
MaybeEijOr​Not
but someone at least
Posté le 26-02-2019 à 13:44:34  profilanswer
 

Euh ma réponse na va pas ?


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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Je n'arrive pas a mettre mes icones

 

Sujets relatifs
[ReactJS] Mettre un site en ligneutilité du typedef ou pourquoi en mettre de partout
[VBA] Mettre en forme une partie d'une celluleBarre de recherche interne au site : me mettre sur la piste
INDEX est obligatoire pour afficher contenu de la table ?mettre une formule dans toutes les cellules vides d'une sélection
Twitch sur un site. Comment bien le mettre ? Mettre un id avec des handlebars avec Handlebars.JS
[Résolu] Mettre à jour/ajouter éléments dans un XML en C#je n'arrive pas a créer un menu déroulant avec mes div
Plus de sujets relatifs à : Je n'arrive pas a mettre mes icones

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.233 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR