Forums

Edwin

This week I saw this: http://www.simplebits.com/bits/minitabs.html and tried to make it by myself, using em's.
I made the following code and it's almost perfect... But at the largest size (when you increase font-size with command and + or ctrl and + for windows) the bottom-border is a little to low...


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">

<head>
<title>css mini tabs</title>
<style type=\"text/css\">
* {
	margin: 0;
	padding: 0;
}

body {
	background: #111111;
	font: 65% verdana;
	text-align: center;
}

ul {
	width: 20em;
	list-style: none;
	border-bottom: 1px solid #ffaf38;
	font-size: 1.5em;
	line-height: 2.2em;	
	height: 2.25em;
	margin: 0 auto;
	text-transform: lowercase;
}
li {
	float: left;	
	display: inline;
	padding: 0 0.5em;
}
a {
	display: block;
	color: #ffff61;	
	text-decoration: none;
	height: 2em;
}

a:hover {
	color: #ffaf38;	
	border-bottom: 0.3em solid #ffaf38;
}
</style>
</head>

<body>


<ul>
	<li><a href=\"#\">Home</a></li>
	<li><a href=\"#\">About</a></li>
	<li><a href=\"#\">Links</a></li>
	<li><a href=\"#\">More</a></li>
	<li><a href=\"#\">Contact</a></li>
</ul>

</body>

</html>

treehouse : what would you like to learn today?

Forums

CSS Mini Tabs