SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2001
    Location
    Boston
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Include pages are not appearing

    In the spirit of trying to modularize as many things as possible to make it simpler for the client to update selections, I am putting some sections of the main page (misson_stmt and news - below in red) in separate include files. The problem: They disappear when viewed in the brower. All the fixed background images and text appear.

    Here is the code:
    <!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=iso-8859-1" />
    <title>Welcome to Quincy Public Schools</title>
    <link rel="stylesheet" href=style="global.css">
    <style type="text/css">

    body {
    background-color: #7c9ab8;
    background-image:url(images/blue_2pxh-255W.gif);
    position:absolute;
    width:150px;
    height:2px;
    margin:0px;
    background-position:top 20px left 0px;
    background-repeat:repeat-y;
    padding:0px;
    }

    #image1 {
    position:absolute;
    top: 25px;
    left: 255px;
    border:none;
    padding:0px;
    margin:0px;
    height: 200px;
    }

    #quincytitle {
    position:absolute;
    top:25px;
    left:13px;
    padding:0px;
    margin:0px;
    font-family:"Felix Titling", "Book Antiqua", "Century Schoolbook", "MS Serif", serif;
    font-size:3em;
    }
    #Layer1 {
    position:absolute;
    left:180px;
    top:290px;
    width:346px;
    height:228px;
    z-index:1;
    }
    #mission_stmt {
    position:absolute;
    z-index:3;
    left:300px;
    top:225px;
    width:200px;
    }

    #news {
    position:absolute;
    left:500px;
    top:225px;
    width:200px;
    }

    </style>

    <script src="../includes/cssmenus2/js/cssmenus.js" type="text/javascript"></script>
    <link href="../includes/cssmenus2/skins/modern_blue/horizontal.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="image1"><img src="images/schoolbus.jpg" height="200" width="505"></div>
    <div id="quincytitle"><center><p> Quincy Public Schools</p></center></div>
    <div id="mission_stmt"><!--#include file="misson_stmt.html" --></div>
    <div id="news"><<!--#include file="news.html" --></div>


    I have tried all the things I can think of including upping the z-index to force it to the front. I was also trying to do an include of the main menu navigation but the same thing kept happening so I gave up (temporarily) and threw that into the page, too. Since I am new to CSS, there is probably something really stupid like a missing punctuation mark that is throwing this whole thing off. Fresh (talented, experienced, expert - have I flattered you enough?) eyes will probably see the error of my ways right away.
    Thanks in advance for your help!

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you start your layout again replacing all the position: absolute with margins and, where needed, floats.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2001
    Location
    Boston
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so...should I simply remove all the postion:absolute or replace it with position:relative? when I do that, my careful layout shifts to all sorts of strange places....I have even tried selectively leaving some at absolute and others at relative to no avail. Any help would be appreciated!

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2001
    Location
    Boston
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm...I just went ahead and set everything to position:relative and the include text is still disappearing. Any thoughts?

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you can provide a link so we can see what it should look like we can give you a better idea of how to proceed. Replacing absolute with relative is not the solution, however.

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2001
    Location
    Boston
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://66.241.240.82/qps/index_experiment.html is what happens when I use the include and change position:absolute to position:relative. I know I can push the text and menu back into place using -px numbers and I would do that if my include files were showing up but they're not.

    http://66.241.240.82/qps/index.html is what happens when I shove everything into the page (instead of parceling it out to the include files) and use postion:absolute. Nice and clean on the outside but lots and lots of bits on the inside.

    Any help would be appreciated! Thanks.

  7. #7
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I reckon you'd be better off creating a two-column layout with another two columns inside your right column.
    For the main columns, you could use Faux Columns for the background colours, float the left column left and give it a width and then give the right column a margin-left wider than the width of the left column (no float or width on the right column).
    Then you'd do the same for the content inside the right column.
    Look out for IE's 3-pixel gap.

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2001
    Location
    Boston
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    um...so where would the top menu and bus photo go? the menu spans across the top of the page across both main columns and the photo spans (I guess) the two columns that would be created in the right column. would it work something like:

    --include file for menu
    --div for 2 columns
    --define and populate left column with properties and text for
    quincy public schools
    define right column
    insert bus photo
    divide right column into two addtional columns
    define and populate right column left side with properties and include file for content
    define and populate right column right side with properties and include file for content
    add footer

    thanks

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2001
    Location
    Boston
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so would it be something like this?

    1 - div to define entire page size and assign properties such as background color
    2 - insert include page with menu (assign it position:relative to define exact location - or should I somehow include that in the include page??)
    3 - div to define 2 columns and assign space (again, use the position:relative to assign top/l/r coordinates?) properties and background colors and images
    4 - insert text quincy public schools in left column, positioning using just margins??
    5 - insert school bus photo into right column and position using just margins?
    5 - div to divide right column into two columns including background colors and gifs
    6 - insert mission include-file text into right column-left and position using margins and width
    7 - insert news include-file text into right-column right and position using margins and width

    does this about sum it up?

    thanks

  10. #10
    SitePoint Enthusiast
    Join Date
    Feb 2001
    Location
    Boston
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay...now things get really strange. I have pages with just text - no formatting outside of css text commands. I put an include page at the bottom to contain the footers and it won't appear either. I can see it in DW8 design view. I uploaded it to my server (several times) along with the supporting CSS file. It does not appear in either IE or FF.

    What am I doing wrong here? Is there some type of display parameter that I should change?

    Thanks

    link: http://66.241.240.82/qps/community/c..._mainpage.html

    page text:

    <!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=iso-8859-1" />
    <meta name="description" content="The official website for Quincy Public Schools in Quincy Massachusetts. Information for students, parents, educators and the community."
    <meta name="keywords" content="Quincy Public Schools, Quincy MA, City of Quincy, Quincy Massachusetts, Atherton Hough Elementary, Beechwood Elementary, Bernazzani Elementary, Lincoln-Hancock Elementary, Clifford Marshall Elementary, Merrymount Elementary, Montclair Elementary, Parker Elementary, Snug Harbor Elementary, Squantum Elementary, Wollaston Elementary, Atlantic Middle, Broad Meadows Middle, Central Middle, Point Webster Middle, Sterling Middle, Quincy High, North Quincy High, Amelio Della Chiesa Early Childhood, ADC" />
    <title>Quincy Public Schools Community Partners</title>
    <link rel="stylesheet" href="http://www.quincypublicschools.com/global.css"/>
    </head>

    <body>

    <h1>Community Partners</h1>
    <p>It takes a village to educate a child. Quincy Public Schools are fortunate to have a large group of Community Partners who donate countless hours of time mentoring students, valuable services and goods which provide extended learning experiences for our students. They bring the strength of their real-world experiences and knowledge to our students, giving them invaluable insight into the greater community. </p>
    <h2>CITYLAB</h2>

    <p><a href="http://www.bumc.bu.edu/citylab">Please visit our partner at www.bumc.bu.edu/citylab</a></p>

    <p>City Lab is a field experience provided to our school district by the Boston
    University Medical Lab which usually happens two times (fall &amp; spring) during the
    school. Boston University Mobile City Lab for 8th graders at all 5 middle schools.&nbsp;
    The Mobile Lab is at a school from 1 -3 days a week with a lab director who works
    with the 8th grade science teacher and students.&nbsp; The Lab provides our students
    with an opportunity to apply their science knowledge. </p>

    <h2>D.A.R.E.- Quincy Police Department </h2>

    <p>D.A.R.E. stands for Drug Abuse Resistance Education. D.A.R.E. is a nation-wide
    program. In Quincy, it is a cooperative venture between the Quincy Chief of
    Police and the Superintendent of Schools. The program teaches students not
    only to &quot;say no to drugs&quot; but also how to be safe and to solve problems in a non-violent
    manner.</p>

    <h2>Foley Chrysler-Plymouth </h2>
    <p>The Foley Partnership, established in 1997, works with eighth grade math teachers and students. Students develop
    career awareness in the fields of engineering, design, computer graphics, advertising, and new sources of energy and fuel
    production. In addition, eighth grade technology students develop their own designs for cars of the future. Math students
    learn to use geometry, algebra and spreadsheets in their design projects. </p>

    <h2>Junior Achievement</h2>

    <p><a href="http://boston.ja.org">Please visit our partner at http://boston.ja.org</a></p>

    <p>Junior Achievement program matches successful adults with students. Adults share
    their experiences with the students. The goal is to inspire students
    to learn about the economics of life by means of a free enterprise education.</p>

    <h2>Kids Vote</h2>

    <p>“Kids Vote” is a non-profit organization with a number of important goals. Its
    mission is to educate future voters, so they can develop an understanding of government. The fifth grade students focus their learning on The Preamble of the Constitution.
    We have developed an understanding of our basic rights. On Election Day we share
    our knowledge with our classmates, parents and community. This message encourages
    all voters to respect the right to vote.
    </p>

    <h2>New England Aquarium</h2>

    <p><a href="http://www.neaq.org">Please visit our partner at www.neaq.org</a></p>

    <p>The mission of the New England Aquarium is to present, promote, and protect the
    world of water. The programs, exhibits, education, conservation and research
    are used is to increase understanding, conservation, and preservation of aquatic
    life and environments. The primary focus is on species, habitats, and issues critical
    to the New England area. </p>

    <h2>The Patriot Ledger</h2>
    <a href="http://www.southofboston.com">Please visit our partner at www.southofboston.com</a></p>
    <p>Established in 1994, the Patriot Ledger Partnership works with seventh grade language arts students and
    teachers. Students develop a sense of career awareness in both the business side and editorial side of the newspaper industry. After learning how a newspaper is published, students simulate an editorial deadline for the Ledger. Students also apply these skills to publishing their own newspapers during the school year. </p>

    <h2>Presidential Camera &amp; Studios</h2>

    <p>Staff from Presidential Camera & Studios teach Photography in the Summer Gifted Academy program.</p>

    <h2>Primary Source</h2>
    <p>Primary Source&#39;s China Seminar Series allows eight high school social studies
    teachers to participate. In the spring four teachers traveled on the China
    Study Tour. The middle school teachers will soon participate in a similar
    experience. Primary Source provided support for staff research at North Quincy
    High School and guest speakers for both high schools. Finally, Primary Source
    provided support for building China Studies at elementary, middle, and high schools.
    Eight elementary teachers participated in the China Elementary Workshop.</p>

    <h2>Quincy Historical Society</h2>
    <p>The Quincy Historical Society is located in the former Adams Academy building
    at the corner of Adams, Hancock, and Dimmock Streets.; The Adams Family left
    a trust for the education of Quincy students. The museum teacher comes to
    the second grade classrooms to give a brief overview of the city&#39;s history.
    The program for the fourth grade students is more involved. They are taught
    the history of the City of Quincy through a three day program consisting of a classroom
    visit, a tour of the Historical Society building and its artifacts, and a tour of
    the city&#39;s historical sites.</p>

    <h2>The Society for the Preservation of New England Antiquities</h2>
    <p><a href="http://www.spnea.org">Please visit our partner at www.spnea.org</a></p>

    <p>The Society provides insights into local history for grade six. All sixth
    graders spend one session at the Josiah Quincy House examining artifacts.
    Pre and post activities connect field experience to the curriculum. </p>

    <h2>South Coastal Bank - Atherton Hough School</h2>
    <p>The school business partnership between the Atherton Hough School and the South
    Coastal Bank has been thriving. The Bank Vice President
    and her Assistant have participated in a variety of activities at our school including
    attendance at our Ribbon Cutting Ceremony for our iMac Computer Lab, followed by
    sharing their favorite books with our students during our D.E.A.R. Reading Week.
    Bank employees have also assisted our students with word processing skills during
    their weekly 45 minute period in our iMac Lab. Our fourth graders take a field trip to the South Coastal
    Bank where they open their own savings accounts with a five dollar balance entry donated by the bank to each student. </p>

    <h2>South Shore Savings Bank</h2>
    <p>Established in 2000, the South Shore Savings Bank Partnership works with sixth grade math students and teachers.
    The program teaches students the importance of investing money at an early age. In addition, students are taught about foreign currency and the rate of exchange. The role banks play in the world economy and careers in the banking industry are also discussed. Bank representatives visit Atlantic twice a month and accept deposits for students who opened accounts. Students receive small incentives from the bank for making deposits. </p>

    <h2>South Shore YMCA</h2>
    <p><a href="http://www.ssymca.org">Please visit our partner at www.ssymca.org</a></p>
    <p>The YMCA and Atlantic Middle School Partnership was established in 1992. The partnership supports Atlantic’s Mountain Mover Program. The program trains small groups of seventh graders in the sport of mountain biking. Students learn about bikes, safety, and fitness. In addition, students learn competence, self-esteem, and decision making skills. On Thursdays after school, the YMCA Staff takes the group to the YMCA for a bicycle maintenance course. Students learn to strip a bike down to the frame and put it back together again. During the ten week program, each student must keep the assigned bike in good running order. On Saturdays, the group takes a trip to places like Wampatuck or the Blue Hills where they conduct bike rides. It’s a chance for students to develop healthy life styles, physical fitness, and to greatly improve their biking skills. The YMCA Staff works with at least three
    different groups each year. Former graduates of the program return to the Y to help the staff with the new groups. In addition to riding and workshops, participants receive a YMCA membership for the year and a helmet. </p>

    <h2>Tiffanie Williams and Company</h2>
    <p><a href="http://www.tiffaniewilliamsco.com">Visit our partner at www.tiffaniewilliamsco.com</a></p>

    <p>Tiffanie Williams and Company is a public relations agency.&nbsp; They specialize
    in helping businesses design advertisements, press releases and event planning which
    grabs your attention and makes a lasting impression.&nbsp; </p>

    <h2>USN Shipbuilding Museum</h2>
    <p><a href="http://www.uss-salem.org">please visit our partner at www.uss-salem.org</a></p>

    <p>Physical Science Lab Experience – All 7th graders use the USS Salem as a physical science laboratory to examine: Simple machinery, electric magnetism, density, buoyancy and space. The students apply science and mathematics to explain a work. Also, in the works is a new pilot program with grade 9 science.</p>

    <!--#include file="../includes/footer.html" -->
    </body>

    </html>

    here is the include file:

    <div class="footer">
    <p><a href="../index.html">Home </a>
    &nbsp; &#124; &nbsp;
    <a href="../students/student_mainpage.html"> Students</a>
    &nbsp; &#124; &nbsp;
    <a href="../parent/parent_mainpage.html">Parents</a>
    &nbsp; &#124; &nbsp;
    <a href="../educators/educators_mainpage.html">Educators</a>
    &nbsp; &#124; &nbsp;
    <a href="../schools/schools_mainpage.html">Schools</a>
    &nbsp; &#124; &nbsp;
    <a href="../district/district_mainpage.html">District</a>
    &nbsp; &#124; &nbsp;
    <a href="../community/community_mainpage.html">Community</a>
    &nbsp; &#124; &nbsp;
    <a href="../district/district_contactus_mainpage.html">Contact Us</a>
    </div>

  11. #11
    SitePoint Zealot
    Join Date
    Jul 2005
    Location
    Osoyoos BC Canada
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps I'm missing something here, but for your server to parse your page and 'include' includes doesn't the page have to be of type .shtml rather than .html?

    Using Apache as an example, Apache doesn't by default look through pages of type .html it just serves them/throws them out (parsing every page would slow the server down dramatically). It is however normal to set Apache up to look through files with name .shtml for includes.


    So try changing the name of pages with includes to .shtml rather than .html. Now the includes should show up!

    eg: community_mainpage.html should be community_mainpage.shtml if you want includes 'included'!

    BTW the 'include' files don't need to be called .shtml or for that matter .html

    Since the parser just finds them locally in it's own diirectory structure and sticks the text they contain in the document it is serving they can have any suffix. I usually use .inc to show me that it is a file I'll be 'including'....
    Last edited by colinmcc; Aug 7, 2006 at 16:12.

  12. #12
    SitePoint Enthusiast
    Join Date
    Feb 2001
    Location
    Boston
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. I had read about the shtml vs html and then had read that that was only on some servers. I checked with my hosting company and after looking into it, they agreed that I had to use shtml.

    It will take awhile to rename all the pages with includes (most of them) but it is worth it to make this as modular as possible for the frequent updates they call for.

    Thanks for your help.

  13. #13
    SitePoint Zealot
    Join Date
    Jul 2005
    Location
    Osoyoos BC Canada
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here's a page that will check if your server includes includes. Just copy it into a file and call it test_ssi.shtml (or whatever, but it must have the .shtml suffix) then upload it to your server and type the url into your browser. If your server 'does' includes you'll see the date in the browser window. If no date appears then you need to talk to your hosting company.

    Code:
    <!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=iso-8859-1" />
    <title>Check for SSI server support</title>
    </head>
    
    <body>
    <p> If this server supports SSI (Server Side Includes) then the date will be shown below. If just this text but no date appears then your server isn't set up to 'include' includes.</p>
    <!--#echo var="DATE_LOCAL" -->
    </body>
    </html>
    NB. The date is that of the server, so if it in another time zone from the browser viewer's it may be a day out.

    This file is worth keeping in your 'tool box'. Before wasting any time designing a site with includes just upload it to the potential host and find out straight away if their server suports includes.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •