CODEWITHSUNDEEP
htmlcss
Isu
Isu

Reputation: 362

CSS bar from browser side to element on middle of screen

I have problem making bar like this: this bar I'v created somethink like this but really I cant make left part of this bar. Those spaces between buttons must be transparent.

CSS/HTML 

 section[role="searchform"] {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin-top: 57px;
    width: 100%;
    font-family: 'Open Sans', sans-serif; }
     section[role="searchform"] .body-searchform {
      width: 100%;
      text-align: center;
      color: #fff; }
       section[role="searchform"] .body-searchform .buttons-search {
        height: 84px;
        position: relative; }
         section[role="searchform"] .body-searchform .buttons-search:after {
          content: " ";
          height: inherit;
          background-color: rgba(100, 141, 12, 0.6); }
         section[role="searchform"] .body-searchform .buttons-search:after {
          margin-left: 5px; }
         section[role="searchform"] .body-searchform .buttons-search .search-buttons {
          line-height: 84px;
          margin: 0;
          background-color: #648D0C;
          width: 100px;
          height: 100%;
          display: inline-block; }
           section[role="searchform"] .body-searchform .buttons-search .search-buttons img {
            vertical-align: middle; }

    
<section role="searchform"><div class="body-searchform">       
<div class="buttons-search">
            <a href="#" class="search-buttons"><img src="/img/btn_placeholder.svg"></a>
            <a href="#" class="search-buttons" ><img src="/img/btn_placeholder.svg"></a>
            <a href="#" class="search-buttons" ><img src="/img/btn_placeholder.svg"></a>
            <a href="#" class="search-buttons"><img src="/img/btn_placeholder.svg"></a>
            <a href="#" class="search-buttons"><img src="/img/btn_placeholder.svg"></a>
</div>
                </div></section>

This is my fiddle: https://jsfiddle.net/j2cpmwuq/

Upvotes: 0

Views: 71

Answers (1)

Josh Rutherford
Josh Rutherford

Reputation: 2723

The problem is that you need separate flexible elements on the right and left of the .search-buttons so that transparency can be maintained. If flexbox is an option (see support table), you could try something like this fiddle summarized below:

.buttons-search {
    display: flex;
}

.search-buttons {
    width: 100px;
    height: 84px;
    margin: 2px;
}

.buttons-search:before,
.buttons-search:after {
    content: '';
    position: relative;
    flex-grow: 1;
    height: 84px;
    margin: 2px;
}

Upvotes: 1

Related Questions