Creating Non-Image Tabs

Is there any easy and nice-looking way to create Navigation Tabs without using images?

Unfortunately I don’t have any graphics software (e.g. Photoshop). And even if I did, I wouldn’t know how to use it.

I would like to create some Navigation Tabs for my User Profile page (e.g. “About Me”, “My Interests”, “My Photos”).

Thanks,

Debbie

It’s easy enough to use a list for this. Set the list items to horizontal (assuming that’s what you want), put some space betwixt them, maybe a border around each, a nice background color and even a rounded corner or two for real browsers (border-radius: 5px 5px 0 0; ) and, veritably, Bob be thine uncle. :slight_smile:

Hi Debbie,

If you’re looking for some free image software that gives some pretty good features, check out GIMP.

On the other hand, a list (as the previous poster said) is a great way to add some styles to simple navigation. You can even add some slick looking drop down menus if you need to link to multiple pages but don’t want to clutter the navigation. Here’s some code to get you started:

The HTML


            <ul id="navigation">
                <li><a href="#">Home</a></li>
                <li><a href="#">About Me</a></li>
                <li>
                    <a href="#">Blog Home</a>
                    <ul>
                    <li><a href="#">Topic Category 1</a></li>
                        <li><a href="#">Topic Category 2</a></li>
                        <li><a href="#">Topic Category 3</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Contact Me</a>
                    <ul>
                    <li><a href="#">Advertise With Me</a></li>
                        <li><a href="#">Become A Partner</a></li>
                    </ul>
                </li>
            </ul>

The CSS


#navigation{
	list-style:none;
	margin:0 auto;
	display:block;
	padding-top:0px;
}
#navigation li{
	float:left;
	margin:0px 5px;
	position:relative;
}
#navigation li a{
	display:block;
	padding:30px 15px;
	border:2px solid #fff;
	color:#333;
	text-decoration:none;
}
#navigation li a:hover{
	color:#333;
	background:#fde9d1;
	border:2px solid #ffd29c;
	text-decoration:underline;
}

/*--- DROPDOWN ---*/
#navigation ul {
	background:#fff;
	background:rgba(255,255,255,0);
	list-style:none;
	position:absolute;
	left:-9999px;
}
#navigation ul li {
	border:1px solid #cccccc;
	float:none;
	background:#fff;
}
#navigation ul a {
	white-space:nowrap;
}
#navigation li:hover ul {
	left:0;
	margin-left:-45px;
}
#navigation li:hover a {
	text-decoration:none;
}
#navigation li:hover ul a {
	text-decoration:none;
}
#navigation li:hover ul li a:hover {
	background:#fde9d1;
	border:2px solid #ffd29c;	
}

hope this helps!

If I wanted tabs that look like the ones in my SitePoint Profile, would what you are recommending work?

Debbie

Yes indeed. It would work perfectly. :slight_smile: In that menu, they are using a <dd>, but I’d suggest using standard <li>s for that.

Working on it now, Ralph!

I’ll do my best to make you proud! :wink:

Thanks as always!

Debbie