Simulating tabs ...

Alan Searle · Oct 17, 2005

I am building a little web site with 'frames' and would like to simulate
'tabs' across the top of the page.

So far I have created a simple frame holder (index.html), I have a top
frame with menu and then, below I have the contents (which switch
according to the selection made).

You can view my effort so far at ...

http://www.alse.com/OSD/

In order to make the menu selection (across the top) look like 'tabs', I
would need to do the following ...

1. Make the buttons (in the menu across the top) change colour (or
background) according to what has been selected. Is this possible with
simple HTML? Or would I need to resort to programming? Maybe with
JavaScript? Or PHP?

2. Make the buttons lie flush with the bottom of the header frame (and
thereby also with the contents below). To do this, I have tried
experimenting with changing the CELLPADDING, CELLSPACING, BORDER,
VALIGN, BODY, TABLE, DIV ... but somehow there is always a gap between
the table (which is intended to simulate buttons) and the bottom of the
frame.

Any tips on this issue would be gratefully received.

Many thanks,
Alan Searle.

Source Code excerpts (x2) ...

Frame Holder (index.html)
-------------------------
<HTML>
<HEAD>
<TITLE> Outdoor Space Design </TITLE>
<meta name="Outdoor Space Design" content="Outdoor Space Design">
</HEAD>
<frameset rows="100,*" FRAMESPACING="0" border=1 VALIGN=BOTTOM>
<frame src="./frtop.html" name="topframe" MARGINWIDTH="5"
MARGINHEIGHT="5" VALIGN=BOTTOM>
<frameset FRAMESPACING="0" BORDER=0>
<frame src="./home.html" name="contentframe" MARGINWIDTH="5"
MARGINHEIGHT="5">
</frameset>
</frameset>
</HTML>

NB: I tried setting MARGINWIDTH in the top frame (frtop.html) to zero
but that just moved everything up (rather than down). The VALIGN=BOTTOM
also didn't help.

Header Frame
------------
<BODY LANG="EN" BGCOLOR="#b7b79b" BORDER=0 VALIGN=BOTTOM>
<DIV VALIGN=BOTTOM>
<TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=2 ALIGN=LEFT
VALIGN=BOTTOM>
<COL WIDTH=43*> <COL WIDTH=43*> <COL WIDTH=43*> <COL WIDTH=43*> <COL
WIDTH=43*> <COL WIDTH=43*>
<TR>
<TD COLSPAN=6 WIDTH=100% VALIGN=TOP>
<IMG SRC="components/header.gif" NAME="Header"
ALIGN=LEFT WIDTH=811 HEIGHT=36 BORDER=0>
</TD>
</TR>
<TR VALIGN=TOP BGCOLOR="bba2bb">
<TD WIDTH=17%>
<A STYLE="text-decoration: none" HREF="home.html" TARGET="contentframe">
<B><FONT SIZE=2 FONT FACE="Arial" FONT COLOR="#9f709f">HOME</FONT></B>
</A>
</TD>

NB:
<TD VALIGN=TOP> is to get the text to the top of the button. It doesn't
seem to influence the location of the button.

hywel.jenkins · Oct 17, 2005

Alan said:
I am building a little web site with 'frames' and would like to simulate
'tabs' across the top of the page.

So far I have created a simple frame holder (index.html), I have a top
frame with menu and then, below I have the contents (which switch
according to the selection made).

You can view my effort so far at ...

http://www.alse.com/OSD/

In order to make the menu selection (across the top) look like 'tabs', I
would need to do the following ...

1. Make the buttons (in the menu across the top) change colour (or
background) according to what has been selected. Is this possible with
simple HTML?

Yes, though you'd need to load a different menu frame, too.

Or would I need to resort to programming? Maybe with
JavaScript? Or PHP?

Up to you.

2. Make the buttons lie flush with the bottom of the header frame (and
thereby also with the contents below). To do this, I have tried
experimenting with changing the CELLPADDING, CELLSPACING, BORDER,
VALIGN, BODY, TABLE, DIV ... but somehow there is always a gap between
the table (which is intended to simulate buttons) and the bottom of the
frame.

Any tips on this issue would be gratefully received.

Lose the frames. There's no point using them, especially in your case
as the menu frame is so trivial that there's absolutely no saving in
having it.

There are "issues" with the design, too, at different browser sizes.

Travis Newbury · Oct 17, 2005

Alan said:
I am building a little web site with 'frames' and would like to simulate
'tabs' across the top of the page....

Lose the frames. They really complicate the page more than you need
to.

The site looks like your typical "I am my own graphic designer" site.
Because of this, keep it simple, or hire someone to do it.

Some nice looking landscaping there though.

rf · Oct 17, 2005

Alan said:
Any tips on this issue would be gratefully received.

Others have commented on the frames. I would like to comment on the images.
While nice they are *Way* too large. Most of them come in at 250K plus. The
top image, containing simply "outdoor space design" and a sort of
background is a massive 300K.

These images should be 20K maximum. For the top image, 2K of background and
*text* on top of that for the words.

Nobody on dialup will wait around for these images

Jake · Oct 17, 2005

Alan Searle said:
I am building a little web site with 'frames' and would like to
simulate 'tabs' across the top of the page.

So far I have created a simple frame holder (index.html), I have a top
frame with menu and then, below I have the contents (which switch
according to the selection made).

You can view my effort so far at ...

http://www.alse.com/OSD/

In order to make the menu selection (across the top) look like 'tabs',
I would need to do the following ...

1. Make the buttons (in the menu across the top) change colour (or
background) according to what has been selected. Is this possible with
simple HTML? Or would I need to resort to programming? Maybe with
JavaScript? Or PHP?

2. Make the buttons lie flush with the bottom of the header frame (and
thereby also with the contents below). To do this, I have tried
experimenting with changing the CELLPADDING, CELLSPACING, BORDER,
VALIGN, BODY, TABLE, DIV ... but somehow there is always a gap between
the table (which is intended to simulate buttons) and the bottom of the
frame.

Any tips on this issue would be gratefully received.

Many thanks,
Alan Searle.

[Snip]

It's a nice-looking site, and could work quite well as it stands.

For making the button backgrounds change colour, you could try posting
your query on a javascript newsgroup.

You could also look into using CSS, both for the background changes and
also for bringing your HTML coding up-to-date for 2005.

You have some issues with your current design where frames are concerned
(not that you really need them in this application, and you might
consider doing away with them):

(a) You have a simple 2-frame set-up, so you don't need nested framesets
(b) The frame names should make sense i.e. 'topframe' should be called
'Menu'
(c) If you want search engines to pick up on the contents of the site,
you'll need an adequate <noframes></noframes> entry to provide a way for
the SEs to index the contents..
(d) On each page/content-frame, you need a <title></title> entry that
reflects the content of that *frame*.
(e) On each page, provide a link back to the frameset in case someone
accesses one of the contents pages through Google or whatever (assuming
you want your content indexed).

Still. Looks nice -- but you need to do something about resizing your
images. I've got a 2Mbits/sec link and even then it's slow to load.
Your 300k images should reduce to about 20k without losing any quality.

Regards.

Anze · Oct 17, 2005

Hi!

I am building a little web site with 'frames' and would like to simulate
'tabs' across the top of the page.

As others said: lose the frames.
Use a <div> that is fixed to the top of the screen if you really need the
top part of the page to stay visible no matter what. Better yet - make it
non-fixed and make the pages smaller (bothe space-wise and
transfer-size-wise) by using thumbnails.

Anze

Jonathan N. Little · Oct 17, 2005

Alan said:
I am building a little web site with 'frames' and would like to simulate
'tabs' across the top of the page.

So far I have created a simple frame holder (index.html), I have a top
frame with menu and then, below I have the contents (which switch
according to the selection made).

You can view my effort so far at ...

http://www.alse.com/OSD/

<snip>
Your monster JPG
http://www.alse.com/OSD/images/home_photos.jpg

(JPEG Image, 1974x569 pixels and weighs in a very hefty 349.54 KB!!! Yet
you want an image on your page to be 632 x 182, you need to learn what
resampling is and that it is NOT the same as resizing with WIDTH and
HEIGHT attributes in HTML.

A recommended freeware tool IrfanView

http://www.irfanview.com/

CTRL+R and resample that puppy!

hywel.jenkins · Oct 17, 2005

rf said:
Others have commented on the frames. I would like to comment on the images.
While nice they are *Way* too large. Most of them come in at 250K plus. The
top image, containing simply "outdoor space design" and a sort of
background is a massive 300K.

These images should be 20K maximum. For the top image, 2K of background and
*text* on top of that for the words.

Should add that these images don't just need compressing - they need
resizing in a graphics' application. Those that I looked at are 600
pixels across, HTMLised into 30 pixels. Why do people do that?

Travis Newbury · Oct 17, 2005

Should add that these images don't just need compressing - they need
resizing in a graphics' application. Those that I looked at are 600
pixels across, HTMLised into 30 pixels. Why do people do that?

Because they can....

Neredbojias · Oct 17, 2005

With neither quill nor qualm, (e-mail address removed) quothed:

Should add that these images don't just need compressing - they need
resizing in a graphics' application. Those that I looked at are 600
pixels across, HTMLised into 30 pixels. Why do people do that?

Penis largesse envy?

Alan Searle · Oct 18, 2005

Excellent! Thanks for your constructive comments.

Alan Searle · Oct 18, 2005

Should add that these images don't just need compressing - they need

resizing in a graphics' application. Those that I looked at are 600
pixels across, HTMLised into 30 pixels. Why do people do that?

Yes, I was lazy. I'll get on and do that.

Align img inside nav tabs section	5	Dec 29, 2023
Nested Loop Insert Page Break	1	Nov 5, 2021
Image shifts to the right when export the page to pdf	4	May 5, 2023
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
SendGrid email issue in responsive Gmail	1	Nov 4, 2021
How to have two html audio players on one page?	0	May 3, 2022
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Help with Visual Lightbox: Scripts	2	May 3, 2023

Simulating tabs ...

Alan Searle

hywel.jenkins

Travis Newbury

rf

Jake

Anze

Jonathan N. Little

hywel.jenkins

Travis Newbury

Neredbojias

Alan Searle

Alan Searle

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads