Help:Wiki University HTML--Tabs

From FamilySearch Wiki
Jump to navigation Jump to search

Lessons


Flexbox/CSS Grid

Additional Helps


TABS

Believe it or not, tabs can be created from lists. Here is how you do it.

  • We will use our Healthy Foods Lists.
  • Fruits
  • Vegetables
  • Nuts
  • Grains
  • First thing to do is remove the bullets with the list-style-type:none attribute in the <ul> element like so:
<ul style="list-style-type:none; ">
  • Here's our list without the bullets:

Fruits
Vegetables
Nuts
Grains

  • then In each of the <li> tags we will can add the following attributes:


border:1px solid red;
width:130px;
text-align:center;
float:left;
margin-right:3px;
border-radius:5px;
background-color:#ffe6ea;


Here is the coding for just the first tab:

<ul style="list-style-type:none; ">
<li style="
float:left;
border:1px solid red;
border-radius:5px;
width:130px;
text-align:center;
margin-right:3px;
background-color:#ffe6ea; "
>Fruits </li>


  1. Float:left was installed which caused the <li> tags to line up across the page.
  2. Installed a red border
  3. Installed rounded corners of 5px.
  4. Gave tabs a 130px width
  5. Centered the text in the tabs.
  6. Put a space between tabs of 3px.
  7. Gave tabs a background color.
  • Here's the final product with all the tabs:
  • Fruits
  • Vegetables
  • Nuts
  • Grains


  • If you want only to round the corners on just the top for example, substitute these two codes for border-radius:5px.

border-top-right-radius:5px
border-top-left-radius:5px

  • The other corners are:

border-bottom-right-radius:5px
border-bottom-left-radius:5px


  • Here are the tabs with only the top corners rounded:
  • Fruits
  • Vegetables
  • Nuts
  • Grains

TRY THESE OUT . . . . .

Tests.gif
Exercises
  • Create tabs to link to the first three chapters of Wikitext tutorial.
  • Rounded only on the top two corners.
  • 150px wide.
  • 25px high.
  • 5px between each tab.