|
|
Posted by Alan Searle on 11/17/57 11:29
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.
Navigation:
[Reply to this message]
|