By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,909 Members | 2,016 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,909 IT Pros & Developers. It's quick & easy.

tabs using CSS

P: n/a
Folks,
I'm trying to implement a tabbed effect with CSS and HTML - no
graphics.
for some reason, i'm unable to control the width of the tabs. I've
pasted the code below.
Any help / pointers to resources that explain how to implement tabs
with CSS would be great.
Thanks,
LP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"

/>
<title>Untitled Document</title>
<style>
..box1{
display:inline;
z-index:1;
width:2em;
position:relative;
white-space:nowrap;
border-left: solid #000000 1px;
border-right: solid #000000 1px;
border-top: solid #000000 1px;
border-bottom: solid #FFFFFF 1px;
text-align:center
bottom: -1px;
padding-left: 2px;

}
..box4{
position: relative;
background-color: none;
width: 5em;
border:none;
border-bottom: solid #000000 1px;
float: left;
z-index:1;
text-align: right;

}
..box5{
width: 3px;
border: none;
float: left;
display:inline;
z-index:1;
}
..box6{
position:relative;
width:100%;
z-index: -2;
border: solid #000000 1px;
height: 100px;
top: -1px;
}
</style>
</head>
<body>
<div class="box4">
<li class="box1">test</li>
</div>
<div class="box5"></div>
<div class="box4">

<li class="box1">test2</li>
</div>
<div class="box5"></div>
<div class="box4">
<li class="box1">test3</li>
</div>
<div class="box6"></div>
</body>
</html>

Jan 27 '06 #1
Share this Question
Share on Google+
21 Replies


P: n/a
VK

listaction wrote:
Folks,
I'm trying to implement a tabbed effect with CSS and HTML - no
graphics.
for some reason, i'm unable to control the width of the tabs. I've
pasted the code below.
.box1{
display:inline;


Just crossed with my own question...

.box1{
display: -moz-inline-box;
display: inline-block;

(you need block or inline-block for width / height to apply)

Jan 27 '06 #2

P: n/a
that worked! VK thanks a lot for such a quick response.

Jan 27 '06 #3

P: n/a
"VK" <sc**********@yahoo.com> wrote:
Folks,
I'm trying to implement a tabbed effect with CSS and HTML - no
graphics.
for some reason, i'm unable to control the width of the tabs. I've
pasted the code below.
.box1{
display:inline;


Just crossed with my own question...

.box1{
display: -moz-inline-box;
display: inline-block;

(you need block or inline-block for width / height to apply)


Not smart, inline-block is poorly supported in most slightly older
browsers.

--
Spartanicus
Jan 27 '06 #4

P: n/a
"listaction" <li********@gmail.com> wrote:
I'm trying to implement a tabbed effect with CSS and HTML - no
graphics.


Try Googling before reinventing the wheel for the umpteenth time.

--
Spartanicus
Jan 27 '06 #5

P: n/a
VK

Spartanicus wrote:
"VK" <sc**********@yahoo.com> wrote:
Folks,
I'm trying to implement a tabbed effect with CSS and HTML - no
graphics.
for some reason, i'm unable to control the width of the tabs. I've
pasted the code below.
.box1{
display:inline;


Just crossed with my own question...

.box1{
display: -moz-inline-box;
display: inline-block;

(you need block or inline-block for width / height to apply)


Not smart, inline-block is poorly supported in most slightly older
browsers.


Yup... That was a part of my question at:
<http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets/browse_frm/thread/c674a6548469179b/ad75d12650a1d2ed#ad75d12650a1d2ed>
(I was actually checking for replies when encountered this question).

IE 5.x (?), IE 6.x for sure, FF 1.0.4 or higher, Opera 8.x for sure.

If Safary 2.x or higher supports inline-block then I can live with it
in my particular solutions. But does it?

Jan 27 '06 #6

P: n/a
"VK" <sc**********@yahoo.com> wrote:
Not smart, inline-block is poorly supported in most slightly older
browsers.


Yup... That was a part of my question at:
<http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets/browse_frm/thread/c674a6548469179b/ad75d12650a1d2ed#ad75d12650a1d2ed>
(I was actually checking for replies when encountered this question).


Had you checked the archive there would have been no need to ask your
question, luckily for you the archive hasn't closed yet for the day, so
you can still use it.

--
Spartanicus
Jan 27 '06 #7

P: n/a
VK

Spartanicus wrote:
Had you checked the archive there would have been no need to ask your
question, luckily for you the archive hasn't closed yet for the day, so
you can still use it.


Indeed:
<http://homepage.ntlworld.com/spartanicus/ie_block_level_element_inline-block_hack.htm>
etc.

Everyone wants to be lazy sometimes... ;-)

Sorry.

Jan 27 '06 #8

P: n/a
> Try Googling before reinventing the wheel for the umpteenth time.

Perhaps he is doing it as a learning exercise, or he has valid reasons
for doing it... he's asking for help not for a critique of what he
wants to do.

Jan 27 '06 #9

P: n/a
"Joe Attardi" <ja******@gmail.com> wrote:

[about CSS "tabs"]
Try Googling before reinventing the wheel for the umpteenth time.
Perhaps he is doing it as a learning exercise,


Looking at existing proven solutions is the best way to learn, most
examples contain a verbose explanation of the methods used.
or he has valid reasons
for doing it... he's asking for help not for a critique of what he
wants to do.


Welcome to usenet, it's not a helpdesk as you seem to think

--
Spartanicus
Jan 27 '06 #11

P: n/a
Spartanicus wrote:
Welcome to usenet, it's not a helpdesk as you seem to think


Yeah, I've been using Usenet since '97 or so so I realize that. But for
just as long I've always been opposed to simply giving someone a hard
time if they think their question is dumb, instead of just ignoring
it...

Jan 27 '06 #12

P: n/a
There is a very good tutorial on A List Apart (a very good resource, I
will add) for creating graphical tabs which are still legible to screen
readers without alting. Its by the guy who I think did one of the Wired
site redesigns. Not that that's the only way, but its a pretty way. I'm
sure it has its flaws.

Anyhoo, here it is:

Sliding Doors of CSS
http://www.alistapart.com/articles/slidingdoors/

Jan 27 '06 #13

P: n/a
Folks,
thanks for discussing the topic and pointing out available resources.
I did look at the sliding doors example and a few other places prior to
asking.

After looking at all resources, I was able to achieve the same effect
across ie and firefox using the code below. Might be sort of
reinventing the wheel, but its been a while since I did CSS / Xhtml
presentation & I thought I'd take an approach of defining classes vs.
redefining elements.

Pros and cons of doing something like this?

Thx.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
<style>
.font1{
font-family:tahoma;
font-size:12pt;
}
.class1{
width:100%;
text-align:center;
top: 0px;
border-top: solid #666 1px;
z-index:1;
position:relative;
padding:0px;
float:left;
display:block;
}
.class2{
bottom: -0.05em;
height: 25px;
text-align:center;
vertical-align:middle;
border-bottom: solid #FFFFFF 1px;
border-top: solid #666 1px;
border-left: solid #666 1px;
border-right: solid #666 1px;
float: left;
display:block;
width: 75px;
z-index:2;
position:relative;
}
.class3{
bottom: -0.05em;
height: 25px;
text-align:center;
border-bottom: solid #666 1px;
border-top: solid #666 1px;
border-left: solid #666 1px;
border-right: solid #666 1px;
float: left;
display:block;
width: 75px;
z-index:2;
position:relative;
}
.class4{
bottom: -0.05em;
height: 25px;
text-align:center;
border: none;
float: left;
display:block;
width: 15px;
z-index:2;
position:relative;
}
.fontbold{
font-weight:bold;
}
</style>
</head>
<body bgcolor="#FFFFFF">
<div class="class4"></div>
<div id="d1"class="class2 font1 fontbold" >test1</div>
<div class="class4"></div>
<div id="d2" class="class3 font1" >test2</div>
<div class="class1"></div>
</body>
</html>
metoikos wrote:
There is a very good tutorial on A List Apart (a very good resource, I
will add) for creating graphical tabs which are still legible to screen
readers without alting. Its by the guy who I think did one of the Wired
site redesigns. Not that that's the only way, but its a pretty way. I'm
sure it has its flaws.

Anyhoo, here it is:

Sliding Doors of CSS
http://www.alistapart.com/articles/slidingdoors/


Jan 28 '06 #14

P: n/a
"listaction" <li********@gmail.com> wrote:
Pros and cons of doing something like this?
[snip code]

Don't post code to the group, upload it, post the url.
<div class="class4"></div>
<div id="d1"class="class2 font1 fontbold" >test1</div>
<div class="class4"></div>
<div id="d2" class="class3 font1" >test2</div>
<div class="class1"></div>


Had you paid attention whilst looking at the existing proven solutions
you would have noticed that they were based on correct markup, unlike
the div soup you created.

http://homepage.ntlworld.com/spartanicus/tabs.htm

--
Spartanicus
Jan 28 '06 #15

P: n/a
can you pl. tell me how the "div soup" is invalid markup? I checked the
code with the W3c validator & the only error I got was "<style> element
was missing the type attribute". Other than that, the document was
perfectly valid. I'll make sure I paste a link to the code next time
around.
Thx.
Spartanicus wrote:
"listaction" <li********@gmail.com> wrote:
Pros and cons of doing something like this?


[snip code]

Don't post code to the group, upload it, post the url.
<div class="class4"></div>
<div id="d1"class="class2 font1 fontbold" >test1</div>
<div class="class4"></div>
<div id="d2" class="class3 font1" >test2</div>
<div class="class1"></div>


Had you paid attention whilst looking at the existing proven solutions
you would have noticed that they were based on correct markup, unlike
the div soup you created.

http://homepage.ntlworld.com/spartanicus/tabs.htm

--
Spartanicus


Jan 28 '06 #16

P: n/a
Please do not top post, corrected this once.

"listaction" <li********@gmail.com> wrote:
><div class="class4"></div>
><div id="d1"class="class2 font1 fontbold" >test1</div>
><div class="class4"></div>
><div id="d2" class="class3 font1" >test2</div>
><div class="class1"></div>
Had you paid attention whilst looking at the existing proven solutions
you would have noticed that they were based on correct markup, unlike
the div soup you created.

can you pl. tell me how the "div soup" is invalid markup? I checked the
code with the W3c validator & the only error I got was "<style> element
was missing the type attribute". Other than that, the document was
perfectly valid.


Valid != correct.

Markup should describe the semantics and structure of a document. Div
and span are non semantic elements and for most purposes non structural.
They should only be used in addition to semantic or structural elements
for the purpose of styling when no naturally occurring semantic or
structural element is available to bind the styling to (*).

(*) The only exception to this rule is using these elements for
supplying language information.

--
Spartanicus
Jan 28 '06 #17

P: n/a
Gotcha. I replaced my "div soup" to include <li> and <ul> instead. thx
for pointing it out.
Spartanicus wrote:
Please do not top post, corrected this once.

"listaction" <li********@gmail.com> wrote:
><div class="class4"></div>
><div id="d1"class="class2 font1 fontbold" >test1</div>
><div class="class4"></div>
><div id="d2" class="class3 font1" >test2</div>
><div class="class1"></div>

Had you paid attention whilst looking at the existing proven solutions
you would have noticed that they were based on correct markup, unlike
the div soup you created.

can you pl. tell me how the "div soup" is invalid markup? I checked the
code with the W3c validator & the only error I got was "<style> element
was missing the type attribute". Other than that, the document was
perfectly valid.


Valid != correct.

Markup should describe the semantics and structure of a document. Div
and span are non semantic elements and for most purposes non structural.
They should only be used in addition to semantic or structural elements
for the purpose of styling when no naturally occurring semantic or
structural element is available to bind the styling to (*).

(*) The only exception to this rule is using these elements for
supplying language information.

--
Spartanicus


Jan 28 '06 #18

P: n/a
in comp.infosystems.www.authoring.stylesheets, VK wrote:
IE 5.x (?), IE 6.x for sure, FF 1.0.4 or higher, Opera 8.x for sure.

If Safary 2.x or higher supports inline-block then I can live with it
in my particular solutions. But does it?


Inline-block works somehow in all mentioned. This page is tested with
Opera 8.5, 9; IE6; FF1; Safari 2.0.2
http://www.student.oulu.fi/laurirai/www/css/gallery/

Extra code is needed for IE and FF, but nothing but CSS2.1 is used, and
fully CSS2.1 supporting browsers will show it as intended. I did not test
with bare inline-block on safari, but afaik it supports it.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jan 29 '06 #19

P: n/a
Spartanicus wrote:
Valid != correct.

Markup should describe the semantics and structure of a document. Div
and span are non semantic elements and for most purposes non structural.
They should only be used in addition to semantic or structural elements
for the purpose of styling when no naturally occurring semantic or
structural element is available to bind the styling to (*).

(*) The only exception to this rule is using these elements for
supplying language information.


Could you please explain, to this novice, where the W3C give the sort of
guidance, as you have stated above, or is it your interpretation of the
standard? It would be useful to be able to have such explanations
available when reading the W3C specs, which in the main say what not
why, it being far easier to write a standard than explain why the rules
of a standard exist, and the logic behind them.
--
Cheers Ian Mac
Feb 5 '06 #20

P: n/a
Ian McCarthy <idm.plusnetng@cronkshawFULLSTOPnospanDOTcom> wrote:
Valid != correct.

Markup should describe the semantics and structure of a document. Div
and span are non semantic elements and for most purposes non structural.
They should only be used in addition to semantic or structural elements
for the purpose of styling when no naturally occurring semantic or
structural element is available to bind the styling to (*).

(*) The only exception to this rule is using these elements for
supplying language information.
Could you please explain, to this novice, where the W3C give the sort of
guidance, as you have stated above, or is it your interpretation of the
standard?


W3C create and publish recommendations that for all intended purposes
function as standards. They don't typically publish guidelines or
tutorials on good authoring practices. What I wrote cannot be found in
W3C literature, nor is it an interpretation of the standard since W3C
standards don't concern themselves with application beyond basic
syntactical rules.
It would be useful to be able to have such explanations
available when reading the W3C specs, which in the main say what not
why,


Good authoring practices can be learned in a systematic and
comprehensive way with a good book or tutorial. For individual issues
this comp.infosystems.www.authoring.* usenet hierarchy should provide
ample guidance.

--
Spartanicus
Feb 5 '06 #21

P: 2
i am trying to craete the css tabs

css code


.navigation a
{
color: #000;
background: #fb0 url("../images/left-tab.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px ;
font-weight:bold;
}

.navigation a span
{
background: url("../images/right-tab.gif") right top no-repeat;
padding-right: 10px
}
/*
.navigation a:link, .navigation a:visited, .navigation a:active
{color: #fff; background: #bbb uurl("../images/left-tab.gif") left top no-repeat; font-weight:bold; padding-left: 10px}
.navigation a:link span, .navigation a:visited span, .navigation a:active span
{background: #bbb ("../images/right-tab.gif") right top no-repeat; padding-right: 10px}
*/
.navigation a, .navigation a span
{
display: block;
float: left
}

.navigation a, .navigation a span
{
float: none
}

.navigation a:hover
{
color:#F5FFFA;
background: #26a url("../images/left-tab-hover.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}

.navigation a:hover span
{
background: url("../images/right-tab-hover.gif") right top no-repeat;
padding-right: 10px
}

.navigation, .navigation ul
{
list-style: none;
padding: 0;
margin: 0
}

.navigation li
{
float: left;
display: block;
margin: 0;
padding: 0
}

and in jsp file i am using as

<h:panelGrid columns="2" styleClass="navigation">
<ul>
<h:column>
<li><h:commandLink action="edit1003">
<span><h:outputText value="#{msgs.edit1003}" styleClass="maintabtext"/></span>
</h:commandLink>
</li>
</h:column>
<h:column>

<li> <h:commandLink action="aboutus">
<span> <h:outputText value="#{msgs.aboutus}" styleClass="maintabtext"/></span>
</h:commandLink>
</li>
</h:column>
</ul>
</h:panelGrid>


some one please let me know how to highlight the current page do i need to use any javascript if so can some send me code snippet it would be greatful

thansk in advance.
sreedevi
Feb 16 '06 #22

This discussion thread is closed

Replies have been disabled for this discussion.