Displaying linked pages in an area of the screen, using CSS?

Imagine that I have a column on the left of the page that has a list of links to other pages.  When you click on any of those links, then to the right the linked page is shown.
I know how to do this with frames, but I'm trying to figure this one out using CSS.
Can anyone point me in the right direction?
Below is a code sample that if your save and then view in a browser will show you (hopefully) what I am trying to achieve.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--
This html code creates a document with a:
    header that resizes to fit the width of the browser;
        sidebar on the left (of fixed width);
        'text' area, to the right of the sidebar, which resizes to fit the browser window width
        foot, which resizes to fit the browser window width.
-->
<title>Test site</title>
<style type="text/css">
<!--
body {
text-align: justify;
min-width:700px;
color:#000; <!-- text color for the whole document -->
div.header {
height:4em;
width:auto;
border:0;
padding:0;
text-align:center;
background-color:#6CF;
div.sidebar {
width: 15em;
float:left;
text-align: left;
border-bottom:0px;
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 0em;
    background-color:#390
div.footer {
width:auto;
border:0;
padding:0;
text-align:center;
background-color:#6CF
-->
</style>
</head>
<body>
<div class="header">
   header goes here
</div>
<div class="sidebar">
<!--   Siderbar goes here, and will have links to other pages.
   change width (in div.sidebar, to change width). -->
   Link to page 1<br />
   Link to page 2<br />
   Link to page 3<br />
   etc...<br />
</div>
<!-- <br clear="left" /> stops the footer overlapping the sidebar. -->
This is the area  where the pages linked to should be displayed.<br />
So, if you click on the "Link to page 1" link, to the left, the contents of page 1 will be shown here.<br />
If you click on the link to the left that says "Link to page 2" then the contents of page 2 will be shown here, etc.<br clear="left" />
<div class="footer">
footer goes here
</div>
</body>
</html>

Thank you Nancy!  Your solution is (I believe) 99% of the way to being exactly what I want.
The code fragment below:
<div class="sidebar">
<!--   Siderbar goes here, and will have links to other pages.
   change width (in div.sidebar, to change width). -->
   <a href="../Test/About.html" target="Frame1"> About</a><p>
   <a href="../Test/FAQ.html" target="Frame1"> FAQ</a><p>
   <a href="../Test/Contact.html" target="Frame1"> Contact us</a><p>
</div>
<iframe name="Frame1" id="Frame1" src="../Test/About.html" height="auto" width="auto" allowtransparency="true"  border="0" margin="0" scrolling="auto"  > </iframe>
but I want the window that contains the 'imported' code to expand to be the same height as the sidebar and wide enough to stretch to the rightmost side of the visible screen.
I was guessing that
height="auto" width="auto"
would have done the trick, but it would seem not. Any ideas?

Similar Messages

  • I am having major issues with links in keynote! Even though the links (a navigation system) are on the master page, they are only working on some of my slides. Anyone have ideas on how to fix this or similar issues? Help!

    I am having major issues with links in keynote! Even though the links (a navigation system) are on the master page, they are only working on some of my slides. Anyone have ideas on how to fix this or similar issues? Help!
    I have created a navigation system on the master pages and set the presentation to links only mode. I also have other links scattered throughout the program, like a linkable table of contents, etc. Some of them work, some of them don't. Not sure why. Anyone out there having similar issues? Or have any idea on how I can solve this issue? Any help would be appreciated!
    Thanks!

    Links should not create any problems in Keynote.  If they are set up correctly on text, the text will be underlined. Objects that have links will have a curved arrow bottom right, if you click the arrow a popup will display the link information.
    Try this repair for Keynote,  ensure you complete all the tasks and in the order shown:

    delete all the iWork applications if you have them, not just Keynote, using Appcleaner from Mac Update, its a freeware application

    empty the trash:  Finder > Empty Trash

    Shut down your Mac, wait 30 seconds, then power on the Mac, immediately after the start chime, hold down the Shift key
    When you see the grey Apple symbol and progress indicator (a spinning gear), release the Shift key.
    If you are prompted to log in, type your password, then hold down the Shift key again as you click Log in.
    4  
    Let the Mac fully boot up, it will take longer as the OS is repairing the drive

    when fully booted, go to Applications > Utilities > Disc Utility; click on the boot drive then First Aid tab and click  repair disc permissions

    when complete, restart the Mac normally, Apple menu > Restart

    install Keynote from the Mac App Store
    let us know if this helped

  • All of a sudded, my firefox browser isnt allowing my to click links and open pages, or open anything on the top area of the screen.

    All of a sudded, my firefox browser isnt allowing my to click links and open pages, or open anything on the top area of the screen. For example i go to my email and i cant click on inbox, send, create, folders, mark as unread. It is like this on every website?? Its really annoying i cant do anything becasue most sites have login at the top of the screen and i cant login to anything.

    That problem can be caused by the Yahoo! Toolbar that extents too much downwards and covers the top part of the browser window and thus makes links in that part of the screen not clickable.
    *https://support.mozilla.com/kb/Troubleshooting+extensions+and+themes
    You can keep an eye on this thread:
    *[[/forums/contributors/707748]]

  • We encountered a problem with some client machines that use Firefox version 24ESR and IE8. Ajax requests of aspx pages from Firefox are getting the following er

    I encountered a problem with some client machines that use Firefox version 24ESR and IE8.
    Ajax requests of aspx pages from Firefox are getting the following error from the iis server (iis version 7.5):
    Bad Request - Request Too Long
    HTTP Error 400. The size of the request headers is too long.
    From analyzing the request that was sent to the server, I saw that the request consist of only the viewstate of the aspx page.
    I tried to disable the viewstate for one page and the server got the request correctly.
    I do not encounter any issues on these laptops with postback requests from Firefox or when running the same application with IE8.

    Sometimes that means that the page address sent is loo long.
    Check the link address you are using.
    I can't help you further and will send for more help.

  • Cannot click on certain area of the screen

    I'm not sure if this is a display or a mouse issue. I have had my 24" iMac since June and have just started having this issue. I cannot click (left or right mouse button) on one specific part of the screen. I can click on links and buttons, form boxes, bring up the contextual menu (right click) or do pretty much anything you do with the mouse on most of the screen. However in this approximately half inch high and a few inches long area just above the middle of the screen on the left hand side there is no response from computer when clicking with the mouse. I can click on a link in the browser above this space and below it but not on the link in it. If I move the browser window so that same link appears in a different part of the screen I can click on it fine and cannot click on the link now in the affected area.
    This is the same for any clickable item placed in this area of the screen. Is this a display or a mouse issue?

    If you have an external drive that can be erased, you could try installing a new system there and setting the Mac to boot from it. That will determine if it is related to the current system installation, or if it is more likely to be a hardware problem. You can obviously also back up your data, erase your internal drive, and reinstall a new system there.
    Alternately, as a test, you can just startup from your Mac OS X installation disc. At the first installer screen, go up to the menu bar. Under Utilities, run Disk Utility. Move the Disk Utility window around the screen as needed to see of the same problem exists while booted from a different system. If it happens there, then it is more likely to be some odd hardware-related issue. If it does not, it is possible a fresh system installation will resolve the problem.

  • Overlaying area in the screen

    Hi,
    I'd like to do following:
    In a rectangular area in the screen, I'd have two displays, one is a NSCustomView, another is NSTableView, the two will be on top of the other, only one is seen at given time, any hints on how to do this? Thanks.

    using tabless NSTabView seems working

  • Wired Mighty Mouse isn't clicking some areas of the screen

    I'm having some trouble with my Mighty Mouse since yesterday. The system started not responding to some clicks in most areas of the screen, such as the top menu, window titles, finder windows, desktop. The weird thing is that clicking in Dock icons works fine, as well as clicking inside a web page in Safari.
    I've rebooted several times, ran the Snow Leopard 10.6.2 update, but none of these helped. :/
    Do you guys know how to get around this? Next Monday I'll test this Mighty Mouse with my Mac Pro at work, I hope it's not a problem of the mouse itself, but a system problem.

    I had exactly the same problem after giving my ball a super long scrub to clean it. Only the secondary click sometimes worked. Checked to cable iside, but no luck.
    Then went to System Preferences as I figured the middle button was working a bit and set all buttons to Primary by selecting them with the Tab key, scrolling to my option with the up and down arrows, and confirming by pressing the Space key.
    Now my mouse works as a simple one-button device, but that it OK for me. Must have damaged its brain with my ball cleaning. See how you go.

  • Non clickable area on the screen.

    I have a mid 2007 20" iMac that untill now didn't give me any problems. But yesterday I I notice a wierd bug. It's basically a small area of the screen where if I click nothing happens. Here is a video with the bug. http://droplr.com/xK8v Any suggestions?

    Hi
    Well, your problem description sounds strange but of course, it could be a screen problem.
    How about warranty?? Is it valid?
    The warranty covers only the hardware problems and malfunctions.
    For me it does not sound like a software issue and therefore the warranty should cover the notebook check, reparation or display replacement.
    I read about a strange color problems on a Satellite A100 series. Some pixels were light and some pixels were dark.
    The BIOS update has solved this issue.
    But you know, it does not mean that the Bios update will help you.

  • What are all the tables used for this report:

    hi
    what are all the tables used for this report:
    report:
    •     <b>Stock Report, which will give opening balance, receipt, issue, and closing balance for any given Duration for any material.</b>
    thanks in advance

    Tables: MSEG, MKPF, MARD.
    FOR REFERENCE SEE TRANSACTION : MB5B.
    Message was edited by: Sharath kumar R

  • How to fetch what are all the tables used in this TR no and Package name of

    Hi Friends,
    I have input of Transport Request no (E070-TRKORR).
    How to fetch what are all the tables used in this TR no and Package name of this Table.

    HI,
    FYI
    SELECT E071OBJECT_NAME, E070MDEVCLASS
    FROM E071, E070M
    WHERE TRKORR = YOU REQUEST NO.

  • How can I show viewers of my projected iPad screen where my fingers are touching the screen?

    So Keynote shows a cool "laser pointer" when you hold your finger against the screen in presentaiton mode....
    I'd like to use a similar "laser pointer" effect to show where my fingers are touching the screen in any application -- and, yes, where there are simultaneous multiple finger contacts.
    This would be so helpful in demo-ing the "new" iPad to a group of 30+ professors this coming August. Hold an iPhone over the screen as a camera just doesn't "cut it."
    - Brian

    You can add extra empty toolbars if you want to see more of the persona.
    You can create extra toolbars to get extra space via "View > Toolbars > Customize" or "Firefox > Options > Toolbar Layout"
    You have to put something on a toolbar (drag a Space item onto it) before closing the Customize window because empty toolbars are automatically removed.

  • In IMovie 11 the viewable area of the screen shrinks when placed in project editing. How do I keep this from happening?

    In IMovie 11the viewable area of the screen shrinks when placed in the project editing area.  How do I keep this from happening?  Thanks

    Mine doesn't show anything in the CSS Designer panel when I make a selection in Code Vew. It will only pop up the css set for a given element if I select that element in Design View first. If I drill down using the Sources and Selectors sub windows in the CSS Designer panel itself, it works the same in both. I pretty much never use it, but it doesn't do what you're explaining in my version of DWCC, so I'd guess you may have some slight corruption in the program.
    Unless, does it make a difference if you have Live View turned on or not?
    You could try clearing the program cache/personal config folder: Deleting a corrupted cache file
    Or restoring preferences if the cache doesn't do the trick: Restore preferences | Dreamweaver CS4, CS5, CS5.5, CS6http://helpx.adobe.com/dreamweaver/kb/restore-preferences-dreamweaver-cs4-cs5.html

  • Selecting objects or ares of the screen, copy, and paste are missing

    Hi,
    Why such a standard and important functionality like selecting objects or areas of the screen, then copy and paste them are missing in the product?
    A

    Hi,
    You can't select objects in Ideas, you can copy/paste the whole layer's contents by duplicating it, there is an icon in the layers panel, next to flip and merge down icons.
    Emi

  • How can we get the source of the page which is loaded on the browser using

    Dear Sir,
    How can we get the source of the page which is loaded on the browser using javascript
    What is the exact path to get the source object in JS?
    thanks & regards,
    Sudheesh - INDIA

    um... the document object?

  • This morning, my iPad screen didn't respond to my touch commands. It displays mail, but I can't move the screen, can't delete an incoming item. Nothing. All the other screens work normally -- just no response to mail.

    This morning, my iPad screen didn't respond to my touch commands. It displays mail, but I can't move the screen, can't delete an incoming item. Nothing. All the other screens work normally -- just no response to mail.

    Have you tried closing the Mail app completely ? From the home screen (i.e. not with the Mail app 'open' on-screen) double-click the home button to bring up the taskbar, then press and hold any of the apps on the taskbar for a couple of seconds or so until they start shaking, then press the '-' in the top left of the Mail app to close it, and touch any part of the screen above the taskbar so as to stop the shaking and close the taskbar.
    If that doesn't work then you could try a reset : press and hold both the sleep and home buttons for about 10 to 15 seconds (ignore the red slider), after which the Apple logo should appear - you won't lose any content, it's the iPad equivalent of a reboot.

Maybe you are looking for