1 Attachment(s)
CSS - Test Your CSS Skills Number 38 - round tabs
CSS - Test Your CSS Skills Number 38 - round tabs: Quiz now finished -See solution in post #13
Hot on the heels of the last quiz I have another task for you to complete. Look at the attachment and you will see a simple tab menu which has normal round corners at the top and inverted round corners at the bottom.
Your task is to create that tab menu.
Figure 1 on the attachment shows the basic square tabbed menu. Figure 2 shows the current tab selected. Figure 3 shows what happens when you hover over a tab.
The top corners are easy now that we have border-radius but how do you create the bottom corners which are facing the other way? You will need some of the techniques we used in the last quiz but that is the only clue I am giving.
I will give you the html and css for the basic square tab menu (although I think I'm being a bit lenient here as I am doing all the donkey work for you :)). You can change the css as much as you want but the html between the body tags must remain untouched.
Here is the starting code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
padding:20px;
background:#ccc;
}
h2 {
margin:0;
padding:10px;
color:#fff;
}
p {
margin:0 0 1em;
color:#fff;
}
.wrap {
width:760px;
margin:auto;
}
.tab {
margin:0;
padding:0 0 0 10px;
list-style:none;
width:750px;
margin:auto;
}
.tab li {
float:left;
margin:0 20px -1px;
position:relative;
z-index:1;
}
.tab li a {
float:left;
padding:5px 20px;
background:#000;
color:#fff;
font-weight:bold;
text-decoration:none;
border:1px solid #000;
border-bottom:none;
}
.tab li.current a, .tab li a:hover {
border-bottom:1px solid red;
padding:5px 20px 4px;
background:red;
}
.tabbox {
clear:both;
border:1px solid #000;
width:740px;
margin:auto;
background:#f00;
padding:10px;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="tab">
<li class="current"><a href="#">Tab 1</a></li>
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
<li><a href="#">Tab 5</a></li>
</ul>
<div class="tabbox">
<h2>Tab Box</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
</div>
</div>
</body>
</html>
(Note: Yes I noticed that I have two tabs named "Tab 1" but I was too lazy to go back and take another screenshot .:))
If you are unfamiliar with border-radius you can grab the code easily from the border-radius generator here.
Rules
There are always rules :)
Must work in IE9+ and modern Safari, Chrome, Firefox and Opera (don't bother with ie8 and under).
Valid html and css (css2.1 or 3) (but I am also interested in non valid approaches if its interesting).
No scripts of any kind.
No background images or equivalents (data uri etc).
You can use whatever CSS rules you like but the html between the body tags must be untouched.
You can change the css or even remove the css and start again as you think fit.
I think that covers everything but if anything is still unclear or I have made an error in my logic then just shout. The winner won't necessarily be the first correct one I receive (but the first entry always gets a big mention and may indeed be the preferred solution).
Remember this is just for fun and there are no prizes. Your reward will be knowing how smart you are.
Don't post your answers in this thread but PM with the details instead so that all can have a go.
Have fun.:)
PS. : In case you missed the other tests you can find them all listed here:
