RE: [WSG] CSS Tabs
If you mean tab menu then look at these: http://www.alistapart.com/articles/slidingdoors/ http://www.alistapart.com/articles/slidingdoors2/ I have used these and they are really cool dave rayner freshweb www.freshweb.com.au m. 0409 037 250 p. +61 2 89202344 f. +61 2 89203008 This message is confidential, and may contain proprietary or legally privileged information. If you have received this email in error, please notify the sender and delete it immediately. Internet communications are not secure. You should scan this message and any attachments for viruses. Under no circumstances do we accept liability for any loss or damage which may result from your receipt of this message or any attachments. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jad Madi Sent: Friday, July 16, 2004 8:46 AM To: [EMAIL PROTECTED]; css-discuss DISCUSS; [EMAIL PROTECTED] Subject: [WSG] CSS Tabs Hi guys is there anyway to get CSS tabs working without Java scripts? -- http://www.jadmadi.net/ * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] CSS Tabs
hmm what I want is , for example http://www.alistapart.com/d/slidingdoors2/v1/ex10a.html# when I click on any tab to be active? How to do it? On Fri, 16 Jul 2004 09:37:28 +1000, Dave Rayner [EMAIL PROTECTED] wrote: If you mean tab menu then look at these: http://www.alistapart.com/articles/slidingdoors/ http://www.alistapart.com/articles/slidingdoors2/ I have used these and they are really cool dave rayner freshweb www.freshweb.com.au m. 0409 037 250 p. +61 2 89202344 f. +61 2 89203008 This message is confidential, and may contain proprietary or legally privileged information. If you have received this email in error, please notify the sender and delete it immediately. Internet communications are not secure. You should scan this message and any attachments for viruses. Under no circumstances do we accept liability for any loss or damage which may result from your receipt of this message or any attachments. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jad Madi Sent: Friday, July 16, 2004 8:46 AM To: [EMAIL PROTECTED]; css-discuss DISCUSS; [EMAIL PROTECTED] Subject: [WSG] CSS Tabs Hi guys is there anyway to get CSS tabs working without Java scripts? -- http://www.jadmadi.net/ * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * -- http://www.jadmadi.net/ * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] CSS Tabs
Jad Madi wrote:
hmm
what I want is , for example
http://www.alistapart.com/d/slidingdoors2/v1/ex10a.html#
when I click on any tab to be active?
How to do it?
In the above example you change the body id of each page depending on
which tab you want to look active
Currently its set to body id=products
And the tab item is
li id=nav-productsa href=#Products/a/li
In the css this is the style applied (removed some selectors for this
example)
#home #nav-home,
#products #nav-products {
background-position:0 -150px;
border-width:0;
}
#home #nav-home a,
#products #nav-products a {
background-position:100% -150px;
padding-bottom:5px;
color:#333;
}
To have that page with the home tab active you would change the body to
body id=home
Hope this helps
Jason
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
Re: [WSG] CSS Tabs
I think what he meant was: the tabs don't highlight on hover in IE, and how to get around that. If I wasn't knackered (and heck, it's 1:34 in the morning here), I'd spend a few minutes devising a javascript solution (or completely reorganising the xhtml so that the A element is the one containing all the backgrounds, so the :hover can take effect in IE), but I'd give the IE7.htc behaviours a whirl with this, they should be able to give IE the :hover on any element (but yes, this effectively still relies on having js enabled) Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively. [latin : re-, re- + dux, leader; see duke.] http://www.splintered.co.uk | http://www.photographia.co.uk | http://redux.deviantart.com * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] CSS Tabs
See the permanlink : http://lutandoporwasp.blogspot.com/2004/05/tudo-possvel-sem-tabelas.html On Fri, 16 Jul 2004 02:08:23 +0200, Jad Madi [EMAIL PROTECTED] wrote: hmm what I want is , for example http://www.alistapart.com/d/slidingdoors2/v1/ex10a.html# when I click on any tab to be active? How to do it? On Fri, 16 Jul 2004 09:37:28 +1000, Dave Rayner [EMAIL PROTECTED] wrote: If you mean tab menu then look at these: http://www.alistapart.com/articles/slidingdoors/ http://www.alistapart.com/articles/slidingdoors2/ I have used these and they are really cool dave rayner freshweb www.freshweb.com.au m. 0409 037 250 p. +61 2 89202344 f. +61 2 89203008 This message is confidential, and may contain proprietary or legally privileged information. If you have received this email in error, please notify the sender and delete it immediately. Internet communications are not secure. You should scan this message and any attachments for viruses. Under no circumstances do we accept liability for any loss or damage which may result from your receipt of this message or any attachments. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jad Madi Sent: Friday, July 16, 2004 8:46 AM To: [EMAIL PROTECTED]; css-discuss DISCUSS; [EMAIL PROTECTED] Subject: [WSG] CSS Tabs Hi guys is there anyway to get CSS tabs working without Java scripts? -- http://www.jadmadi.net/ * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * -- http://www.jadmadi.net/ * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * -- Atc, Aldemir Vieira da Silva http://lutandoporwasp.blogspot.com/ Kurumin + Firefox + GMail = Freedom * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] CSS Tabs
I would really recommend going through the two articles, we were able to
customise the 'effect' a lot on a recent project, then use .NET to build
and add ids on the fly.
Instant flexible, dynamic CMSable tab menu
dave rayner
freshweb
www.freshweb.com.au
m. 0409 037 250
p. +61 2 89202344
f. +61 2 89203008
This message is confidential, and may
contain proprietary or legally privileged
information. If you have received this
email in error, please notify the sender
and delete it immediately.
Internet communications are not secure.
You should scan this message and any
attachments for viruses. Under no
circumstances do we accept liability
for any loss or damage which may result
from your receipt of this message or
any attachments.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Jason Turnbull
Sent: Friday, July 16, 2004 10:31 AM
To: [EMAIL PROTECTED]
Subject: RE: [WSG] CSS Tabs
Jad Madi wrote:
hmm
what I want is , for example
http://www.alistapart.com/d/slidingdoors2/v1/ex10a.html#
when I click on any tab to be active?
How to do it?
In the above example you change the body id of each page depending on
which tab you want to look active
Currently its set to body id=products
And the tab item is
li id=nav-productsa href=#Products/a/li
In the css this is the style applied (removed some selectors for this
example)
#home #nav-home,
#products #nav-products {
background-position:0 -150px;
border-width:0;
}
#home #nav-home a,
#products #nav-products a {
background-position:100% -150px;
padding-bottom:5px;
color:#333;
}
To have that page with the home tab active you would change the body to
body id=home
Hope this helps
Jason
*
The discussion list for http://webstandardsgroup.org/ See
http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
Re: [WSG] CSS Tabs
On Friday, Jul 16, 2004, at 10:08 Australia/Sydney, Jad Madi wrote: hmm what I want is , for example http://www.alistapart.com/d/slidingdoors2/v1/ex10a.html# when I click on any tab to be active? How to do it? On Fri, 16 Jul 2004 09:37:28 +1000, Dave Rayner [EMAIL PROTECTED] wrote: If you mean tab menu then look at these: http://www.alistapart.com/articles/slidingdoors/ http://www.alistapart.com/articles/slidingdoors2/ I have used these and they are really cool dave rayner I'm with Dave - Sliding Doors are the go. But what exactly do you mean by 'when I click on any tab to be active'? Can you be a bit clearer/more specific? Also - what browser/platform are you using to view Sliding Doors example? It's compatibility is not 100%... Nick ___ Omnivision. Websight. http://www.omnivision.com.au/ * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] CSS Tabs
Here, its very simple.
1st step.
Setup you link heirachy in an unordered list.
div id="nav"
ul
lia href=""Link/a/li
lia href=""Link/a/li
lia href=""Link/a/li
lia href=""Link/a/li
/ul
/div
2nd step.
Setup the CSS,
div#nav ul
{
list-style-type: none;
padding: 0; margin: 0;
}
div#nav ul li
{
display: inline;
padding: 0; margin: 0 5px 0 0;
}
div#nav ul li a
{
color: #000;
}
div#nav ul li a:hover
{
color: #000;
}
Obviously use the CSS you want, to make them look like the tabs you
want!
THEN,
3rd step.
Setup your PHP header to handle the class="current"
eg:
change the header HTML to this PHP...
div id="nav"
ul
lia ? if ($_SERVER['PHP_SELF'] ==
'/home.php'){echo('class="current" ');
?href=""Link/a/li
lia ? if ($_SERVER['PHP_SELF'] ==
'/link.php'){echo('class="current" ');
?href=""Link/a/li
lia ? if ($_SERVER['PHP_SELF'] ==
'/blog.php'){echo('class="current" ');
?href=""Link/a/li
lia ? if ($_SERVER['PHP_SELF'] ==
'/about.php'){echo('class="current" ');
?href=""Link/a/li
/ul
/div
4th step
Add the DIV#NAV UL LI A.CURRENT to the CSS,
eg:
div#nav ul li a.current
{
/* Some New Style */
}
div#nav ul li a.current:hover
{
/* Some New Style */
}
Hope that helped...
sorry its in the email...
anyone like to add to this?
Jad Madi wrote:
Hi
guys is there anyway to get CSS tabs working without _javascript_s?
