html - Why am I missing a section? -
so here's should getting
but i'm getting
as can see yellow section missing. here's working example http://jsfiddle.net/qk543/ weird reason cannot replicate it. here's code defective page.
<div class="wrap"> <div class="foot"> <ul class="styl"> <a id="html" href="#"> <li style="background: #f16529"> word </li> </a> <a id="css" href="#"> <li style="background: #2aa9e0"> word </li> </a> <a id="php" href="#"> <li style="background: #8892bf"> word </li> </a> <a id="js" href="#"> <li style="background: #f0db4f"> word </li> </a> </ul> </div> </div> and css it...
h1 { padding: 80px 0 40px; font-size: 40px; line-height: 48px; color: #505762; } .search h1 { padding: 60px 0; } .slidey { overflow: hidden; padding: 30px 0; background: #f3f5f8; border-bottom: 1px solid #e5e8ed; } .js-enabled .slidey { -webkit-transition: margin-top .2s; -moz-transition: margin-top .2s; transition: margin-top .2s; } .slidey b, .slidey label { display: block; font-weight: 500; padding-bottom: 15px; font-size: 15px; font-weight: 500; } .slidey form, .slidey aside { float: left; width: 50%; } .slidey form input { padding: 20px; width: 75%; } .slidey li { list-style: none; } .slidey { display: block; text-decoration: none; color: #717985; } .slidey a:hover { color: #414b59; } .slidey li span { float: right; opacity: .6; } #top { overflow: hidden; padding: 20px 35px; background: #fff; border-bottom: 1px solid rgba(22,36,54,.1); } #top { float: left; font-size: 13px; font-weight: 500; text-decoration: none; color: #8895a7; } #top #logo:hover, #top ul a:hover, #top ul .active a, .posts .items li:first-child h2 a:hover, p a:hover { color: #4171b1; } #top ul { list-style: none; float: right; } #top ul li { float: left; padding-left: 40px; } #top ul { display: inline-block; color: #555f6d; } #top ul img { display: inline-block; vertical-align: middle; position: relative; top: -2px; width: 16px; height: 16px; opacity: .4; } #top ul a:hover img { opacity: .7; } #top ul a.active img { opacity: 1; } /** * index page listing, category listing, search page results */ .items { list-style: none; } .items > li { padding: 70px 0 60px; color: #97aec9; background: #3c4552; } .posts .items > li:first-child { background: #fff !important; padding: 110px 0; } .items li h1 a, .posts .items > li:first-child h2 { color: #3d4551; } .items h1 { padding: 0 0 8px; } .items h1 { text-decoration: none; } .items h2 { font-size: 32px; line-height: 41px; } .items h2 { display: block; padding-bottom: 12px; color: #fff; color: rgba(176,200,236,.8); text-decoration: none; } .items h2 a:hover { color: #fff; } .items .content { padding: 10px 0 0; } .items .content p { padding-bottom: 15px; } /** * pagination */ .pagination { overflow: hidden; padding: 30px 0; margin-bottom: 50px; border-top: 1px solid rgba(22,36,54,.1); border-bottom: 1px solid rgba(22,36,54,.1); } .pagination:empty { display: none; } .pagination { float: left; text-decoration: none; font-size: 13px; font-weight: 500; color: #6f7b8b; } .pagination a:hover { color: #3c4857; } .pagination a.next { float: right; } /** * give space single-page wrappers */ .content.wrap { padding-bottom: 50px; } .content.wrap ul, .content.wrap ol, .items li ul { padding: 20px 30px; } .content.wrap ul ul, .content.wrap ol ol, .items li ul ul { padding: 0 20px; } /** * footnotes , straplines */ .footnote, .commentlist time, .items footer { display: block; padding: 5px 0 15px; color: #98a2b1; font-size: 14px; font-style: italic; white-space: nowrap; } .footnote { padding: 20px 0 40px; } /** * comment form */ ul.commentlist { margin-bottom: 40px; list-style: none; border-top: 1px solid rgba(22,36,54,.1); } ul.commentlist .wrap { position: relative; } ul.commentlist li { padding: 40px 0; border-bottom: 1px solid rgba(22,36,54,.1); } ul.commentlist time { font-size: 13px; } ul.commentlist h2 { font-size: 25px; line-height: 33px; } ul.commentlist .counter { position: absolute; right: 0; top: 0; font-size: 25px; font-weight: 300; color: #cdd2da; } #comment { overflow: hidden; } #comment label[for] { display: none; } #comment p { float: left; width: 48%; margin-right: 4%; margin-bottom: 10px; text-indent: 0; } #comment p + p { margin-right: 0; } #comment p.textarea { float: none; width: 100%; } #comment input, #comment textarea { width: 100%; padding: 10px 15px; font-size: 15px; font-weight: normal; border: 1px solid rgba(22,36,54,.2); border-radius: 4px; } #comment input:focus, #comment textarea:focus { outline: none; background: #f7f9fc; } #comment textarea { min-height: 150px; max-height: 800px; resize: vertical; } #comment button { display: inline-block; padding: 9px 18px; background: #4e82ce; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 13px; font-weight: 500; } #comment button:hover { background: #3c6eb7; } *{padding:0;margin:0;} body { text-align: center; padding-top: 50px; font-family: "helvetica neue", sans-serif; } .foot{ bottom: 0px; position: fixed; width:100%; margin: 0px; font-weight: 400; } .foot li{ opacity: 0.95; position: relative; float: left; list-style: none; width: 25%; height: 60px; text-align: center; } .foot a{ font-size: 1.5em; color: #fff; height: 75px; position: relative; text-indent: 0; text-decoration: none; line-height: 60px; } .foot li:nth-child(1){ background: #b36c4e; } .foot li:nth-child(2){ background: #2aa9e0; } .foot li:nth-child(3){ background: #8892bf; } .foot li:nth-child(4){ background: #f0db4f; } a:link{text-decoration: none} a:hover{text-decoration: none} a:visited{text-decoration: none} a:active{text-decoration: none} .content { padding-right: 5%; padding-left: 5%; } ideas?
you're using floats, there's chance last element pixel or wide container it's in , it's floating next line.
try changing width 24% on each element , you'll see four.
if don't want play width, try adding css:
* { box-sizing: border-box; } that includes padding/margin in width 25% width true width instead of 25% plus padding/margin.
Comments
Post a Comment