INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS
Come Join Us!
Are you a
Computer / IT professional?
Join Tek-Tips now!
- Talk With Other Members
- Be Notified Of Responses
To Your Posts
- Keyword Search
- One-Click Access To Your
Favorite Forums
- Automated Signatures
On Your Posts
- Best Of All, It's Free!
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.
Partner With Us!
"Best Of Breed" Forums Add Stickiness To Your Site
(Download This Button Today!)
Feedback
"...I train people in ACCESS. I make sure they know about
these forums, give them some training on how to use the site,
and have a shortcut to it on their PC's..."
Geography
Where in the world do Tek-Tips members come from?
|
Sun: Servlets and JavaServer Pages (JSP) FAQ
|
page design
|
Designing a frame-like-looking site without frames
Posted: 27 Sep 02
|
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 :
_________________________________
| |
| 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 :
entete.jsp
<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>
gauche.jsp
<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 :
squelette.jsp
<HTML>
<HEAD>
<TITLE>test</TITLE>
<LINK rel='stylesheet' type='text/css' href='../style/style.css'>
</HEAD>
<BODY>
<jsp:include page="Entete.jsp" 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="Gauche.jsp" 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. |
Back to Sun: Servlets and JavaServer Pages (JSP) FAQ Index
Back to Sun: Servlets and JavaServer Pages (JSP) Forum
|
|
 |
|
Join Tek-Tips® Today!
Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.
Here's Why Members Love Tek-Tips Forums:
Talk To Other Members- Notification Of Responses To Questions
- Favorite Forums One Click Access
- Keyword Search Of All Posts, And More...
Register now while it's still free!
Already a member? Close this window and log in.
Join Us Close
