need website building advice

mitchstokes225 · Sep 16, 2009

I am redesigning my university's IT support site. The format they use now is html and a dynamic web template to build all the pages. I want to simplify this process. I want a main page with a top of page, left column, and bottom page (frames for lack of a better word), that will stay the same all the time. The rest of the page or center content, I want to be able to pull just basic pages with the information into it, and format it to fit the page.

The way it's done now with the master.dwt being applied to each page, it's cumbersome to modify or change the editable content, aka it blows the page to hell and takes forever to correct the content.

So any tips, tools, language ideas you have would be appreciated.

PC-XT · Sep 19, 2009

Frames have several disadvantages, including that search engines will sometimes give users pages meant to work only in your frames, which only confuses them. You can set up servers with header and footer information to include with every page. I use PHP to put several pieces together as if I am using frames, but the result sent to the user is a single page.

dvae · Sep 19, 2009

Hi mitchstokes225

Just some ideas:

iframes could maybe work for you. They are like windows to separate web-pages. So you could set up the design as a template, with an iframe that displays the content. See for example: http://www.w3schools.com/TAGS/tag_iframe.asp or http://en.wikipedia.org/wiki/HTML_element or http://www.samisite.com/test-csb2nf/id43.htm or type into google: iframe example

Or maybe use a content management system like MODx or Wordpress?

I hope this is useful...

Good luck

dvae

jratcliffe · Oct 16, 2009

PC-XT said: ↑

Frames have several disadvantages, including that search engines will sometimes give users pages meant to work only in your frames, which only confuses them. You can set up servers with header and footer information to include with every page. I use PHP to put several pieces together as if I am using frames, but the result sent to the user is a single page.
Click to expand...

agree frames are cumbersome and seacrh engines hate them (not rly big deal as this a support page) but i also use php to "inculde" certain its also means i can move things around easily. main example of this is www.carnivalproperties.co.uk

rayzur · Oct 17, 2009

Hi,
I think everyone has voiced their opinion of frames and I must say that I agree with them. However you did say (frames for lack of a better word) and that leads me to believe that is what you are wanting to simulate. You would want to use fixed positioning on the header, sidebar and footer. By doing that those three elements will stay fixed to the browser viewport at all times while dynamic content will be able to scroll.

Here is an example of what I am understanding that you are wanting to accomplish except the column is on the right. I'll swap it to the left in the code below.

I have several fixed position demos in my CSS Demos Page, just scroll down to "Fixed Position Layouts". Your welcome to have a look through there and grab the source code if you find one you like.

Here is one that I moved the sidebar to the left for you. Just save the code below as test.html in your text editor and open it in your browser.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fixed Header-Sidebar-Footer</title>
<style type="text/css">

* {margin:0; padding:0;}

body {   
    background:#CCF;
    font:100% arial,"trebuchet ms",tahoma;
    color: #000;
    height: 100%;
    position:absolute; width:100%; /*Opera height trigger*/
}  
html {
    height: 100%;
    overflow-y:scroll; /*keep scrollbar position present if FF at all times*/
}
#wrapper {
    min-height: 100%;
    background:#E8E8F4;
}
* html #wrapper {height:100%}

#header {
    position:fixed;
    z-index:2;
    width:100%;
    top:0;
    left: 0;
    height:100px; 
    border-bottom: 1px solid #000;
    background:#8293C3;
    text-align:center;
}
#content {
    padding:105px 0 65px 210px;/* set a top,bottom & right padding to protect content from sliding under fixed elements. */
    background:inherit; /*inherhit wrapper BG color for 100% height appearance with minimal content*/
}
#sidebar {
    position:fixed;
    width:200px;
    left:0;
    top:101px;
    bottom:61px; /*footer height*/
    border-right: 1px solid #000;
    background:#BCC5E1; 
    overflow:auto; /*give insurance for text acessability at smaller viewport heights*/
}
#footer {
    position:fixed;
    z-index:2;
    width:100%;
    bottom:0;
    left: 0;
    height:60px;
    border-top: 1px solid #000;
    background:#8293C3;
    text-align:center;
}

h2,h3,h4 {padding:10px 0; margin:0 1em;}
#header h3{padding:0 0 10px}
p {margin:0 1em 1em}
span {font-weight:bold; color:blue;}

</style>
</head>
<body>

<div id="header"><!--Header sits outside of wrapper div-->
    <h2>Min-Height 100% with Fixed Header, Sidebar &amp; Footer</h2>
    <h3>Fixed In Relation To The Browser Viewport</h3>
</div>

<div id="wrapper">
    <div id="content">
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>scrolling content</p>
        <p>Last scrolling content with 65px padding below</p>
    </div>

</div><!-- end wrapper -->

    <div id="sidebar">
        <h3>Fixed Sidebar</h3>
        <p>fixed content</p>
        <p>fixed content</p>
        <p>fixed content</p>
        <p>fixed content</p>
        <p>fixed content</p>
        <p>fixed content</p>
    </div>    
    
    <div id="footer"><!--Footer sits outside of wrapper div-->
        <h4>Footer</h4>
    </div>
</body>
</html>

Log in or Sign up

need website building advice

mitchstokes225 Private E-2

PC-XT Master Sergeant

dvae Private E-2

jratcliffe Private E-2

rayzur Private First Class

Log in or Sign up

need website building advice

mitchstokes225 Private E-2

PC-XT Master Sergeant

dvae Private E-2

jratcliffe Private E-2

rayzur Private First Class

Useful Searches