Help:Wiki University HTML--Tabs

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  element like so:

  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:

 


 * 1) Float:left was installed which caused the  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.

 Fruits  Vegetables  Nuts  Grains 
 * Here's the final product with all the tabs:

 <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New"> border-top-right-radius:5px border-top-left-radius:5px <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New"> border-bottom-right-radius:5px border-bottom-left-radius:5px
 * If you want only to round the corners on just the top for example, substitute these two codes for border-radius:5px.
 * The other corners are:


 * Here are the tabs with only the top corners rounded:

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

</ul>

Try these out


<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; border-radius:5px; "> <div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises <div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers
 * 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.

<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; border-radius:5px; "> Quick Quiz <div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers