Elevate the vertical dimension of a <ul> using a TAB

Question

Elevate the vertical dimension of a <ul> using a TAB

I'm currently working on developing a visually appealing page that will feature 4 tabs. I used

https://codepen.io/axelaredz/pen/ipome

for the tab navigation, which I think looks fantastic. However, I am facing an issue where I need each section under every tab to have a different height. Some tabs will have more content while others will have less. Looking at the CSS, I noticed there is only one fixed height of 370px for the entire UL element. Is there a way to make this code adjust the height automatically based on the content, or at least allow me to specify different heights for each tab's content? I attempted adding position: relative and height: auto to the UL but it didn't produce the desired result.

Any suggestions on how I can achieve this functionality?

Thanks, //C

<!DOCTYPE html> 
<html>
<head>
  <title>Pure CSS3 Tabs</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.0/css/font-awesome.min.css" />
</head>
<body>

  <div class="page">
    <h1>Pure CSS Tabs</h1>          

    <!-- tabs -->
    <div class="pcss3t pcss3t-effect-scale pcss3t-theme-1">
      <input type="radio" name="pcss3t" checked  id="tab1"class="tab-content-first">
      <label for="tab1"><i class="icon-bolt"></i>Tesla</label>
      <input type="radio" name="pcss3t" id="tab2" class="tab-content-2">
      <label for="tab2"><i class="icon-picture"></i>da Vinci</label>
      <input type="radio" name="pcss3t" id="tab3" class="tab-content-3">
      <label for="tab3"><i class="icon-cogs"></i>Einstein</label>
      <input type="radio" name="pcss3t" id="tab5" class="tab-content-last">
      <label for="tab5"><i class="icon-globe"></i>Newton</label>
      
      <ul>
        <li class="tab-content tab-content-first typography">
          <h1>Nikola Tesla</h1>
          <p>Serbian-American inventor, electrical engineer, mechanical engineer, physicist, and futurist best known for his contributions to the design of the modern alternating current (AC) electrical supply system.</p>
          <p>Tesla started working in the telephony and electrical fields before emigrating to the United States in 1884 to work for Thomas Edison. He soon struck out on his own with financial backers, setting up laboratories/companies to develop a range of electrical devices. His patented AC induction motor and transformer were licensed by George Westinghouse, who also hired Tesla as a consultant to help develop an alternating current system. Tesla is also known for his high-voltage, high-frequency power experiments in New York and Colorado Springs which included patented devices and theoretical work used in the invention of radio communication, for his X-ray experiments, and for his ill-fated attempt at intercontinental wireless transmission in his unfinished Wardenclyffe Tower project.</p><p>Tesla started working in the telephony and electrical fields before emigrating to the United States in 1884 to work for Thomas Edison. He soon struck out on his own with financial backers, setting up laboratories/companies to develop a range of electrical devices. His patented AC induction motor and transformer were licensed by George Westinghouse, who also hired Tesla as a consultant to help develop an alternating current system. Tesla is also known for his high-voltage, high-frequency power experiments in New York and Colorado Springs which included patented devices and theoretical work used in the invention of radio communication, for his X-ray experiments, and for his ill-fated attempt at intercontinental wireless transmission in his unfinished Wardenclyffe Tower project.</p>
          <p class="text-right"><em>Find out more about Nikola Tesla from <a href="http://en.wikipedia.org/wiki/Nikola_Tesla" target="_blank">Wikipedia</a>.</em></p>
        </li>
      </ul>
      
    </div>
    <!--/ tabs -->
  </div>
</body>
</html>

html css tabs navigation height

Answer 1

Answer №1

Within the code snippet you provided, consider adding a unique id to one of the li elements as demonstrated below:

<li id="leonardo" class="tab-content tab-content-2 typography">
                    <h1>Leonardo da Vinci</h1>
                    <p>Italian Renaissance polymath: painter, sculptor, architect, musician, mathematician, engineer, inventor, anatomist, geologist, cartographer, botanist, and writer. His genius, perhaps more than that of any other figure, epitomized the Renaissance humanly ideal. Leonardo has often been described as the archetype of the Renaissance Man, a man of "unquenchable curiosity" and "feverishly inventive imagination". He is widely considered to be one of the greatest painters of all time and perhaps the most diversely talented person ever to have lived. According to art historian Helen Gardner, the scope and depth of his interests were without precedent and "his mind and personality seem to us superhuman, the man himself mysterious and remote". Marco Rosci states that while there is much speculation about Leonardo, his vision of the world is essentially logical rather than mysterious, and that the empirical methods he employed were unusual for his time.</p>
                    <p class="text-right"><em>Find out more about Leonardo da Vinci from <a href="http://en.wikipedia.org/wiki/Leonardo_da_Vinci" target="_blank">Wikipedia</a>.</em></p>
                </li>

Then in your CSS, refer to the newly added id within the styling rules to adjust the height accordingly.

    /**/
    /* height */
    /**/
    .pcss3t > ul,
    .pcss3t > ul > li {
        height: 390px;
    }
//leonardo is the id that has been included in the second tabs' li element
    #leonardo {
      height: 100px;
    }

Note: Adjusting the height on the ul element may not affect the desired outcome since each tab is distinct based on the li elements. However, if necessary, you can apply a similar approach by assigning an id to the ul element.

Answer 2

Within the code snippet you provided, consider adding a unique id to one of the li elements as demonstrated below:

<li id="leonardo" class="tab-content tab-content-2 typography">
                    <h1>Leonardo da Vinci</h1>
                    <p>Italian Renaissance polymath: painter, sculptor, architect, musician, mathematician, engineer, inventor, anatomist, geologist, cartographer, botanist, and writer. His genius, perhaps more than that of any other figure, epitomized the Renaissance humanly ideal. Leonardo has often been described as the archetype of the Renaissance Man, a man of "unquenchable curiosity" and "feverishly inventive imagination". He is widely considered to be one of the greatest painters of all time and perhaps the most diversely talented person ever to have lived. According to art historian Helen Gardner, the scope and depth of his interests were without precedent and "his mind and personality seem to us superhuman, the man himself mysterious and remote". Marco Rosci states that while there is much speculation about Leonardo, his vision of the world is essentially logical rather than mysterious, and that the empirical methods he employed were unusual for his time.</p>
                    <p class="text-right"><em>Find out more about Leonardo da Vinci from <a href="http://en.wikipedia.org/wiki/Leonardo_da_Vinci" target="_blank">Wikipedia</a>.</em></p>
                </li>

Then in your CSS, refer to the newly added id within the styling rules to adjust the height accordingly.

    /**/
    /* height */
    /**/
    .pcss3t > ul,
    .pcss3t > ul > li {
        height: 390px;
    }
//leonardo is the id that has been included in the second tabs' li element
    #leonardo {
      height: 100px;
    }

Note: Adjusting the height on the ul element may not affect the desired outcome since each tab is distinct based on the li elements. However, if necessary, you can apply a similar approach by assigning an id to the ul element.

Elevate the vertical dimension of a <ul> using a TAB

Answer №1

Similar questions

Tips for adjusting the color of multi-line text when hovering with the mouse

Tips for concealing scrollbar track without the use of overflow

Valid ways to ensure that a CSS image expands outside the boundaries of the containing div

Placing a div in the corner of an image

Challenges encountered with relative links in the layout of a static website generator resembling padrino, sinatra, or rails, involving HTML, CSS, and haml

What is the best way to eliminate the space between the image and the text located beneath it?

How to use jQuery to iterate over changing elements and retrieve their data values

The material UI Paper component appears to be extending beyond the boundaries of the background image

Error message in JS and HTML is totally bizarre

Ideas for utilizing jQuery to extract data from CSS files

Switching the image on click of an option tag

Move your cursor over a div element while utilizing NgClass

Creating dynamic HTML table headers from a multidimensional array

Tap on the screen to initiate a phone call using dompdf

Having trouble with the Wordpress JS CSS combination not functioning properly and unable to determine the cause

Unable to load CSS background image

Establish a minimum width requirement for a Bootstrap4 webpage and ensure that scrollbars are visible

Searching for a column fails to yield any results after altering the value in

Turn off hover functionality for mobile and tablet devices

Animate a box moving continuously from the right to the left using jQuery