Archief - CSS vraagje ivm 'dupliceren' element

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
C

Chris_147

Legacy Member
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="[B]nav-item[/B]"> 
    <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 [B].nav-item[/B] {
  width: 20%;
}
.rs-courses-details .course-des-tabs .tab-btm .tabs-cyan [B].nav-item[/B] 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 [B].nav-item[/B] a.active {
  position: relative;
  background: #fff;
  border-bottom: none;
  color: #00936a;
}
.rs-courses-details .course-des-tabs .tab-btm .tabs-cyan .[B]nav-item[/B] 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[B] .nav-item4[/B] {
  width: 20%;
}
.rs-courses-details .course-des-tabs .tab-btm .tabs-cyan [B].nav-item5[/B] {
  width: 20%;
}
.rs-courses-details .course-des-tabs .tab-btm .tabs-cyan [B].nav-item4 .nav-item5[/B] 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 [B].nav-item4 .nav-item5[/B] a.active {
  position: relative;
  background: #fff;
  border-bottom: none;
  color: #00936a;
}
.rs-courses-details .course-des-tabs .tab-btm .tabs-cyan[B] .nav-item4 .nav-item5[/B] 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[B] .nav-item4:last-child .nav-item5:last-child[/B] 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.
G

GregoryCo

Legacy Member
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: 
.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
C

Chris_147

Legacy Member
Inderdaad volledige breedte gebruiken ongeacht het aantal tab items.
Je code even geprobeerd, lijkt goed te werken met 4 en 5 tabs.
Bedankt!
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan