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.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitl ed Document</title>
<style>
..box1{
display:inline;
z-index:1;
width:2em;
position:relati ve;
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:relati ve;
width:100%;
z-index: -2;
border: solid #000000 1px;
height: 100px;
top: -1px;
}
</style>
</head>
<body>
<div class="box4">
<li class="box1">te st</li>
</div>
<div class="box5"></div>
<div class="box4">
<li class="box1">te st2</li>
</div>
<div class="box5"></div>
<div class="box4">
<li class="box1">te st3</li>
</div>
<div class="box6"></div>
</body>
</html>
Jan 27 '06
21  2725 
"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
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...
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/
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>Untitl ed 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:relati ve;
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:relati ve;
}
.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:relati ve;
}
.class4{
bottom: -0.05em;
height: 25px;
text-align:center;
border: none;
float: left;
display:block;
width: 15px;
z-index:2;
position:relati ve;
}
.fontbold{
font-weight:bold;
}
</style>
</head>
<body bgcolor="#FFFFF F">
<div class="class4"> </div>
<div id="d1"class="c lass2 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/
"listaction " <li********@gma il.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="c lass2 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
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********@gma il.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="c lass2 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
Please do not top post, corrected this once.
"listaction " <li********@gma il.com> wrote: ><div class="class4"> </div>
><div id="d1"class="c lass2 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
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********@gma il.com> wrote:
><div class="class4"> </div>
><div id="d1"class="c lass2 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
in comp.infosystem s. 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>
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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Dan Jacobson |
last post by:
In wdg-html-reference/html40/block/pre.html there is no mention about
how ASCII tabs (^I) are to be rendered. I suppose all bets are off?
Wait, my docs go thru html-tidy first, and it says
tab-size: number
Sets the number of columns between successive tab stops. The
default is 4. It is used to map tabs to spaces when reading
files. Tidy never outputs files with tabs.
However, in emacs, tab-width's value is 8. Solution:
|
by: Cat |
last post by:
Some nice man told me that I can keep tabs in Visual Studio 2005.
(Options -> All Languages -> Tabs -> Keep tabs)
But I'm using VC#.NET 2005 EXPRESS EDITION, and I can't find Tabs node.
Is it impossible to keep tabs in VC#.NET 2005 EXPRESS EDITION? If there
is a way please let me know. Thanks.
|
by: Jim Hubbard |
last post by:
I need an example of tabs usage like you might do in a tabbed browser
application.
I need to be able to open one or more tabs with customer data. Every tab is
laid out exactly alike, only the customer data changes from tab to tab.
Tabs should be able to be created at the front of all tabs, back of all tabs
or between any 2 tabs. Double-clicking a tab should delete it.
Double-clicking on the tab control (but NOT on a tab) should create...
|
by: John M. Gabriele |
last post by:
The following short program fails:
----------------------- code ------------------------
#!/usr/bin/python
class Parent( object ):
def __init__( self ):
self.x = 9
print "Inside Parent.__init__()"
|
by: Xah Lee |
last post by:
Tabs versus Spaces in Source Code
Xah Lee, 2006-05-13
In coding a computer program, there's often the choices of tabs or
spaces for code indentation. There is a large amount of confusion about
which is better. It has become what's known as “religious war” —
a heated fight over trivia. In this essay, i like to explain what is
the situation behind it, and which is proper.
| | |
by: Stephen Edwards |
last post by:
I am a novice, so bear with me.
I designed a website using CSS TABS, all was fine, then I copy and pasted meta name, etc for keywords, tweaking it where necessary for keywords. I did not notice any problems until I looked at the site and although the text for the tabs was showing up the images which make up the tabs weren't.
I have no idea why this has happened, can I have some advice as to what to check, and how to fix it,
thank...
|
by: Ben |
last post by:
Hi,
I have a python script on a unix system that runs fine. I have a python
script on a windows system that runs fine. Both use tabs to indent
sections of the code. I now want to run them on the same system,
actually in the same script by combining bits and pieces. But whatever
I try my windows tabs get converted to spaces when I transfer it to the
unix system and the interpreter complains that the indentation style is
not consistent...
|
by: Phil Reynolds |
last post by:
I'm using a tab control in Access 2000, and the user requested to have
buttons in the form header, instead of the built-in tabs (so that when they
scroll down, they can still switch tabs). Now, this works fine. However,
when I'm in Design View, I can't access the tabs without changing the tab
control's Style back to Tabs. But I want to be able to place controls in
that space at the top where the tabs used to be. But if I need to turn the...
|
by: Andrew Poulos |
last post by:
Is there a way for javascript to know if a browser has been set to open
new windows in tabs? I'm trying to fix some code that allows a user to
close a window that javascript opened and it seems to get confused what
window to close when a new tab is opened. (The user clicks a link in the
opened window which which opens a new window and close the current one.)
Andrew Poulos
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, well explore What is ONU, What Is Router, ONU & Routers main usage, and What is the difference between ONU and Router. Lets take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupr who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
