SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Thread: Current Tab Not Working
-
Oct 21, 2004, 09:05 #1
- Join Date
- Feb 2004
- Location
- New York
- Posts
- 474
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Current Tab Not Working
Hey,
I was trying to get these tabs to work...I am making them expandable but, I need them to work properly, currently the only tab that isn't working is the current "active" tab that is specificed with the "body" tag.
Here is the code:
HTML
Code:<body id="blog"> <div id="wrapper"> <div id="title"> </div> <div class="menu"> <ul id="navigation"> <li><a class="blog" href="/">Blog</a></li> <li><a class="pages" href="/">Pages</a></li> <li><a class="templates" href="/">Templates</a></li> <li><a class="settings" href="/">Settings</a></li> </ul> </div> <div class="sidemenu">Text here? Right! I think so? Don't you...</div> </div> </body>
CSS
Code:#navigation { top: 251px; _top: 250px; position: absolute; list-style-type: none; white-space: nowrap; z-index: 1000; } #navigation ul { margin: 0; padding: 0; list-style: none; } #navigation li { background: url(../images/right-tab.gif) no-repeat right top; float: left; margin: 0 0 0 .09em; padding: 0; } #navigation a { background: url(../images/left-tab.gif) no-repeat left top; color: #666; display: block; font: 0.8em Verdana, Helvetica, sans-serif; padding: .4em 1em; text-decoration: none; } #navigation a:hover { color: #333; } #blog .blog, #pages .pages, #templates .templates, #settings .settings { background-image: url(../images/right-tab-hover.gif); } #blog .blog a, #pages .pages a, #templates .templates a, #settings .settings a { color: #333; background-image: url(../images/left-tab-hover.gif); cursor: default; font-weight: bold; } .menu { background: #CDC2A3; height: 2.5em; }
Ian Gordon
CSS / XHTML / PHP Programmer
http://www.iangordon.us
-
Oct 21, 2004, 13:47 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
This code:
Code:#blog .blog a
e.g.
Code:#blog a.blog
-
Oct 21, 2004, 19:32 #3
- Join Date
- Feb 2004
- Location
- New York
- Posts
- 474
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Paul,
Thanks but, it didn't work quite that well. Look what happened now:
See only half of it is showing...the problem has to be here:
CSS:
Code:#blog .blog, #pages .pages, #templates .templates, #settings .settings { background-image: url(../images/right-tab-hover.gif); }
Ian Gordon
CSS / XHTML / PHP Programmer
http://www.iangordon.us
-
Oct 22, 2004, 02:55 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
You need to specify the full path so that it carries more weight.
Code:#blog #navigation li a.blog
Paul
-
Oct 22, 2004, 13:34 #5
- Join Date
- Feb 2004
- Location
- New York
- Posts
- 474
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
However, if I do that, then I am back to the first problem I had before...there has to be a workaround to this.
Here is all the CSS:
Code:html,body { background: #F8F4EA url(../images/background.gif); height: 100%; color: #4C4531; font-family: Verdana, Arial, Helvetica, Sans-serif; font-size: 10pt; text-align: center; margin: 0; padding: 0; } #wrapper { background: #FFF4D3 url(../images/menu_back.gif) top right repeat-y; width: 740px; height: 100%; text-align: center; margin-left: auto; margin-right: auto; border-left: 5px solid #7B7258; border-right: 5px solid #7B7258; padding: 0; } #title { background: url(../images/title.gif) top no-repeat; height: 252px; border-bottom: 1px solid #FFFFFF; } #navigation { top: 251px; _top: 250px; position: absolute; list-style-type: none; white-space: nowrap; z-index: 1000; } #navigation ul { margin: 0; padding: 0; list-style: none; } #navigation li { background: url(../images/right-tab.gif) no-repeat right top; float: left; margin: 0 0 0 .09em; padding: 0; } #navigation a { background: url(../images/left-tab.gif) no-repeat left top; color: #666; display: block; font: 0.8em Verdana, Helvetica, sans-serif; padding: .4em 1em; text-decoration: none; } #navigation a:hover { color: #333; } #blog .blog, #pages .pages, #templates .templates, #settings .settings { background-image: url(../images/right-tab-hover.gif); } #blog a.blog, #pages a.pages, #templates a.templates, #settings a.settings { color: #333; background-image: url(../images/left-tab-hover.gif); cursor: default; font-weight: bold; } .menu { background: #CDC2A3; height: 2.5em; } .sidemenu { float: right; width: 263px; font-size: 8pt; text-align: left; padding-top: 5px; }
Ian Gordon
CSS / XHTML / PHP Programmer
http://www.iangordon.us
-
Oct 22, 2004, 13:37 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
However, if I do that, then I am back to the first problem I had before...there has to be a workaround to this.
PM me if you don't want it seen live but it will have to wait until tomorrow now
Paul
-
Oct 22, 2004, 19:48 #7
- Join Date
- Feb 2004
- Location
- New York
- Posts
- 474
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
oh sorry, here is the HTML:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <title>Tenji - Administration Panel</title> </head> <body id="blog"> <div id="wrapper"> <div id="title"> </div> <div class="menu"> <ul id="navigation"> <li><a class="blog" href="/">Blog</a></li> <li><a class="pages" href="/">Pages</a></li> <li><a class="templates" href="/">Templates</a></li> <li><a class="settings" href="/">Settings</a></li> </ul> </div> <div class="sidemenu">Text here? Right! I think so? Don't you...</div> </div> </body> </html>
Ian Gordon
CSS / XHTML / PHP Programmer
http://www.iangordon.us
-
Oct 23, 2004, 06:14 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Ok
here you go:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> html,body { background: #F8F4EA url(images/background.gif); height: 100%; color: #4C4531; font-family: Verdana, Arial, Helvetica, Sans-serif; font-size: 10pt; text-align: center; margin: 0; padding: 0; } #wrapper { background: #FFF4D3 url(images/menu_back.gif) top right repeat-y; width: 740px; height: 100%; text-align: center; margin-left: auto; margin-right: auto; border-left: 5px solid #7B7258; border-right: 5px solid #7B7258; padding: 0; } #title { background: url(../images/title.gif) top no-repeat; height: 252px; border-bottom: 1px solid #FFFFFF; } #navigation { top: 251px; _top: 250px; position: absolute; list-style-type: none; white-space: nowrap; z-index: 1000; } ul#navigation { margin: 0; padding: 0; list-style: none; } #navigation li { background: url(images/right-tab.gif) no-repeat right top; float: left; margin: 0 0 0 .09em; padding: 0; } #navigation a { background: url(images/left-tab.gif) no-repeat left top; color: #666; display: block; font: 0.8em Verdana, Helvetica, sans-serif; padding: .4em 1em; text-decoration: none; } #navigation a:hover { color: #333; } #blog li.blog a, #pages li.pages a, #templates li.templates a, #settings li.settings a{ background: url(images/left-tab-hover.gif); } #blog li.blog, #pages li.pages, #templates li.templates, #settings li.settings { color: #333; background-image: url(images/right-tab-hover.gif); cursor: default; font-weight: bold; } .menu { background: #CDC2A3; height: 2.5em; } .sidemenu { float: right; width: 263px; font-size: 8pt; text-align: left; padding-top: 5px; } </style> <title>Tenji - Administration Panel</title> </head> <body id="blog"> <div id="wrapper"> <div id="title"> </div> <div class="menu"> <ul id="navigation"> <li class="blog" ><a href="/">Blog jkj </a></li> <li class="pages"><a href="/">Pages</a></li> <li class="templates"><a href="/">Templates</a></li> <li class="settings"><a href="/">Settings</a></li> </ul> </div> <div class="sidemenu">Text here? Right! I think so? Don't you...</div> </div> </body> </html>
(Change the image locations back to yours.)
Paul
Bookmarks