DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Design

Reply
 
Thread Tools Display Modes
Old 10-28-2005, 12:07 PM   #1
Lab309
Member
 
Join Date: Oct 2005
Posts: 9
Default Tabbed notebook help

Current project is to display pages in a tabbed notebook format. DWMX has a template that can do this, but the tabs are more like buttons. A better looking /working set is at www.borland.com. When the page comes up, the first tab appears "up front" because of the unbroken line from the left of the page, up over the text (creating the tab), and back down all the way to the right. Click on any other tab, and that line changes, still starting all the way over to the left, but now up over the text for that tab, and all the way over to the right, making the other tabs appear to be behind that one. And there's some change in the shading for foreground v backgroun tabs.

I've poked aound with their source code a bit, and it doesn't seem as they use tables of tables of tables and pieces of graphic files to construct these things, but that level of HTML programming is new to me, and I could be wrong.

Any pointers to do something like this (even if it's "yes, you really do have to go through tables of .gifs hell."), before I go down an errant path?

--jim
Lab309 is offline   Reply With Quote
Old 10-28-2005, 02:32 PM   #2
gary
Member
 
Join Date: Dec 2004
Location: In the heart of Lake Minnetonka
Posts: 337
Default

The simplest solution is a separate image (of all the tabs) for each notebook page, the images overlaid as you switch pages.

You can also do it by breaking up the image pieces so that you have each tab in two forms, one with only a line above and another with lines above and below. Then you also need four images for between tabs and two images for each end tab. You assemble them as separator-tab-separator-tab-separator-tab-separator .
gary is offline   Reply With Quote
Old 10-28-2005, 06:26 PM   #3
Lab309
Member
 
Join Date: Oct 2005
Posts: 9
Default

Thanks for the reply.
I think I see what you mean. Have to think about it and try it out. And I don't need a table to hold all these elements together?
Lab309 is offline   Reply With Quote
Old 10-28-2005, 10:29 PM   #4
Ian Petersen
Staff
 
Join Date: Nov 2004
Posts: 235
Default

You probably want to be looking at a variation of Douglas Bowman's 'sliding doors' technique: http://alistapart.com/articles/slidingdoors

   
__________________
Ian
Ian Petersen is offline   Reply With Quote
Old 11-02-2005, 11:33 AM   #5
Lab309
Member
 
Join Date: Oct 2005
Posts: 9
Default

Right on the button!
Thank you.
Lab309 is offline   Reply With Quote
Old 11-10-2005, 01:08 PM   #6
Lab309
Member
 
Join Date: Oct 2005
Posts: 9
Default

Took awhile to get this down, but finally got the HTML and CSS working together to give tabs across the top of a page.
Then, I thought to add, a bit below the tabs, a layer to contain the text for each page. Got everything together, filled the layer with text, and in the browser (IE), only the tabs; none of the text.

After a great deal of playing around, editing a different page with this kind of layer, removing/adding things, and even turning the background color to a billious green--and still seeing nothing but the tabs--I suddenly recalled this kind of wierd behaviour with frames in early versions of MS Word. There had to be at least one "hard space" on the page or the frames woul skitter way more than they always did.

Open the code editor, type one line of gibberish text in the <body> just after the </div> for the tabs, and just before the <div name=....> for the layer, and, voila! The missing layer, she appears, no?

So I have to add a line of text between these two <div>s--set to the background color--to make the layer appear.
Fine, but why?
DW8 and IE 6.0.2800.1106-xpsp2blahblahblah

--jim
Lab309 is offline   Reply With Quote
Old 11-10-2005, 03:55 PM   #7
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by Lab309
Took awhile to get this down, but finally got the HTML and CSS working together to give tabs across the top of a page.
Can you give us the URL?

There are some great minds here — maybe someone can help sort this out.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 12-22-2005, 09:26 AM   #8
Lab309
Member
 
Join Date: Oct 2005
Posts: 9
Default

Finally got back to this. Very odd. Yesterday generated a new HTML page, drew a layer, resized it to 8.5 x 11 in and it jumped up to Top = 0 and Left = 1100px (Needed View > Magnification 25% to see the top left of the page and the layer at the same time.
Today, same machine, same guy, and I cannot reproduce this.

--jim

P.S. I grew up in Connecticut almost along the banks of the Naugatuck River which makes its way to the Housatonic, but further up near Derby.
The Housatonic has lent its name to a community college near there the locals call "Hoo U."
Lab309 is offline   Reply With Quote
Old 12-22-2005, 11:03 AM   #9
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by Lab309
Very odd. Yesterday generated a new HTML page, drew a layer, resized it to 8.5 x 11 in and it jumped up to Top = 0 and Left = 1100px (Needed View > Magnification 25% to see the top left of the page and the layer at the same time.

Today, same machine, same guy, and I cannot reproduce this.
Well, you have really lost me (I don’t know from layers in your context). But others here should be able to help.

Quote:
Originally Posted by Lab309
P.S. I grew up in Connecticut almost along the banks of the Naugatuck River which makes its way to the Housatonic, but further up near Derby.

The Housatonic has lent its name to a community college near there the locals call "Hoo U."
Yep. It’s still going, fairly strong, I think. But it seems to be entirely within Bridgeport now. I suppose it was named for the Valley, since it is nowhere near the river!

Do you now live in some strange place, far from good New Haven pizza? <g>

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 12-22-2005, 02:33 PM   #10
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Quote:
Originally Posted by Ian Petersen
You probably want to be looking at a variation of Douglas Bowman's 'sliding doors' technique: http://alistapart.com/articles/slidingdoors
I was going to suggest the same link.

Here are two variations of using UL and LI to do buttons instead of all graphics, my former manager's site http://www.vanderwal.net and one of my nonprofits http://agla.org. I used the former to adapt to the latter. Some very cool CSS.

Dennis

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Notebook as only computer Paul General Publishing Topics 42 06-05-2006 11:57 AM
Google Notebook launched Kelvyn The Corner Pub 32 05-23-2006 01:41 PM


All times are GMT -8. The time now is 05:55 PM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.