-
Sep 29th, 2011, 09:58 PM
#1
Website 'header' should not load in every click
I am toying with our school's website (temporary) and I have a problem. What I want is that the 'header' where the name and logo of school should not be refreshing upon each click of a menu. How do I do that?
I just duplicated the following code in each file I used in the website.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>North Luzon Philippines State College</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta name="description" content="This is the personal website of NLPSC" />
<meta name="keywords" content= "north,luzon,philippines,state,college,nlpsc,candon,ilocos sur" /> <meta name="author" content="NLPSC" />
<style type="text/css">
/*<![CDATA[*/
@import "styles.css";
/*]]>*/
</style>
</head>
<body id="altbody">
<div id="wrapper-header">
<div id="header">
<img src="NLPSC.png" alt="North Luzon Philippines State College"></img>
</div>
</div>
Our website address: http://www.nlpsc.tk/.
The css:
Code:
body {
margin: 0 0 1em 0;
padding: 0;
color: black;
background-color: #eee;
line-height: 130%;
font-family: arial, helvetica, verdana, tahoma, sans-serif;
text-align: center;
}
#wrapper-header { background: #eee; }
#header {
background: #eee url('images/admin.PNG') right no-repeat;
width: 100%;
height: 110px;
line-height: 125px;
margin: 0 auto;
text-align: left;
}
#header h1 {
margin: 0;
padding: 0;
color: #eee;
font-size: 220%;
padding-left: 10px;
letter-spacing: -1px;
}
#wrapper-menu {
background: #88ac0b url('images/menu-background.png') top left repeat-x;
float: left;
width: 100%;
}
#menu {
width: 100%;
margin: 0 auto;
font-size: 95%;
white-space: nowrap; /* stops half a menu link dropping to next line. Instead, the whole link will drop. This only happens if you have a lot of menu links, and large text size */
padding-right: 2px;
list-style: none; /* disable default menu styling for list items */
}
* html #menu { padding-right: 0; } /* See above comment. This re-adjusts IE to the above padding */
/* this is an empty pseudo element that makes #menu as high as the floated child elements */
#menu:after {
clear: both;
content: '';
display: block;
}
#menu ul {
background: #9ACD32;
}
#menu ul {
left: -20000em;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
color: white;
}
/* reset some styling on all child list items */
#menu li {
display: block;
margin: 0;
padding: 0;
text-align: left;
}
/* only top most menu list items are floated */
#menu > li {
display: inline;
float: left;
}
/* each link is made a block element */
#menu a {
color: black;
display: block;
padding: 5px 15px;
text-decoration: none; /* removes underline in links */
}
/* this one has a submenu */
#menu ul a:after {
content: ' >';
}
/* this one does not */
#menu ul a:last-child:after {
content: '';
}
/* gives the blue background for hovered links, way cool huh? */
#menu li:hover > a {
background: #b6e41c url('images/menu-hover.png') repeat-x;
color: #485b06;
}
/* this makes the menu visible on the screen when mouse comes in */
#menu > li:hover > ul {
left: auto;
}
/* a sample how position: relative; can change things... comment the line to see what happens! */
#menu li > ul > li {
position: relative;
}
/* these two rules set how second, third... level submenus are treated */
#menu li > ul > li > ul {
top: 0;
}
#menu li > ul > li:hover > ul {
left: 100%;
}
#content {
width: 90%; /* 73% because it has 1% padding on each side, which brings it to 75% wide */
margin: 0 auto;
padding: 3.5em 1% 20px 1%;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
background: white;
font-size: 90%;
text-align: left;
}
* html #content { padding-top: 1.8em; } /* Set padding top in IE to 20px */
#footer {
margin: 0 auto;
padding: 2px 1%;
width: 90%;
text-align: right;
color: white;
letter-spacing: 0.15em;
background: #88ac0b url('images/menu-background.png') top left repeat-x;
border: 1px solid #a0c80e;
font-size: 80%;
}
h2 {
color: #800080;
padding-bottom: 3px;
border-bottom: 1px solid #a0c80e;
font-size: 150%;
letter-spacing: -1px;
}
a:link, a:visited {
color: #260;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
p { margin-left: 1em; }
tr.b td {
color: blue;
}
tr.g td {
color: green;
}
tr.r td {
color: red;
}
Last edited by dee-u; Sep 30th, 2011 at 03:41 AM.
-
Sep 29th, 2011, 10:35 PM
#2
Re: Website 'header' should not load in every click
Currently You are using frames which should have solved the issue.
Please mark you thread resolved using the Thread Tools as shown
-
Sep 29th, 2011, 10:52 PM
#3
Re: Website 'header' should not load in every click
Oh, I see. Looks like my source link http://nlpsc.byethost2.com/ is working. So its .tk that is the culprit.
-
Sep 29th, 2011, 11:41 PM
#4
Re: [RESOLVED] Website 'header' should not load in every click
I don't think so. The .tk uses html frames so it reload only bottom frame not the top one. And http://nlpsc.byethost2.com/ reloads all the page.In FF no difference but in IE I can able to see the difference
Please mark you thread resolved using the Thread Tools as shown
-
Sep 30th, 2011, 03:42 AM
#5
Re: Website 'header' should not load in every click
You are right, I thought my other url was working. So what is your proposed solution to the problem at hand? Others frown at using frames so I don't think I'll be using it.
-
Sep 30th, 2011, 04:07 AM
#6
Re: Website 'header' should not load in every click
Frames is one of the option. Or you could use the jquery Ajax Load method. See the demo here
Please mark you thread resolved using the Thread Tools as shown
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|