|
CSS - How Can We Set Header, Footer Off While Printing A Php Webpage?
There is an invoice preview webpage. I want to set header and footer information off while printing it. I know we can edit the page setup settings. But I wanted to know if we can do something without changing the default page setup settings. With default setting inside page setup, webpage title and webpage path are displayed for header and footer respectively.
Thanks Similar TutorialsHello - this is my first time on the forum. I'm sure I must be missing something really simple. I'm not very experienced at CSS, and must admit I can't grasp the inherited properties principle, which may be the cause of my problem. I've pasted my code for the web page and my properties stylesheet below. Although, as you can see, I want to put a header near the top of the web page, nothing appears in my browser. (I mean nothing, the words I have put the header tag to just aren't there). I would be very grateful for some help. Thank you. The CSS validator says "Value Error : color attempt to find a semi-colon before the property name. add it" which I don't understand. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <head> <title>Love Local Food - about us</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="keywords" content="love local food, love local, love food, local food, exeter food, devon food, devon vegetables, exeter vegetables, local vegetables, real bread, slow food, slow food exeter, slow food devon, rye bread, good food, good local food, van food, van exeter, van devon, local van, mobile shop, workshops, workshop, farm, farms, organic, organic food exeter, fresh food, local fresh food, fresh food exeter, fresh food devon " /> <meta name="description" content="We sell good fresh food by van in your locality" /> <meta http-equiv="PRAGMA" content="NO-CACHE" /><!-- --> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="presentation.css" /> </head> <body> <!-- Header --> <div id="bar-top"> <p class="links"> <a href="index.html">home </a> <a href="mobileshop.html">mobile shop </a> <a href="farms.html">farms </a> <a href="workshops.html">workshops </a> <a href="joinus.html">join us </a> <a href="aboutus.html">about us </a> <a href="contactus.html">contact us </a> </p> </div> <!-- end of header --> <!-- main column --> <div id="main"> <p> <img src="slice4.jpg" alt="love local food" border="0" width="400" height = "125" class="center" /></p> <p> <img src="logo.gif" alt="love local food" align="left" border="0" width="300" height="175" /></p> <p class="header">about love local food</p> <p> Love Local Food is a new social enterprise initiated by Emmas Bread, Shillingford Organics, West Town Farm and organicArts along with others including David Tuffield, David Bossano, Rachel Moffat, Nicola Beglin, Paula Garwood, Amber Dawkins and Chukumeka Maxwell.</p> <p class="text">We are a group of local producers, educators and passionate food lovers who propose to bring a new and simple way of shopping to Exeter and surrounding areas.</p> <p class="text">We first met in July 2007 with the intention of becoming a workers co-operative that supported each other in the produce and sale of locally grown food.</p> <p class="text">We want to provide local food to local communities, provide a fair return to local producers and provide links between the consumer and producer through educational activities and resources.</p> <p class="text">We want to help consumers make the connection between the food they eat and the environment in which they live, and to help local people achieve well being.</p> <p class="text">We look to a future of the sustainable production and distribution of food, including allotments and gardens, where we renew our relationship with food and nature, and share the land.</p> <p class="text">A future where local communities, schools and other institutions are involved in commissioning local food production, community celebrations and sharing with other cultures.</p> <p class="text">A future where we are all open to new ideas about food and our relationship with it.</p> <!--links-box--> <div id="links-box"> <p class="links"> <a href="emmasbread.html">emmas bread </a> </p> <p class="links"><a href="shillingford.html">shillingford organics </a></p> <p class="links"><a href="westtown.html">west town farm </a></p> <p class="links"><a href="organicarts.html">organicARTS </a> </p> </div> <!--end of links box--> </div> <!-- end of main column --> </body> </html> /* Presentation Stylesheet */ .header { font-family: Arial, Helvetica, sans-serif; font-size:20px; color:#000000 margin:0; padding:10px 10px 10px 15px; } .links { font-family: Arial, Helvetica, sans-serif; text-align:center; font-size:20px; color:#000000; } .links a:link { color: #560007; text-decoration:none; } .links a:visited { color: #EF9C00; text-decoration:none; } .links a:active { color:#560007; text-decoration:none; } .text { font-family: Helvetica, Arial, Verdana, sans-serif; font-size:15px; color:#000000; } Hello. I'm presently writing a JavaScript applet which will be included into websites to produce a dynamically created header and footer through PHP. That's not important for the most part. What I would like to do is create the header and footer through CSS. I do, howver, have a slight problem. I can not have the user edit their websites in any way except for adding the script inclusion. (<script language="javascript" src="http://webaddress/script.js">) Now, this is what I've come up with for the CSS. css Code: Original - css Code body { padding: 25px 0 25px 0; } .ixga_header { position: fixed; font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #EAEAEA; top: 0; left: 0; } .ixga_header table,tr,td { font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #FFFFFF; } .ixga_header a, a:visited { font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #EAEAEA; } .ixga_header a:hover { font-size: 11px; font-family: /*Arial, */Verdana, Helvetica, sans-serif; color: #EAEAEA; } /* hide from mac ie5 \*/ .ixga_header { position: absolute; } /* end hide from mac ie5 */ html>body .ixga_header { position: fixed; } .ixga_footer { position: fixed; font-size: 11px; font-family: Verdana, Helvetica, sans-serif; color: #EAEAEA; bottom: 0; left: 0; } .ixga_footer table,tr,td { font-size: 11px; font-family: Verdana, Helvetica, sans-serif; color: #FFFFFF; } .ixga_footer a, a:visited { font-size: 11px; font-family: Verdana, Helvetica, sans-serif; color: #EAEAEA; }
body {
Does this seem right to you? Now, the HTML injected by the remote script is as follows. html Code: Original - html Code <div class="ixga_header"> <link href="http://localhost/header/header.css" rel="stylesheet" type="text/css" media="all" /> <table width="100%" height="25" border="0" cellpadding="0" cellspacing="0"> <tr height="25" style="background-image:url(\'http://localhost/header/images/bg.gif\')"> <td align="left"> <b> <a href="http://gaming.localhost"> Gaming Network </a> </b> - <a href="http://ds.localhost"> Demonic Sights: The Adventure Begins </a> - <a href="http://ds2.localhost"> Demonic Sights: The War of Aegis </a> - <a href="http://ta.localhost"> Total Apocalypse </a> </td> <td align="right"> <a href="http://localhost/login.php">Login</a> | <a href="http://localhost/register.php">Register</a> </td> </tr> </table> </div> <div class="ixga_footer"> <table width="100%" height="25" border="0" cellpadding="0" cellspacing="0"> <tr height="25" style="background-image:url('http://localhost/header/images/bg.gif')"> <td align="left"> This is a test footer. Woo. </td> </tr> </table> </div>
<div class="ixga_header">
<link href="http://localhost/header/header.css" rel="stylesheet" type="text/css" media="all" />
<table width="100%" height="25" border="0" cellpadding="0" cellspacing="0">
<tr height="25" style="background-image:url(\'http://localhost/header/images/bg.gif\')">
<td align="left">
<b>
<a href="http://gaming.localhost">
Gaming Network
</a>
</b>
-
<a href="http://ds.localhost">
Demonic Sights: The Adventure Begins
</a>
-
<a href="http://ds2.localhost">
Demonic Sights: The War of Aegis
</a>
-
<a href="http://ta.localhost">
Total Apocalypse
</a>
</td>
<td align="right">
<a href="http://localhost/login.php">Login</a>
|
<a href="http://localhost/register.php">Register</a>
</td>
</tr>
</table>
</div>
<div class="ixga_footer">
<table width="100%" height="25" border="0" cellpadding="0" cellspacing="0">
<tr height="25" style="background-image:url('http://localhost/header/images/bg.gif')">
<td align="left">
This is a test footer. Woo.
</td>
</tr>
</table>
</div>
The problem I face is that any HTML on the original page somehow gets shoved UNDER the footer, no matter the case, as if it just shoves the data that SHOULD be there into the footer division itself. Can someone please suggest a better method I can take of doing this? Or perhaps point me to a resource where I can see how to dynamically add a header and footer to a webpage through CSS _WITHOUT_ having to include a division for the page contents itself? This needs to work out of the box. Thanks in advance. Hey I am creating a website in php with a header and footer attached as in: <?php include("header.php"); ?> I have set the minimum height of the page to 600px however in IE it doesnt' work it displays half up the page In Firefox it is fine but in IE it doesn;t work any clues? cheers J I'm currently using .php to include a common header and footer. Is there a way to use CSS to include a common footer. Not the style, but the text themselves. I have a Corporate Phone List extension sheet that is served on our Intranet. When users print this document from their browser IE defaults to 0.75 margins all around and has IE's default header and footer. Over 300 people will be printing this document. Is it possible to set the margins and get rid of the header/footer through either CSS or HTML? I have had some success in moving the margin of the tables through a stylesheet but I don't know how to set it for the whole page and I don't know how to get rid of the default header/footer. Code: <link rel="stylesheet" href="print.css" type="text/css" media="print" /> Code: td {font-size: 9pt;}
table {margin:0em 1em 0em 1em}
I am new to PSD to html slicing. i want some help on how this the following template would be sliced for footer and header. Will i need have one large back ground image or seperate for header n footer Hello! I'm here after much googling, and I am bashing my head against the wall, so any help is appreciated: Footer and header, fixed size, attached to top and bottom of screen. I want the center div to be a fluid height to sit between the header and footer, and if the content extends beyond that, I want it to scroll within the div, not the page. Here, I'm linking to a picture to explain more clearly: portlandworkshop-dot-com-slash-projects-slash-divs-dot-jpg (it won't let me direct link.. durrr) Nothing I do seems to fix this conundrum... Can ANYONE point me in the right direction? Hello to all those reading A really simple question for the knowledgeable, I suppose, however a question nevertheless. I've attached and image to try and save us all time and be as straightforward as I can. How would I accomplish the following with CSS? Problem: if I use absolute positioning on header and footer, I have difficulties centering them. Problem #2: how can I assign fixed values to header and footer and allow the body to stretch dynamically to accomodate different resolutions and\or content. In other words make the middle piece of the design mobile\fluid. jililu.com/portfolio2 I have upload the files that I currently have. I like to have the trapeziod header where the edges will align with the content. Right now I have the header with three sections, a left image, right image and a box in the center. It doesn't seems to be working. Eventually I would also like a drop shadow for the header. I have been trying this for days and it is not working. Can anybody please help. !!!! I'm having two issues with IE on my site. 1. IE is displaying the body background image (bg.jpg) throughout the entire page. 2. IE is pushing the sidebar way down. Neither of these issues exist in Firefox. I think the second issue may have something to do with the first issue. Here is the relevant code. Code: html,body * {
padding:0px;
margin:0px;
}
body {
background-image:url(images/bg.jpg);
background-repeat:repeat-x;
background-color:#fb7d21;
margin:0 auto;
height:100%;
}
div#container {
width:792px;
margin:0 auto;
background-image:url(images/filler.jpg);
background-repeat:repeat-y;
}
div#header {
width:792px;
height:109px;
background-image:url(images/header.jpg);
background-repeat:no-repeat;
margin-top:20px;
}
div#content {
float:left;
width:570px;
padding:0 0 0 10px;
margin-top:-40px;
}
div#sidebar {
float:right;
width:212px;
margin-top:-95px;
}
div#footer {
clear:both;
width:792px;
height:84px;
background-image:url(images/footer.jpg);
background-repeat:no-repeat;
}
You can see the issues on my site here. Any idea what is causing this? Thanks in advance. Hi, was wondering if someone could please enlight me on this. Im creating what look like MS Word doc pages for a site and I would like to have it such that the body content div remains the same distance from the top and bottom of its container div regardless of whether header or footer divs are inserted into the same container div. How would I achieve this? Shall I use z-index in the .header and .footer classes and make them higher than the z-index of the .body class so as to stop them from affecting the margin of the body content div? Thanks in advance. You can see an example on http://www.cauwenbergh.be/dzone/ The yellow div does not fill between header and footer when there is not enough text in it :s So is there any way to get it filled between header and footer... html: Code: <div id="wrap"> <div id="header"> <div id="balk"> <div id="balk_midden">...</div> </div> <div id="header_wrap"> <img src="images/header.gif" alt="Dutchzone voor al uw internettoepassingen: Webhosting - webdesign - netwerken"/> </div> <div id="balk"> <div id="balk_midden">...</div> </div> </div> <div id="inner-wrap"> <div id="pagebox">Hier komt tekst</div> </div> <div id="footer"> <div id="copyright">Footer</div> </div> </div> css: Code: body, html {
height:100%;
}
body {
margin:0;
padding:0;
background-image:url(../images/bg34.gif);
font-family: "trebuchet ms", verdana, helvetica, sans-serif;
font-size: 14px;
}
#wrap {
position:relative;
width:100%;
margin:auto;
min-height:100%;
}
* html #wrap {
height:100%;
}
#inner-wrap {
padding-bottom:20px;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
background-color:#00FF33;
}
* html #inner-wrap {
height:1px;
}
#header_wrap {
background:#333333 url(../images/dzheader_back.gif);
color:#FF00FF;
margin:0; padding:0;
height:120px;
text-align: center;
}
#balk {
padding: 0px;
width: 100%;
background-color:#7999B9;
border-bottom: 1px solid #F7F7F9;
border-top: 1px solid #F7F7F9;
height: 20px;
}
#balk_midden {
width: 800px;
margin-left: auto;
margin-right: auto;
background-color:#7999B9;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
color: #FFFFFF;
line-height: 20px;
text-align: right;
}
#header {
background-image:url(../images/dzheader_back.gif);
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
#header img {
text-align:center;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
margin:0;
margin-bottom: -4px;
padding-left: 30px;
padding-right: 30px;
}
#pagebox {
width: 800px;
margin: auto;
background-color:#FFFF00;
border-left: 1px solid #807E7A;
border-right: 1px solid #807E7A;
height: 300px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:20px;
background-color:#7999B9;
}
#copyright {
padding: 0px;
width: 800px;
text-align: center;
background-color:#7999B9;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
vertical-align: bottom;
margin: 0 auto 0 auto;
color: #FFFFFF;
bottom: 0;
height: 20px;
}
I have found many different ways of doing the 3 column fluid layout on the net... http://css-discuss.incutio.com/?page=ThreeColumnLayouts But none of theme seem simple enough to implement 3 fluid columns where each column is a percentage. I have found a couple, but modifying the css to find my percentage needs loses the effect often times because the css code is long and complicated with many embeded divs. Isnt there an easy way to have a header at top, 3 columns (20%,60%,20% widths) each stretching the same height and a footer at the end? I thought that floating would work, but i get mixed and undesired output in IE and FF. Thanks to all that contribute. Hi all, I am trying to basically have a centre column of data on my page. Within this centre column, I am trying to place a header and footer. The CSS is working quite well with the exception that the header and footer seem to be shorter than the width of the main column. In other words, there seems to be a margin on the right and left side between the end of the footer/header and main column. I am not sure what is going on as I have made the widths the same. I am sure I am over-seeing something small. I was following the example found http://www.pmob.co.uk/temp/1colcentred.htm Code:
html{height:100%;}
body {
padding:0;
margin:0;
height:100%;
background-color: #98AFC7;
color: #000000;
}
#outer{
min-height:100%;
width:800px;
background:pink;
color: #000000;
margin:auto;
text-align:left;
position:relative;
}
* html #outer{height:100%}
#header {
border-top:1px solid #000;
border-bottom:1px solid #000;
background:blue;
left:-1px;
width:800px;
height:40px;
overflow:hidden;
color: #000000;
z-index:100;
//margin-left:6px;
//margin-right:6px;
}
#footer {
position:absolute;
bottom:0;
left:0;
background:green;
height:40px;
border-top:1px solid #000;
width:800px;
//margin-left:1%;
//margin-right:1%;
}
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
<body>
<div id="outer">
<div id="header">Header</div>
<p>middle</p>
<p>middle</p>
<div id="clearfooter"></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Hey gang, Ok, this is embarrassing, but I'm currently working at redesigning my website (here), and would love to get rid of the craptacular tables-based layout. I've spent the last few days googling for a good two-column header and footer tutorial but I can't see any that works well and explains what is going on ( I'd rather know what's working than cut'n'paste someone's css scheme ). I'm not too worried about <IE5.5/etc compatibility as most of the data on the page is UTF-8 ( and IE5.0 - 5.5 makes up 1.49% of my visitors ). This is what I have so far - I just need to get rid of those two cells! Can anyone point me in the right direction (or laugh hard at my crappy google-skills ). Hey all, I have a background image that I want to repeat horizontally at the top and the bottom of a page (below all of the content, not necessarily at the bottom of the screen) that I'm creating, for the Header and Footer. I would like it to look something like this. I'm using this code for the background image, for the Header: body { background-image: url(stars.gif); background-repeat: repeat-x } And I'm wondering whether I can include another background image in the "body" code, telling it to repeat horizontally, but at the bottom of the page? Here is the code that I'm assuming would have to be used: { background-image: url(stars.gif); background-repeat: repeat-x; background-position: bottom; } Can someone suggest to me where this code should go? Could I include it in the "body" css code? Or should I put it below all of the rest of the columns/content code? Thanks. Hi. How to make my header and footer stick to bottom? For the header div, I have background image and a logo (test) but the bg image does stick to the bottom to touch the menu? For the footer, it doesn't stick to the bottom of the page? Anyone can help me out? Here's the link of the test page with css inside the source code. Really appreciate if anyone can help. Thank you. yourbestproduct dot com/test.html (Sorry, I'm new user so can't put exact url) I'm trying to use CSS to create a layout that has a top header, followed by a left side navbar, a center content area, and a bottom footer. I'm totally lost by the CSS needed to make this happen. Here's what I'm trying. It's borrowed from other posts that came up by searching for headers and footer. Any help would be fantastic. I'm trying to end my use of frames for the header and navbar. Thanks in advance for any help. Code:
#header {
left: 0;
width: 100%;
height:125px;
top: 0;
background-image: url(images/topbackground2.jpg);
background-repeat: repeat;
}
#navbar{
width:122px;
height:100%;
background-color:#3f79a1;
position: absolute;
top: 125px;
left: 0px;}
#footer{
background-image: url(images/gradientsmaller2.gif);
font: 10pt;
position: absolute;
bottom: 0;
left:0;
background-color: #ccffcc;
width: 100%;
text-align: center;
padding: 0 15%;
}
Hi i want to have a site with 3 columns a header and a footer where the height of the content and both the columns spreads to fill the page even if there is only a few lines of content. Also i wanted to have a margin round the page so that the page doesnt fill the screen horizontal. i cant seem to get it to work correctly does anyone have an example i can look at? cheers Andy |
|||||||