CSS Template 2 [IGNORE]

Home | Recent Posts | Map |
CreditCSS and Layout by Sycamorre. Base CSS by Unplugged.
|
Disclaimer{disclaimer text}

Updates
DATE --

Stuff.


ANOTHER DATE --

More stuff.


ANOTHER DATE --

More stuff.


ANOTHER DATE --

More stuff.


ANOTHER DATE --

More stuff.


"Thoughts and stuff could go right here."

TOOLTIP 1{tooltip 1 text}
--
TOOLTIP 2{tooltip 2 text}
--
TOOLTIP 3{tooltip 3 text}



Title Here



Here's a tip: to make multiple sections in a tab, use a simple table and set the width of the cell <td> to equal how wide you want it to be! You can use both pixel measurements and percentages.

You don't even have to make a new div class for it! Just make sure to set vertical-align if you want your text to be aligned to the top of the cell.

The table will grow with the content inside it, making the tab grow, so if you would rather it not do that past a certain point, I have included a simple div you can put into the cells to make sure that it doesn't go over a certain height. You can change this max-height in the CSS section.

You can even use it in tabs without tables!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.



A couple other options with the accordion: if you change the input's type from type="checkbox"
to type="radio" the functionality of the accordion will change so that when you open a tab, then try to open another one, it closes the first (so you only have one tab open at a time). You can also add "checked" to the end of the input tag (so it would look like <input id="tab-two" type="checkbox" name="tabs" checked>) so that tab would be opened automatically when the page is loaded.

To add more tabs, copy and paste the following, and change "NUM" to something unique for that tab (can be a number, name, whatever, it just has to be unique):

<div class="tab"><input id="tab-NUM" type="checkbox" name="tabs"><label for="tab-NUM">Label</label><div class="tab-content">
        <p>TEXT HERE</p>
</div></div>



The remainder of the tab is to show how a tab with lots of content looks without using the celloverflow div. NOTE: You can set a max height for the tab-content in the accordion code, but anything that gets over it gets cut off. You can use that celloverflow div to help, just adjust it to the height you want!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.



This tab will show how a tab with lots of content might look like with the cell overflow div used as well.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.














--- UNPLUGGED'S BASE



-- FONTS



--- BLOG WIDTH/COLORS AND BG COLOR


-- LINK COLORS


-- COMMENT ADJUSTMENTS AND COLORS


-- TOP MENU AND MISC


-- UPDATES DIVS


-- BIG IMG (change width/height to match your img and put the url in the background-image attribute!)


-- BIODIV (div with accordion) AND TITLE


--CELL OVERFLOW


-- TOOLTIPS


-- SCROLLBAR




Sycamorre's picture

TEST COMMENT (with a test

TEST COMMENT (with a test link)