Sujet Précédent Sujet Suivant

Menu drawer Responsive - #Page Content n'est pas Responsive

Résolu/Fermé
AnhTuanFevre Messages postés 219 Date d'inscription samedi 17 janvier 2015 Statut Membre Dernière intervention 24 juillet 2015 - Modifié par AnhTuanFevre le 13/04/2015 à 19:24
AnhTuanFevre Messages postés 219 Date d'inscription samedi 17 janvier 2015 Statut Membre Dernière intervention 24 juillet 2015 - 13 avril 2015 à 21:50
Bonjour,

J'aimerai savoir pourquoi lorsque je clique sur mon drawer pour ouvrir le menu de gauche, ce qui est dans mon #page-content ne bouge pas comme mon header ?

Code HTML : 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/index.css" />
  <link rel="stylesheet" href="css/design.css" />
        <title>Androot - Tutoriels de root Android</title>
  <meta name="description" content="Tutoriels de A à Z pour rooter votre smartphone ou votre tablette Android. ROMs, Recoveries, Kernels, etc... disponibles en téléchargement"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script>function afficheDiv(idDiv){HideByClassName('mesDiv');if(idDiv!=0){var elm = document.getElementById(idDiv);elm.style.display='block';}}function HideByClassName(className){var elementList = document.getElementsByClassName(className);for (i = 0; i< elementList.length; i++) {var ele = elementList[i];console.log(ele.id);ele.style.display='none';}}</script>
    </head>

<body>
   <input type="checkbox" id="drawer-toggle" name="drawer-toggle"/>
   <label for="drawer-toggle" id="drawer-toggle-label"></label>
   <header><a href="http://androot.tk">Androot</a></header>
   <nav id="drawer">
      <ul>
         <li><a href="http://androot.tk"><img src="img/home.jpg" alt="button-home"></a></li>
         <li class="begin-root"><a href="http://androot.tk/root">Commencer à rooter</a></li><br/>
         <li><a href="http://androot.tk/apps-root">Applications après root</a></li>
         <li>
   <ul>
    <li><a href="http://androot.tk/apps-root#supersu">SuperSU</a></li>
    <li><a href="http://androot.tk/apps-root#titanium-backup">Titanium Backup</a></li>
    <li><a href="http://androot.tk/apps-root#lucky-patcher">Lucky Patcher</a></li>
    <li><a href="http://androot.tk/apps-root#adblock-plus">AdBlock Plus</a></li>
    <li><a href="http://androot.tk/apps-root#quick-boot">Quick Boot</a></li>
   </ul>
   </li><br/>
    <li><a href="#">Téléchargements</a>
   <ul>
    <li><a href="http://androot.tk/rom">ROM</a></li>
    <li><a href="http://androot.tk/recovery">Recovery</a></li>
    <li><a href="http://androot.tk/kernel">Kernel</a></li>
    <li><a href="http://androot.tk/apps-root#adblock-plus">Autres</a></li>
   </ul>
   </li><br/>
    <li><a href="#">Contact</a>
   <ul>
    <li><a href="https://www.facebook.com/pages/Androot/598893413544801">Facebook</a></li>
    <li><a href="https://twitter.com/AndrootOfficiel">Twitter</a></li>
    <li><a href="mailto:support@androot.tk">Email : support@androot.tk</a></li>
   </ul>
   </li>
      </ul>
   </nav>
 <div id="page-content">
  <section>
   <article class="root">
    <h1>Commencer à rooter</h1><br/></br>
    <p class="disclaimer">On décline toutes responsabilités liées au root !</p><br/><br/>
    <div class="liste-deroulante">
  <select name="maliste" onClick="afficheDiv(this.value);">
   <option>-- Choisissez votre modèle --</option>
   <option value="div2">A8 Alps</option>
   <option value="div2">Acer A1-810</option>
   <option value="div2">Acer A1-811</option>
   <option value="div2">Acer B1-711</option>
   <option value="div2">Acer Iconia A3-A10</option>
   <option value="div2">Acer Liquid E2</option>
   <option value="div2">Acer Liquid Z3</option>
   <option value="div2">Alcatel One Touch 6030D</option>
   <option value="div2">Alcatel One Touch 6030H</option>
   <option value="div2">Alcatel One Touch 6030X</option>
   <option value="div2">Alcatel One Touch 997D</option>
   <option value="div2">Alcatel One Touch Fierce</option>
   <option value="div2">Alcatel One Touch Idol Mini</option>
   <option value="div2">Alcatel One Touch Idol Ultra</option>
   <option value="div2">Alcatel One Touch Pop C5</option>
   <option value="div2">Alcatel One Touch S'POP</option>
   <option value="div2">Alcatel One Touch Scribe Easy</option>
   <option value="div2">Alcatel One Touch Scribe HD</option>
   <option value="div2">Alcatel One Touch Star</option>
   <option value="div2">Alcatel One Touch X'Pop</option>
   <option value="div2">Amoi N828</option>
   <option value="div2">Arc Mobile 350D</option>
   <option value="div2">Archos 40 Titanium</option>
   <option value="div1">Archos 50 Platinum</option>
   <option value="div6">Archos Gen8</option>
   <option value="div2">ASUS MeMO Pad HD 7</option>
   <option value="div1">ASUS MeMO Pad FHD 10</option>
   <option value="div1">ASUS PadFone</option>
   <option value="div1">ASUS PadFone 2</option>
   <option value="div1">ASUS PadFone Infinity</option>
   <option value="div1">ASUS Transformer Pad Infinity LTE</option>
   <option value="div2">aTAB4W</option>
   <option value="div2">Avus A24</option>
   <option value="div2">Bedove X12</option>
   <option value="div2">BLU Dash 5.0</option>
   <option value="div2">BLU Life Play</option>
   <option value="div2">BLU Life One X</option>
   <option value="div2">BLU Studio 5.0</option>
   <option value="div2">BLU Studio 5.5</option>
   <option value="div1">BLU Studio 5.3 S</option>
   <option value="div2">BLU Studio 5.5S</option>
   <option value="div2">BQ Aquaris 5</option>
   <option value="div2">BQ Aquaris 5.7</option>
   <option value="div2">BQ Elcano</option>
   <option value="div2">Brondi Glory 2</option>
   <option value="div1">BW T18+</option>
   <option value="div2">Cat B15</option>
   <option value="div2">Changhong Z9</option>
   <option value="div2">Charmpin G7</option>
   <option value="div2">Chery Mobile Amber</option>
   <option value="div2">Chery Mobile Burst 2</option>
   <option value="div2">Chery Mobile Cosmos S</option>
   <option value="div2">Chery Mobile Cosmos X</option>
   <option value="div2">Chery Mobile Omega XL</option>
   <option value="div2">Chery Mobile Thunder 2.0</option>
   <option value="div2">Chuwi VX1</option>
   <option value="div6">Cliq 2 MB611</option>
   <option value="div1">CloudFone Thrill 430X</option>
   <option value="div2">Coolbox Quore V57</option>
   <option value="div2">Coolpad F1</option>
   <option value="div2">Cube Talk 79</option>
   <option value="div2">Cube Talk 7X</option>
   <option value="div2">Cube Talk 9</option>
   <option value="div2">Cubot A890</option>
   <option value="div2">Cubot GT 90</option>
   <option value="div2">Cubot GT 99</option>
   <option value="div2">Cubot One</option>
   <option value="div2">Cubot P6</option>
   <option value="div2">Cubot X6</option>
   <option value="div2">Daxian XY100S</option>
   <option value="div1">DNS S4502</option>
   <option value="div1">DNS S4503</option>
   <option value="div1">DNS S4504</option>
   <option value="div1">Disgo 8400G</option>
   <option value="div2">Doogee DG200</option>
   <option value="div2">Doogee DG350</option>
   <option value="div2">Evercross A7S</option>
   <option value="div2">Excelvan ET704</option>
   <option value="div2">Explay HD Quad</option>
   <option value="div2">Explay Infinity II</option>
   <option value="div2">Explay Polo</option>
   <option value="div2">Explay Surfer 7.32 3G</option>
   <option value="div2">Explay Surfer 8.31 3G</option>
   <option value="div2">Explay X-Tremer</option>
   <option value="div1">FAEA F1</option>
   <option value="div2">Feiteng H5W</option>
   <option value="div2">Fly IQ440 Energie</option>
   <option value="div2">Fly IQ441 Radiance</option>
   <option value="div2">Fly IQ442 Miracle</option>
   <option value="div2">Fly IQ443 Trend</option>
   <option value="div2">Fly IQ446 Magic</option>
   <option value="div2">Fly IQ450 Quattro Horizon 2</option>
   <option value="div2">Fly IQ451</option>
   <option value="div1">Gigabyte GSmart G1315 Skate</option>
   <option value="div1">Gigabyte GSmart Rio R1</option>
   <option value="div2">Gionee 868H</option>
   <option value="div2">Gionee E7 Mini</option>
   <option value="div2">Gionee Elife E3</option>
   <option value="div2">Gionee GN 708</option>
   <option value="div2">Gionee Pioneer P2</option>
   <option value="div2">GoClever Fone 570Q</option>
   <option value="div2">GoClever Quantum 4</option>
   <option value="div2">GoClever Tab M713G</option>
   <option value="div2">Goophone N3</option>
   <option value="div2">GSmart Aku A1</option>
   <option value="div2">GSmart Sierra S1</option>
   <option value="div2">GuoPhone G9002</option>
   <option value="div2">Haier W718</option>
   <option value="div2">Haipai I9389</option>
   <option value="div2">HDC I9500</option>
   <option value="div2">HDC N9006</option>
   <option value="div2">Highscreen Alpha GTX</option>
   <option value="div1">Highscreen Blast</option>
   <option value="div1">Highscreen Boost</option>
   <option value="div5">Highscreen Explosion</option>
   <option value="div1">Highscreen Omega Q</option>
   <option value="div1">Highscreen Spark</option>
   <option value="div1">Highscreen Strike</option>
   <option value="div1">Hisense AD683G</option>
   <option value="div2">Hisense U970</option>
   <option value="div2">HKC Q79 3G</option>
   <option value="div2">Hosin V70</option>
   <option value="div1">HTC One S</option>
   <option value="div2">HTM A6</option>
   <option value="div2">HTM M1</option>
   <option value="div2">HTM M3</option>
   <option value="div1">Huawei Ascend G300</option>
   <option value="div1">Huawei Ascend G301</option>
   <option value="div1">Huawei Ascend G330D</option>
   <option value="div2">Huawei Ascend G500 Pro</option>
   <option value="div1">Huawei Ascend G526</option>
   <option value="div1">Huawei Ascend G600</option>
   <option value="div2">Huawei Ascend G610S</option>
   <option value="div3">Huawei Ascend G615</option>
   <option value="div2">Huawei Ascend G700</option>
   <option value="div2">Huawei Ascend G730</option>
   <option value="div3">Huawei Ascend Mate</option>
   <option value="div1">Huawei Ascend Y215</option>
   <option value="div2">Huawei Ascend Y320</option>
   <option value="div2">Huawei Ascend Y511</option>
   <option value="div3">Huawei MediaPad 102 Link</option>
   <option value="div1">Huawei Premia 4G</option>
   <option value="div1">Huawei Vitria</option>
   <option value="div2">Hummer H1+</option>
   <option value="div5">Hyundai T10</option>
   <option value="div5">Hyundai T7S</option>
   <option value="div2">iBall Slide 3G Q1035</option>
   <option value="div5">iBerry Auxus CoreX2 3G</option>
   <option value="div5">iBerry Auxus CoreX4 3G</option>
   <option value="div2">IconBIT NetTAB Space 3G Duo</option>
   <option value="div2">IconBIT NetTAN Mercury Q7</option>
   <option value="div5">Impression 9702</option>
   <option value="div2">Inco Colossus II</option>
   <option value="div2">iNew I6000+</option>
   <option value="div2">iNew V3</option>
   <option value="div2">Intex Aqua HD</option>
   <option value="div2">iOcean X7</option>
   <option value="div2">iWing WTD2</option>
   <option value="div2">Jiake JK 11</option>
   <option value="div2">Jiayu F1</option>
   <option value="div2">Jiayu G2</option>
   <option value="div2">Jiayu G3S</option>
   <option value="div2">Jiayu G4</option>
   <option value="div2">Just5 Spacer</option>
   <option value="div2">Karbonn A1</option>
   <option value="div2">Karbonn A30</option>
   <option value="div2">Karbonn A9+</option>
   <option value="div2">Karbonn Titanium S2</option>
   <option value="div1">Karbonn Titanium S5</option>
   <option value="div2">Kata i3</option>
   <option value="div2">Kata Venus 3</option>
   <option value="div2">Keneski Beta</option>
   <option value="div2">KingTopKt07</option>
   <option value="div1">K-Touch Titan S100</option>
   <option value="div2">KVD N3+</option>
   <option value="div1">Kyocera Hydro Edge</option>
   <option value="div1">Kyocera Hydro Xtrm</option>
   <option value="div1">Kyocera Torque</option>
   <option value="div2">Lanix Ilium S600</option>
   <option value="div2">Lava Iris 405</option>
   <option value="div2">Lava Iris 502</option>
   <option value="div2">Le Mobile Sosh</option>
   <option value="div2">Lenovo A3300</option>
   <option value="div2">Lenovo A368i</option>
   <option value="div2">Lenovo A369i</option>
   <option value="div2">Lenovo A390</option>
   <option value="div2">Lenovo A516</option>
   <option value="div1">Lenovo A600E</option>
   <option value="div2">Lenovo A656</option>
   <option value="div1">Lenovo A706</option>
   <option value="div2">Lenovo A850</option>
   <option value="div2">Lenovo A859</option>
   <option value="div2">Lenovo IdeaPad S5000</option>
   <option value="div2">Lenovo IdeaPhone P700i</option>
   <option value="div2">Lenovo IdeaPhone S720</option>
   <option value="div2">Lenovo IdeaTab A3000</option>
   <option value="div2">Lenovo IdeaTab S6000</option>
   <option value="div2">Lenovo IdeaTab S6000-H</option>
   <option value="div5">Lenovo K860</option>
   <option value="div5">Lenovo K860i</option>
   <option value="div2">Lenovo P770</option>
   <option value="div2">Lenovo P780</option>
   <option value="div2">Lenovo S720</option>
   <option value="div1">Lenovo S870E</option>
   <option value="div2">Lenovo S820</option>
   <option value="div2">Lenovo S890</option>
   <option value="div2">Lenovo S920</option>
   <option value="div2">Lenovo Yoga Tablet 8"</option>
   <option value="div2">Lenovo Yoga Tablet 10"</option>
   <option value="div2">Le Pan TC802A</option>
   <option value="div1">LF-LTE3</option>
   <option value="div1">LG Lucid 2</option>
   <option value="div1">LG Nitro HD</option>
   <option value="div1">LG Optimus Dynamic 2</option>
   <option value="div1">LG Optimus F5</option>
   <option value="div1">LG Optimus F7</option>
   <option value="div1">LG Optimus G E970</option>
   <option value="div1">LG Optimus G E975</option>
   <option value="div1">LG Optimus L1 II</option>
   <option value="div1">LG Optimus L3 II E425</option>
   <option value="div1">LG Optimus L5 E610</option>
   <option value="div1">LG Optimus L5 E612</option>
   <option value="div1">LG Optimus L5 E615</option>
   <option value="div1">LG Optimus L7 II P700</option>
   <option value="div1">LG Optimus L7 II P710</option>
   <option value="div1">LG Optimus L7 II P713</option>
   <option value="div1">LG Optimus L7 II P714</option>
   <option value="div1">LG Optimus L7 II P715</option>
   <option value="div1">LG Optimus L7 II P870</option>
   <option value="div1">LG Optimus L7 P700</option>
   <option value="div1">LG Optimus L7 P705</option>
   <option value="div6">LG Marquee LS855</option>
   <option value="div1">LG Optimus LTE 2</option>
   <option value="div6">LG Optimus Black</option>
   <option value="div2">M4tel SS1060</option>
   <option value="div1">Medion Life P4013</option>
   <option value="div5">Meizu MX2</option>
   <option value="div2">Micromax Bolt A58</option>
   <option value="div2">Micromax Canvas 2 Colors A120</option>
   <option value="div2">Micromax Canvas 2 Plus A110Q</option>
   <option value="div2">Micromax Canvas 2.2 A114</option>
   <option value="div2">Micromax Canvas 3DA115</option>
   <option value="div2">Micromax Canvas 4 A210</option>
   <option value="div1">Micromax Canvas Doodle A111</option>
   <option value="div2">Micromax Canvas Ego A113</option>
   <option value="div2">Micromax Canvas HD A116</option>
   <option value="div2">Micromax Canvas Magnus A117</option>
   <option value="div2">Micromax Ninja A89</option>
   <option value="div2">Micromax Pixel A90</option>
   <option value="div2">Mlais MX70 </option>
   <option value="div2">Morefine S6 Pro</option>
   <option value="div1">Motorola DEFY Mini XT321</option>
   <option value="div6">Motorola DEFY+ (MB525)</option>
   <option value="div6">Motorola DEFY+ (MB526)</option>
   <option value="div6">Motorola DROID 2</option>
   <option value="div6">Motorola DROID 2 Global</option>
   <option value="div6">Motorola DROID 2 R2D2</option>
   <option value="div6">Motorola DROID X</option>
   <option value="div6">Motorola DROID Pro</option>
   <option value="div6">Motorola Milestone 2</option>
   <option value="div2">Motorola RAZR D1</option>
   <option value="div2">Motorola RAZR D3</option>
   <option value="div6">Motorola XPRT</option>
   <option value="div2">M-Pai 809T</option>
   <option value="div2">MSI Primo 76</option>
   <option value="div2">MyPhone Agua Iceberg</option>
   <option value="div2">Mysaga C2</option>
   <option value="div2">Neken N6</option>
   <option value="div2">Newman K18</option>
   <option value="div2">Newman N1</option>
   <option value="div5">Newman N2</option>
   <option value="div2">Nexa Vega N4</option>
   <option value="div2">NGM Forward Prime</option>
   <option value="div2">NGM Dynamic Racing GP</option>
   <option value="div2">NGM Forward Young</option>
   <option value="div2">No.1 S7</option>
   <option value="div2">Omate TrueSmart</option>
   <option value="div2">Onda V819 3G</option>
   <option value="div1">Oppo Find 5</option>
   <option value="div2">Oppo Find 5 Mini</option>
   <option value="div2">Oppo Find 5 Mini</option>
   <option value="div2">Oppo Find Clover</option>
   <option value="div2">Oppo Findway </option>
   <option value="div2">Orange Hiro</option>
   <option value="div1">Orange Nivo</option>
   <option value="div1">Orange Yumo</option>
   <option value="div1">Orange Zali</option>
   <option value="div2">OUMEI X5</option>
   <option value="div2">Overmax Vertis-01</option>
   <option value="div2">Overmax Vertis-01+</option>
   <option value="div2">Overmax Vertis-02</option>
   <option value="div2">Overmax Vertis-02+</option>
   <option value="div1">Pantech Discover</option>
   <option value="div1">Pantech Flex</option>
   <option value="div2">Pantech Vega LTE</option>
   <option value="div1">Pantech Vega S5</option>
   <option value="div6">Parrot Asteroid Smart</option>
   <option value="div2">Pearl Smartwatch AW-414</option>
   <option value="div1">Pentagram Combo</option>
   <option value="div1">Phicomm i370W</option>
   <option value="div1">Phicomm i600</option>
   <option value="div1">Phicomm i800</option>
   <option value="div2">Philips W536</option>
   <option value="div2">Philips W736</option>
   <option value="div2">Phoenix Rockx1</option>
   <option value="div2">Prestigio Multi Pad 4 Quantum</option>
   <option value="div2">Prestigio Multi Phone 4055</option>
   <option value="div2">Prestigio Multi Phone PAP 3350</option>
   <option value="div2">Prestigio Multi Phone PAP 3400</option>
   <option value="div2">Prestigio Multi Phone PAP 4505</option>
   <option value="div2">Prestigio Multi Phone PAP 5044 Duo</option>
   <option value="div2">Runbo X5</option>
   <option value="div2">Runbo X6</option>
   <option value="div2">S09 W63</option>
   <option value="div5">Samsung Galaxy Camera 3G</option>
   <option value="div1">Samsung Galaxy Core</option>
   <option value="div1">Samsung Galaxy Express</option>
   <option value="div4">Samsung Illusion</option>
   <option value="div4">Samsung Lightray</option>
   <option value="div5">Samsung Galaxy Note</option>
   <option value="div5">Samsung Galaxy Note 10.1</option>
   <option value="div5">Samsung Galaxy Note 2</option>
   <option value="div5">Samsung Galaxy Note 8.0</option>
   <option value="div4">Samsung Galaxy Proclaim</option>
   <option value="div5">Samsung Galaxy S</option>
   <option value="div4">Samsung Galaxy S Aviator</option>
   <option value="div5">Samsung Galaxy S Infuse 4G</option>
   <option value="div5">Samsung Galaxy S2</option>
   <option value="div5">Samsung Galaxy S3</option>
   <option value="div5">Samsung Galaxy Tab 7.0 Plus</option>
   <option value="div5">Samsung Galaxy Tab 7.7</option>
   <option value="div1">Samsung Galaxy Win)</option>
   <option value="div4">Samsung Galaxy Young</option>
   <option value="div2">Sesonn N9200+</option>
   <option value="div1">Sharp Aquos Phone SH930W</option>
   <option value="div2">Sharp Aquos SH837W</option>
   <option value="div2">Shengda S4</option>
   <option value="div1">Smartfren Andromax i2</option>
   <option value="div1">Smartfren Andromax U</option>
   <option value="div2">Smartfren Andromax V</option>
   <option value="div1">Sony Xperia E</option>
   <option value="div1">Sony Xperia E Dual</option>
   <option value="div1">Sony Xperia L</option>
   <option value="div2">Spice Smart Flo Space</option>
   <option value="div2">Star HD9000+</option>
   <option value="div2">Star Kingelon S7589</option>
   <option value="div2">Star N800 Mini Note</option>
   <option value="div2">Star N8000</option>
   <option value="div2">Star N9800</option>
   <option value="div2">Star S5 Butterfly</option>
   <option value="div2">Star S6</option>
   <option value="div2">Star S9500</option>
   <option value="div2">Starmobile Diamond V3</option>
   <option value="div2">Starmobile Knight</option>
   <option value="div2">Symphony Xplorer ZII</option>
   <option value="div2">Tecno R7</option>
   <option value="div2">TeXet NaviPad TM-7055HD</option>
   <option value="div1">TeXet TM-3204R</option>
   <option value="div1">TeXet TM-4577</option>
   <option value="div2">TeXet TM-5277</option>
   <option value="div2">THL T100S</option>
   <option value="div2">THL T200</option>
   <option value="div2">THL V12</option>
   <option value="div2">THL W8 Beyond</option>
   <option value="div2">THL W8S</option>
   <option value="div2">THL W11</option>
   <option value="div2">THL W100</option>
   <option value="div2">THL W200</option>
   <option value="div2">Tronsmart TS7</option>
   <option value="div2">Ulefone U7</option>
   <option value="div2">Ultime U100S</option>
   <option value="div2">Vonino Ego QS</option>
   <option value="div2">Vonino Sirius SQ</option>
   <option value="div2">Walton Primo EF</option>
   <option value="div2">Walton Primo F3i</option>
   <option value="div2">Walton Primo G1</option>
   <option value="div2">Walton Primo H2</option>
   <option value="div2">Walton Walpad</option>
   <option value="div2">Wiko Cink Peax 2</option>
   <option value="div2">Wiko Darkfull</option>
   <option value="div2">Wiko Darknight</option>
   <option value="div2">Wiko Darkmoon</option>
   <option value="div2">Wiko Iggy</option>
   <option value="div2">Wiko Ozzy</option>
   <option value="div2">Wiko Rainbow</option>
   <option value="div2">Wiko Stairway</option>
   <option value="div2">Xiaocai X9</option>
   <option value="div2">Xiaomi Hongmi/Redmi</option>
   <option value="div1">Xiaomi Mi2S</option>
   <option value="div2">Xolo A600</option>
   <option value="div2">Xolo Q700</option>
   <option value="div2">Xolo Q800</option>
   <option value="div2">Xolo Q3000</option>
   <option value="div1">Yarvik Ingenia Compact</option>
   <option value="div2">Zopo C2 Platinum</option>
   <option value="div2">Zopo C3</option>
   <option value="div2">Zopo ZP300+</option>
   <option value="div2">Zopo ZP500+</option>
   <option value="div2">Zopo ZP900 Leader</option>
   <option value="div2">Zopo ZP910</option>
   <option value="div2">Zopo ZP950H</option>
   <option value="div2">Zopo ZP980</option>
   <option value="div2">Zopo ZP990</option>
   <option value="div2">Zopo ZP990+</option>
   <option value="div2">Zopo ZP998</option>
   <option value="div1">ZTE Blade G</option>
   <option value="div2">ZTE Blade G1</option>
   <option value="div2">ZTE Blade G2</option>
   <option value="div2">ZTE Blade Q</option>
   <option value="div2">ZTE BLade Q Maxi</option>
   <option value="div2">ZTE BLade Q Mini</option>
   <option value="div1">ZTE Grand Memo</option>
   <option value="div2">ZTE Grand X Quad</option>
   <option value="div2">ZTE Kis</option>
   <option value="div2">ZTE Leo S1</option>
   <option value="div2">ZTE N986</option>
   <option value="div2">ZTE Open</option>
   <option value="div2">ZTE Roamer 2</option>
   <option value="div1">ZTE Telstra Dave</option>
   <option value="div2">ZTE V967S</option>
   <option value="div1">ZTE Warp Sequent</option>
   <option value="div2">Zen Ultrafone 701HD</option>
  </select><br/><br/><br/>
  <div id="div1" class="mesDiv">
  Sur votre appareil Android à rooter :<br/><br/>
  1) Cochez la case "Sources inconnues" (Paramètres --> Sécurité)<br/><br/>
  2) Téléchargez et installez l'application <a href="../downloads/framaroot.apk">Framaroot</a><br/><br/>
  3) Assurez-vous d'avoir choisi "Installer SuperSU" et cliquez sur "Gandalf"
  </div>
  <div id="div2" class="mesDiv">
  Sur votre appareil Android à rooter :<br/><br/>
  1) Cochez la case "Sources inconnues" (Paramètres --> Sécurité)<br/><br/>
  2) Téléchargez et installez l'application <a href="../downloads/framaroot.apk">Framaroot</a><br/><br/>
  3) Assurez-vous d'avoir choisi "Installer SuperSU" et cliquez sur "Baharir", "Boromir" ou "Faramir" (il n'y a pas de différence, sauf si un ou plusieurs des exploits cités ne marche(nt) pas pour votre modèle)
  </div>
  <div id="div3" class="mesDiv">
  Sur votre appareil Android à rooter :<br/><br/>
  1) Cochez la case "Sources inconnues" (Paramètres --> Sécurité)<br/><br/>
  2) Téléchargez et installez l'application <a href="../downloads/framaroot.apk">Framaroot</a><br/><br/>
  3) Assurez-vous d'avoir choisi "Installer SuperSU" et cliquez sur "Pippin"
  </div>
  <div id="div4" class="mesDiv">
  Sur votre appareil Android à rooter :<br/><br/>
  1) Cochez la case "Sources inconnues" (Paramètres --> Sécurité)<br/><br/>
  2) Téléchargez et installez l'application <a href="../downloads/framaroot.apk">Framaroot</a><br/><br/>
  3) Assurez-vous d'avoir choisi "Installer SuperSU" et cliquez sur "Aragorn" ou "Legolas" (il n'y a pas de différence, sauf si un des exploits ne marchent pas pour votre modèle)
  </div>
  <div id="div5" class="mesDiv">
  Sur votre appareil Android à rooter :<br/><br/>
  1) Cochez la case "Sources inconnues" (Paramètres --> Sécurité)<br/><br/>
  2) Téléchargez et installez l'application <a href="../downloads/framaroot.apk">Framaroot</a><br/><br/>
  3) Assurez-vous d'avoir choisi "Installer SuperSU" et cliquez sur "Aragorn", "Frodo", "Legolas" ou "Sam" (il n'y a pas de différence, sauf si un ou plusieurs des exploits cités ne marche(nt) pas pour votre modèle)
  </div>
  <div id="div6" class="mesDiv">
  Sur votre appareil Android à rooter :<br/><br/>
  1) Cochez la case "Sources inconnues" (Paramètres --> Sécurité)<br/><br/>
  2) Téléchargez et installez l'application <a href="../downloads/framaroot.apk">Framaroot</a><br/><br/>
  3) Assurez-vous d'avoir choisi "Installer SuperSU" et cliquez sur "Gimli"
  </div>
   </article>
  </section>
  <section>
   <article>
   
   </article>
   <article>
   
   </article>
  </section>
 </div>
 </div>
</body>
</html>


Code CSS Drawer Menu : 

@import url(http://fonts.googleapis.com/css?family=Lato|Bangers|Oswald);
body{
 margin: 0;
 padding: 0;
 font-family: 'Lato', sans-serif;
}
a{text-decoration: none;}
* { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
-o-box-sizing: border-box; 
box-sizing: border-box; 
/* adds animation for all transitions */ 
-webkit-transition: .25s ease-in-out; 
-moz-transition: .25s ease-in-out; 
-o-transition: .25s ease-in-out; 
transition: .25s ease-in-out; 
margin: 0; 
padding: 0; 
-webkit-text-size-adjust: none; 
} 

/* Makes sure that everything is 100% height */ 

html,body { 
height: 100%; 
overflow: hidden; 
} 

/* gets the actual input out of the way; 
we're going to style the label instead */ 

#drawer-toggle { 
position: absolute; 
opacity: 0; 
}
#drawer-toggle-label { 
-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 
left: 0px; 
height:50px; 
width: 50px; 
display: block; 
position: fixed;
background: rgba(255,255,255,.0); 
z-index: 1;
} 
#drawer-toggle-label:hover{cursor: pointer}
/* adds our "hamburger" menu icon */ 

#drawer-toggle-label:before { 
content: ''; 
display: block; 
position: absolute; 
height: 2px; 
width: 24px; 
background: white; 
left: 13px; 
top: 18px; 
box-shadow: 0 6px 0 white, 0 12px 0 white; 
}
header { 
width: 100%;
height: 70px;
position: fixed; 
left: 0px; 
padding: 20px; 
font-size: 30px; 
line-height: 30px; 
z-index: 0;
font-family: 'Bangers', sans-serif;
font-size: 50px;
text-align: center;
background-color: #009688;
box-shadow: 0 1px 1px #00CCB9;
}
header a{color: black;}
/* drawer menu pane - note the 0px width */ 

#drawer { 
position: fixed; 
top: 0; 
left:-300px; 
height: 100%; 
width: 300px; 
background: #2f2f2f; 
overflow-x: hidden; 
overflow-y: scroll; 
padding: 20px; 
-webkit-overflow-scrolling: touch; 
} 

/* actual page content pane */ 

#page-content { 
margin-left: 0px; 
margin-top: 50px; 
width: 100%; 
height: calc(100% - 50px); 
overflow-x:hidden; 
overflow-y:scroll; 
-webkit-overflow-scrolling: touch; 
padding: 20px;
}
/* checked styles (menu open state) */ 

#drawer-toggle:checked ~ #drawer-toggle-label { 
height: 100%; 
width: calc(100% - 300px); 
background: rgba(255,255,255,.8); 
} 

#drawer-toggle:checked ~ #drawer-toggle-label, 
#drawer-toggle:checked ~ header { 
left: 300px; 
} 

#drawer-toggle:checked ~ #drawer { 
left: 0px; 
} 

#drawer-toggle:checked ~ #page-content { 
margin-left: 300px; 
}
/* Menu item styles */ 

#drawer ul { 
list-style-type:none; 
} 

#drawer ul a { 
display:block; 
padding:10px; 
color:#c7c7c7; 
text-decoration:none; 
} 

#drawer ul a:hover { 
color:white; 
} 

/* Responsive MQ */ 

@media all and (max-width:350px) { 

#drawer-toggle:checked ~ #drawer-toggle-label { 
height: 100%; 
width: 50px; 
} 

#drawer-toggle:checked ~ #drawer-toggle-label, 
#drawer-toggle:checked ~ header { 
left: calc(100% - 50px); 
} 

#drawer-toggle:checked ~ #drawer { 
width: calc(100% - 50px); 
padding: 20px; 
} 

#drawer-toggle:checked ~ #page-content { 
margin-left: calc(100% - 50px); 
} 

}
img[alt="button-home"]{
position: relative;
left: 70px;
}
li{
font-size: 20px;
}
li li{
position: relative;
left: 30px;
font-size: 15px;
}
.begin-root{font-size: 30px;}


CSS de mon Index : 

.root{
 position: absolute;
 top: 150px;
 left: 100px;
 width: 40%;
 text-align: center;
 background-color:#FFF;
    padding:20px;
    box-shadow: 0 0 10px #000000;
}
h1{
 font-size: 40px;
}
.disclaimer{
 color:red
}
.mesDiv{
 display:none;
 text-align: left;
 font-size: 150%;
}
a{
 color: #FF5200;
}


Adresse de la page en question : http://androot.tk

Merci de votre aide.
A voir également:

1 réponse

Réponse 1 / 1
Utilisateur anonyme
13 avril 2015 à 20:04
Ton root, met le en position relative est non absolute, car en absolute il sort du flux donc n'est pas pris en compte par le reste. Alors qu'en relative tu peux lui mettre une position par rapport au container parent.

Après utiliser la méthode du checkbox pour simuler un toggle c'est pas mal, mais en pratique ça se fait pas car cette élément n'est pas fait pour ça. En sématique c'est pas correct du moins, on fait ça en JS.
0
AnhTuanFevre Messages postés 219 Date d'inscription samedi 17 janvier 2015 Statut Membre Dernière intervention 24 juillet 2015 16
13 avril 2015 à 20:25
Merci pour ton aide. J'ai mis une position relative et ça marche (évident en même temps mais j'avais oublié..)

Pour le toggle, c'est un tutoriel pour un menu drawer qui l'a mit et j'ai juste adapté par rapport à mes besoins. Et du coup j'ai gardé cette méthode. Si tu as une meilleure idée pour le même résultat, je suis preneur.
0
Utilisateur anonyme
13 avril 2015 à 20:40
Utiliser du JS, après oui ça marche pourquoi changer, mais tu vas peut être avoir des soucis ensuite.

Sinon un tuto j'en ai pas directement, mais essaye de taper "menu toggle js" dans Google
0
AnhTuanFevre Messages postés 219 Date d'inscription samedi 17 janvier 2015 Statut Membre Dernière intervention 24 juillet 2015 16
13 avril 2015 à 20:41
Sauf que j'ai pris ce tuto justement parce qu'il n'y a pas de JS car il peut avoir des problèmes avec ceux qui désactivent JS.
0
Utilisateur anonyme
13 avril 2015 à 20:44
C'est rare que des personnes désactive le JS, car dans les nouveaux navigateurs il est plus possible de désactiver à part en utilisant un plugin, et sinon il faut juste prévoir l'alternative au cas où le JS n'est pas activer, comme laissé le menu apparent tout le temps
0
AnhTuanFevre Messages postés 219 Date d'inscription samedi 17 janvier 2015 Statut Membre Dernière intervention 24 juillet 2015 16 > Utilisateur anonyme
Modifié par AnhTuanFevre le 13/04/2015 à 21:07
Ah je ne savais ^pas que les récents navigateurs empêchaient de désactiver le JS. Merci de l'information !

Bon sinon je vais laisser comme ça. Merci pour tout ! ;)
0

Discussions similaires

[PIX] Commencer chaque poème sur une nouvelle page
ETHAN -
Willzac -

19 réponses
Cette page n'est pas disponible
falaises63 -
bazfile -

1 réponse
[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses