html - CSS absolute positioning and resizing windows -


first off let me say, don't whole lot of front end design please excuse inline code etc...

i've built these check boxes able include image when clicked. understand it's not inside parent class i'm bit confused @ point on how move forward. since doesn't have parent class looks whole web page it's parent class presume.

fairly simple, think; when minimize screen label positioning removes boxes , floats off. i'll attach screen shots more clarity.

i've tried put few of them in divs success i'm not 100% sure right way of doing , that's why i'm here. i've tried relative positioning well. 

<div class="interests"> <div class="subheader">interests:</div>  <label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold';     font-size: 18px !important;     text-transform: uppercase;     color: #fff;     padding-top: 20px;     display: inline-block; z-index: 5; position:absolute; left: 465px; top: 1105px;"><div style="position:relative;left:10px; bottom: 8px;">skate</div></label>  <label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold';     font-size: 18px !important;     text-transform: uppercase;     color: #fff;     padding-top: 20px;     display: inline-block; z-index: 5; position:absolute; left: 685px; top: 1105px;"><div style="position:relative;left:10px; bottom: 8px;">surf</div></label>  <label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold';     font-size: 18px !important;     text-transform: uppercase;     color: #fff;     padding-top: 20px;     display: inline-block; z-index: 5; position:absolute; left: 906px; top: 1105px;"><div style="position:relative;left:10px; bottom: 8px;">snow</div></label>  <label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold';     font-size: 18px !important;     text-transform: uppercase;     color: #fff;     padding-top: 20px;     display: inline-block; z-index: 5; position:absolute; left: 465px; top: 1300px;"><div style="position:relative;left:10px; bottom: 8px;"> women</div></label>   <label style="background-color: #000; color:#fff; width:160px; font-family: 'itc_avant_garde_gothic_ltbold';     font-size: 18px !important;     text-transform: uppercase;     color: #fff;     padding-top: 20px;     display: inline-block; z-index: 5; position:absolute; left: 685px; top: 1300px;"><div style="position:relative;left:10px; bottom: 8px;"> music/art </div></label>  <label style="position: relative; top: 90px;"> <input type="checkbox" name="checkbox.a address.sk" style="z-index: 1;position: relative; top:4px;">skate<img src="https://stuff/images/thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width: 205px;"> </label> <input type="hidden" name="checkbox.a address.sk" value="off">   <label style="position: relative; left:140px; top: 90px;"> <input type="checkbox" name="checkbox.a address.su" style="z-index: 1;position: relative; top:4px;">surf<img src="https://stuff/images/thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width: 205px;"> </label> <input type="hidden" name="checkbox.a address.su" value="off">   <label style="position: relative; left:290px; top: 90px;"> <input type="checkbox" name="checkbox.a address.sn" style="z-index: 1;position: relative; top:4px;">snow<img src="https://stuff/images/thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width:205px;"> </label> <input type="hidden" name="checkbox.a address.sn" value="off">  <br><br><br><br><br><br><br><br><br><br><br><br>  <label style="position:relative; top: 60px;"> <input type="checkbox" name="checkbox.a address.wo" style="z-index: 1;position: relative; top:4px;">women<img src="https://stuff/images/thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width:205px;"> </label> <input type="hidden" name="checkbox.a address.wo" value="off">   <label style="position:relative; left: 130px; top: 60px;"> <input type="checkbox" name="checkbox.a address.mu" style="z-index: 1;position: relative; top:4px;">music<img src="https://stuff/images/music_thumb.jpg" style="position: absolute;left: 0;bottom: 0;height: 185px;width:205px;"> </label><input type="hidden" name="checkbox.a address.mu " value="off">    <label><input type="checkbox" name="checkbox.a address.subscribe"></label> <div style="position:relative; left: 50px; bottom: 33px;">subscribe</div> <input type="hidden" name="checkbox.a address.subscribe" value="off">           <input type="submit" id="submit" value="sign up" style="width: 280px;     height: 45px;     display: block !important;     outline-style: none !important;     outline-width: 0px !important;     color: #fff !important;     font-weight: normal !important;     font-family: 'itc_avant_garde_gothic_ltbold';     text-transform: uppercase;     text-decoration: none;     text-align: center;     border: 1px solid #434242;     background-color: #434242;     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#434242), to(#2f2e2e));     background-image: -webkit-linear-gradient(top, #434242, #2f2e2e);     background-image: -moz-linear-gradient(top, #434242, #2f2e2e);     background-image: -ms-linear-gradient(top, #434242, #2f2e2e);     background-image: -o-linear-gradient(top, #434242, #2f2e2e);     -moz-box-shadow: 0 0 1px #bbb;     -webkit-box-shadow: 0 0 1px #bbb;     box-shadow: 0 0 1px #bbb;     -webkit-border-radius: 3px;     -moz-border-radius: 3px;     border-radius: 3px;     vertical-align: middle;     padding: 10px 0;     line-height: 1em;     cursor: pointer;     line-height: 18px;     font-size: 18px;     margin: 40px 0;">   </div>

any appreciated. thank you. screen shots below.

labels floating off when minimize :

labels floating off when minimize

works fine when full screen :

works fine when full screen

i commented few bad practices , falsehoods on answer, had make quick example myself, 1 way flexbox (there lot of solutions problem, 1 if don't have support obsolete browsers):

example: https://jsfiddle.net/um6fm744/1/

css:

* { box-sizing: border-box; margin: 0; padding: 0; }  .interests {   display: flex;   flex-wrap: wrap; } .sub-header {   margin: 0 0 24px;   width: 100%; }  .interest {    align-items: flex-end;   background-color: green;   display: flex;   margin: 0 12px 24px 0;   min-height: 160px;   width: 160px; }  .interest-info {   background-color: black;   display: flex;   justity-content: space-between;   width: 100%; }  .interest-checkbox {   height: 30px;   width: 30px; }  .interest-label {   color: white;   font-family: sans-serif;   flex: 1;   height: 30px;   line-height: 30px;   margin-left: 12px; }

html

<div class="interests">     <h1 class="sub-header">interests:</h1>      <div class="interest">       <div class="interest-info">         <input class="interest-checkbox" type="checkbox" />         <label class="interest-label">skate</label>       </div>     </div>      <div class="interest">       <div class="interest-info">         <input class="interest-checkbox" type="checkbox" />         <label class="interest-label">snow</label>       </div>     </div>      <div class="interest">       <div class="interest-info">         <input class="interest-checkbox" type="checkbox" />         <label class="interest-label">women</label>       </div>     </div>      <div class="interest">       <div class="interest-info">         <input class="interest-checkbox" type="checkbox" />         <label class="interest-label">surf</label>       </div>     </div>      <div class="interest">       <div class="interest-info">         <input class="interest-checkbox" type="checkbox" />         <label class="interest-label">music/art</label>       </div>     </div>  </div>

Comments

Post a Comment

Popular posts from this blog

routing - AngularJS State management ->load multiple states in one page -

Image
i developing site in angularjs ui-router. have situation on button click need change , load 3 state page , 3 looks image .please me how can load multiple pages. in 1 page you need configure router config this: $stateprovider .state("state1", { url: "/url1", controller: "firstcontroller", views: { view1: { templateurl: "templates/template1.html" }, view2: { templateurl: "templates/template2.html" }, view3: { templateurl: "templates/template3.html" } } }).state("state2", { url: "/url2", controller: "secondcontroller", views: { view1: { templateurl: "templates/template4.html" }, view2: { templateurl: "templates/template5.html" }, view3: { templateurl: "templates/template6.html" } }).state("state3", { ...
Read more

python - GRASS parser() error -

i'm trying use grass on python 2.7, i'm having problems @ setting script on idle, i'm getting error @ parser() function: here script: import os import sys gisbase = os.environ['gisbase'] = 'c:\program files (x86)\grass gis 7.0.1rc1' gisrc = 'c:\grassdata' gisdbase = 'c:\grassdata' location = 'newlocation' mapset = 'tc' ld_library_path = 'c:\program files (x86)\grass gis 7.0.1rc1\lib' path = 'c:\program files (x86)\grass gis 7.0.1rc1\etc';'c:\program files (x86)\grass gis 7.0.1rc1\etc\python';'c:\program files (x86)\grass gis 7.0.1rc1\lib';'c:\program files (x86)\grass gis 7.0.1rc1\bin';'c:\python27';'c:\program files (x86)\grass gis 7.0.1rc1\python27';'c:\program files (x86)\grass gis 7.0.1rc1\msys' pythonlib = 'c:\python27' pythonpath = 'c:\program files (x86)\grass gis 7.0.1rc1\etc\python' sys.path.append(os.path.join(os.environ['...
Read more

Swift game error message -

i following ios game tutorial. cannot figure out wrong here. error on these 2 lines. let newangle = percent * 180 - 180 cannon.zrotation = cgfloat(newangle) * cgfloat(m_pi); 180.0 //error "use of unresolved identifier 'percent'" the tutorial uses: cannon.zrotation = cgfloat(newangle) * cgfloat(m_pi)/ 180.0 but changed error suggested import spritekit class gamescene: skscene { var cannon: skspritenode! var touchlocation:cgpoint = cgpointzero override func didmovetoview(view: skview) { /* setup scene here */ cannon = self.childnodewithname("cannon") as! skspritenode } override func touchesbegan(touches: set<uitouch>, withevent event: uievent?) { /* called when touch begins */ touchlocation = touches.first!.locationinnode(self) } override func touchesmoved(touches: set<uitouch>, withevent event: uievent?) { touchlocation = touches.first!.locationinn...
Read more