Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Designing a frame-like-looking site without frames

page design

Designing a frame-like-looking site without frames

by  Targol  Posted    (Edited  )
If you want your site to have the "standard" look of frame based sites without using frames, here's a solution :

Following is an exemple of a page separated in 3 :
- 1) a full width top banner that holds title
- 2) a left menu
- 3) the rest of the page as main container

That looks like this :
Code: 
   _________________________________
  |                                 |
  |            top banner (#1)      |
  |---------------------------------|
  |      |                          |
  |      |                          |
  |      |                          |
  | Menu |     Main container       |
  | (#2) |         (#3)             |
  |      |                          |
  |      |                          |
  |      |                          |
  |      |                          |
   ---------------------------------
This exemple does'nt use frames but the result seems the same (except that all the parts scroll together).

You need 3 files to do it :

[color blue]entete.jsp[/color]
Code: 
<TABLE
    class="Entete" cellpadding="0" cellspacing="0" border="0px">
    <TR>
        <TD width="160px" class="CoinEntete">
           <!-- some links -->
        </TD>

        <TD align='center' width='555'>
        	<B><FONT size='5' color='#FFFFFF'>
        		Page Title<BR/>
        		and under Title
        	</FONT></B>
        </TD>

        <TD width='100'>
           <!-- some links -->
        </TD>
    </TR>
</TABLE>

[color blue]gauche.jsp[/color]
Code: 
<TABLE border="0" cellpadding="0" cellspacing="0" width="160px">
    <TBODY>
        <TR>
            <TD class="MenuGauche">menu link #1</TD>
        </TR>
        <TR>
            <TD class="MenuGauche">menu link #2</TD>
        </TR>
        <TR>
            <TD class="MenuGauche">menu link #3</TD>
        </TR>
        <TR>
            <TD class="MenuGauche">menu link #4</TD>
        </TR>
..
.
..
        <TR>
            <TD class="MenuGauche">menu link #n</TD>
        </TR>
    </TBODY>
</TABLE>

The next one is your standard skeleton that you'll use for each page that needs that kind of look :
[color blue]squelette.jsp[/color]
Code: 
<HTML>
<HEAD>
<TITLE>test</TITLE>
<LINK rel='stylesheet' type='text/css' href='../style/style.css'>
</HEAD>
<BODY>
<jsp:include page="
[color red]Entete.jsp[/color]
Code: 
" flush="true"/>
<TABLE cellspacing="0px" cellpadding="0px" border="0px" width='100%'>
	<COL width="160px">
	<COL width="10px">
	<COL width="850px">
	<TBODY>
	    <TR>
	        <TD valign='top'>
	        	<jsp:include page="
[color red]Gauche.jsp[/color]
Code: 
" flush="true"/>
	        </TD>
	        <TD> </TD>
	        <TD valign='top'>
                    <!-- put here all the code for your page -->
		</TD>
	    </TR>
	</TBODY>
</TABLE>
</BODY>
</HTML>

Note : this page is for 1024x768 screen. Change the col widths form "Squelette.jsp" and the table width from "menu.jsp" to change your target resolution.
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top