Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Simulating tabs ...

Reply
Thread Tools

Simulating tabs ...

 
 
Alan Searle
Guest
Posts: n/a
 
      10-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.
 
Reply With Quote
 
 
 
 
hywel.jenkins@gmail.com
Guest
Posts: n/a
 
      10-17-2005

Alan Searle wrote:
> 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.

--
Hywel

 
Reply With Quote
 
 
 
 
Travis Newbury
Guest
Posts: n/a
 
      10-17-2005
Alan Searle wrote:
> 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.

--
-=tn=-

 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      10-17-2005
Alan Searle wrote:

> 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

--
Cheers
Richard.
 
Reply With Quote
 
Jake
Guest
Posts: n/a
 
      10-17-2005
In message <divqnb$d3i$(E-Mail Removed)>, Alan Searle
<(E-Mail Removed)> writes
>
>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.
--
Jake ((E-Mail Removed) -- just a 'spam trap' mail address)
 
Reply With Quote
 
Anze
Guest
Posts: n/a
 
      10-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
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      10-17-2005
Alan Searle wrote:
>
> 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!


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
hywel.jenkins@gmail.com
Guest
Posts: n/a
 
      10-17-2005

rf wrote:
> Alan Searle wrote:
>
> > 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.
>


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?

--
Hywel

 
Reply With Quote
 
Travis Newbury
Guest
Posts: n/a
 
      10-17-2005
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:
> 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....

--
-=tn=-

 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      10-17-2005
With neither quill nor qualm, (E-Mail Removed) quothed:

>
> rf wrote:
> > Alan Searle wrote:
> >
> > > 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.
> >

>
> 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?

--
Neredbojias
Contrary to popular belief, it is believable.
 
Reply With Quote
 
 
 
Reply

Thread Tools

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
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Tabs -vs- Spaces: Tabs should have won. rantingrick Python 95 07-18-2011 11:07 PM
CSV::Writer... Using tabs instead of commas (or creating excel file using tabs to seperate data) John Kopanas Ruby 2 01-29-2007 06:26 PM
List text files showing LFs and expanded tabs (was: Colorize expanded tabs) qwweeeit Python 2 12-14-2005 10:07 AM
Simulating Tabs using GridLayout DIV Timo ASP .Net Web Controls 1 04-21-2004 01:38 PM
problem with simulating a program DG VHDL 3 10-11-2003 09:26 AM



Advertisments