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!

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

What would be the best move for me?

Status
Not open for further replies.
Mar 11, 2004
127
GB
Do excuse my lame attempt at a website layout, but its late and I've had a very long day on PC's. And this is the easiest way I can think to explain wht I'm after.

This is a drawing of how I want my site layout and navigation to be. I cant seem to get it quite right with either Frames or iFrames. Would one of these be my best option, or should I be looking at other coding?


Thanks (for not laughing)
Ant
 

Do you want the main content area to end flush with bottom of Lhs_nav (and introduce scrollbars on the div), or do you want it to continue on (and introduce scrollbars on the browser) if the content is bigger ?

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
I would use one TABLE to create the layout - because that is easy & robust, then populate it with DIV or IFRAME as necessary.

Code:
<table width="790">
<tr>
<td colspan="2" height="75" bgcolor="blue">banner</td>
</tr>
<tr>
<td width="75" height="450" bgcolor="red">nav</td>
<td width="709" bgcolor="#EEEEEE" valign="top">

<div style="height:50px;background-color:yellow;">secondary nav</div>

<div>main content</div>

</td>
</tr>
</table>

--Glen :)

Memoria mihi benigna erit qui eam perscribam
 
Dan, I'm wanting the contnet to be scrollable if if needs it. So wether that be in the DIV (I still dont know what these are yet so will be reading up) or the actual browser. I guess if its the DIV thats scrollable the rest of the navigation, banners etc will remain in place when you scroll that section of the page right?

The reason why I cant figure out what to use is that each banner has a different back ground image and each button has a rollover effect so i need each part to be independant of the others.

THanks
Ant
 
Actually, one thing I did want advice on was iFrames. I played around with them last night, but I couldn't figure out how to get them arranged.

Could somone offer advice on that or point me in the direction of a good tutorial that includes how to arrange them?

Thanks
Ant
 
In current CSS supporting browsers, you can position any element using styles. The style can be added inline as with example 1:
Code:
<iframe style="position:absolute;top:100px;left:100px;"></iframe>
Or in a style block/file as in example 2:
Code:
<style>
#myIframe {position:absolute;top:100px;left:100px;}
</style>

<iframe id="myIframe"></iframe>

Dynamic position of elements using styles can be very powerful because it supports expressions (not demonstrated here).

However, most CSS-related problems are the result of browser differences (i.e. Opera vs. Mozilla). Because you are learning and will not be aware of common discrepencies, the chances of encountering unforseen risks to your project are very high.

Also note that older browsers don't support CSS, or have partial support, which can result in unexpected displays.

For these reasons, I would strongly recommend the use of legacy HTML to create your template. It is supported by all browsers and is extremely robust. You can still use all the latest CSS features to style it, and nobody will know the difference.

--Glen :)

Memoria mihi benigna erit qui eam perscribam
 
I realise you didn't ask me, but as I'm here:

IFRAME use scrollbars by default, but using an IFRAME for the main content causes other problems: some robots may have difficulty indexing your content, and users of older browsers will see nothing. IFRAME is generally used for optional content.

DIV can have scrollbars and doesn't share these concerns. This example demonstates the use of scrollbars in current browsers.

Code:
<div style="width:50px;height:50px;overflow:scroll;background-color:gold;">
<script>
for (i=0;i!=100;i++) document.write(i+'<br />');
</script>
</div>

P.S. You can use JS to automatically cut & paste content from a DIV to IFRAME or vice-versa.

--Glen :)

Memoria mihi benigna erit qui eam perscribam
 
OK, so my current thinking is to make one html page, with my banner at the top, use IFrames for the lhs and top navigation bars, and then normal html for the content part. That way the Iframes should scroll as they will have a standard formatted page in them. (right?) And I can get my iFrames where ever I want by playing around with the (position;absolute;whereiwantit) function.

Am I getting close to understanding this?
 
Maybe. It is your site and only you can visualise the objectives ;)

If placed inside a TABLE layout, you may find that the DIV and IFRAME don't need position.

If it were my site, an IFRAME would be used for banner adverts only (or occationally to power dynamic client-side includes).

If it were my site, I would consider putting the navigation menu (and anything else what appears on every page) into a seperate file and include it with <!--# include file="menu.inc" --> which is supported by *.asp (IIS) and *.shtml (Apache)

--Glen :)

Memoria mihi benigna erit qui eam perscribam
 
Code:
<html>
<frameset rows="75,*">
<frame src="banner.htm" name="banner" frameborder="0" scrolling="no" />
<frameset cols="75,*">
<frame src=left.htm"    name="left"   frameborder="0" scrolling="no" />
<frameset rows="50,*">
<frame src="header.htm" name="header" frameborder="0" scrolling="no" />
<frame src="main.htm"   name="main"   frameborder="0" scrolling="yes" />
</frameset></frameset></frameset>
</html>

Clive
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top