CSS Border problem and list element placement

Asked

Viewed 223 times

3

I am making a TAB component in HTML + CSS, and I have a question regarding css, the code I have is as follows:

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,700");
.tabs {
  font-family: "Open Sans", sans-serif;
  width: 222px;
  border: 1px solid #E6E6E6;
  border-radius: 3px; }
  .tabs__tab-list {
    list-style: none;
    height: 40px;
    padding: 0;
    margin: -1px;
    font-size: 14px;
    font-weight: 700;
    background-color: #F2F2F2;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top: 1px solid #E6E6E6;
    border-right: 1px solid #E6E6E6;
    border-left: 1px solid #E6E6E6; }
  .tabs__tab {
    display: inline;
    padding: 0;
    margin: 0;
    border: 0; }
    .tabs__tab:first-child {
      float: left;
      width: 46%;
      height: 40px;
      padding-left: 15px;
      display: table;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
      border-right: 1px solid #E6E6E6;
      background-color: #FFFFFF; }
    .tabs__tab:last-child {
      float: right;
      width: 54%;
      height: 40px;
      text-align: right;
      display: table;
      padding-right: 15px;
      border-bottom: 1px solid #E6E6E6;
      border-bottom-left-radius: 3px; }
    .tabs__tab--selected {
      color: pink; }
    .tabs__tab__text {
      display: table-cell;
      vertical-align: middle; }
  .tabs__content {
    clear: both;
    padding: 10px; }
<div class="tabs">
  <ul class="tabs__tab-list">
    <li class="tabs__tab">
      <span class="tabs__tab__text">Tab1</span>
    </li>
    <li class="tabs__tab">
      <span class="tabs__tab__text">
        Tab2
      </span>
    </li>
  </ul>
  <div class="tabs__content">
    <h1>Tab2</h1>
  </div>
</div>

How can I prepare this component to carry n separators, and the edges are shown correctly? Any example/tip that advise me? Thank you

css html5 css3

  • You who remove the edges ?

  • No, I want the edge effect of the gray area.

  • Good morning, all right ? I think you better put 3 Divs and set the sizes you want, and go fiddling with the display of the Divs, to go leaving one next to the other or one at the bottom one above, ai vc gives the edge to the div vc uses much less code.

1 answer

3

Dude I don’t know if I got you right, but using flex you can make a very responsive "component"...

inserir a descrição da imagem aqui

About the code the tips I’ll give you is to use the border-radius on the contour of container and in the nav of tabs you put the border-bottom, and in the tab item that is active you place a box-shadow of 1px down, thus capping the line of nav and making it "join" with the content below. In tab-item you put a border-left to make the dividers between a tab and another, except for last-child that you don’t need right edge.

See the code for the image above:

.tab-container {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid #999;
    border-radius: 5px;
}
.tab-container .tab-nav {
    width: 100%;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    display: flex;
    border-bottom: 1px solid #999;
}
.tab-container .tab-nav .tab-item:not(:last-child){
    border-right: 1px solid #999;
}
.tab-container .tab-nav .tab-item.ativo {
    box-shadow: 0px 1px 0px 0px #fff;
}
.tab-container .tab-nav .tab-item {
    flex: 1;
    padding: 0 10px;
}
<div class="tab-container">
    <div class="tab-nav">
        <div class="tab-item ativo">
            item 1
        </div>
        <div class="tab-item">
            item 2
        </div>
        <div class="tab-item">
            item 3
        </div>
        <div class="tab-item">
            item 4
        </div>
        <div class="tab-item">
            item 5
        </div>
    </div>
    <div class="tab-box">
        <div class="tab-content">
            content item 1
        </div>
    </div>
</div>

  • I think it solved part of the problem, as I can remove the border side of the other elements and apply a border-Radius co upper corner of the right side and the lower left side of the selected element?

  • @Cláudiohilário Face this you have to do in part with CSS and part with Javascript. Like this, when you click on the tab-item you show the content of it and hide the content of others, at the same time you remove the active class from the other item and put it only on the item you clicked... I didn’t understand straight this part of how you want the border redius of the active item but just vc put the styles in the class . active and as I said use JS to put this class only in the clicked item. I don’t understand of JS or jQuery so I can’t help you much in this.

  • @Cláudiohilário But now that you have the layout you can open a "New Question" and see if someone helps you with the Script. Or if you prefer you can search for some ready component of "Responsive Tabs" you should find several options on the net

  • As for the script, I already have the functionality implemented in reactjs, the problem is in the active class, when I have an active "separator" I wanted it to have top edges with a curvature of 3 px and the "separator" right/left if there is a border bottom of 3px next to the active tab, someone can help?

  • @Cláudiohilário I think I understand you, as soon as I can I’ll edit this code and do the styles that are missing I just can’t guarantee that I’ll be able to see that hj... I’ve already started drinking... D

  • Hahaha Thank you so much for helping :D

  • @Cláudiohilário guy I started to stir here, but the result is not getting cool no... the active btn is with the round corner and the corner of the lato is straight. It’s really weird and ugly actually... Do you have any image with the model you want? An example of how you want it to look?

  • as an example, from google Chrome, I made a print, is on this link: https://imgur.com/l2ej4Z6 Thank you

  • @Cláudiohilário This type of curvature at the base of Tab like a "border-Radius outward" is not as simple to do as it sounds. Also how did they look when they had more than 2 tabs? And how should the style of the active Aba look in the middle of the other tabs?

  • When it is active, it would look like in the image (white with the "border-Radius" out), those that are not active without edge, or better with edge in background :D

  • Did you see anything?

  • @No, not Claudio, no. As I told you only this reverse border-Radius would already give a question, because it is complicated to do, even more associated with a dynamic component like this. I suggest you hire a web-designer or a dev. front-end to make one exactly the way you want it. Or try to find an Abas component ready.

Show 7 more comments

Browser other questions tagged css html5 css3

You are not signed in. Login or sign up in order to post.