Storing the content of a DIV in css in another file

Question

I would like to have a "Recent Activity" stream on the left side of my index.html file. I have the following code:

<div id="sidebar">
        <div class="box1">
            <div class="title">
                <h2>Recent</h2>
            </div>
            <ul class="style2">
                <li>27 Aug - Conference Meeting</li>
                <li>26 Aug - Website Created</li>
            </ul>
        </div>
    </div>

And basically I'd like to be able to store the contents (the activities) in a seperate file, so that I can import that file into the various pages across my website.

I'm very new to CSS and webdesign and I've tried to find the answer on google, but haven't run into any luck. I've been tasked with creating a website for my team's college project.

Thanks for the help in advance.

Answer 1

In order to do this, you can use CSS like this:

.box1{content: url(http://www.example.com/test.html)}

see more at Mozilla Dev

This being said, I highly advise NOT to do it this way. This is NOT what CSS is intended for. You better use some kind of include like Server Side or PHP. If you don't know coding, you can always use a CMS like WordPress which will make this kind of task a breeze

Answer 2

You can use Javascript (or some library of same) to read in the file w/ the activities (or, if represented using javascript, could just import that file) and then use javascript to insert the activities into the appropriate part of the DOM.

Answer 3

The solution is not stripping out html from an existing file but to build up your html files from different sources using a server sided script language like php.

With php you would have just one page (for example index.php) and include the content the user requests (like home, contact, guestbook, whatever).

The proper way would be to use a database for storing the information but this is far too difficult for begining with web development.

Save the html for the sidebar to a separate html file (sidebar.html). Rename your index.html to index.php. Go to the location in index.php where your html code for the sidebar is and delete it and instead just insert this:

<?php include "sidebar.html"; ?>

This code includes your html file inside your index.php and your can reuse it on different pages by just including the same sidebar.html on every page where you need it. The benefit is to be able to modify it in just one file if you need to make changes.

Now here is the disadvantage in this solution: You need php installed on the server your website will be hostet. Php is a program which interacts with the webserver and everytime a .php file is requested by a browser it will be handed over to php first for parsing the file and doing the includes, database access and many other cool things. So in order to use php-files and include html files within other html files you need php installed on your webserver. Also if you open your .html file by double clicking you won't be able to see the complete result unless you have a local webserver with php installed on your computer. That's all free software (apache2 and php) but for a beginner it's not so easy to install it. Maybe start with a prebuild package like xampp. (This contains the webserver and php with preconfigured settings to start quickly).

This topic is pretty basic for php so you will be able to find lots of tutorials on the internet about getting started with php. Good luck and have fun. ;)

Answer 4

In simple words, you can do it with <iframe> tag or with the css Content property but it won't give you possibilities as what JavaScript or PHP can give you.
To do it with JavaScript you can view this question .

Answer 5

Thank you everyone for your help and assistance. This has been a learning experience. For anyone who has the same issue, here is the solution that I've found using some help from the members who kindly responded to my question.

Here is my css:

    <div id="sidebar">
        <div class="box1">
            <div class="title">
                <h2>Recent</h2>
            </div>
            <script type="text/javascript" src="js/recent.js"> </script>
        </div>

        <div class="box2">
            <div class="title">
                <h2>Relevant Links</h2>
            </div>
            <script type="text/javascript" src="js/links.js"> </script>
        </div> 
    </div>

And here are my two *.js files:

// recent.js - Create recent activity feed
document.write("<ul class=\"style2\">");
document.write("<li>29 Aug - <a href=\"photos.html\">10 Photos Added</a></li>");
document.write("<li>28 Aug - <a href=\"meeting.html\">Meeting Page Added</a></li>");
document.write("<li>27 Aug - Meeting</li>");
document.write("<li>26 Aug - Website Created</li>");
document.write("</ul>");


// links.js - Create list of links
document.write("<ul class=\"style2\">");
document.write("<li><a href=\"http://students.sae.org/cds/formulaseries/\">Formula SAE&reg;</a></li>");
document.write("<li><a href=\"http://www.sae.org/\">SAE International</a></li>");
document.write("</ul>");

It may not be the prettiest way to do it, but it seems to work. The problem with the iframes was that if I clicked on a link, it opened it within the iframe. Thanks again everyone! I knew nothing about javascript, css, and it's been a learning experience! :)