Website like frames but without is it doable?

Discussion in 'Programming & Software Development' started by Revenger, Nov 1, 2008.

  1. Revenger

    Revenger Member

    Joined:
    Aug 7, 2002
    Messages:
    4,244
    Location:
    Armadale / Perth
    I'm starting to think about a home website where I can access all my apps and stuff like the TS2 server the BT server and other programs that all have webpage management.

    I was thinking about this and did a bit of playing around.

    I'm very basic though just knowing the basics of html etc and how to modify already done css and use premade scripts from tutorial sites etc.

    What I want is a logo at the top a menu at the left side and change the middle section to any page (external etc) that is needed without affecting the menu or logo.

    I know frames its extremely easy to do this as all you do is call the middle frame to a external page and your set.

    But can it be done in a frame less way using divs and css or tables and css?

    And how would I go about this?

    Thanks

    Update: I have come along way over the last year and half and you can see the progress here.

    More info in post 55.
     
    Last edited: Apr 22, 2010
  2. Soarer GT

    Soarer GT Member

    Joined:
    Sep 26, 2007
    Messages:
    2,837
    Location:
    Melbourne
    You could just use a CMS (Joomla) and put the pages in a wrapper. That way your main page always looks the same.
     
  3. OP
    OP
    Revenger

    Revenger Member

    Joined:
    Aug 7, 2002
    Messages:
    4,244
    Location:
    Armadale / Perth
    Ive been working tonight with a bag of chips/food next to me which i normally do when i do these things.

    And I managed to figure out i think is a good way to do it which is working feel free totell me if im wrong.

    PHP using includes for the menu etc

    Then Iframe into BT Webui

    As for TS mby same thing iframe again and just use iframes?

    Or is there another solution.

    Tried using a include but got errors due to the wrapper as its a port I'm accessing here from a programs software.
     
  4. Rezin

    Rezin Member

    Joined:
    Oct 27, 2002
    Messages:
    9,490
    What about using Ext JS's tabs? Combine that with Ajax loading and it would work nicely.
     
  5. OP
    OP
    Revenger

    Revenger Member

    Joined:
    Aug 7, 2002
    Messages:
    4,244
    Location:
    Armadale / Perth
    Interesting the tabs and other things they have on that site.

    The tabs would allow me to take advantage of the full window with a little tab at the top to manage the apps.

    I have a question on frame sizing.

    Say i want to use 100% of the window for the app minus the sizing for the tabs.

    how would i have a static top and 100% down i tried this with the php thing and the box didn't go 100% down of the body for some reason yet it went wide as it should have.
     
  6. kogi

    kogi Member

    Joined:
    Jan 23, 2003
    Messages:
    4,890
    Location:
    2031
  7. OP
    OP
    Revenger

    Revenger Member

    Joined:
    Aug 7, 2002
    Messages:
    4,244
    Location:
    Armadale / Perth
    Ok there was a couple posts by me which I've deleted as there not relevant now and I didn't want to create multiple posts in a row about things.

    To summarize I have worked out i need to div in order to get the layout i want.

    Ive been using premade online help things without success and got confused.

    So now Ive gone back to basics and used am using the knowledge I have learn't throughout the night to write my own layout from scratch other than modify someone elses.

    But I'm stuck right near getting it together.

    I have created a main container div to hold everything a header and menu and when I go to add the content div in it does below the menu doing research no site I have found have mentioned this properly.

    One site suggested a hack to get it to work where above the menu div you add a empty div and the content box on the right side of it.

    I don't really like cheap workarounds and want to do this properly.

    Well here my code is anyone can see the error in it.

    Index body
    PHP:
    <body>
    <div id="page">
    <div id="header">
    <?php include ("header.html"?>
    </div>
    <div id="menu">
    <?php include ("menu1.html"?>
    </div>
    <div id="content">
    <?php include ("bt.html"?>
    </div>
    </div>
    </body>
    </html>
    CSS
    Code:
    body { background-color:black;
    font-family: Verdana;
    font-size: 12px;
    color:brown;
    margin: 0;
    padding: 0;
    
    
    scrollbar-face-color:antiquewhite;
    scrollbar-highlight-color:red;
    scrollbar-3dlight-color:orange;
    scrollbar-darkshadow-color:brown;
    scrollbar-shadow-color:pink;
    scrollbar-arrow-color:red;
    scrollbar-track-color:ivory;
    }
    
    #page {
    width:90%;
    margin:auto;
    }
    
    #header {
    width:100%;
    height:50px;
    background:antiquewhite;
    border:1px solid brown;
    }
    
    #menu {
    display:inline;
    float:left;
    background:antiquewhite;
    color:brown;
    border:1px solid brown;
    text-align: center;
    }
    
    #content {
    width: 500px;
    border: none;
    margin: 0;
    padding: 5px;
    }
    Update
    It seems adding margin code works but the content box is a bit out on the right now which is annoying.

    Is there a even better way than using margin code to position this content div?

    Update 2
    Added some padding to the heading and its all good wonder why the heading needed padding to it?

    Update 3
    After playing around I found that I had padding in my menu css script (which is separate atm) I was going to be using as well so I turned every padding etc off not to confuse myself more.

    And now its working how it should do.

    I'll add padding etc in later one at a time when needed.
     
    Last edited: Nov 1, 2008
  8. OP
    OP
    Revenger

    Revenger Member

    Joined:
    Aug 7, 2002
    Messages:
    4,244
    Location:
    Armadale / Perth
    Anyone know the difference in CSS between the body tag and the html,body tag?

    Cant seem to find any info it online.

    As I noticed I need the specific html,body tag for something.
     
    Last edited: Nov 1, 2008
  9. Rezin

    Rezin Member

    Joined:
    Oct 27, 2002
    Messages:
    9,490
    The what? :)
     
  10. OP
    OP
    Revenger

    Revenger Member

    Joined:
    Aug 7, 2002
    Messages:
    4,244
    Location:
    Armadale / Perth
    Updated the post above meant to be body and html,body tags.

    I think Ive been typing code too much ever that or the lack of sleep.
     
  11. Rezin

    Rezin Member

    Joined:
    Oct 27, 2002
    Messages:
    9,490
    They're just different container levels. Some properties can be applied to them, some can't. What are you trying to do with "html,body".. apply a margin / background?

    Edit: Oh, I see. The 'html,body' will refer to both the HTML and the Body tags.
     
  12. OP
    OP
    Revenger

    Revenger Member

    Joined:
    Aug 7, 2002
    Messages:
    4,244
    Location:
    Armadale / Perth
    Apply a 100% vertical background.

    I got it working I was just wondering what the diff is.

    hmmm now its got me thinking of more complex ways to do this meaning ill have to redo the code again.

    I guess I'm slowly progressing to my end result.

    Now I'm thinking of only having the content area with a filed background but I dunno if I can apply this method to that I doubt it.
     
    Last edited: Nov 1, 2008
  13. OP
    OP
    Revenger

    Revenger Member

    Joined:
    Aug 7, 2002
    Messages:
    4,244
    Location:
    Armadale / Perth
    Now I have the base template for layout done I'm looking at ways to change the content area include with not much success.

    What I want to do is this.

    In my index.php I have a include for the content area.

    Now is it possible to use a if else or something in that index.php file that saids if I click this link on the menu it will change the content area include to what I want and refresh the page?

    So I load up the index.php and has my default welcome page in the content area.

    I click a link to go to say TS web management it then checks the index.php file for the statement and changes the content area to the TS web management include file.

    Because everything basic I'm seeing requires you to have a index.php file replicated as many times you have menu items as page1.php etc with only 1 include (the content area include) changed out of that index.php.
     
  14. scythe

    scythe Member

    Joined:
    Aug 15, 2002
    Messages:
    179
    Location:
    Brisbane
    You'll be looking for something like:
    PHP:
    <?php
        
    switch ($_GET['page']) {
            case 
    "page1":
                include(
    "page1.php");
                break;
            case 
    "contact":
                include(
    "contact.php");
                break;
            case 
    "something":
                include(
    "anything.php");
                break;
            default:
                include(
    "myDefaultContent.php");
        }
    ?>
    And have your menu links as index.php?page=page1 or index.php?page=contact etc. Anything that doesn't fit the switch will show the default page so index.php?page=iamsomerandomstuff will just show myDefaultContent.php (in the above example).

    Also, your question earlier about the difference between body and html,body is that body applies to the body tag, html,body applies to both the html AND body tags. You can separate tags with commas to apply the same CSS rules to multiple tags eg:
    Code:
    h1,h2,h3 {
      color:red;
    }
    Would make h1 h2 and h3 tags red.
     
  15. phreeky82

    phreeky82 Member

    Joined:
    Dec 10, 2002
    Messages:
    9,615
    Location:
    Qld
    Simpler solution, similar to including a header file and footer file in PHP, is using server-side includes.

    Also, re scythes post, I think it's important to point out that you really should use a switch or something like he has. Don't just go including a file by the name of anything that is passed to you, not good for security.
     
  16. OP
    OP
    Revenger

    Revenger Member

    Joined:
    Aug 7, 2002
    Messages:
    4,244
    Location:
    Armadale / Perth
    So if I get it right the index.php file I have the switch in replace of the main content include?

    So for my code how would I include that switch here is the code so far for the main page.

    PHP:
    </head>
    <body>
    <div id="page">
    <div id="head">
    <?php include ("template/header.html"?>
    </div>
    <div id="menu">
    <?php include ("template/menu.html"?>
    </div>
    <div id="content">
    <?php include ("template/content.html"?>
    </div>
    </div>
    </body>
    </html>[PHP]
    [/PHP]
     
  17. phreeky82

    phreeky82 Member

    Joined:
    Dec 10, 2002
    Messages:
    9,615
    Location:
    Qld
    Code:
    <html>
    	<head>
    		<title>My Page</title>
    	</head>
    
    	<body>
    		<?php
    			switch ($_GET["page"]) {
    				case "page1":
    					include("page1.php");
    					break;
    				case "page2":
    					include("page2.php");
    					break;
    				default:
    					include("main.php");
    			}
    		?>
    	</body>
    </html>
    
    Or possibly (i.e. pages 1 through 10 available):

    Code:
    <html>
    	<head>
    		<title>My Page</title>
    	</head>
    
    	<body>
    		<?php
    			if (isset($_GET["page"])) {
    				$page=intval($_GET["page"]);
    				if ($page>=1 && $page<=10) {
    					include("page".$page.".php");
    				} else {
    					include("main.php");
    				}
    			}
    		?>
    	</body>
    </html>
    
    Or, with page content as their own files, including the header and footer as required:

    Code:
    <?php include("header.php"); ?>
    
    <div>
    	<h1>Content here</h1>
    </div>
    
    <div>
    	<p>
    		more content...
    	</p>
    </div>
    
    <?php include("footer.php"); ?>
    
    This bottom method could easily be done using SSI instead.
     
  18. OP
    OP
    Revenger

    Revenger Member

    Joined:
    Aug 7, 2002
    Messages:
    4,244
    Location:
    Armadale / Perth
    SSI? I'm a newbee on this stuff.

    Just really wanting to have the header, menu and changeable content without having to create a template page for each.
     
  19. phreeky82

    phreeky82 Member

    Joined:
    Dec 10, 2002
    Messages:
    9,615
    Location:
    Qld
    What web server you running on? Apache?

    SSI (Server Side Includes) are just a simple mechanism to include the content of another page.

    Typically, you'd just name a file .shtml, and put things in like:

    Code:
    <!--#include virtual="header.html" -->
    
    to include other files.

    http://httpd.apache.org/docs/1.3/howto/ssi.html

    If you're not running Apache (most unix/linux web servers would be), or SSIs are not enabled, the PHP methods like in the other posts, or others like ASP, are your alternative.
     
  20. OP
    OP
    Revenger

    Revenger Member

    Joined:
    Aug 7, 2002
    Messages:
    4,244
    Location:
    Armadale / Perth
    Yea running Apache on wamp.
     

Share This Page

Advertisement: