9 {{ upvoteCount | shortNum }}
9 {{ upvoteCount | shortNum }}

CSS header/footers?

by Neodism
7 replies
Hey, Warriors. I am currently designing a web site but I do not know much about coding. I know basic HTML; just enough to get me by. I usually design and slice with Adobe products and it works out well. But I want to make managing it easier.

Once I build my site and make ten or so pages, what happens if I have to go add a link to the footer? Well, I have to go in to every page and change it. I want to be able to avoid this problem. I'm guessing the way to go about this would be with CSS. I'm not sure how so that is why I am here asking all of you.

I'm hoping someone here can tell me how I can set up my web pages so that changing something on all of my pages can be easily done in one action.
#css #header or footers
  • Profile picture of the author Istvan Horvath
    No, it's NOT CSS. CSS stands for Cascading Style Sheet > CSS Tutorial (in case you want to learn more...)

    It controls the style and layout of the web pages; has nothing to do with html. What you want to add to your footer(s) is pure HTML, i.e. anchor tag (aka links).

    There are 2 ways (at least) for what you want to do:
    SHTML and/or PHP - both make possible to include (server side) part of the webpages from another location; i.e. you make one footer file and include it on all your web pages. This way you make changes to only one file and it shows up on all the pages where the file is included.

    Just google for them and you will find a lot of info.
    Signature

    {{ DiscussionBoard.errors[5108244].message }}
    • Profile picture of the author Neodism
      Originally Posted by DEaFeYe View Post

      How are you serving your pages? Is this a straight html deal or are you in a framework?

      The answer is that you have to do some form of templating. There are a lot of ways to do this and a lot of frameworks accomplish it slightly differently.


      As an example from one of my favorite frameworks, Django, you'd do something like this

      Have a file called base.html that all your pages inherit from:

      Code:
      {% block includes %}
make references to all your css and javascript here
{% endblock includes %}

{% block header %}
Here is where you'd put the html for your header
{% endblock header %}

{% block content %}
This can be empty or better yet default to a coming soon
{% endblock content %}

{% block footer %}
and footer html
{% endblock footer %}

      Then you create your pages that inherit from this template. That way when you want to change the footers you just change the base template, and if you need most of something from a template but not all, you can override the block. So here we're going to override the content in helloworld.html:

      Code:
      {% extends "base.html" %}

{% block content %}
<p>OH HERROAH DER!</p>
{% endblock content %}
      I am using basic HTML. I will look into this. Thank you.

      Originally Posted by Istvan Horvath View Post

      No, it's NOT CSS. CSS stands for Cascading Style Sheet > CSS Tutorial (in case you want to learn more...)

      It controls the style and layout of the web pages; has nothing to do with html. What you want to add to your footer(s) is pure HTML, i.e. anchor tag (aka links).

      There are 2 ways (at least) for what you want to do:
      SHTML and/or PHP - both make possible to include (server side) part of the webpages from another location; i.e. you make one footer file and include it on all your web pages. This way you make changes to only one file and it shows up on all the pages where the file is included.

      Just google for them and you will find a lot of info.
      I definitely do want to learn more, but for the time being I am on a deadline.

      I was thinking there would be simple 'include' type script I could use. That way I would have the include for the header, the body would be different and editable from page to page, then the include for the footer.

      I will Google this and see what I can figure out, I thank you.
      Signature
      Free Web Design from Neodism.
      {{ DiscussionBoard.errors[5108553].message }}
      • Profile picture of the author Brandon Tanner
        PHP 'includes' are the way to go for this. Real easy to do...

        1) Create a PHP file that contains ONLY the footer HTML code, and name it 'footer.php'

        2) For every page you want the footer to be shown on, paste the following inside the HTML code exactly where you want the footer to appear...

        <?php include ("footer.php"); ?>

        The code above assumes that 'footer.php' is in the same directory as the pages you want to include it on. If you put it in another directory, then simply change the relative path in the 'include' code.

        Also keep in mind that all of these pages will need to have a .php extension, or it won't work (ie index.php, page2.php, page3.php, etc)

        That's it!
        Signature

        {{ DiscussionBoard.errors[5109696].message }}
        • Profile picture of the author scriptkid
          Originally Posted by Brandon Tanner View Post

          PHP 'includes' are the way to go for this. Real easy to do...

          1) Create a PHP file that contains ONLY the footer HTML code, and name it 'footer.php'

          2) For every page you want the footer to be shown on, paste the following inside the HTML code exactly where you want the footer to appear...

          <?php include ("footer.php"); ?>

          The code above assumes that 'footer.php' is in the same directory as the pages you want to include it on. If you put it in another directory, then simply change the relative path in the 'include' code.

          Also keep in mind that all of these pages will need to have a .php extension, or it won't work (ie index.php, page2.php, page3.php, etc)

          That's it!
          i was about to tell him that
          {{ DiscussionBoard.errors[5112334].message }}
          • Profile picture of the author Neodism
            Originally Posted by scriptkid View Post

            i was about to tell him that
            Worked out well! Thank all of you or your input.
            Signature
            Free Web Design from Neodism.
            {{ DiscussionBoard.errors[5115222].message }}
  • Profile picture of the author AdWordsUzmani
    you can use iframe

    <html>
    <head>

    <iframe src="header.htm" style="border:none;padding:0;margin:0" /></iframe>

    </head>
    <body>
    Content...
    <br />

    <iframe src="footer.htm" style="border:none;padding:0;margin:0" /></iframe>

    </body>
    </html>
    {{ DiscussionBoard.errors[5108325].message }}
  • Profile picture of the author cipl123
    I think CSS will work better for you. You can easily add footer links to all pages by only adding it into one page through CSS. You just need to embed that particular CSS to the rest of pages.
    {{ DiscussionBoard.errors[5112030].message }}

Trending Topics