html - how to fix css issue with height -
here code snippet:
/* text types */ h1{font-family: 'open sans', arial, sans-serif; margin: 0; font-size: 24px; line-height: 125%;} h2{font-family: 'neuton', serif; margin: 5px 0px 10px 0px; font-size: 24px; font-weight: 200; line-height: 120%;} h3{font-family: 'open sans', arial, sans-serif; margin: 8px 0px 2px 0px; font-size: 16px; line-height: 130%; font-weight: 600;} h4{font-family: 'neuton', serif; font-size: 16px; margin: 2px 0px 6px 0px; line-height: 120%; font-weight: 200;} h5{font-family: 'open sans', arial, sans-serif; margin: 0; font-size: 12px;} h6{font-family: 'open sans', arial, sans-serif; font-size: 10px;} /* links */ a, a:hover, a:visited, a:active{text-decoration: none; outline: none; color: inherit;} a.underline:hover{text-decoration: underline; color: inherit;} a.readmore{font-family: 'raleway', serif; font-size: 15px; margin: 15px 0px 0px 0px; font-weight: 700; color: #428bca;} .thinner{ font-weight: 200; } .thin{ font-weight: 300; } .normal{ font-weight: 400; } .bold{ font-weight: 500; } .bolder{ font-weight: 600; } .boldest{ font-weight: 700; } .sanserif{ font-family: 'open sans', arial, sans-serif; } /* align */ .text-left{ text-align: left; } .text-right{ text-align: right; } /* body */ body, html{ top: 0; bottom: 0; left: 0; right: 0; padding: 0; margin: 0; height: 100%; width: 100%; } .container-page-80{ width: 80%; position: relative; margin: auto; } .container-page-100{ width: 100%; position: relative; margin: auto; } /* height adj */ .height-100{ height: 100%; position: absolute; } .height-75{ height: 75%; position: absolute; } .height-50{ height: 50%; position: absolute; } .height-40px{ height: 40px; } /* positions */ .fixed{ position: fixed; } .vert-align-1{ vertical-align: text-bottom; } /* images */ img.main-logo{ height: 35px; } /* inputs */ input[type=text].search-bar{ outline: none; height: 28px; padding: 0px 6px; width: 93%; outline: none; border: 1px solid rgba(0,0,0,.1); font-size: 15px; letter-spacing: 0.5px; border-radius: 5px; opacity: .8; -webkit-transition: 250ms ease-out; -moz-transition: 250ms ease-out; -ms-transition: 250ms ease-out; -o-transition: 250ms ease-out; transition: 250ms ease-out; } input[type=text].search-bar:focus{ color: black; opacity: 1; } input[type=text].search-bar:hover{ color: black; opacity: 1; } button.start-selling{ height: 30px; outline: none; background: none; border-radius: 5px; border: 1px solid transparent; font-size: 12px; color: white; padding: 0px 12px; letter-spacing: 1px; background-color: #9059b2; opacity: .9; -webkit-transition: 250ms ease-out; -moz-transition: 250ms ease-out; -ms-transition: 250ms ease-out; -o-transition: 250ms ease-out; transition: 250ms ease-out; } button.start-selling:hover{ opacity: 1; } button.sign-in{ height: 30px; outline: none; background: none; border-radius: 5px; border: 1px solid transparent; font-size: 12px; color: black; font-weight: 700; padding: 0px 12px; letter-spacing: 1px; background-color: none; opacity: .9; -webkit-transition: 250ms ease-out; -moz-transition: 250ms ease-out; -ms-transition: 250ms ease-out; -o-transition: 250ms ease-out; transition: 250ms ease-out; } .puma{ background-color: red; } /* sections */ .section-np{ clear: both; padding: 0px; margin: 0px; } /* column setup */ .col-np { display: block; float:left; margin: 0% 0 0% 0%; } .col-np:first-child { margin-left: 0; } /* grouping */ .group-np:before, .group-np:after { content:""; display:table; } .group-np:after { clear:both;} .group-np { zoom:1; /* ie 6/7 */ } /* grid of twelve */ .span_12_of_12-np { width: 100%; } .span_11_of_12-np { width: 91.66%; } .span_10_of_12-np { width: 83.33%; } .span_9_of_12-np { width: 75%; } .span_8_of_12-np { width: 66.66%; } .span_7_of_12-np { width: 58.33%; } .span_6_of_12-np { width: 50%; } .span_5_of_12-np { width: 41.66%; } .span_4_of_12-np { width: 33.33%; } .span_3_of_12-np { width: 25%; } .span_2_of_12-np { width: 16.66%; } .span_1_of_12-np { width: 8.333%; } /* go full width below 480 pixels */ @media screen , (max-width: 480px) { .col-np { margin: 1% 0 1% 0%; } .span_1_of_12-np, .span_2_of_12-np, .span_3_of_12-np, .span_4_of_12-np, .span_5_of_12-np, .span_6_of_12-np, .span_7_of_12-np, .span_8_of_12-np, .span_9_of_12-np, .span_10_of_12-np, .span_11_of_12-np, .span_12_of_12-np { width: 100%; } } /* sections */ .section { clear: both; padding: 0px; margin: 0px; } /* column setup */ .col { display: block; float:left; margin: 0% 0 0.5% 0.5%; } .col:first-child { margin-left: 0; } /* grouping */ .group:before, .group:after { content:""; display:table; } .group:after { clear:both;} .group { zoom:1; /* ie 6/7 */ } /* grid of twelve */ .span_12_of_12 { width: 100%; } .span_11_of_12 { width: 91.62%; } .span_10_of_12 { width: 83.25%; } .span_9_of_12 { width: 74.87%; } .span_8_of_12 { width: 66.5%; } .span_7_of_12 { width: 58.12%; } .span_6_of_12 { width: 49.75%; } .span_5_of_12 { width: 41.37%; } .span_4_of_12 { width: 33%; } .span_3_of_12 { width: 24.62%; } .span_2_of_12 { width: 16.25%; } .span_1_of_12 { width: 7.875%; } /* go full width below 480 pixels */ @media screen , (max-width: 480px) { .col { margin: 1% 0 1% 0%; } .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 { width: 100%; } }<!doctype html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- above 3 meta tags *must* come first in head; other head content must come *after* these tags --> <title>xxx | </title> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> <meta name="description" content=""> <meta name="keywords" content=""> <meta property="og:title" content=""> <meta property="og:site_name" content=""> <meta property="og:url" content=""> <meta property="og:description" content=""> <meta property ="fb:app_id" content=""> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="" /> <meta name="twitter:title" content="" /> <meta name="twitter:description" content="" /> <meta name="twitter:image" content="" /> <link href="https://necolas.github.io/normalize.css/3.0.3/normalize.css" rel="stylesheet" type="text/css"> <link href="style.css" rel="stylesheet" type="text/css"> <link href="grid.css" rel="stylesheet" type="text/css"> <link href="no-sp-grid.css" rel="stylesheet" type="text/css"> <link href="color.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link href='https://fonts.googleapis.com/css?family=open+sans:400,300,600,700,800' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=neuton:400,200,700,300' rel='stylesheet' type='text/css'> </head> <body> <br> <div class="container-page-80"> <div class="section group"> <div class="col span_2_of_12 height-40px"> <img src="xdfd" class="main-logo" /> </div> <div class="col span_6_of_12 height-40px"> <input type="text" class="search-bar sanserif thin" placeholder="search items looking for..." > </div> <div class="col span_1_of_12 height-40px text-right"> <button class="sign-in">sign in</button> </div> <div class="col span_1_of_12 height-40px text-right"> <button class="sign-in">register</button> </div> <div class="col span_2_of_12 height-40px text-right"> <button class="start-selling">start selling</button> </div> </div> </div> <div class="page-container-100"> <div class="section group"> <div class="col span_12_of_12 height-75 puma"> <div class="section-np group-np"> <div class="col-np span_8_of_12-np">x </div> <div class="col-np span_4_of_12-np"> <div class="section-np group-np"> <div class="col-np span_12_of_12-np">y </div> <div class="col-np span_12_of_12-np">z </div> </div> </div> </div> </div> </div> </div> </body> </html>i trying adjust height of "z" 50% of way down red box... have tried in regards adjusting heights , positions. when change position absolute creates mess. tried doing adjustments regards pixels , percents , nothing working. know has parent class, not understand structuring.
also, tips in regards proper code principles appreciated.
i don't understand, what's wrong position: absolute?
/* text types */ h1{font-family: 'open sans', arial, sans-serif; margin: 0; font-size: 24px; line-height: 125%;} h2{font-family: 'neuton', serif; margin: 5px 0px 10px 0px; font-size: 24px; font-weight: 200; line-height: 120%;} h3{font-family: 'open sans', arial, sans-serif; margin: 8px 0px 2px 0px; font-size: 16px; line-height: 130%; font-weight: 600;} h4{font-family: 'neuton', serif; font-size: 16px; margin: 2px 0px 6px 0px; line-height: 120%; font-weight: 200;} h5{font-family: 'open sans', arial, sans-serif; margin: 0; font-size: 12px;} h6{font-family: 'open sans', arial, sans-serif; font-size: 10px;} /* links */ a, a:hover, a:visited, a:active{text-decoration: none; outline: none; color: inherit;} a.underline:hover{text-decoration: underline; color: inherit;} a.readmore{font-family: 'raleway', serif; font-size: 15px; margin: 15px 0px 0px 0px; font-weight: 700; color: #428bca;} .thinner{ font-weight: 200; } .thin{ font-weight: 300; } .normal{ font-weight: 400; } .bold{ font-weight: 500; } .bolder{ font-weight: 600; } .boldest{ font-weight: 700; } .sanserif{ font-family: 'open sans', arial, sans-serif; } /* align */ .text-left{ text-align: left; } .text-right{ text-align: right; } /* body */ body, html{ top: 0; bottom: 0; left: 0; right: 0; padding: 0; margin: 0; height: 100%; width: 100%; } .container-page-80{ width: 80%; position: relative; margin: auto; } .container-page-100{ width: 100%; position: relative; margin: auto; } /* height adj */ .height-100{ height: 100%; position: absolute; } .height-75{ height: 75%; position: absolute; } .height-50{ height: 50%; position: absolute; } .height-40px{ height: 40px; } /* positions */ .fixed{ position: fixed; } .vert-align-1{ vertical-align: text-bottom; } /* images */ img.main-logo{ height: 35px; } /* inputs */ input[type=text].search-bar{ outline: none; height: 28px; padding: 0px 6px; width: 93%; outline: none; border: 1px solid rgba(0,0,0,.1); font-size: 15px; letter-spacing: 0.5px; border-radius: 5px; opacity: .8; -webkit-transition: 250ms ease-out; -moz-transition: 250ms ease-out; -ms-transition: 250ms ease-out; -o-transition: 250ms ease-out; transition: 250ms ease-out; } input[type=text].search-bar:focus{ color: black; opacity: 1; } input[type=text].search-bar:hover{ color: black; opacity: 1; } button.start-selling{ height: 30px; outline: none; background: none; border-radius: 5px; border: 1px solid transparent; font-size: 12px; color: white; padding: 0px 12px; letter-spacing: 1px; background-color: #9059b2; opacity: .9; -webkit-transition: 250ms ease-out; -moz-transition: 250ms ease-out; -ms-transition: 250ms ease-out; -o-transition: 250ms ease-out; transition: 250ms ease-out; } button.start-selling:hover{ opacity: 1; } button.sign-in{ height: 30px; outline: none; background: none; border-radius: 5px; border: 1px solid transparent; font-size: 12px; color: black; font-weight: 700; padding: 0px 12px; letter-spacing: 1px; background-color: none; opacity: .9; -webkit-transition: 250ms ease-out; -moz-transition: 250ms ease-out; -ms-transition: 250ms ease-out; -o-transition: 250ms ease-out; transition: 250ms ease-out; } .puma{ background-color: red; } /* sections */ .section-np{ clear: both; padding: 0px; margin: 0px; } /* column setup */ .col-np { display: block; float:left; margin: 0% 0 0% 0%; } .col-np:first-child { margin-left: 0; } /* grouping */ .group-np:before, .group-np:after { content:""; display:table; } .group-np:after { clear:both;} .group-np { zoom:1; /* ie 6/7 */ } /* grid of twelve */ .span_12_of_12-np { width: 100%; } .span_11_of_12-np { width: 91.66%; } .span_10_of_12-np { width: 83.33%; } .span_9_of_12-np { width: 75%; } .span_8_of_12-np { width: 66.66%; } .span_7_of_12-np { width: 58.33%; } .span_6_of_12-np { width: 50%; } .span_5_of_12-np { width: 41.66%; } .span_4_of_12-np { width: 33.33%; } .span_3_of_12-np { width: 25%; } .span_2_of_12-np { width: 16.66%; } .span_1_of_12-np { width: 8.333%; } /* go full width below 480 pixels */ @media screen , (max-width: 480px) { .col-np { margin: 1% 0 1% 0%; } .span_1_of_12-np, .span_2_of_12-np, .span_3_of_12-np, .span_4_of_12-np, .span_5_of_12-np, .span_6_of_12-np, .span_7_of_12-np, .span_8_of_12-np, .span_9_of_12-np, .span_10_of_12-np, .span_11_of_12-np, .span_12_of_12-np { width: 100%; } } /* sections */ .section { clear: both; padding: 0px; margin: 0px; } /* column setup */ .col { display: block; float:left; margin: 0% 0 0.5% 0.5%; } .col:first-child { margin-left: 0; } /* grouping */ .group:before, .group:after { content:""; display:table; } .group:after { clear:both;} .group { zoom:1; /* ie 6/7 */ } /* grid of twelve */ .span_12_of_12 { width: 100%; } .span_11_of_12 { width: 91.62%; } .span_10_of_12 { width: 83.25%; } .span_9_of_12 { width: 74.87%; } .span_8_of_12 { width: 66.5%; } .span_7_of_12 { width: 58.12%; } .span_6_of_12 { width: 49.75%; } .span_5_of_12 { width: 41.37%; } .span_4_of_12 { width: 33%; } .span_3_of_12 { width: 24.62%; } .span_2_of_12 { width: 16.25%; } .span_1_of_12 { width: 7.875%; } /* go full width below 480 pixels */ @media screen , (max-width: 480px) { .col { margin: 1% 0 1% 0%; } .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 { width: 100%; } }<!doctype html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- above 3 meta tags *must* come first in head; other head content must come *after* these tags --> <title>xxx | </title> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> <meta name="description" content=""> <meta name="keywords" content=""> <meta property="og:title" content=""> <meta property="og:site_name" content=""> <meta property="og:url" content=""> <meta property="og:description" content=""> <meta property ="fb:app_id" content=""> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="" /> <meta name="twitter:title" content="" /> <meta name="twitter:description" content="" /> <meta name="twitter:image" content="" /> <link href="https://necolas.github.io/normalize.css/3.0.3/normalize.css" rel="stylesheet" type="text/css"> <link href="style.css" rel="stylesheet" type="text/css"> <link href="grid.css" rel="stylesheet" type="text/css"> <link href="no-sp-grid.css" rel="stylesheet" type="text/css"> <link href="color.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link href='https://fonts.googleapis.com/css?family=open+sans:400,300,600,700,800' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=neuton:400,200,700,300' rel='stylesheet' type='text/css'> </head> <body> <br> <div class="container-page-80"> <div class="section group"> <div class="col span_2_of_12 height-40px"> <img src="xdfd" class="main-logo" /> </div> <div class="col span_6_of_12 height-40px"> <input type="text" class="search-bar sanserif thin" placeholder="search items looking for..." > </div> <div class="col span_1_of_12 height-40px text-right"> <button class="sign-in">sign in</button> </div> <div class="col span_1_of_12 height-40px text-right"> <button class="sign-in">register</button> </div> <div class="col span_2_of_12 height-40px text-right"> <button class="start-selling">start selling</button> </div> </div> </div> <div class="page-container-100"> <div class="section group"> <div class="col span_12_of_12 height-75 puma"> <div class="section-np group-np"> <div class="col-np span_8_of_12-np">x </div> <div class="col-np span_4_of_12-np"> <div class="section-np group-np"> <div class="col-np span_12_of_12-np">y </div> <div class="col-np span_12_of_12-np" style="position: absolute; top: 50%;">z </div> </div> </div> </div> </div> </div> </div> </body> </html>
Comments
Post a Comment