Flexbox With Block Link?

I have a set of list tabbed items being used to display content. With that, I’m using ‘flex’ to center the content horizontally and vertically on the <a> element inside the <li>. Unfortunately, the whole <li> element loses the ‘display: block’ link usability. I want the link to work where users can hover over any part of the element besides hovering over the text to click for content.

My alternative would be to rewrite the the way the content is laid out by adding another surrounding element to give the ‘display: block’ ability and allow the user to click on any part of the element. But that seems more work than it’s worth, unless someone else has a different alternative?

Do you have a demo of the code you’re working with? I don’t know what that link was for.

Assuming you have standard ul li a structure then you can do it like this.

You set the child items to display:flex also and set the direction to column so that they fill the whole space.

I wound up doing this, and it worked (amazingly):

.largetabs .nav-tabs {
    border-bottom: 0
}
.largetabs .nav-tabs li {
    display: inline-block;
    height: 100vh;
    max-height: 412px;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.7em
}
.largetabs .nav-tabs > li {
    margin-bottom: 0
}
.largetabs .nav-tabs > li:nth-child(1):before, .largetabs .nav-tabs > li:nth-child(1):after {
    background-color: rgba(85,131,111,0.5);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    z-index: 1;
}
.largetabs .nav-tabs > li:nth-child(2):before, .largetabs .nav-tabs > li:nth-child(2):after {
    background-color: rgba(201,21,39,0.2);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    z-index: 1;
}
.largetabs .nav-tabs > li:nth-child(3):before, .largetabs .nav-tabs > li:nth-child(3):after {
    background-color: rgba(77, 84, 120, 0.4);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    z-index: 1;
}
.largetabs .nav-tabs > li:nth-child(4):before, .largetabs .nav-tabs > li:nth-child(4):after {
    background-color: rgba(194,144,93,0.3);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    z-index: 1;
}
.largetabs .nav-tabs > li > a {
    margin-right: 0;
    color: #FFF;
    align-items: center;
    display: flex;
    font-weight: 700;
    height: 100%;
    justify-content: center;
    margin-right: 0;
    position: absolute;
    width: 100%;
    z-index: 2
}
.largetabs .nav > li > a:hover,
.largetabs .nav > li > a:focus {
  background-color: rgba(69,193,114,1);
  color: #FFF;
  z-index: 3;
}
.largetabs .nav-tabs > li > a:hover {
  border: none;
}
.largetabs .tab-content .tab-pane > .container > .tab-pane {
    display: none;
}
.largetabs .tab-content .tab-pane > .container > .tab-pane.active {
    display: block;
}
.largetabs .tabcontent {
    padding-top: 95px;
    padding-bottom: 50px
}
.largetabs .tabcontent > div {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 50px;
    -moz-column-gap: 50px;
    column-gap: 50px;
}
.largetabs .nav-tabs > li.active > a, .largetabs .nav-tabs > li.active > a:hover, .largetabs .nav-tabs > li.active > a:focus {
    background-color: #3dc172;
    border-width: 0;
    color: #FFF;
    border-radius: 0;
}
.largetabs .nav-tabs > li.active::after {
    background-color: transparent;
    border-color: #3dc172 transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: 60px;
    height: 0;
    left: 41%;
    margin-left: -10px;
    top: 100%;
    width: 0;
}
.largetabs .tabcontent h4 {
    font-weight: 700;
    margin-top: 0
}
.largetabs .nav-tabs > li p {
    line-height: 1.1;
    position: relative;
    z-index: 2
}
.largetabs .tabcontent > div > p {
    line-height: 1.7;
    text-align: justify
}

<div class="tab-panels largetabs" role="tabpanel">                        
    <div class="tab-content">
        <div class="tab-pane fade in active" role="tabpanel">            
            <ul class="nav nav-tabs">
            
                <li style="background: url('http://domainname.com/wp-content/uploads/birthing-of-a-dream.jpg'); background-repeat: no-repeat; background-size: cover; background-position: top center;" class="active down-arrow  col-sm-3"><a data-toggle="tab" href="#1"><p>The Birthing<br>of a Dream</p>
                </a></li>
                
                <li style="background: url('http://domainname.com/wp-content/uploads/out-of-the-dream.jpg'); background-repeat: no-repeat; background-size: cover; background-position: top center;" class="  col-sm-3"><a data-toggle="tab" href="#2"><p>Out of the Dream,<br>into Reality</p>
                </a></li>
                
                <li style="background: url('http://domainname.com/wp-content/uploads/break-the-barrier.jpg'); background-repeat: no-repeat; background-size: cover; background-position: top center;" class="  col-sm-3"><a data-toggle="tab" href="#3"><p>Breaking<br>the Barrier</p>
                </a></li>
                
                <li style="background: url('http://domainname.com/wp-content/uploads/the-dream-lives-on.jpg'); background-repeat: no-repeat; background-size: cover; background-position: top center;" class="  col-sm-3"><a data-toggle="tab" href="#4"><p>The Dream<br>Lives On</p>
                </a></li>
            </ul>
        
        <div class="tabcontent container">   
        
            <div class="tab-pane fade in active" id="1">
                <h4>The Birthing of a Dream</h4>
                <p>Deby, daughter of Ice Capades performers Ken and Carmie Mullen, was truly a born athlete. At the age of ten she channeled her energies into gymnastics through the Fresno Gymnastics Club, reaching the national level by the age of sixteen. When she reached the elite level, she was able to compete internationally, and but for an ankle injury in 1972, she may have competed in the Olympics.</p>
                <p>With gymnastics in her blood, Deby turned to coaching other upcoming gymnasts, her dream, however, was something far deeper and incredibly outreaching. It was born out of the shadows of another birth ‐ that of Deby’s sister, Kathy . . . a child with Down syndrome. It was not a dream out of pity, but rather out of challenge and foresight.</p>
                <p>Kathy had much opportunity to watch Deby perform her gymnastics routines, and through emulation, was able to excel herself at the Special Olympics.</p>
                <p>For Deby, Kathy’s amazing achievement became a catalyst which began her relentless efforts to create a common bond between all persons with different Abilities. This bond would be fused through sports.</p>
            </div>
        
               <div class="tab-pane fade in " id="2">
                <h4>Out of the Dream, into Reality</h4>
                <p>Deby realized that in order for the desires of her heart to become realities, she would have to become immersed in the complexities of people with various abilities. She spent relentless hours coaching adults who had different physical, neurological and mental Abilities. Her athletes did well. Then, Deby married Steve Hergenrader, a former Yankees baseball player. Together, they worked his grandfather’s twenty‐acre grape ranch and started The Tri‐City Olympiads leading into the creation of the Fresno District Special Olympics Gymnastics Program.</p>
                <p>Later, the Hergenraders found “the perfect house” in Fresno, with a big room that they turned in to a dance studio and a yard big enough to house gymnastics equipment to create “Gymnastics by Deby.” They began using sign language to communicate with deaf and hard of hearing students and discovered that signing was part of the “Magic in the Mixture” that connected students of all Abilities. The children listened better when they focused on the hand movements.</p>
        </div>
        
            <div class="tab-pane fade in " id="3">
                <h4>Breaking the Barrier</h4>
                <p>Barriers exist to either keep something out or something in. Often one of the barriers that separate one person’s Ability from another is the lack of common experiences. Through the Hergenrader’s integrated sports and performing arts classes, students found common ground and barriers started tumbling down. Students of all Abilities began to learn from each other and accomplished more than they had believed possible.</p>
                <p>The atmosphere of the classes saw a change too. Instead of a competitive environment, a supportive feeling grew. Without any advertising, these combined classes grew to include two hundred children from three years old through adult.</p>
                <p>Parents and volunteers got caught in the Hergenrader’s dream. Looking at our community’s dance studios, gyms, self‐defense classes, and baton twirling studios to see if any had programs that combined persons with different Abilities. The results pointed to an overwhelming need to begin a program integrated classes where each student would be able to learn from one another. Soon a board of directors was formed of the student’s parents, and Break the Barriers was officially incorporated as a nonprofit corporation in October, 1985.</p>
            </div>
            
            <div class="tab-pane fade in " id="4">
                <h4>The Dream Lives On</h4>
                <p>The Barrier Breakers, formed in 1987, is the performing ensemble of students whose mission is to show Inclusion at its best while celebrating all Abilities and softening the hearts, opening eyes and generating hope for all people. The team is a combination of performers, each with amazing Abilities and range in age from 6 years to adult. Each performer has their own definition of triumph, a talent to show and a mission to accomplish.</p>
                <p>Break the Barriers can now broadcast their mission to “Break all barriers experienced by people with different Abilities.” There are over 3000 students who participate in programs offered at our facility weekly, including students from eight school districts, inner‐city outreach and veterans. BTB is continually adapting classes to meet the increasing demand for this unique and one‐of‐a‐kind program.</p>
                <p>From a backyard to a 39,000 sq. ft. state‐of‐the‐art facility, Break the Barriers continues to change the lives of people around the world and is recognized as a National Role Model for Inclusion, breaking barriers nationally and internationally. Together with sons Jared and Tyler, Steve and Deby Hergenrader, staff and Board of Directors have fostered a “Family” of dedicated people who are instrumental in the tremendous success and acceptance of this program, making Break the Barriers, truly a dream come true.</p>
            </div>
        </div><!--end container-->    
        </div><!--end tabpanel tab-pane class-->
    <!--endif tabs rows-->
    </div><!--end tab-content-->
</div>><!--end tab-content-->
                            </div>

Would you toss in some HTML for that CSS? A demo page would be ideal. :wink:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.