Jump to content


CSS Rounded Tabs


9 replies to this topic

#1 N-GAGE

    Young Padawan

  • Members
  • Pip
  • 29 posts
  • Gender:Male
  • Location:Madrid / Spain
  • Interests:Web design/development

Posted 03 January 2007 - 09:00 PM

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.


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

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


#2 dEcade

    P2L Staff

  • P2L Staff
  • PipPipPipPip
  • 1,850 posts
  • Gender:Male
  • Location:Saskatoon, Saskatchewan
  • Interests:Guitar, Programming, Storm Chasing, Games (Designing and playing), Hockey, Photography

Posted 03 January 2007 - 10:50 PM

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

#3 N-GAGE

    Young Padawan

  • Members
  • Pip
  • 29 posts
  • Gender:Male
  • Location:Madrid / Spain
  • Interests:Web design/development

Posted 04 January 2007 - 11:17 AM

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:

Attached File  demo.html   2.14K   208 downloads
Attached File  tabs.css   2.09K   214 downloads
Attached File  tab_left.gif   113bytes   54 downloads
Attached File  tab_left_hover.gif   113bytes   51 downloads
Attached File  tab_left_select.gif   113bytes   46 downloads
Attached File  tab_right.gif   184bytes   57 downloads
Attached File  tab_right_hover.gif   184bytes   45 downloads
Attached File  tab_right_select.gif   184bytes   57 downloads

#4 dEcade

    P2L Staff

  • P2L Staff
  • PipPipPipPip
  • 1,850 posts
  • Gender:Male
  • Location:Saskatoon, Saskatchewan
  • Interests:Guitar, Programming, Storm Chasing, Games (Designing and playing), Hockey, Photography

Posted 04 January 2007 - 12:06 PM

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

#5 N-GAGE

    Young Padawan

  • Members
  • Pip
  • 29 posts
  • Gender:Male
  • Location:Madrid / Spain
  • Interests:Web design/development

Posted 04 January 2007 - 12:11 PM

Thanks anyway :o.
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.


#6 Av-

    I Feel Left Out

  • Members
  • PipPipPipPip
  • 1,971 posts
  • Gender:Male
  • Location:10 ft. below sea level

Posted 04 January 2007 - 02:24 PM

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.

#7 N-GAGE

    Young Padawan

  • Members
  • Pip
  • 29 posts
  • Gender:Male
  • Location:Madrid / Spain
  • Interests:Web design/development

Posted 04 January 2007 - 05:57 PM

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

#8 dEcade

    P2L Staff

  • P2L Staff
  • PipPipPipPip
  • 1,850 posts
  • Gender:Male
  • Location:Saskatoon, Saskatchewan
  • Interests:Guitar, Programming, Storm Chasing, Games (Designing and playing), Hockey, Photography

Posted 04 January 2007 - 06:19 PM

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.


#9 N-GAGE

    Young Padawan

  • Members
  • Pip
  • 29 posts
  • Gender:Male
  • Location:Madrid / Spain
  • Interests:Web design/development

Posted 04 January 2007 - 07:31 PM

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.


#10 dEcade

    P2L Staff

  • P2L Staff
  • PipPipPipPip
  • 1,850 posts
  • Gender:Male
  • Location:Saskatoon, Saskatchewan
  • Interests:Guitar, Programming, Storm Chasing, Games (Designing and playing), Hockey, Photography

Posted 04 January 2007 - 07:43 PM

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





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users