Difference between revisions of "Team:Uppsala/Team"
| Line 27: | Line 27: | ||
display: block;*/ | display: block;*/ | ||
margin-top: -15px; | margin-top: -15px; | ||
| + | } | ||
| + | |||
| + | #tabs { | ||
| + | display: block; | ||
| + | margin-left: auto; | ||
| + | margin-right: auto; | ||
| + | border: 2px solid red; | ||
| + | } | ||
| + | |||
| + | #tab_list { | ||
| + | list-style:none; | ||
| + | border: 2px solid red; | ||
| + | display: inline-table; | ||
| + | /*margin-left: auto; | ||
| + | margin-right: auto; | ||
| + | width: 60px;*/ | ||
| + | text-align: center; | ||
| + | } | ||
| + | |||
| + | #tab_list li { | ||
| + | float: left; | ||
| + | |||
| + | } | ||
| + | |||
| + | #tab_list li a { | ||
| + | padding-right: 20px; | ||
| + | background-color: #E84243; | ||
| + | } | ||
| + | |||
| + | #tab_list li a:hover { | ||
| + | background-color: #CC0000; | ||
| + | } | ||
| + | |||
| + | #tab { | ||
| + | text-decoration: none; | ||
| + | list-style-type: none; | ||
| + | display: block; | ||
| + | |||
} | } | ||
| Line 40: | Line 78: | ||
<hr> | <hr> | ||
| − | + | <div id="tabs"> | |
| − | <ul> | + | <ul id="tab_list"> |
| − | <li><a href="#tab-1"> | + | <li><a id="tab" href="#tab-1">Group 1</a></li> |
| − | <li><a href="#tab-2"> | + | <li><a id="tab" href="#tab-2">Group 2</a></li> |
| − | <li><a href="#tab-3"> | + | <li><a id="tab" href="#tab-3">Group 3</a></li> |
| − | <li><a href="#tab-4"> | + | <li><a id="tab" href="#tab-4">Group 4</a></li> |
</ul> | </ul> | ||
<div id="tab-1"> | <div id="tab-1"> | ||
| Line 67: | Line 105: | ||
</p> | </p> | ||
</div> | </div> | ||
| − | </div | + | </div> |
Revision as of 15:36, 13 August 2015
Here you see a part of our fantastic team. There will be more information about us soon!
This is a really simple tabbed interface
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio. Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat.
Tab 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec
Tab 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio.
Tab 4
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio. Pellentesque mollis arcu nec metus.