9 replies to this topic

[N-GAGE]

I need some help for the tabs in the example below.

http://n-gage.xhost.ro/demo.html

I know that I need to apply to the CSS Style a left background (rounded corner) for <li> and then a right background for li <a>.
I get in trouble with padding and margin.

Please help me if you can.

CSS Stylesheet -> http://n-gage.xhost.ro/style/tabs.css

Thanks.


 demo.html   2.14K   51 downloads
 tabs.css   1.23K   221 downloads

Edited by N-GAGE, 03 January 2007 - 09:02 PM.

[dEcade]

Here is how I do mine

HTML

<div id="menu">
	<ul>
		<li id="current"><a href="link">ON BUTTON</a></li>
		<li><a href="link">OFF BUTTON</a></li>
	</ul>
</div>

CSS

(I took out the rollover parts)

#menu
{
	float: right;
	width: 434px;
}

#menu ul
{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

#menu li
{
	float: right;
	margin: 0;
	padding: 0;
	background: url('RIGHT IMAGE') right top no-repeat;
	margin-right: 5px;
}

#menu a
{
	display: block;
	background: url('LEFT IMAGE') left top no-repeat;
	padding: 5px 15px;
	color: #232323;
	text-decoration: none;
}

#menu #current
{
	float: right;
	margin: 0;
	padding: 0;
	background: url('RIGHT IMAGE') right top no-repeat;
	margin-right: 5px;
}

#menu #current a
{
	display: block;
	background: url('LEFT IMAGE') left top no-repeat;
	padding: 5px 15px;
	color: #232323;
	text-decoration: none;
}

I hope that helps

dEcade

[N-GAGE]

Thank you dEcade. Your code helped me.
I still have one problem.
The selectab tab & the off tab are ok.
The problem is that in the "great" Internet Explorer 6 the hover background doesn`t work.
I can see only the left background. In Mozilla Firefox the hover effect is working.

Here is the code for the hover ->

#maintab li a:hover {
color: #FFF;
background: url(../images/tab_left_hover.gif) top left no-repeat;
text-decoration:none;
}

#maintab li:hover {
display: block;
background: url(../images/tab_right_hover.gif) top right no-repeat;
color: #FFF;
text-decoration:none;
}

The browser does not understand the second rule li:hover.
Please tell if you know how I can solve this.


Thank you again


N-GAGE


Here are the files if you need one of them:
 demo.html   2.14K   208 downloads
 tabs.css   2.09K   214 downloads
 tab_left.gif   113bytes   54 downloads
 tab_left_hover.gif   113bytes   51 downloads
 tab_left_select.gif   113bytes   46 downloads
 tab_right.gif   184bytes   57 downloads
 tab_right_hover.gif   184bytes   45 downloads
 tab_right_select.gif   184bytes   57 downloads

[dEcade]

IE is funny that way. I just used an IE hack to make it so that the rollover doesn't work at all. If someone else knows how to make It work in IE would really like to hear.

dEcade

[N-GAGE]

Thanks anyway .
I tested in the last version of Opera & in IE7 and it is working.
Still ... I could`t find a hack for the hover and another way to style with the CSS I can`t figure it out.

At Retire@21 website the tabs are working in IE6.
Maybe they know a hack or something.

[Av-]

IE6 can only apply the pseudo ( hope i spelled that right ) class :hover on an anchor tag. Theres a hack out there that allows you to use :hover on anything, dunno where it's at anymore, but i know it's called hover.htc. If i find it, I'll let you know.

[N-GAGE]

Well... this is it.
Thank you again for your help guys. I always find help in this little great community.

For those who need :hover on anything

http://4umi.com/web/css/hover.htm

[dEcade]

Thanks for sharing. Now I have to try it out.

EDIT
Well I didn't get it to work.

dEcade

Edited by dEcade, 04 January 2007 - 06:58 PM.

[N-GAGE]

body {
behavior:url("csshover.htc");
}


Put this code in the CSS Stylesheet or in the head section and adownload the csshover.htc in the folder with the HTML Page.
Good luck

Edited by N-GAGE, 04 January 2007 - 07:32 PM.

[dEcade]

Yea, I did all of that and it worked the same as before. Oh well I guess it doesn't really matter, I will just stick with the IE hack to make it do nothing.

dEcade