javascript - How to "glue" elements against the top of the screen -
this question has answer here:
i have problem don't quite understand because it's counter know. so, (i thought that) knew elements placed top-left, , try cover space inline rightwards, downwards.
but problem somehow html-divs glued bottom, behaving if positioning start @ bottom, moving rightwards. can explain me how so, , css properties change it?
image shows 3 columns of rectangles + 1 logo, each column represents larger div (with css inline-block property make them appear left-to-right): 
i can give css + html, although it's going search through (i'm more trying give me general answer, don't have through code):
button { width: 205px; height: 30px; font-size: 14px; font-weight: 500; } .bestillingstekst { font-weight: 500; } .question { font-weight: 700; } .psmall { display: inline; font-style: italic; font-size: 13px; font-weight: 600; } .psmall2 { display: block; font-style: italic; font-size: 13px; font-weight: 600; margin-top: 3px; } .input_box { width: 150px; display: inline-block; float:right; } .rectangledesign { margin-top: 10px; margin-bottom: 10px; text-align: center; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 5px; } <form method='post' id='form1' runat='server' autocomplete='off'> <div style="display: block; width: 100vw; font-family: 'malgun gothic'; font-weight: 400;"> <div id="screenie"> <div style="margin-top: 10px;"> <div id="left-div" style="display: inline-block;"> <div id="tjenesteinformasjon" style='width: 300px;' class="rectangledesign"> <span style='font-size: 26px;'>hva gjør vi?</span><br /> <p>vi tilbyr flyttehjelp, flyttevask, varetaxi/budbil, transport og utleie av biltransporthenger!<br /><br /> vennligst benytt bestillingsskjema til høyre å få et tilbud raskt og enkelt (bestilling er ikke bindende)!<br /><br /> Ønsker du å kontakte oss manuelt, enten bestilling, informasjon eller kundeservice, kan du også bruke kontakt- og bedriftsinformasjonen nedenfor.</p> </div> <div id="priser" style="width: 300px;" class="rectangledesign"> <span style='font-size: 26px;'>prisinformasjon:</span><br /> <p> priser avtales som en fast sum på forhånd! du skal aldri betale mer enn denne prisen!<br /> <span style="color: red; font-weight: 600; font-size: 19px;">det er viktig oss @ du er fornøyd med prisen din! derfor kan du gi oss et tilbud bestillingskjema til høyre! ikke glem å fortell oss hva du ønsker!</span> </p> </div> <div id="partner" style="width: 300px;" class="rectangledesign"> <span style='font-size: 26px;'>bli partner!</span><br /> <p> trenger du ofte oppdrag? eller trenger du noen til å kjøre varer og gjenstander fast? da ønsker vi å bli partner med deg!<br /><br /> kontakt hjelpsomme folk mer informasjon om hvordan å sette opp partnerskap med vår bedrift! </p> </div> <div id="kontaktinformasjon" style='width: 300px;' class="rectangledesign"> <span style='font-size: 26px;'>hvordan kontakte oss?</span><br /> <p>epost: post@hjelpsommefolk.no<br />tlf: 92 53 48 35<br/>organisasjonsnr.: 916 043 112<br/> postadresse: nøsteveien 60, 3413 lier<br/>kontaktperson: mantas tamosiunas</p> </div> </div> <div id="center-div" style="display: inline-block;"> <div style="width: 550px;" class="rectangledesign"> <div id="skjematype_a" style="display: block; width: 265px; height: 75px; margin-left: 120px; font-size: 11.75px; text-align: center; border-width: 3px; border-style: outset; border-color: #00e6ab;"> <img id="bil" src="/images/bil.jpg" onclick="changeimage()" style="width: 135px; height: 75px; float: left; padding-right: 2px;" /> <div id="skjematype_b">klikk på bildet å bytte bestillingskjema til <b>biltransporthenger.</b></div> </div> <script> function changeimage() { var bestillingstekst = document.getelementbyid('bestillingstekst') var bestillingstekst2 = document.getelementbyid('bestillingstekst2') var block = document.getelementbyid('skjematype_a') var s_text = document.getelementbyid('skjematype_b') var image = document.getelementbyid('bil'); if (image.src.match("bil")) { image.src = "/images/henger.jpg" s_text.innerhtml = "klikk på bildet å bytte bestillingskjema til <b>transport</b> og <b>flyttetjenester.</b>" bestillingstekst.hidden = 'hidden' bestillingstekst2.hidden = '' } else { image.src = "/images/bil.jpg"; s_text.innerhtml = "klikk på bildet å bytte bestillingskjema til <b>biltransporthenger.</b>" bestillingstekst.hidden = '' bestillingstekst2.hidden = 'hidden' } } </script> <div id='bestillingstekst' class='bestillingstekst'> <p> <span style='font-size: 26px;'>bli kontaktet med tilbud på sms!</span><br /> <span style='font-style: italic;'>(tilbudet kommer normalt dagen etter)</span> </p> <p class='question'>hvilke tjenester ønsker du?</p> <label>flyttehjelp<input id='fhjelp' type='checkbox' name='tjenester' runat='server'/></label> <label>flyttevask<input id='fvask' type='checkbox' name='tjenester' runat='server'/></label></> <label>transport<input id='transport' type='checkbox' name='tjenester' runat='server'/></label></> <p class='question'>hvordan ønsker du å betale?</p> <label>kontant<input id='kontant' type='radio' name='betaling' runat='server'/></label></> <label>faktura<input id='faktura' type='radio' name='betaling' runat='server'/></label></> <p class="question">hva synes du er en god pris jobben?</p> <div style='width: 100%; display: inline-block; text-align: left; line-height: 22px;'> <label>pris kroner:<input class="input_box" id='pris1' type='tel' maxlength='8' runat='server'/></label> </div> <p class='question'>er du privatperson eller bedrift?</p> <label>privat<input id='privat' type='radio' name='kundetype' runat='server'/></label></> <label>bedrift<input id='bedrift' type='radio' name='kundetype' runat='server'/></label></> <p class='question'>hvordan kontakter vi deg?</p> <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'> <label>fullt personnavn<input class="input_box" id='personnavn' type='text' runat='server'/></label> <br /> <label>bedriftsnavn<span class='psmall'> (kun bedrifter)</span><input class="input_box" id='bedriftsnavn' type='text' runat='server'/></label> <br /> <label>mobilnr.<input class="input_box" id='tlf' type='tel' maxlength='8' runat='server'/></label> <br /> <label>alternativt telefonnr.<input class="input_box" id='alt_tlf' type='tel' maxlength='8' runat='server'/></label> <br /> <label>epost<input class="input_box" id='epost' type='email' runat='server'/></label> <br /> </div> <p class='question'>hva er beste dato og tidspunkt tjenesten(e)?</p> <p class='psmall2'>(bare endr tidspunkt tjenestene du skal ha)</p> <div style='width: 100%; display: inline-block; text-align: left; line-height: 24.5px;'> <label>flyttehjelp<input class="input_box" id='fhjelp_tid' type='datetime' value='10:00 01-01-2016' runat='server'/></label> <br /> <label>utflyttingsvask<input class="input_box" id='fvask_tid' type='datetime' value='10:00 01-01-2016' runat='server'/></label> <br /> <label>tilflyttingsvask<input class="input_box" id='fvask_tid2' type='datetime' value='10:00 01-01-2016' runat='server'/></label> <br /> <label>transport<input class="input_box" id='transport_tid' type='datetime' value='10:00 01-01-2016' runat='server'/></label> <br /> </div> <p class='question'>hvor skal tjenesten(e) starte?</p> <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'> <label>adresse<input class="input_box" id='adresse1' type='text' runat='server'/></label> <br /> <label>poststed<input class="input_box" id='poststed1' type='text' runat='server'/></label> <br /> <label>postnr.<input class="input_box" id='postnr1' type='text' maxlength='4' runat='server'/></label> <br /> <label>etasje<input class="input_box" id='etasje1' type='tel' maxlength='2' runat='server'/></label> <br /> <label>ca. kvadratmeter <span class='psmall'>(trengs bare ved utflyttingsvask)</span><input class="input_box" id='kvadratmeter1' type='tel' maxlength='8' runat='server'/></label> <br /> <label>bygningstype<input class="input_box" id='bygningstype1' type='text' runat='server'/></label> <br /> <label>heis?</label> <div style='display: inline-block; float:right;'> <label>ja<input id='heisja1' type='radio' name='heis1' runat='server'/></label> <label>nei<input id='heisnei1' type='radio' name='heis1' class='radioleft' runat='server'/></label> </div> <br /> </div> <p class='question'>hvor skal tjenesten(e) avslutte(s)?</p> <p class='psmall2'>(ikke fyll inn viss kun utflyttingsvask)</p> <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'> <label>adresse<input class="input_box" id='adresse2' type='text' runat='server'/></label> <br /> <label>poststed<input class="input_box" id='poststed2' type='text' runat='server'/></label> <br /> <label>postnr.<input class="input_box" id='postnr2' type='text' maxlength='4' runat='server'/></label> <br /> <label>etasje<input class="input_box" id='etasje2' type='tel' maxlength='2' runat='server'/></label> <br /> <label>ca. kvadratmeter <span class='psmall'>(trengs bare ved tilflyttingsvask)</span><input class="input_box" id='kvadratmeter2' type='tel' maxlength='8' runat='server'/></label> <br /> <label>bygningstype<input class="input_box" id='bygningstype2' type='text' runat='server'/></label> <br /> <label>heis?</label> <div style='display: inline-block; float:right;'> <label>ja<input id='heisja2' type='radio' name='heis2' runat='server'/></label> <label>nei<input id='heisnei2' type='radio' name='heis2' class='radioleft' runat='server'/></label> </div> <br /> </div> <p class='question'>hva ønsker du fraktet (og annet vi bør vite)?</p> <textarea id='textarea1' rows='6' cols='32' spellcheck='false' name='s1' runat='server'>du behøver ikke skrive noe viss du ikke trenger det...</textarea><br /> <button style='margin-top: 2px;' id='button2' form='form1' type='submit' onserverclick='sendemail' runat='server'>kontakt meg med et tilbud!</button> </div> <div hidden="hidden" id='bestillingstekst2' class='bestillingstekst'> <p> <span style='font-size: 26px;'>bli kontaktet med tilbud på sms!</span><br /> <span style='font-style: italic;'>(tilbudet kommer normalt dagen etter)</span> </p> <p class='question'>hvordan ønsker du å betale?</p> <label>kontant<input id='leie_kontant' type='radio' name='betaling' runat='server'/></label></> <label>faktura<input id='leie_faktura' type='radio' name='betaling' runat='server'/></label></> <p class="question">hva synes du er en god pris leie?</p> <p class='psmall2'>(fastpriser inntil 1 døgn: 300kr/400kr/500kr under 4/8/24 timer)</p> <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'> <label>pris kroner:<input class="input_box" id='pris2' type='tel' maxlength='8' runat='server'/></label> </div> <p class='question'>er du privatperson eller bedrift?</p> <label>privat<input id='leie_privat' type='radio' name='kundetype' runat='server'/></label></> <label>bedrift<input id='leie_bedrift' type='radio' name='kundetype' runat='server'/></label></> <p class='question'>hvordan kontakter vi deg?</p> <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'> <label>fullt personnavn<input class="input_box" id='leie_personnavn' type='text' runat='server'/></label> <br /> <label>bedriftsnavn<span class='psmall'> (kun bedrifter)</span><input class="input_box" id='leie_bedriftsnavn' type='text' runat='server'/></label> <br /> <label>mobilnr.<input class="input_box" id='leie_tlf' type='tel' maxlength='8' runat='server'/></label> <br /> <label>alternativt telefonnr.<input class="input_box" id='leie_alt_tlf' type='tel' maxlength='8' runat='server'/></label> <br /> <label>epost<input class="input_box" id='leie_epost' type='email' runat='server'/></label> <br /> </div> <p class='question'>når ønsker du å leie?</p> <div style='width: 100%; display: inline-block; text-align: left; line-height: 24.5px;'> <label>leiestart<input class="input_box" id='leiestart' type='datetime-local' value='2020-01-01t10:00:00' runat='server'/></label> <br /> <label>leieslutt<input class="input_box" id='leieslutt' type='datetime-local' value='2020-01-01t10:00:00' runat='server'/></label> <br /> </div> <p class='question'>hva er adressen din?</p> <div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'> <label>adresse<input class="input_box" id='leie_adresse' type='text' runat='server'/></label> <br /> <label>poststed<input class="input_box" id='leie_poststed' type='text' runat='server'/></label> <br /> <label>postnr.<input class="input_box" id='leie_postnr' type='text' maxlength='4' runat='server'/></label> <br /> </div> <p class='question'>noe mer vi bør vite?</p> <textarea id='textarea2' rows='6' cols='32' spellcheck='false' name='s1' runat='server'>du behøver ikke skrive noe viss du ikke trenger det...</textarea><br /> <button style='margin-top: 2px;' id='button1' form='form1' type='submit' onserverclick='sendemail2' runat='server'>kontakt meg med et tilbud!</button> </div> </div> </div> <div id="right-div" style="display: inline-block;"> <img style="width: 315px; height: 245px;" src='/images/logo.jpg'/ alt='logo'/> <div id="finn" style='width: 300px; text-align: center; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;'> <p style="font-size: 16px; font-style: italic;">se våre finn.no referanser linken under! <a href="http://www.finn.no/smajobber/profiler/510702027/">http://www.finn.no/smajobber...</a></p> <img style="" src='/images/finn1.png'/> <img style="" src='/images/finn2.png'/> <img style="" src='/images/finn3.png'/> </div> <div id="trygghet" style="width: 300px;" class="rectangledesign"> <span style='font-size: 26px;'>trygghet!</span><br /> <p>når man har noe så billige som oss, kan det være lett å tro @ det er <i>for</i> billig.<br /> oss er dette <i>ikke</i> sant! vi tror @ <b>trygghet</b>, <b>god kundeservice</b> og <b>gode priser</b> hører sammen!<br /><br /> hos hjelpsomme folk skal du alltid føle deg trygg på @ vi viser <b>respekt</b>, <b>nøyaktighet</b> og <b>forsiktighet</b> når vi behandler dine eiendeler!<br /><br /> vi vil alltid ta ekstra godt vare på gjenstandene dine når disse skal fraktes, og har som regel å pakke dem inn bobleplast å fjerne muligheten transportskader!<br /><br /> hva tror du? skal kvalitetsarbeide følge sammen med lave priser?</p> </div> <div id="facebook" style="width: 300px;" class="rectangledesign"> <h4 style="font-style: italic;"> liker du oss? vis det her! <3 </h4> <div class="fb-like" data-href="http://hjelpsommefolk.no" data-width="100" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div> <br /> <div class="fb-comments" data-href="http://hjelpsommefolk.no" data-width="275" data-numposts="6"></div> </div> </div> </div> </div> </div> <script type="text/javascript"> var rightdiv = parseint(document.getelementbyid('right-div').offsetwidth); var centerdiv = parseint(document.getelementbyid('center-div').offsetwidth); var leftdiv = parseint(document.getelementbyid('left-div').offsetwidth); var combined_rect_width = rightdiv + centerdiv + leftdiv + 40; var int_screeniemargin = (window.innerwidth * 0.5) - (combined_rect_width * 0.5); var string_screeniemargin = int_screeniemargin + "px"; document.getelementbyid('screenie').style.marginleft = string_screeniemargin; </script> </form>
add vertical-align: top left-div , right-div.
Comments
Post a Comment