Page 1 of 1

My CSS tabbed navigation bar does not quite work

Posted: Sun Mar 16, 2014 8:18 am
by boylesg
This is my first attempt at using css. I went through a tutorial detailing how to create one of these and have made some modifications to the fonts used in the tabs, which as apparently upset the apple cart.

I can't figure out how to fix the tabs so that the text is vertically centered and the other rounded corners of the tabs are shown.

Image

Code: Select all

<style>

ol#toc 
{
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
}

ol#toc li 
{
    float: left;
    margin: 0 1px 0 0;
}

ol#toc a 
{
    background: url(images/Tabs.jpg);
    color:#fff;
    display:block;
    float: left;
    height: 2em;
    padding-left: 10px;
    text-decoration: none;
    font-weight: normal;
    font-family: Arial;
    font-size: large;
}

ol#toc span {
    background: url(images/Tabs.jpg) 100% 0;
    display: block;
    line-height: 2em;
    padding-right: 10px;
}

ol#toc li.current 
{
    background-color: blue;
    background-position: 0 -60px;
    color: #fff;
    font-weight: normal;
    font-family: Arial;
    font-size: large;
}

ol#toc li.current span {
    background-color: blue;
    background-position: 100% -60px;
    color: #fff;
    font-weight: normal;
    font-family: Arial;
    font-size: large;
}

ol#toc li.current a 
{

    background-color: blue;
    background-position: 100% -60px;
    color: #fff;
    font-weight: normal;
    font-family: Arial;
    font-size: large;
}

ol#toc a:hover {
    background-color: blue;
    background-position: 0 -120px;
    color: #fff;
    font-weight: normal;
    font-family: Arial;
    font-size: large;
}

ol#toc a:hover span {
    background-position: 100% -120px;
}

div.content 
{
    border: #FFB71A solid 3px;
    clear: left;
    padding: 1em;
}

</style>

Re: My CSS tabbed navigation bar does not quite work

Posted: Sun Mar 16, 2014 9:04 am
by Celauran
Not sure why they have you messing about with images. Must be an old tutorial. That aside, is something like this what you're looking to do?

Code: Select all

<!DOCTYPE html>
<html>
	<head>
		<style>
		nav ul {
			list-style: none;
		}
		nav ul li {
			float: left;
			border-radius: 5px 5px 0 0;
			background-color: #2A6A53;
			color: #FFF;
			font-family: sans-serif;
			margin: 1px;
			padding: 8px 15px;
		}
		nav ul li:hover {
			background-color: #5E2B75;
		}
		</style>
	</head>
	<body>
		<nav>
			<ul>
				<li>Home</li>
				<li>About</li>
				<li>Our Work</li>
				<li>Etc</li>
			</ul>
		</nav>
	</body>
</html>