Header and footer must be static and main content must be dynamic

Hello, i need to design a webpage such that
1. Header and footer has some menus and when i click on menu, only main content should change.
For example, if i have a gif image in header, it should not be reloaded everytime when i click on menu or submenu.
I hope you understand my problem. I have header and footer and only content inside should change but not header and footer.
header and footer must not reload everytime when i click any url or menu item.

One of the way is using <FRAME> or <IFRAME> elements. Another modern way (probably recommended) is based on partial page updates with
UpdatePanel control:
https://msdn.microsoft.com/en-us/library/bb399001(v=vs.140).aspx. The
http://www.asp.net/ site is a good place to find details.

Similar Messages

White space between header and main content

Hello all! I have a 25-27px white space between my header and
main content. I read through fixes in the forum and took out any
height that would effect this gap. I still can't get rid of this
white space. Your help is greatly appreciated! Here's the Code:
<!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>
</script>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<link href="p7hscroller/s7/p7HSM07.css" rel="stylesheet"
type="text/css" media="all" />
<script type="text/javascript"
src="p7hscroller/p7hsmscripts.js"></script>
<style type="text/css">

</style>

<script type="text/javascript"
src="slideshow.js"></script>
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<pre><span
class="style4">US-AsianMates</span><span
class="style6">.com</span> <strong><span
class="style9">JOIN FOR FREE <span
class="style7">OR</span> MEMBER LOG
IN</span></strong>
</pre>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<div align="center"><a href="#"
class="style16">HOME</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">ABOUT US</a></div>
</li>
<li>
<div align="center"><a href="#"
class="style16">WHY JOIN US?</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">VISA SUPPORT</a></div>
</li>
<li>
<div align="center" class="style16"><a
href="#">EVENTS</a></div>
</li>
</ul>
<pre>
</pre>
</div>
<div id="mainContent">
<div id="apDiv1"><img
src="Images/Outdoor_Bride1.jpg" alt="Bride" name="Bride"
width="525" id="Bride" /></div>
<p> </p>
<p><br>
</p>
<pre>
</pre>
<table width="200" border="1" align="left">
<tr>
<td><img src="Romantic_Kiss.jpg" alt="VISA"
name="VISASUPPORT" width="200" id="VISASUPPORT" /></td>
</tr>
<tr>
<td><img src="Surfing_At_Home.jpg" alt="JOIN"
name="WHYJOIN" width="200" id="WHYJOIN" /></td>
</tr>
</table>
<pre></pre>
<div id="apDiv3">
<div align="center">
<div align="left">
<pre class="style14"> <strong>LIVING
PROOF</strong>
<span class="style15">"12 YEARS AGO I WENT TO
THE PHILIPPINES IN HOPES
OF FINDING MY FUTURE WIFE. 11 YEARS LATER,
I AM HAPPILY MARRIED! WE ALSO HAVE AN ENERGETIC
5 YEAR OLD SON! DREAM IT, LIVE IT! IT CAN
HAPPEN TO YOU ON US-ASIANMATES.COM
CHRIS"</span></pre>
</div>
</div>
</div>
<pre> </span>
</pre></pre>
<p>
<br>
<pre>
</pre>
<div id="apDiv7"></div>
<div align="center">
<pre>
<script type="text/javascript">
// <![CDATA[
XMLFlashSlideshow_v3({swf:'slideshow.swf',w:'580',h:'140',redirect:'',usePreloader:'true', xml:'slideshow_data0.xml',preventCache:'true',disableMultipleXML:'false',initXML:'%3C?xml% 20version=%221.0%22%20encoding=%22utf-8%22?%3E%3Cslideshow%20version=%223%22%3E%3Cstyles%3 E%3CPreloader%20label=%22Loading%20%7BN%7D%2525%22%20iconColor=%22#666666%22%20iconAlpha=% 2270%22%20iconWidth=%2250%22%3E%3C/Preloader%3E%3CPreloaderLabel%20font=%22Verdana%22%20si ze=%2210%22%20color=%22#666666%22%20bold=%22false%22%3E%3C/PreloaderLabel%3E%3CBackground% 20backgroundColor=%22#FFFFFF%22%20backgroundAlpha=%22100%22%20bevelColor=%22#FFFFFF%22%20b evelStrength=%2270%22%20borderWidth=%222%22%20borderColor=%22#000000%22%3E%3C/Background%3 E%3CLoaderAnimation%20type=%22circle%22%20color=%22#FFFFFF%22%20alphaBackground=%2220%22%2 0alphaInner=%2240%22%20frameWidth=%222%22%20width=%2250%22%20height=%2250%22%3E%3C/LoaderA nimation%3E%3CDataLoader%20useAnimation=%22true%22%20useLabel=%22true%22%20labelPlacement= %22bottom%22%20fadeOutDuration=%22400%22%20textFormat=%22loader_text%22%3E%3C/DataLoader%3 E%3C/styles%3E%3Clocalization%3E%3Ctext%20orig=%22Loading%20Data...%22%20local=%22Loading% 20Data...%22%3E%3C/text%3E%3C/localization%3E%3Cfonts%3E%3Cfont%20id=%22loader_text%22%20n ame=%22Pixelade%22%20embed=%22true%22%20size=%2213%22%20color=%22#666666%22%20bold=%22fals e%22%20selectable=%22false%22%20align=%22left%22%3E%3C/font%3E%3C/fonts%3E%3C/slideshow%3E '});
// ]]>
</script>

</pre>
</div>
<pre>
</pre>
<pre> </pre>
<pre> </pre>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

"phillychris" <[email protected]> wrote in
message
news:[email protected]...
> Yep, it was the 1 pre tag creating the gap. So why is
this page a
> disaster, Tim?
Just because something is created in DW CS3 doesn't mean it's
not a
disaster, any more than using DeWalt power tools guarantees
that my
carpentry won't be a complete mess. The software is not a
replacement for
skills. It is a tool; your workflow and understanding of HTML
and CSS is
what allows you to use DW effectively.
So why did I call this page a disaster? When I see all that
extra markup,
spans, and inline tags, I shudder. It's way too hard to
troubleshoot. You're
not doing nearly enough with descendant selectors; instead,
most of your
code is inline, despite a huge CSS file.
Just one example: individual li tags with div align="center"
inside of them.
Way overkill. If you're centering all the li text in a given
list, control
it with CSS and kill all that extra markup.
E.g.
.MenuBarHorizontal li { text-align:center; }
In fact, if all there is in that .MenuBarHorizontal is the
list, you don't
even need to specify the list in the CSS. Just do:
.MenuBarHorizontal { text-align:center; }
Now you don't need div tags inside your li at all.
And if all of those a tags in that menu are going to be
.style16 class,
don't specify it on each link. In fact, don't even have a
.style 16 class.
Heck, since it's just specifying font size, you don't need to
target the a
tag at all. Just add font-size:x-small; to the
.MenuBarHorizontal ruleset I
gave you above.
The above are just examples from a quick glance at your code.
On the whole,
your markup and approach to styles are largely wasting the
power and point
of CSS.
In addition, several styles spanned onto one line of text...
a sure sign
that either you are using far too many styles to make design
sense, or else
you've got styles that overlap each other.
Here's my advice: Until you get a better handle on CSS, don't
style things
as you go. Forget styles altogether at the start. Create a
very clean HTML
markup and put ID and class selectors on things you know will
need them.
Preferably, place the HTML elements in the order you would
want your page
read if styling did not even exist, nesting elements where
necessary.
After you have created all the HTML structure, then go back
and style the
elements via CSS only. You will end up with less page weight
and far cleaner
code to decipher, not simply in terms of length but in terms
of conflicts
and redundancies.
If you're really insistent on styling things as you go, at
least do this:
don't create a new style every time you want to accomplish
something. Create
CSS rules for IDed containers and container classes. Then as
you go along
and are about to create a style, ask yourself where you are
and what all
this new rule needs to apply to. Specify the rule there,
under the selector
you've already created. Then you won't have .style1 -
.style16 like you do
now, and you won't have all that inline mess of code to sort
through.
Finally - as you create your CSS, discipline yourself to
avoid style spans.
They are necessary on the odd occasion, but very rarely.
Think semantically
(i.e. purpose of the style point you're making at a given
time).
For example, if you're tempted to create a span in order to
put something in
bold red, ask yourself: "Why?" Generally, it means you want
to place special
emphasis or strength on that. Well, in that case you don't
need a span. You
need to be using the proper tag, such as <em>
(emphasis) or <strong>. Then
you can style that tag in CSS. That way, what you have in
your page actually
makes sense apart from the style, and as a bonus you can
apply or edit your
style easily.
Tim G.
http://www.pactumweb.com
http://www.shortordersite.com
Be smart:
http://www.pactumweb.com/client/tips.php

Gaps between header/footer and main content

I am building upon a website that somebody else previously worked on. When adding to the main content, gaps appear between the header/footer and the content. How can I fix this?
Code:
<!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>
<title>stitch by stitch needlepoint</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="sbs_style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body bgcolor="#d0e8fb" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="732" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td><a href="index.html"><img src="images/logo.gif" alt="stitch by stitch" width="316" height="66" border="0" class="logo" /></a></td></tr></tbody></table>
<table width="732" height="629" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tbody>
<tr>
<td colspan="17"><img src="images/bordertop.gif" width="732" height="31" alt="" /></td></tr>
<tr>
<td rowspan="5"><img src="images/events_borderleft.gif" width="36" height="564" alt="" /></td>
<td><img src="images/nav_spacerleft.gif" width="31" height="19" alt="" /></td>
<td><a href="index.html"><img src="images/nav_home.gif" alt="" name="home" width="47" height="19" border="0" id="home" /></a></td>
<td><img src="images/nav_dot1.gif" width="7" height="19" alt="" /></td>
<td><a href="events.html"><img src="images/nav_upcomingevents.gif" alt="" width="114" height="19" border="0" id="events" /></a></td>
<td><img src="images/nav_dot2.gif" width="11" height="19" alt="" /></td>
<td><a href="classes.html"><img src="images/Nav_classes.gif" alt="" width="57" height="19" border="0" id="classes" /></a></td>
<td><img src="images/nav_dot3.gif" width="12" height="19" alt="" /></td>
<td><a href="directions.html"><img src="images/nav_directions.gif" alt="" width="68" height="19" border="0" id="directions" /></a></td>
<td><img src="images/nav_dot4.gif" width="13" height="19" alt="" /></td>
<td><a href="photogallery.html"><img src="images/nav_photogallery.gif" alt="" width="89" height="19" border="0" id="photogallery" /></a></td>
<td><img src="images/nav_dot5.gif" width="12" height="19" alt="" /></td>
<td><a href="customdesign.html"><img src="images/nav_customdesigns.gif" alt="" width="97" height="19" border="0" id="customdesigns" /></a></td>
<td><img src="images/nav_dot6.gif" width="13" height="19" alt="" /></td>
<td><a href="vendors.html"><img src="images/nav_vendors.gif" alt="" width="67" height="19" border="0" id="vendors" /></a></td>
<td><img src="images/nav_spacerright.gif" width="24" height="19" alt="" /></td>
<td rowspan="5"><img src="images/events_borderright.gif" width="34" height="561" alt="" /></td></tr>
<tr>
<td colspan="15"><img src="images/string.jpg" width="662" height="88" alt="" /></td></tr>
<tr>
<td colspan="15"><img src="images/events_hd_upcomingevents.gif" width="662" height="44" alt="" /></td></tr>
<tr>
<td colspan="15" width="662" height="13" bgcolor="#EBECEC"> </td></tr>
<tr>
<td width="662" height="397" colspan="15" bgcolor="#EBECEC" valign="top">
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="140"><br /></td>
<td align="center"></td></tr></tbody></table>
<p align="left" class="events_boldRed"><span class="style1">Charlie Harper Trunk Show</span></p>
<p align="left"><span class="style2">February 2012</span><span class="events_boldRed"><br />
</span></p>
<p align="left"> </p>
<p align="left"><span class="events_boldRed"><span class="style1">Back to Basics II with Tony Mineri</span></span></p>
<p align="left"><span class="style2">March 12, May 14, June 18 & July 19</span></p>
<p align="left"><span class="style2">9:30-4:00 (lunch will be provided</span></p>
<p align="left"><span class="style2">Space is limited - $350.00</span></p>
<p align="left"> </p>
<p align="left"><span class="events_boldRed style1">Tony Mineri Embellishments</span></p>
<p align="left" class="style2">2012 </p>
<p align="left" class="style2">June 3rd & 4th - Full (waiting list only)</p>
<p align="left" class="style2">November 4th & 5th (limited space available)</p>
<p align="left" class="style2">2013</p>
<p align="left" class="style2">June 9th & 10th </p>
<p align="left" class="style2">October 6th & 7th</p>
<p align="left"><span class="events_boldRed"><br />
</span></p></td>
</tr>
<tr>
<td colspan="17"><img src="images/borderbottom.gif" width="732" height="37" alt="" /></td></tr></tbody></table>
<table width="732" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<p align="center"><span class="bottomnav"><a href="index.html">home</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="events.html">upcoming events</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="classes.html">classes</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="directions.html">directions</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="photogallery.html">photo gallery</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="customdesign.html">custom designs</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="vendors.html">vendors </a></span></p></td></tr></tbody></table>
<p> </p>
<p> </p>
<p></p>
<p> </p>
</body>
</html>

This is just a guess, which is what we have to do until we can see the live page, but try changing this -
<p align="left" class="events_boldRed"><span class="style1">Charlie Harper Trunk Show</span></p>
to this -
<p align="left" class="events_boldRed" style="margin-top:0;"><span class="style1">Charlie Harper Trunk Show</span></p>
Does that solve the gap between the header and the main content?
While you're worrying about these gaps, read this -
http://www.apptools.com/rants/spans.php
I see trouble ahead....

I would like to pin header and have content in body go underneath the header

Is this possible to do in muse? Currently the way that I have it set up all of the content is scrolling on top of the content? What do I need to do for the pinned header content to go behind? Thanks

Hello,
For this, create another layer in the layers panel and place it on top of the other layers. Then right click on the Pinned Header and place it in the layer which is at the top.
This way the Pinned header will stay on top and content will scroll behind it.
Regards,
Sachin

My emails show only the header and no content or attachments ?

My emails show only the header with no content or attachments on my iPad?

Quit the mail app completely and restart the iPad. Go to the home screen first by tapping the home button. Double tap the home button and the task bar will appear with all of your recent/open apps displayed at the bottom. Tap and hold down on any app icon until it begins to wiggle. Tap the minus sign in the upper left corner of the app that you want to close. Tap the home button or anywhere above the task bar. Restart the iPad.
Restart the iPad by holding down on the sleep button until the red slider appears and then slide to shut off. To power up hold the sleep button until the Apple logo appears and let go of the button.
If that doesn't work, reset the iPad.
Reset the iPad by holding down on the sleep and home buttons at the same time for about 10-15 seconds until the Apple Logo appears - ignore the red slider - let go of the buttons.

[dataTable] fixed header and scrollable content all-in-one

Hi folks,
In your opinion, how can I use CSS like here (see [http://www.imaputz.com/cssStuff/bigFourVersion.html] or [http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html]) in a "h:dataTable", to have a fixed header? Have you a quick example?
Thank you very much for your support.
G.

The h:dataTable just renders a HTML table. Apply the same using the standard attributes and standard way of writing CSS.

CSS, Main content div and sidebar length

I'm using DW CS4 and am using the 2 column fixed left sidebar with header and footer.
I want to make sure the main content div is never shorter than the length of the sidebar. I've got a coloured background, but want the bottom of the sidebar and main content div to be the same, if that makes sense?
Thanks

For equal height columns, create a 2-colored background image and repeat-y (vertically). This technique is called Faux Columns. See examples below.
3-Col Layout Before -
http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml
3-Col Layout After -
http://alt-web.com/TEMPLATES/3-col-white-gray.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

OSB to RestFul with Custom Header and Authentication

I am trying to add to OSB a RestFul service which requires authentication and custom http headers.
I am able to register the RestFul service as Business Service with following parameter
- Service Type: Messaging Service
- Request Message Type: None
- Response Message Type: Text
- Http Request Method: Get
- Authentication: Basic (Service Account)
When I test the Business Service in the Test Console, I passed in the custom http header and the content type and it did return back the JSON object I was expected.
However when I then try to create a Proxy against it with the following parameter, I had problem running it in the Test Console. Although I did pass in the http header it still complained that I didn't pass in the header. And as for Authentication, I was not even able to specify a service account like how I did in Business Service.
- Service Type: Messaging Service
- Request Message Type: None
- Response Message Type: Text
- Http Request Method: Get
Any ideas?
Thanks

What type of service account are you using ? If it is static you need specify the username/password in the PS. Also you do not specify service account for a proxy service. What is the error in the logs.
If you have to pass the HTTP header use transport headers in your request, select request type as http and then set the content type and custom http header.
http://docs.oracle.com/cd/E21764_01/doc.1111/e15867/modelingmessageflow.htm#i1125373

Main content text does not scale down on iPhone

Hello my Dreamweaver friends,
I'm working on a site for a friend -- a simple fixed width layout (header, footer, sidebar and main content). It looks good on Safari and Firefox. But on the iPhone and iTouch the text in the mainContent area does not scale down to size with the <h> tags and the links on the Spry navigation bar. Is there a reason for that? Is there something I could do so that it all scales down?
Another problem is that the right border I put on the Spry Navigation menu doesn't appear on my version of Internet Explorer.
The link to the page, for what its worth, is http://www.daveharrison.info/tzs/index.html
Thanks for any help!

12 tips for iPhone Web Design
http://articles.sitepoint.com/article/iphone-development-12-tips
Also see this working Demo with media queries. Resize your non-IE browser viewport and see what happens.
http://alt-web.com/TEMPLATES/CSS-centered-round-boxes.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Main content moves down in IE

Ok, here’s a quick question. This layout works in all
the browsers except IE 7 (I haven’t tried 6 or 5.5). In IE 7
it displays the main content below the sidebar floated to the
right. I tried ‘clear’ on both the sidebar and main
content. The conditional comments seem to work but, don’t
seem to quite fix the problem and I’m not sure if
that’s it or if they’re set up correctly.
I know I’m missing something probably easy. Any help
would be appreciated.
Here’s the url
http://www.garza-design.com/testsite/santa_b/index.html.
Thanks...

Opppss. Therewas a period at the end. Here you go.
http://www.garza-design.com/testsite/santa_b/index.html
Thanks...

Fixed Nav Bar, Fixed Sidebar, Scroll Main Content

Can someone direct me to some good documentation to learn how to design a page to have a fixed nav bar, fixed sidebar and main content that scrolls?
My objective is to have the nav bar/sidebar visible at all times when the user is scrolling through the main content.
Thanks.

On line 135, you have this:
<td align="left"><h1>How It Started</h1><img src="images/dean.jpg" alt="Dean" width="138" height="141"
hspace="15" vspace="5" border="1" align="left" />
Try this:
<td align="left"> <div style="overflow:auto; height: 200px"><h1>How It Started</h1><img src="images/dean.jpg" alt="Dean" width="138" height="141"
hspace="15" vspace="5" border="1" />
Don't forget to close the division right before the cell closure.
</div>
</td>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Problem in Consistent Header and Footer with Sub Templates in BI publisher

Hi All,
I have recently started working with OBI and used Sub templates for getting Consistent Header and Footer in all of our reports. I did this in the following way
1. Created one template called HeaderFooter.rtf with Header and footer templates.
2. placed the file in web server and called in the main Template with
<?import: http://myserver.com:9704/xmlpserver/HeaderFooter.rtf?> I mean as static URL and it is working fine.
3. Now as a part of generalizing the server i have added HTTPSERVER property in xdo.cfg file which is located in
%BI_REPOSITORY%/Admin/Configuration.
4. I have checked this property by placing <?xdoxslt:getXDOProperties($_XDOCTX)? in my rtf file and HTTPSERVER property is showing same as that of static.
5. Now when i place <?import:http://{$HTTPSERVER}/HeaderFooter.rtf?> in my rtf it is ending with an error.
so can anyone please help me out in this regard?

Hi User XY,
you might want to ask this in the [url http://forums.oracle.com/forums/forum.jspa?forumID=245]BI Publisher Forum
brgds,
Peter
Blog: http://www.oracle-and-apex.com
ApexLib: http://apexlib.oracleapex.info
BuilderPlugin: http://builderplugin.oracleapex.info
Work: http://www.click-click.at

Strange gaps in Header and Footer

Im getting gaps in the header and footer on some of my pages. Sometimes the gaps are filled with the background color of the colomn and other times they are the body color which is even weirder. An example link would be http://www.mojogar.com/pcRepair.aspx . In IE8 I get a gap on top but not the bottom. In Firefox3 the gap is on the bottom and not the top. ???
here is the markup page; (followed by the CSS)
<%@ Page Language="VB" ContentType="text/html" %>
<!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>Untitled Document</title>



<link href="thrColHybHdr.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body class="thrColHybHdr">
<div id="container">
<div id="header">
    
    <div class="fltlft"><img src="images/mojoLogoSmall.png" alt="Mojogar digital design & PC repair" width="172" height="41" border="0" usemap="#Map" />
      <map name="Map" id="Map">
        <area shape="rect" coords="2,2,172,39" href="default.html" target="_self" alt="Mojogar Home" />
      </map>
    </div>
<div class="fltrt">HeadRight
</div>
<div class="MenuVertDiv">
    <ul id="MenuBar2" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu" href="#">Design</a>
        <ul>
          <li><a href="webDesign.aspx">Website Design</a></li>
          <li><a href="webDev.aspx">Website Development</a></li>
<li><a href="logo.aspx">Logo Design</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Animation</a>
        <ul>
          <li><a href="webDev.aspx">Flash Animation</a></li>
</ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">Support</a>
        <ul>
          <li><a href="pcRepair.aspx">PC Repair</a>            </li>
          <li><a href="virus.aspx">Virus</a></li>
          <li><a href="email.aspx">Email</a></li>
          <li><a href="backup.aspx">Data Backup</a></li>
          <li><a href="wireless.aspx">Wireless</a></li>
          <li><a href="software.aspx">Software</a></li>
          <li><a href="hardwareInstall.aspx">Hardware</a></li>
<li><a href="server.aspx">Server Repair</a></li>
<li><a href="busConsult.aspx">Consulting</a></li>
        </ul>
      </li>
      <li><a href="contact.aspx">Contact</a></li>
    </ul>
</div>
</div>
<div class="masterBackground">
<div id="sidebar2">
    
<div id="sidebar2">
    <h4>When your computer is having troubles, have a Professional look over your system to update or repair your operating system, audit the installed programs, and check for viruses and other malware.</h4>
    
</div>

    
</div>
<div id="mainContent">
    
<div id="mainContent">
    <div class="MarginTopZero">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="580" height="300" title="Computer Support">
      <param name="movie" value="images/flash/PCCollage.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <embed src="images/flash/PCCollage.swf" quality="high" wmode="opaque" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="580" height="300"></embed>
    </object></div>
    <h2>Don't feel alone when your computer breaks. Computer problems can leave you in the dark about what is wrong. Help is a call away.</h2>
    <h4>Our tune-up and repair service consists of the following;</h4>
<li>Operating system updates</li>
    <h5>Operating system updates help the security of the computer and can add features that the manufacturer has been working on to make the life of the end user easier. Updates come out as frequently as every couple weeks on some operating systems.</h5>
    <li>Programs audit</li>
    <h5>Many <a href="software.aspx" title="Go to our software page" target="_self">applications</a> get added over time and can slow down the performance of any PC by taking up processor and memory resources, not to mention hard drive space.</h5>
    <li>Security overlook</li>
    <h5><a href="virus.aspx" target="_self">Anti-virus</a> definitions need to be kept up-to-date. New viruses, spyware, trojans, and malware are always being introduced into the wild (the internet is a jungle). Anti-virus applications need to be kept updated as well. Subscriptions to paid providers can lapse and updates can be left behind for months if not years (I've seen it happen).</h5>
    <li>Anti-virus fine tuning</li>
    <h5>Many anti-virus programs are bloated applications and won't stop annoying the user with pop-ups and information. Many users also never know when and how often their anti-virus is scanning.</h5>
    <li>Browser configuration</li>
    <h5>There are literally hundreds of options in your browsers settings for security and optimization. Fine stunning these can in some cases increase surfing speed.</h5>
    <li>Start-up & shut down optimizing</li>
    <h5>If your like most people, your PC never starts up fast enough. Get a thorough audit of what programs and services are starting with your computer and optimize them to increase speed.</h5>

</div>

    
</div>
</div>

<%-- <br class="clearfloat" />
--%>
   <div id="footer">
    <p>Copyright Mojogar 2010</p>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
CSS:
@charset "utf-8";
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
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: #9FEE00;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #333;
h1 {
font-size: xx-large;
color: #000;
h2 {
font-size: x-large;
h3 {
font-size: large;
h4 {
font-size: medium;
h5 {
font-size: small;
h6 {
font-size: x-small;
p {
font-size: xx-small;
h1, h2 {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
h3, h4, h5, h6, p {
padding-top: 3px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
li {
font-weight: bold;
ul {
list-style-type: decimal;
ol {
font-weight: bold;
a {
a:link {
color: #FFF;
a:hover {
color: #333;
background-color: #6C8CD5;
a:active {
color: #F00;
a:visited {
color: #FF4848;
/* Tips for this Hybrid layout
1. Since the side columns em-based sizing is based on the user's default font size, you will want to be sure that background graphics in the columns take that into account. Built correctly, this is more accessible for those that need larger font sizes, since the width of the columns remains proportionate. If this is undesirable with your design, simply change the width to a pixel size and be sure to change the margins on the #mainContent div accordingly.
2. Since the sizing of side columns in this layout are based on the 100% font size in the body element, if you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the column widths will downsize proportionately. You may want to increase their widths, and the size of the #mainContent div's side margins, to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
4. The #container div is not necessary for this layout at the 100% width. You may want to use it to create faux columns or limit the width of the layout.
5. It is not neccessary to have the 100% width on the #container div since, by nature, a div takes up 100% of the available space. It is here so that if you want to decrease the size of the overall container - perhaps leaving a bit of margin on each side - this will already be available for adjustment.
.thrColHybHdr #container {
width: 780px;
/*margin: 0 auto; the auto margins (in conjunction with a width) center the page if needed */
text-align: left;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
.thrColHybHdr #header {
background-color: #C9F76F;
height: 100%;
width: 780px;
margin: 0px;
padding: 0px;
.thrColHybHdr #header h1 {
margin: 0;
padding: 0px;
/* Tips for sidebar1:
1. Be aware that if you set a font-size value on this div, the overall width of the div will be adjusted accordingly.
2. Since we are working in ems, it's best not to use padding on the sidebar itself. It will be added to the width for standards compliant browsers creating an unknown actual width.
3. 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 ".thrColHybHdr #sidebar1 p" rule.
.thrColHybHdr #sidebar1 {
width: 13em;
border-top-width: thick;
border-top-style: solid;
border-top-color: #C06;
float: left;
height: auto;
.thrColHybHdr #sidebar2 {
width: 200px;
text-align: center;
margin: 0px;
padding: 0px;
float: right;
/*.thrColHybHdr #sidebar1 h3, .thrColHybHdr #sidebar1 p, .thrColHybHdr #sidebar2 p, .thrColHybHdr #sidebar2 h3 {
margin-left: 0px;*/ /* the left and right margin should be given to every element that will be placed in the side columns */
/* margin-right: 0px;
/* Tips for mainContent:
1. If you give this #mainContent div a font-size value different than the #sidebar1 div, the margins of the #mainContent div will be based on its font-size and the width of the #sidebar1 div will be based on its font-size. You may wish to adjust the values of these divs.
2. 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.
3. To avoid float drop, you may need to test to determine the approximate maximum image/element size since this layout is based on the user's font sizing combined with the values you set. However, if the user has their browser font size set lower than normal, less space will be available in the #mainContent div than you may see on testing.
4. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs that may occur.
.thrColHybHdr #mainContent {
text-align: center;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 580px;
background-color: #2A4480;
color: #C9F76F;
padding: 0px;
.MarginTopZero {
margin: 0px;
padding: 0px;
.busConslt {
height: 600px;
width: 800px;
.idea {
height: auto;
width: 100%;
.thrColHybHdr #footer {
padding: 0;
background-color: #C9F76F;
margin: 0px;
.thrColHybHdr #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: 0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
color: #000;
/* 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;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 0px;
padding-left: 5px;
padding-top: 3px;
padding-bottom: 3px;
.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;
#defMainLft {
width: 49%;
float: left;
text-align: center;
#defMainRt {
width: 49%;
float: right;
text-align: center;
.absolRgt {
position: absolute;
top: 0px;
right: 0px;
.relRgt {
position: relative;
top: 0px;
right: 0px;
.defFull {
position: relative;
height: 263px;
width: 100%;
border-bottom-width: medium;
border-bottom-style: solid;
border-bottom-color: #ff4900;
.absolLft {
position: absolute;
top: 0px;
left: 0px;
.defFullTop {
position: relative;
width: 600px;
border-top-width: thick;
border-top-style: solid;
border-top-color: #000;
margin: 0px;
.tuneUpTop {
background-color: #000;
color: #FFF;
margin: 0px;
padding: 0px;
.contactForm {
width: 470px;
height: auto;
left: auto;
right: auto;
.borderRight {
border: medium solid #A62F00;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
.MenuVertDiv {
margin-bottom: 0px;
clear: both;
height: 38px;
background-color: #A62F00;
width: 100%;
.masterBackground {
background-color: #BF5930;
margin: 0px;
padding: 0px;

Your HTML code contains conditional comments for IE. Try reducing or removing the extra padding and see if that helps.
/* place css fixes for all versions of IE in this conditional comment */
.thrColHybHdr #sidebar1, .thrColHybHdr #sidebar2 { padding-top: 30px; }
.thrColHybHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

How to change the header and footer in the Section Breaks Next Page using OpenXML?

I have a word document file in which I added a Section Break of Next Page, now I want to change the header and footer of that page.
Scenario of example, I have a doc file which has four pages with headers and footers and added fifth page in the section break next page, I want to change the header and footer of the fifth page only. This is achievable manually by deselecting the Link to Previous
button in the Word Application but I don't know how to change it using XML?
My code that adds the new page in the section breaks is:
class Program
static void Main(string[] args)
string path = @"C:\Riyaz\sample.docx";
string strtxt = "Hello This is done by programmatically";
OpenAndAddTextToWordDocument(path,strtxt);
public static void OpenAndAddTextToWordDocument(string filepath, string txt)
using (DocX document = DocX.Load(@"C:\Riyaz\sample.docx"))
document.InsertSectionPageBreak();
Paragraph p1 = document.InsertParagraph();
p1.Append("This is new section");
document.Save();
Please help.

Here is the sample for your reference:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using DocumentFormat.OpenXml;
using DocumentFormat.OpenXml.Packaging;
using DocumentFormat.OpenXml.Wordprocessing;
namespace WordAddNewFooterHeader
class Program
static void Main(string[] args)
string path = @"E:\Document\TestHeaderandfooter-Copy.docx";
string strtxt = "OpenXML SDK";
OpenAndAddTextToWordDocument(path, strtxt);
public static void OpenAndAddTextToWordDocument(string filepath, string txt)
// Open a WordprocessingDocument for editing using the filepath.
WordprocessingDocument wordprocessingDocument = WordprocessingDocument.Open(filepath, true);
MainDocumentPart part = wordprocessingDocument.MainDocumentPart;
Body body = part.Document.Body;
//create a new footer Id=rIdf2
FooterPart footerPart2 = part.AddNewPart<FooterPart>("rIdf2");
GenerateFooterPartContent(footerPart2);
//create a new header Id=rIdh2
HeaderPart headerPart2 = part.AddNewPart<HeaderPart>("rIdh2");
GenerateHeaderPartContent(headerPart2);
//replace the attribute of SectionProperties to add new footer and header
SectionProperties lxml = body.GetFirstChild<SectionProperties>();
lxml.GetFirstChild<HeaderReference>().Remove();
lxml.GetFirstChild<FooterReference>().Remove();
HeaderReference headerReference1 = new HeaderReference() { Type = HeaderFooterValues.Default, Id = "rIdh2" };
FooterReference footerReference1 = new FooterReference() { Type = HeaderFooterValues.Default, Id = "rIdf2" };
lxml.Append(headerReference1);
lxml.Append(footerReference1);
//add the correlation of last Paragraph
OpenXmlElement oxl = body.ChildElements.GetItem(body.ChildElements.Count - 2);
ParagraphProperties paragraphProperties1 = new ParagraphProperties();
SectionProperties sectionProperties1 = new SectionProperties() { RsidR = oxl.GetAttribute("rsidR", oxl.NamespaceUri).Value };
HeaderReference headerReference2 = new HeaderReference() { Type = HeaderFooterValues.Default, Id = part.GetIdOfPart(part.HeaderParts.FirstOrDefault()) };
FooterReference footerReference2 = new FooterReference() { Type = HeaderFooterValues.Default, Id = part.GetIdOfPart(part.FooterParts.FirstOrDefault()) };
PageSize pageSize1 = new PageSize() { Width = (UInt32Value)12240U, Height = (UInt32Value)15840U };
PageMargin pageMargin1 = new PageMargin() { Top = 1440, Right = (UInt32Value)1440U, Bottom = 1440, Left = (UInt32Value)1440U, Header = (UInt32Value)720U, Footer = (UInt32Value)720U, Gutter = (UInt32Value)0U };
Columns columns1 = new Columns() { Space = "720" };
DocGrid docGrid1 = new DocGrid() { LinePitch = 360 };
sectionProperties1.Append(headerReference2);
sectionProperties1.Append(footerReference2);
sectionProperties1.Append(pageSize1);
sectionProperties1.Append(pageMargin1);
sectionProperties1.Append(columns1);
sectionProperties1.Append(docGrid1);
paragraphProperties1.Append(sectionProperties1);
oxl.InsertAt<ParagraphProperties>(paragraphProperties1, 0);
body.InsertBefore<Paragraph>(GenerateParagraph(txt, oxl.GetAttribute("rsidRDefault", oxl.NamespaceUri).Value), body.GetFirstChild<SectionProperties>());
part.Document.Save();
wordprocessingDocument.Close();
//Generate new Paragraph
public static Paragraph GenerateParagraph(string text, string rsidR)
Paragraph paragraph1 = new Paragraph() { RsidParagraphAddition = rsidR };
ParagraphProperties paragraphProperties1 = new ParagraphProperties();
Tabs tabs1 = new Tabs();
TabStop tabStop1 = new TabStop() { Val = TabStopValues.Left, Position = 5583 };
tabs1.Append(tabStop1);
paragraphProperties1.Append(tabs1);
Run run1 = new Run();
Text text1 = new Text();
text1.Text = text;
run1.Append(text1);
Run run2 = new Run();
TabChar tabChar1 = new TabChar();
run2.Append(tabChar1);
paragraph1.Append(paragraphProperties1);
paragraph1.Append(run1);
paragraph1.Append(run2);
return paragraph1;
static void GenerateHeaderPartContent(HeaderPart hpart)
Header header1 = new Header();
Paragraph paragraph1 = new Paragraph();
ParagraphProperties paragraphProperties1 = new ParagraphProperties();
ParagraphStyleId paragraphStyleId1 = new ParagraphStyleId() { Val = "Header" };
paragraphProperties1.Append(paragraphStyleId1);
Run run1 = new Run();
Text text1 = new Text();
text1.Text = "";
run1.Append(text1);
paragraph1.Append(paragraphProperties1);
paragraph1.Append(run1);
header1.Append(paragraph1);
hpart.Header = header1;
static void GenerateFooterPartContent(FooterPart fpart)
Footer footer1 = new Footer();
Paragraph paragraph1 = new Paragraph();
ParagraphProperties paragraphProperties1 = new ParagraphProperties();
ParagraphStyleId paragraphStyleId1 = new ParagraphStyleId() { Val = "Footer" };
paragraphProperties1.Append(paragraphStyleId1);
Run run1 = new Run();
Text text1 = new Text();
text1.Text = "";
run1.Append(text1);
paragraph1.Append(paragraphProperties1);
paragraph1.Append(run1);
footer1.Append(paragraph1);
fpart.Footer = footer1;
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.

Need CS4 3 Column Liquid Head and Footer for CS5

My professor is using the CS4 version of 3 Column Liquid with Header and Footer and this template has changed in CS5. I find it hard to follow his examples without the proper file. He says to change background color of a sidebar, and half of my website changes color. Is there a way I can get this template please?

This is from cs3, I suppose it is the same;
<!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>Untitled Document</title>
<style type="text/css">

</style></head>
<body class="thrColEls">
<div id="container">
<div id="sidebar1">
    <h3>sidebar1 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if the #mainContent div will always contain more content than the #sidebar1 div. </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
</div>
<div id="sidebar2">
    <h3>sidebar2 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if the #mainContent div will always contain more content than the #sidebar2 div. </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
</div>
<div id="mainContent">
    <h1> Main Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. </p>
    <p>Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. </p>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    </div>
    <br class="clearfloat" />
</div>
</body>
</html>

Header and footer must be static and main content must be dynamic

Similar Messages

Maybe you are looking for