Simulating tabs ...

Discussion in 'HTML' started by Alan Searle, Oct 17, 2005.

  1. Alan Searle

    Alan Searle Guest

    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.
     
    Alan Searle, Oct 17, 2005
    #1
    1. Advertising

  2. Alan Searle

    Guest

    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
     
    , Oct 17, 2005
    #2
    1. Advertising

  3. 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=-
     
    Travis Newbury, Oct 17, 2005
    #3
  4. Alan Searle

    rf Guest

    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.
     
    rf, Oct 17, 2005
    #4
  5. Alan Searle

    Jake Guest

    In message <divqnb$d3i$>, Alan Searle
    <> 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 ( -- just a 'spam trap' mail address)
     
    Jake, Oct 17, 2005
    #5
  6. Alan Searle

    Anze Guest

    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
     
    Anze, Oct 17, 2005
    #6
  7. 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
     
    Jonathan N. Little, Oct 17, 2005
    #7
  8. Alan Searle

    Guest

    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
     
    , Oct 17, 2005
    #8
  9. 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=-
     
    Travis Newbury, Oct 17, 2005
    #9
  10. Alan Searle

    Neredbojias Guest

    With neither quill nor qualm, 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.
     
    Neredbojias, Oct 17, 2005
    #10
  11. Alan Searle

    Alan Searle Guest

    Excellent! Thanks for your constructive comments.
     
    Alan Searle, Oct 18, 2005
    #11
  12. Alan Searle

    Alan Searle Guest

    > 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.
     
    Alan Searle, Oct 18, 2005
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. DG
    Replies:
    3
    Views:
    468
  2. qwweeeit
    Replies:
    2
    Views:
    679
    qwweeeit
    Dec 14, 2005
  3. rantingrick

    Tabs -vs- Spaces: Tabs should have won.

    rantingrick, Jul 16, 2011, in forum: Python
    Replies:
    95
    Views:
    1,928
    Roy Smith
    Jul 19, 2011
  4. Timo

    Simulating Tabs using GridLayout DIV

    Timo, Apr 21, 2004, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    238
  5. John Kopanas
    Replies:
    2
    Views:
    320
    Gregory Brown
    Jan 29, 2007
Loading...

Share This Page