web design training - Layers

Resolved · Low Priority · Version Standard

Fri 16 Mar 2007, 22:52 Delegate Gavin said...

Gavin has attended:
Dreamweaver 8 Introduction course
Dreamweaver 8 Intermediate course

Layers

How do i add named tabs to the layers?

Wed 21 Mar 2007, 09:18 Trainer Rich said...

RE: Layers

Hi Gavin,

Not quite sure what you mean by 'named tabs'. Could you show me an example URL of where one exists?

If you're talking about a layer with a tab-style heading, one way might be to have a DIV tag as the first thing inside your layer, but assign a CSS class to the DIV with the same background colour as your normal background colour (eg. layer is blue, background of whole page is white, so make the DIV white background too). Then have a SPAN tag around the text, with CSS background same as layer, in this case blue. This will appear as a tab. You may need to add graphics or clever CSS colours, like this person's example. Also see this example.

Please elaborate and I'll try to help further. Otherwise you're welcome to mark this question as resolved.

Good luck.

Regards, Rich

Mon 26 Mar 2007, 16:02 Delegate Gavin said...

RE: Layers

like yahoo has the sections where

In the News, World, Local and Video tabs are....how do they do this?

Tue 27 Mar 2007, 11:44 Trainer Rich said...

RE: Layers

Gavin,

I imagine this would be an advanced bit of CSS and JavaScript.

One way to achieve this is to have 3 layers on top of each other (with two of them initially invisible). Then when a visitor clicks on one of the tabs, javascript is called to turn all layers to invisible, then set the appropriate layer to visible. At the same time, the javascript code would change the CSS of each tab to an 'off' class, and then the appropriate tab (one just clicked) to an 'on' class.

Dreamweaver can do the behaviour of turning on/off layer visibility, but you may need to program in the changing of CSS classes. It's not too difficult though.

I'm sure Yahoo has a much more complicated bit of scripting.

I've sent you an example HTML file via e-mail to show you how it can be done.

Regards, Rich

Training courses

	98.7 % recommend us
	More live stats...

Training information:

Active questions
Advanced/consultancy questions
Today's questions
Unanswered questions
Popular forum topics

Dreamweaver tip:

Paragraph formatting

in Dreamweaver if you type in text and press entre you get double line spacing.

To avoid this hold down the shift key and then press Enter for a soft break

View all Dreamweaver hints and tips