1. #1

    Lid sinds
    11/05/05
    Locatie
    Oud-Turnhout
    Berichten
    539
    iTrader
    39 (100%)
    Reputation
    0/6

    CSS vraagje ivm 'dupliceren' element

    Hey,
    ik heb een html template gekocht waar ik 4 knoppen heb, nu is dit gemakkelijk aan te passen naar 5:
    Code:
    width: 25%;
    naar
    Code:
    width: 20%;
    Echter ga ik pagina's hebben waar ik 4 knoppen wil hebben, maar ook waar ik er 5 wil hebben.
    In mijn HTML heb ik dus volgende code:
    Code:
    <li class="nav-item"> 
        <a class="nav-link waves-light" data-toggle="tab" href="#review" role="tab">Review</a> 
    </li>
    Maar in mijn .css komt die nav-item meerdere keren terug:
    Code:
    .rs-courses-details .course-des-tabs .tab-btm .tabs-cyan .nav-item {
      width: 20%;
    }
    .rs-courses-details .course-des-tabs .tab-btm .tabs-cyan .nav-item a {
      border: 1px solid #eee;
      background: #f9f9f9;
      border-right: 0;
      color: #212121;
      font-weight: 600;
    }
    .rs-courses-details .course-des-tabs .tab-btm .tabs-cyan .nav-item a.active {
      position: relative;
      background: #fff;
      border-bottom: none;
      color: #00936a;
    }
    .rs-courses-details .course-des-tabs .tab-btm .tabs-cyan .nav-item a.active:before {
      content: '';
      position: absolute;
      left: 0;
      right: 3px;
      top: 0;
      height: 2px;
      z-index: 10;
      width: 100%;
      background: #00936a;
    }
    .rs-courses-details .course-des-tabs .tab-btm .tabs-cyan .nav-item:last-child a {
      border-right: 1px solid #eee;
    }
    Ik zou dus bvb een .nav-item4 en -nav-item5 kunnen maken, maar hoe moet ik dan dan in de css verwerken?
    Ik had dit geprobeerd, maar dat werkte niet:
    Code:
    .rs-courses-details .course-des-tabs .tab-btm .tabs-cyan .nav-item4 {
      width: 20%;
    }
    .rs-courses-details .course-des-tabs .tab-btm .tabs-cyan .nav-item5 {
      width: 20%;
    }
    .rs-courses-details .course-des-tabs .tab-btm .tabs-cyan .nav-item4 .nav-item5 a {
      border: 1px solid #eee;
      background: #f9f9f9;
      border-right: 0;
      color: #212121;
      font-weight: 600;
    }
    .rs-courses-details .course-des-tabs .tab-btm .tabs-cyan .nav-item4 .nav-item5 a.active {
      position: relative;
      background: #fff;
      border-bottom: none;
      color: #00936a;
    }
    .rs-courses-details .course-des-tabs .tab-btm .tabs-cyan .nav-item4 .nav-item5 a.active:before {
      content: '';
      position: absolute;
      left: 0;
      right: 3px;
      top: 0;
      height: 2px;
      z-index: 10;
      width: 100%;
      background: #00936a;
    }
    .rs-courses-details .course-des-tabs .tab-btm .tabs-cyan .nav-item4:last-child .nav-item5:last-child a {
      border-right: 1px solid #eee;
    }
    Geen flauw idee hoe ik hiërachie in css moet opbouwen en of dat zelfs de oplossing hier is.

  2. #2
    GregoryCo's schermafbeelding
    Lid sinds
    29/10/03
    Locatie
    Izegem
    Berichten
    4.742
    iTrader
    24 (100%)
    Reputation
    4/9
    Wat is de vraag juist? Wil je die nav-items over de volledige breedte spreiden, of er nu 4 of 5 items zijn?
    Hebben de verschillende items een aparte styling? Zo niet zou ik niet met verschillende classes werken maar overal dezelfde gebruiken, zijnde .nav-item.

    Om te spreiden over de breedte ongeacht het aantal items kan je zo iets proberen:

    HTML-code:
    .tabs-cyan {
        width: 100%;
        display: table;
        table-layout: fixed;
    }
    
    .nav-item{
       display: table-cell;
    }
    
    .nav-item a{
      display: block;
    }
    Niet getest maar je kan eens proberen.

    • .nav-item a.active = item die aangeklikt werd en dus actief staat
    • .nav-item a.active:before = een grafisch elementje dat toegevoegd werd aan het menu-item, dit zal een groen lijntje zijn van 2px hoog over de volledige breedte in jouw geval
    1 leden vonden dit bericht nuttig.   Met citaat reageren Met citaat reageren

  3. #3

    Lid sinds
    11/05/05
    Locatie
    Oud-Turnhout
    Berichten
    539
    iTrader
    39 (100%)
    Reputation
    0/6
    Inderdaad volledige breedte gebruiken ongeacht het aantal tab items.
    Je code even geprobeerd, lijkt goed te werken met 4 en 5 tabs.
    Bedankt!

Regels voor berichten

  • Je mag geen nieuwe discussies starten
  • Je mag niet reageren op berichten
  • Je mag geen bijlagen versturen
  • Je mag niet je berichten bewerken
  •  

Inloggen

Inloggen