Styling separators

HTML & CSS
1

I’m trying to make the separators for these tabs look good but I am miserably failing, I’d love some tips

( the tabs that say article 1, article 2, some pics, important notice, events. I’m currently using and image for the following:

#featured-nav li {
background: url(images/purple/featured-li-bg.png) no-repeat 1px bottom;
}

#featured-nav {
background: url(images/purple/featured-separator.png) no-repeat right 3px;
}

here is the site: http://www.at-tayyibaat.net/

2

HI,

I’m trying to make the separators for these tabs look good but I am miserably failing, I’d love some tips

Hmm it all depends by what you mean by “look good” :slight_smile:

I can’t see anything wrong as such so are you asking a design related question about appearance rather than a css code question?

If there is a bug/problem then we’d need to know how you want it to look. If the question is that you want it to look better then that’s a design question but we’d still need to know what you don’t like about the current version or what you are aiming for?

3

yes it’s a design thing. I’m not sure what is wrong with it but I think it needs something to make it look professional. To me it just looks like some lines but I don’t know exactly how to make it right.
How would you do it?

4

Hi,

I would probably try for a clearer separation between elements and try to make the active tab lead into the article a bit better.

Something very roughly like this (but you should get the idea):


#featured-nav {
	padding:4px 0;
	height:379px;
	overflow:hidden
}
#featured-nav li {
	background:none;
	border-bottom:1px solid #000;
	border-right:5px solid #000;
	padding:0;
}
#featured-nav li a { padding: 21px 10px 20px 20px; }
#featured-nav li:last-child { border-bottom:none }
#featured-nav li.active { border-right:none; }
#featured-nav li.active a {
	border:2px solid #000;
	border-right:none;
	padding: 19px 10px 18px 18px;
}

The above code is over-rides so bookmark css terminal and then you can simply paste the code into the css terminal window and it over-rides the live code so you can see what it looks like. It’s very useful for testing things out on a live site without changing the actual code.

(Bear in mind I’m not a designer as such so not the best person to ask :))

5

Yep I see, it’s thinker, looks much better already, I’ll work on that. Thanks for the tips