Results 1 to 6 of 6

Thread: Website 'header' should not load in every click

  1. #1

    Thread Starter
    Software Carpenter dee-u's Avatar
    Join Date
    Feb 2005
    Location
    Pinas
    Posts
    11,123

    Arrow 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.
    Regards,


    As a gesture of gratitude please consider rating helpful posts. c",)

    Some stuffs: Mouse Hotkey | Compress file using SQL Server! | WPF - Rounded Combobox | WPF - Notify Icon and Balloon | NetVerser - a WPF chatting system

  2. #2
    Learning .Net danasegarane's Avatar
    Join Date
    Aug 2004
    Location
    VBForums
    Posts
    5,853

    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

  3. #3

    Thread Starter
    Software Carpenter dee-u's Avatar
    Join Date
    Feb 2005
    Location
    Pinas
    Posts
    11,123

    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.
    Regards,


    As a gesture of gratitude please consider rating helpful posts. c",)

    Some stuffs: Mouse Hotkey | Compress file using SQL Server! | WPF - Rounded Combobox | WPF - Notify Icon and Balloon | NetVerser - a WPF chatting system

  4. #4
    Learning .Net danasegarane's Avatar
    Join Date
    Aug 2004
    Location
    VBForums
    Posts
    5,853

    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

  5. #5

    Thread Starter
    Software Carpenter dee-u's Avatar
    Join Date
    Feb 2005
    Location
    Pinas
    Posts
    11,123

    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.
    Regards,


    As a gesture of gratitude please consider rating helpful posts. c",)

    Some stuffs: Mouse Hotkey | Compress file using SQL Server! | WPF - Rounded Combobox | WPF - Notify Icon and Balloon | NetVerser - a WPF chatting system

  6. #6
    Learning .Net danasegarane's Avatar
    Join Date
    Aug 2004
    Location
    VBForums
    Posts
    5,853

    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
  •  



Click Here to Expand Forum to Full Width