Hi,
I have designed one html page (home) with CSS. I have four more pages in html and want my heading and menus to be repeated. How should i do it? Do i have to write all the heading and menu contents in each of my pages or is there any other ways. Please help..
Thank you,
Siji
You can use a PHP include, if you are using php. Create a file for your header and menus and name it something like header.php & menus.php. (they can be separate or together in one file) You can create one for your footer, too.
Then, on every page you want them, include them with php like this: <?php include("header.php"); ?> Your html pages need the .php extension for this to work.
Your page might look like this:
<html>
<head>
<title>Title</title>
</head>
<body>
<?php include("header.php"); ?>
<p>SOME CONTENT</p>
<?php include("menus.php"); ?>
<p>MAIN BODY CONTENT
...
...
</p>
<?php include("footer.php"); ?>
</body>
</html>The header file might look like this:
<img src="LOGO.JPG" />
This is our website slogan...The footer might look like this:
<p>
©Copyright 2009 by My website.com
</p>
<p>
contact us anytime!
</p>thank you, ill try this.
hi siji44,
Honestly, its only four pages, don't think you need to go php. simply repeat your header divs using the same classes and if you coded it right, once you change your classes, all your pages will be changed as well.
Easy stuff!
Honestly, its only four pages, don't think you need to go php.
please ignore this advice,
plan on expansion,
plan on 100,000 pages, and the database to support them, and the design features to import a single css and javascript file, and to php/ssi/cgi/asp(your choice) include all the common code.
Do it now when it is four pages, and you dont have to come back in a month and rewrite 40, come back in six months to rewrite 400 or more, and decide what code can be common.
imagine for example Wikipedia without the includes, and backend, every page requiring Joe Public to hand code menus to millions of other pages, for a minor edit .....
Dont think anyone would like to make edits
( WikiPedia is chosen as a design model that works )
I also may recommend framesets. You can look into that, i recommend for almost all web programming: www.w3schools.com.
Frames are a bit clumsy, and lost of mobile browsers dont support them very well
You are actually being quite ridiculous bob. Wikipedia is probably the worst example you could think of. It's like you telling him (in lame-mans terms) to build a factory, it can do EVERYTHING FOR YOU when he will only be manufacturing 5 products. Not every site grows exponentially.
If you planning on building a large site, i would recommend going CMS there are alot of open source solutions available. This will save you development time and templating is relatively simple.
You are actually being quite ridiculous bob. Wikipedia is probably the worst example you could think of. It's like you telling him (in lame-mans terms) to build a factory, it can do EVERYTHING FOR YOU when he will only be manufacturing 5 products. Not every site grows exponentially.
If you planning on building a large site, i would recommend going CMS there are alot of open source solutions available. This will save you development time and templating is relatively simple.
I am, arent I... :P
Siji44, plan on some expansion,
There will always be a few more changes to make, additional pages
if you arent going to use some includes, make a template you can paste content into, with the head scripts appearance set
I think everyone's opinion is valid. Give the person asking the question some information, and let him make his own informed decision!
=)
Hi,
I have designed one html page (home) with CSS. I have four more pages in html and want my heading and menus to be repeated. How should i do it? Do i have to write all the heading and menu contents in each of my pages or is there any other ways. Please help..Thank you,
Siji
The first think you will need to do is take the CSS off of your home page and put it into it own page call for example index.css
Next you will need to link your home page and your other page to the index.css page This make the heading and menus to be repeated. As long as you have them in div tags you should be okay.
<link href="index.css" rel="stylesheet" type="text/css" />
This should work depending on your folder structure
Put this into each of your pagesafer you created the CSS page
I have used one CSS file to define link colors, decoration, etc. for multiple pages.
Can someone give me a quick example of using CSS to put the same img and text layout at the top of each page?
I have used one CSS file to define link colors, decoration, etc. for multiple pages.
Can someone give me a quick example of using CSS to put the same img and text layout at the top of each page?
You have to link it to each page. I will show you what I did for my internship last year. Ignore that there are different photos in the header. The clientel wanted his page to be different but the same at the same time not look boring. But take a look at the Support Marketing Service words which is actually an image..I made it in photoshop. The div name is smsname . That is in it own div tag on every singe page. This is the link http://www.supportmarketingservices.com/
I will give you the code I ue for the company page, so that you can see how the code work, how I set up the header, sidebar, footer, and etc.
company.html page
<!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=utf-8" />
<title>Company</title>
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<link href="../company.css" rel="stylesheet" type="text/css" />
<meta name="Keywords" content="aparel, bags, totes, Writing Instruments, company, print, outings, business cards, cards, display, promotional, gifts, Eco-Friendly marketing material, sports, events, electronic, home, family, business, catalogue, service, marketing, support, portland, oregon, embroidery, custom, design, clothes, cup, mugs" />
<meta name="Description" content="Support Marketing Services provide Custom Design Apparels, Bags, Totes, Office Supplies, Business Cards, Displays, Electronic, and so much more for Businesses, Home, and Family. Request a Catalogue to see all products that Support Marketing Services provides." />
</head>
<body class="twoColLiqLtHdr">
<div id="smsname"><img src="2title.png" width="547" height="58" /></div>
<div id="container1">
<div id="header"><!-- end #header -->
<img src="headingcompany.jpg" alt="company informations" width="799" height="173" /></div>
<div id="sidebar1">
<div id="portfolios">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../apparel/apparel.html">Apparel/Headwear</a></li>
<li><a href="../bags_n_totes/bags_n_totes.html">Bags & Totes</a></li>
<li><a href="../writing_instruments/writing_instruments.html">Writing Instruments</a></li>
<li><a href="../display/display.html">Displays</a></li>
<li><a href="../eco_friendly/eco_friendly.html">Eco-Friendly</a></li>
<li><a href="../sport events/sportsevent.html">Sport Events</a></li>
<li><a href="../electronic/electronic.html">Electronics</a></li>
<li><a href="../cpuaccess/cpuaccess.html">Computer Accesories</a></li>
<li><a href="../catalog request/catalogreq.html">Catalog Request</a></li>
<li><a href="company.html">Company</a></li>
<li><a href="../contact/contact.html">Contact</a></li>
</ul>
</div>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1>
<!-- end #mainContent -->Company</h1>
<p>Speciality Imprinted Promotional Products For All Your Needs! </p>
<p><strong>Support Marketing Services</strong>, has over 25 years of service in the industry of imprinted specialty promotional products. </p>
<p>Our extensive knowledge of imprinted specialty gifts puts companies on the cutting edge when using <strong>Support Marketing Services</strong> to purchasing products to promote your organization. </p>
<p>We focus on personalized professional service and provide top quality products, competitive pricing and prompt delivery. </p>
<p><strong>Call Now! </strong>USA Toll Free 1.866.272.0951 to speak with a representative</p>
<table cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="99%" bgcolor="#CCCCCC" colspan="3">From A to Z <strong>Support Marketing Services</strong> can provide you with all of the speciality imprinted products your organization requires.</td>
<td> </td>
</tr>
<tr>
<td valign="top" align="left" width="33%" bgcolor="white">A - G<br />
Automotive Items<br />
Awards/Eco-Friendly<br />
Bags<br />
Balloons<br />
Bike Bottles<br />
Bookmarks<br />
Briefcases<br />
Buttons<br />
Cameras<br />
Calculators<br />
Calendars<br />
Candy<br />
Caps<br />
Card Holders<br />
Cell Phone Cases<br />
Children's Items<br />
Clocks<br />
Computer Items<br />
Coolers<br />
Cube Pads<br />
Desk Accessories<br />
Flashlights<br />
Fly swatters<br />
Folders<br />
Food Items<br />
Fun Flyers<br />
Glassware<br />
Golf Items<br /></td>
<td valign="top" align="left" width="33%" bgcolor="white">H - P<br />
High lighters<br />
Jackets<br />
Jewelry<br />
Key Tags<br />
Kitchen Helpers<br />
Knives<br />
Lapel Pins<br />
Letter Openers<br />
Lighters<br />
Litter bags<br />
Luggage Tags<br />
Magnets<br />
Matches<br />
Memo Books<br />
Message Boards<br />
Mouse pads<br />
Mugs<br />
Note Holders<br />
Paperweights<br />
Personal Care Aids<br />
Pens<br />
Pencils<br />
Photo Albums<br />
Picture Frames<br />
Planners<br />
Playing Cards<br />
Post-It® Pads<br /></td>
<td valign="top" align="left" width="33%" bgcolor="white">R - Z<br />
Eco-Friendly Items<br />
Ring Binders<br />
Rulers<br />
Shirts<br />
Signs<br />
Sports Products<br />
Sports Bottles<br />
Stadium Cups<br />
Stress Balls<br />
Stuffed Animals<br />
Sunglasses<br />
Tape Measures<br />
Thermometers<br />
Tools<br />
Tote bags<br />
Towels<br />
Travel Kits<br />
T-Shirts<br />
Umbrellas<br />
Wallets<br />
Watches<br />
Yardsticks</td>
</tr>
</table>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
</div>
<br class="clearfloat" />
<div id="footer">
<p><strong>Copyright © </strong>2008 Support Marketing Services, All rights reserved.<br />
<a href="../catalog request/catalogreq.html">catalog request</a></p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>company.css page
#smsname {
position:absolute;
left:239px;
top:124px;
width:480px;
height:48px;
z-index:1;
}
#portfolios ul {
font-size: 0.9em;
list-style: none;
margin-left: 0px;
margin-top: 0px;
padding-left: 0px;
}
#portfolios a:link {
color: #FFFFFF;
background: #cd8016;
/*#C0751A #C18330 */
text-decoration: none;
display: block;
padding: 2px;
padding-left: 32px;
width: 150px;
border-bottom: 1px solid #000;
padding-top: 6px;
}
#portfolios a:visited {
color: #FFFFFF;
background: #cd8016;
text-decoration: none;
display: block;
padding: 2px;
padding-left: 32px;
width: 150px;
border-bottom: 1px solid #000;
padding-top: 6px;
}
#portfolios a:hover {
color: #000000;
background: #FFFFFF;
text-decoration: none;
}
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #e5d9a6;
}
.twoColLiqLtHdr #container1 {
width: 800px;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
background-color: white;
}
.twoColLiqLtHdr #container h1{
font-family:"Times New Roman", Times, serif;
font-size: 24px;
}
#header {
border: 1px solid #000;
border-right: 1px solid #000; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
/* Tips for sidebar1:
1. since we are working in percentages, it's best not to use padding on the sidebar. It will be added to the width for standards compliant browsers creating an unknown actual width.
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColLiqLtHdr #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
*/
.twoColLiqLtHdr #sidebar1 {
border: 1px solid #000;
font-family:"Times New Roman", Times, serif;
font-size: 18px;
float: left;
height: 1010px;
width: 184px; /* since this element is floated, a width must be given */
background: #CD8016; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0; /* top and bottom padding create visual space within this div */
}
/* Tips for mainContent:
1. the space between the mainContent and sidebar1 is created with the left margin on the mainContent div. No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 430px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/
.twoColLiqLtHdr #mainContent {
margin: 0px 20px 0px 28%; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
padding-bottom: 25px;
}
.twoColLiqLtHdr #mainContent h1{
text-align: left;
font-size:18px;
text-decoration: underline;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.twoColLiqLtHdr #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background-color: #F9F8C4;
font-size: 80%;
text-align: center;
height: 45px;
}
.twoColLiqLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
border: #000000;
}
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
Include content from one page to another with HTML Code. Put your header on a page by itself and include it into every page you want it.
On the page that you want to put content on just insert <!--#include virtual="YourURL"--> <html> <body> <!--#include virtual="YOUR URL" --> </body> </html> If you dont like this way there is always AJAX
In order to make this work, I had to save my file as an myfile.asp.
Is that the only way to make it work?
Include content from one page to another with HTML Code. Put your header on a page by itself and include it into every page you want it.
On the page that you want to put content on just insert<!--#include virtual="YourURL"--> <html> <body> <!--#include virtual="YOUR URL" --> </body> </html>If you dont like this way there is always AJAX
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.