javascript - how to make div elements display inline (other version) -
i've read asked same question different layout/purpose..
i can't seem figure out answer given because code looks quite diffrent because using div inside div, because need in future coding..
i need words display inline, can still move each 1 sepperatly, in line under eachother this, http://prntscr.com/a0ivs5
this code,
body, html { margin-left: 10%; margin-right: 10%; padding: 0px; height: 100%; font-family: georgia, "comic sans ms"; background-color: #f0f0f0; } header { height: 5%; border-bottom: thick solid grey; } .img { width: 25%; height: 30%; background-color:#f0f0f0; float: left; } .antwoord { float: left; width: 95%; height: 25px; background-color: white; border-style: solid; border-color: #000000; border-width: 4px; } .move1 { } .move2 { margin-top: 12.5% } .move4 { margin-top: 19% } .move5 { margin-top: 33.5% } .move6 { margin-top: 20.8% } .move7 { margin-top: 37.5% } .word { float: left; } footer { border-top: thick solid grey; height: 5%; } .points { float: right; } .container { width: 100%; height: 90%; } .igen { font-size: 25px; font-weight: bold; } .sprint { float: right; } .copyright { position: relative; bottom: 20px; left: 65px; font-size: 10px; }<!doctype html> <html> <head> <meta charset="utf-8"> <title>words</title> <link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8"> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> <script> </script> </head> <body> <header> <span class="fa fa-refresh" style="font-size:25px;"></span><span class="igen"> igen</span> <span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>rigtige: 0 <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>forkerte: 0</span> </header> <div class="container"> <div class="img" id="img1"> <div class="plaatje" id="plaatje1"><center><img src="img/cat.jpg" alt="cat" width="50%;"></div> <div class="move1"><div class="antwoord" id="antwoord1"></div></div> </div> <div class="img" id="img2"> <div class="plaatje" id="plaatje1"><center><img src="img/beak.jpg" alt="beak" width="50%;"></div> <div class="move2"><div class="antwoord" id="antwoord2"></div></div> </div> <div class="img" id="img3"> <div class="plaatje" id="plaatje3"><center><img src="img/spoon.jpg" alt="spoon" width="50%;"></div> <div class="move3"><div class="antwoord" id="antwoord3"></div></div> </div> <div class="img" id="img4"> <div class="plaatje" id="plaatje4"><center><img src="img/milk.jpg" alt="milk" width="50%;"></div> <div class="move4"><div class="antwoord" id="antwoord4"></div></div> </div> <div class="img" id="img5"> <div class="plaatje" id="plaatje5"><center><img src="img/egg.jpg" alt="egg" width="50%;"></div> <div class="move5"><div class="antwoord" id="antwoord5"></div></div> </div> <div class="img" id="img6"> <div class="plaatje" id="plaatje6"><center><img src="img/thee.jpg" alt="tea" width="50%;"></div> <div class="move6"><div class="antwoord" id="antwoord6"></div></div> </div> <div class="img" id="img7"> <div class="plaatje" id="plaatje7"><center><img src="img/meel.jpg" alt="meel" width="50%;"></div> <div class="move7"><div class="antwoord" id="antwoord7"></div></div> </div> <div class="img" id="img8"> <div class="plaatje" id="plaatje8"><center><img src="img/passport.jpg" alt="passport" width="50%;"></div> <div class="move8"><div class="antwoord" id="antwoord8"></div></div> </div> <div class="word" id="word1"> <div class="tekst" id="tekst1"> <p>cat</p> </div> </div> <div class="word" id="word2"> <div class="tekst" id="tekst2"> <p>spoon</p> </div> </div> <div class="word" id="word3"> <div class="tekst" id="tekst3"> <p>meal</p> </div> </div> <div class="word" id="word4"> <div class="tekst" id="tekst4"> <p>passport</p> </div> </div> <div class="word" id="word5"> <div class="tekst" id="tekst5"> <p>egg</p> </div> </div> <div class="word" id="word6"> <div class="tekst" id="tekst6"> <p>beak</p> </div> </div> <div class="word" id="word7"> <div class="tekst" id="tekst7"> <p>tea</p> </div> </div> <div class="word" id="word8"> <div class="tekst" id="tekst8"> <p>milk</p> </div> </div> <footer> <img class="dansk" id="dansk" src="img/dansk2.jpg" alt="dansk" /> <img class="sprint" id="sprint" src="img/sprint2.png" alt="sprint" /> <center><span class="copyright"> ©2013 laerdansk / fc-sprint² leerbedrijf bronnen </span></center> </footer> </body> </html>i did other stuff in code not efficient eighter, know not way yet, quite new in programming..
it's little game words need dropped table's under images..
if has tips me, welcome ofcourse :d in advance!
please note css class names case-sensitive, .word {...} not work <div class="word">...</div>
anyway, words wrapped in 3 block level elements, you'd have make them inline desired effect
div.word > div.tekst > p
.word, .word .tekst, .word p { display:inline; } body, html { margin-left: 10%; margin-right: 10%; padding: 0px; height: 100%; font-family: georgia, "comic sans ms"; background-color: #f0f0f0; } .container { width: 100%; height: 90%; } .word, .word .tekst, .word p { display:inline; }<div class="container"> <div class="word" id="word1"> <div class="tekst" id="tekst1"> <p>cat</p> </div> </div> <div class="word" id="word2"> <div class="tekst" id="tekst2"> <p>spoon</p> </div> </div> <div class="word" id="word3"> <div class="tekst" id="tekst3"> <p>meal</p> </div> </div> <div class="word" id="word4"> <div class="tekst" id="tekst4"> <p>passport</p> </div> </div> <div class="word" id="word5"> <div class="tekst" id="tekst5"> <p>egg</p> </div> </div> <div class="word" id="word6"> <div class="tekst" id="tekst6"> <p>beak</p> </div> </div> <div class="word" id="word7"> <div class="tekst" id="tekst7"> <p>tea</p> </div> </div> <div class="word" id="word8"> <div class="tekst" id="tekst8"> <p>milk</p> </div> </div> </div>p.s have syntax errors
Comments
Post a Comment