|
CSS - Printable Page Setup
I have created a css file to make the a printable page. This works fine. I was wondering if there is a way (using css) to make the page automatically load up in landscape format rather than portrait?
Thanks in advance wabirdman Similar TutorialsHi, I've been stuck for days now just trying to setup how I want to layout my page. What I am trying to get is the BODY of the page to pretty much just contain everything. The I want to put a frame around all the content so that a small rectangle gradient image that I made will expand as needed to fill the browser window. Then finally I want a DIV wrapper that will hold all the page content. Here is my latest attempt to do this; Code: html, body {
margin: 0;
color: black;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
padding: 0;
text-align: center;
}
div#frameBG {
top:0;
left:0;
z-index: 1;
}
div#wrapper {
margin: 0 auto;
width: 900px;
text-align: left;
z-index: 2;
}
div#logo {
position: relative;
top: -760px;
border: 0;
padding: 0;
}
div#leftCol {
width: 150px;
position: relative;
top: -580px;
left: 0px;
border: 2px;
padding: 10px;
background-color: #CCCC00;
text-align: center;
}
Code: <HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="style-test.css">
</HEAD>
<BODY>
<DIV id="frameBG"><img src="images/dk-green-rect.jpg" width="100%" height="100%"></DIV>
<DIV id="wrapper">
<DIV id="logo"><img src="images/header_01.jpg"></DIV>
<DIV id="leftCol">
<DIV> ...bunch of stuff here </DIV>
<DIV> ...bunch of stuff here </DIV>
<DIV> ...bunch of stuff here </DIV>
</DIV>
</DIV>
</BODY>
</HTML>
Using that I can at least get the content in the wrapper to appear over the background, but.... I get extra white space below and to the left of the background as I add more content. ...and, having to use -580px to position my stuff where I want it doesn't make sense for this. Someone suggested just putting the background in the BODY and leave out the BGframe but then the graphic repeats instead of stretching. Any help here???? Hello, I'm new to CSS. I've been developing a website in PHP. I have a report that is meant to be printed. It is formated for printing. However, if the user doesn't have his/her browser print page margins set to a max of 0.25in then some of the printed area will get clipped off. Can CSS be used to control these margins on the page? I've been looking into this and have been lead to the media = "print" area. However, it only seems to be controling the webpage's body margins and not the browser's print page setup margins. I've gotten to the point of using the following style code on my page, but now I'm at a loss as to what to try next. Code:
<style type="text/css">
<!--
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
}
body {
margin-left: 15px;
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
}
.style4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
font-weight: bold;
}
.style15 {font-size: 10pt}
.style21 {font-size: 18pt}
.style24 {font-size: 24pt}
.style25 {font-size: 16pt}
.style28 {font-size: 12pt}
-->
</style>
<link href="file:///C|/Webs/ures/k058_styles.css" rel="stylesheet" type="text/css">
<style type="text/css" media="print">
<!--
.style19 {font-size: 14pt}
.style29 {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
.style22 {font-size: 9pt}
.style23 {font-size: 12pt; font-family: "Times New Roman", Times, serif;}
.styleprint {
margin: 0in 0in 0in 0in;
margin-top: 0in;
margin-left: 0in;
}
-->
</style>
I added the ".styleprint" style to the page only to try and control the browser's print page setup margins. What you see above are actually two attempts to do this. Like I said above the margin settings seem to only be contoling the margins on the displayed page and not the browser's print page setup margins. How can I control the browser's print page setup margins? CAN I control the browser's print page setup margins? If I cannot, what do you do to make sure that the user can print a "printer formated" page with the correct margins? Thanks, Paul Hi, I was trying to display a small colored square using <table> tag. It worked fine on the screen but when I do print preview, the square shows up as white. I used both: <table width="15" height="15" style="border: 1px solid #000; background:#00cc00"> ... </tabel> and <table width="15" height="15" style="border: 1px solid #000"> <tr><td bgcolor="00cc00"></td></tr> </table> but none works. Can someone tell me why this does not get printed? Is there a CSS method to create this that would print? I'm trying to create a printable version of a website that uses two columns of text. But then I have to know where the page will end, and this depends on the default header & footer margins of the browser. Is there some kind of coding trick for getting this to work? Hey guys, I usually have a friend that helps me slice up my templates and write the CSS and some html for my sites, however he's been MIA and I can't seem to figure this out. I've followed several CSS slicing guides, but the templates used are far simpler than the template I'm trying to make happen. I'm wondering if anyone would be willing to slice this up for me and do the basic coding for it! Haha I'm seriously at a loss. Thank you for your time! Hi XP pro SP2 Macromedia dreamweaver CS3 Found this solution for setting the position of a background image in a cell. I am mostly busy with firefox amd ieexplorer 6 to,... what is the beat 8 ? Select the cell. Then in Properties specify the background image. It'll repeat, but if you now set up a CSS for the TD tag and select 'no repeat', it'll go back to one image. You can also set the position in the same window. I'm sure the experts will say it's a scrappy way of solving the problem, but it works. And that's what counts. The other advantage is that you can have different images in each cell. This seems like an easy way to do it, but how do I set up a CSS for the TD tag for this specific cell? Lynghonning :-) td.special { background-repeat:no-repeat; background-image: url(pakke.jpg); } .... <td class="special"> Note - no caps on 'special'. I cant get it to work. Also the code I found here conserning BG images for netscape didnt do it either. Any suggestions greatly appreciated. Cheerio Chris Hi to all, and thanks a million in advance for help. I have developed a simple online cms and everything is setup correctly but i am stuck at one place. I am unable to make width to 100% when b div is empty i mean a div = 50% width, b div = 50% width, how set it up that when a div is empty then b div goes to 100%width and when b div is empty then a div is 100% width. i hope got my question. because currently i have set in this way. wrapper div = 980px width, a div = 50% width, b div = 50% width, wrapper div end so when a div is empty then b div is still present and that area is empty it destroy the whole look. thanks arsslan I'm creating a website in html/css, and I hope this is the correct forum for this issue. I'm not expecting anyone to explain exactly how to do this, but maybe just a point in the right direction as I haven't been able to search for this correctly. Essentially I currently have a list of news items on the front page of my site. I want there to be a small indicator beneath each of these news items that says "comments (#)" where # is number of user comments about that news item. If this is clicked it would take the reader to a different page with the full news article and below it a list of the comments. It seems like some kind of wordpress implementation might work here but I have no idea where to look for something like this. Sorry if that was a little hard to understand, but I can't post urls yet to help explain. Thanks in advance! I am generating a list with PHP that is going to be printed out and hung up for display. I would prefer if the following weren't printed. 1) Top Left - Page Title (I know I can have this disappear by having a blank title, but I would prefer to have one) 2) Top Right - Page URL 3) Bottom Left - Page number (ex: 1 of 2) 4) Bottom Right - Date Is there any way to print the list without these? I wasn't sure if there is some css I can use, or if this is something that the printer prints automatically. Thanks Hi All : Currently i'm running in .NET platform together with VB.net and ASP. I faced a problem regarding to the PAGE BREAK html tag. The problem is when i want to print out a report, it will show with scroll bar and the report is very long. So what i have to do is to apply Page-Break-After/Before into the HTML. how am i know if the report already apply the Page Break function or not? And the only style i can use is CSS. Anyone familiar with this? It's urgent !! Hope can get anyone help asap. Regards, JeFFery Howcome: html, body { color: #06F; background-color: #000; font-size: 16px; text-align: center; width: 768px; } Doesn't center the page in the browser? How can I center it? Output example on my website here. I am trying to make a pattern tile the full height of the page and match up with an image at the top. It's a little bit hard to explain and a lot easier to show, so I've documented my first two attempts below. Failed Solution 1 - Pattern as a part of a div set at height: 100%; with outer divs also set at height: 100%; See attempt 1: Code: http://www.hesterdesigns.com/Web2/yellow.html Problem is that the divs aren't growing to the height of the page, and so the pattern isn't tiling the whole height of the page. Failed Solution 2 - The Pattern is part of the body background which tiles on y. See attempt 2: Code: http://www.hesterdesigns.com/Web2/index.html Any suggestions? I'm hoping to find a way to do this using only CSS and without having to resort to Javascript solutions. I could do this using Frames but I absolutely loathe them so I need to do it in CSS I have an A-Z across the top of the page which stays there while the results scroll below. Unfortunately, while I can do basic CSS, complicated stuff like this is way beyond me! Help would be most appreciated! Alright... I give up on this one. The copyright moves up and down by a pixel or two between different pages. Go from the Home page to the Diabetes page and look at the footer and you will see. I have tried changing the margins, padding, and line-height on the text in the footer. I can get it to temporarily work but as soon as I change anything above the copyright (i.e. in the #content div) like line-height, add text, and etc it moves the copyright between pages again. Basically the content div is pushing down on the copyright differently depending on the amount of text that is in the article. Because other than the text all the articles pages code is exactly the same. All the footer text is a PHP include if that makes a difference. Thanks for looking at it because I have been working on this for quite a few days now and it is buggin the ba-jesus out of me? I have a theory, the footer (thats where the copyright is) is absolute positioned. Therefore it is taken out of the flow of the document. Could this be the cause of my problem? So if I were to place all the copyright and footer links within another div within the footer div would that bring those back into flow? Like if I gave that new div a position of static or something? Or is it out of the flow regardless because it's sitting inside of an absolute positioned div? Thanks a lot - here is the site in question Hi, I have a front page which is one image only, no text. The image is centered horizontally (i.e. a simply text-align: center; ). My question is - how do I centre it vertically? (no matter what the resolution of the website visitor is). i.e. Currently the image is at the top of my screen. I would like it to be in the centre, both horizontally and vertically. Many thanks! Hello everyone, I've been working on my school website for some time now - but I recently started over where the markup and style sheets are concerned. Both my html and css validate. This is my html source: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Secondary School</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
function view_event(url)
{
window.open(url, 'event', 'top=100, left=100, width=200, height=350');
return false;
}
//-->
</script>
</head>
<body>
<div id="container">
<h1> Secondary.School. </h1>
<div id="nav">
<ul>
<li> <a href="index.php"> Homepage </a> </li>
<li> <a href="#"> School Information </a> </li>
<li> <a href="departments.html"> Departments </a> </li>
<li> <a href="#"> Clubs </a> </li>
<li> <a href="#"> SCC </a> </li>
<li> <a href="#"> Resources </a> </li>
</ul>
</div>
<div id="primaryRail" class="rail">
<h2> Contact information </h2>
<p> <b> 127 Maple Street Testo, Orbuk, H58 435 </b> <br />
<b> Telephone: </b> (456) 245-5677 <br />
<b> Fax: </b> (456) 456-4567 </p>
</div>
<div id="secondaryRail" class="rail">
<h2> Our administration </h2>
<p> <b> Principal: </b> <i> Alan N </i> <br />
<b> Vice-Principal: </b> <i> Lucy S </i> <br />
<b> Vice-Principal: </b> <i> Candice H </i> </p>
</div>
<div id="primaryContent" class="content">
<h3> Welcome to the Secondary School website! </h3>
<p><b>XHTML TESTING</b><br />
April 11, 2007<br />
Posted by : <b>admin</b><br />
Pellentesque sit amet mauris. Nullam non lacus. Etiam auctor. In purus.
Nulla dolor lectus, posuere et, cursus a, tincidunt non, mi. Vestibulum
interdum turpis in erat vehicula consequat. Vivamus sit amet turpis vitae
massa tristique auctor. Mauris quis turpis. Quisque at mi. Suspendisse
consequat faucibus elit. Morbi scelerisque porttitor ligula. Vestibulum
non purus. <a href="#"> link testing </a><br />
<a href="#top">Top</a></p><p><b>admin</b><br />
April 11, 2007<br />
Posted by : <b>admin</b><br />
Pellentesque sit amet mauris. Nullam non lacus. Etiam auctor. In purus.
Nulla dolor lectus, posuere et, cursus a, tincidunt non, mi. Vestibulum
interdum turpis in erat vehicula consequat. Vivamus sit amet turpis vitae
massa tristique auctor. Mauris quis turpis. Quisque at mi. Suspendisse
consequat faucibus elit. Morbi scelerisque porttitor ligula. Vestibulum
non purus. <br />
<a href="#top">Top</a></p><p><b>test</b><br />
April 10, 2007<br />
Posted by : <b>mr.southern</b><br />
test<br />
<a href="#top">Top</a></p><p><b>test</b><br />
April 10, 2007<br />
Posted by : <b>mr.s</b><br />
test<br />
<a href="#top">Top</a></p><p><b>Testing</b><br />
April 09, 2007<br />
Posted by : <b>Jonathan</b><br />
This is just a test message.<br />
<a href="#top">Top</a></p><p><b>test</b><br />
April 05, 2007<br />
Posted by : <b>test</b><br />
test<br />
<a href="#top">Top</a></p><p><b>Test</b><br />
April 05, 2007<br />
Posted by : <b>Jonathan</b><br />
Test.<br />
<a href="#top">Top</a></p><p><b>Another test post.</b><br />
April 05, 2007<br />
Posted by : <b>Jonathan</b><br />
Just another test.<br />
<a href="#top">Top</a></p><p><b>Lorem ipsum dolar et sit</b><br />
April 05, 2007<br />
Posted by : <b>Jonathan</b><br />
This is just a test post.<br />
<a href="#top">Top</a></p><p><b>Lorem ipsum dolar et sit</b><br />
April 05, 2007<br />
Posted by : <b>Jonathan</b><br />
This is just a test post.<br />
<a href="#top">Top</a></p> </div>
<div id="secondaryContent" class="content">
<h2>Calendar for April 2007</h2>
<table>
<tr class="days"><td>Su</td>
<td>Mo</td>
<td>Tu</td>
<td>We</td>
<td>Th</td>
<td>Fr</td>
<td>Sa</td>
</tr>
<tr><td class="week" title="Sun, 01st April 2007">1</td>
<td class="week" title="Mon, 02nd April 2007">2</td>
<td class="week" title="Tue, 03rd April 2007">3</td>
<td class="week" title="Wed, 04th April 2007">4</td>
<td class="week" title="Thu, 05th April 2007">5</td>
<td class="week" title="Fri, 06th April 2007">6</td>
<td class="week" title="Sat, 07th April 2007">7</td>
</tr><tr>
<td class="week" title="Sun, 08th April 2007">8</td>
<td class="week" title="Mon, 09th April 2007">9</td>
<td class="week" title="Tue, 10th April 2007">10</td>
<td class="week" title="Wed, 11th April 2007">11</td>
<td class="week" title="Thu, 12th April 2007">12</td>
<td class="week" title="Fri, 13th April 2007">13</td>
<td class="week" title="Sat, 14th April 2007">14</td>
</tr><tr>
<td class="week" title="Sun, 15th April 2007">15</td>
<td class="week" title="Mon, 16th April 2007"><a href="calendar.php?dateline=1176699600" style="padding: 0px;" onclick="return view_event(this.href);"><span style="color: red; font-weight: bold;">16</span></a></td>
<td class="week" title="Tue, 17th April 2007">17</td>
<td class="week" title="Wed, 18th April 2007">18</td>
<td class="week" title="Thu, 19th April 2007">19</td>
<td class="week" title="Fri, 20th April 2007">20</td>
<td class="week" title="Sat, 21st April 2007">21</td>
</tr><tr>
<td class="week" title="Sun, 22nd April 2007">22</td>
<td class="week" title="Mon, 23rd April 2007">23</td>
<td class="week" title="Tue, 24th April 2007">24</td>
<td class="week" title="Wed, 25th April 2007">25</td>
<td class="week" title="Thu, 26th April 2007">26</td>
<td class="week" title="Fri, 27th April 2007">27</td>
<td class="week" title="Sat, 28th April 2007">28</td>
</tr><tr>
<td class="week" title="Sun, 29th April 2007">29</td>
<td class="week" title="Mon, 30th April 2007">30</td>
<td class="week"> </td>
<td class="week"> </td>
<td class="week"> </td>
<td class="week"> </td>
<td class="week"> </td>
</tr>
</table>
<a href="index.php?m=3">Previous month</a>
<a href="index.php?m=5">Next month</a>
<p style="font-weight: bold;">XHTML TESTING</p>
<p style="font-weight: bold;">admin</p>
<p style="font-weight: bold;">test</p>
<p style="font-weight: bold;">test</p>
<p style="font-weight: bold;">Testing</p>
<p style="font-weight: bold;">test</p>
<p style="font-weight: bold;">Test</p>
<p style="font-weight: bold;">Another test post.</p>
<p style="font-weight: bold;">Lorem ipsum dolar et sit</p>
<p style="font-weight: bold;">Lorem ipsum dolar et sit</p>
<p>Pellentesque sit amet mauris. Nullam non lacus. Etiam auctor. In purus.
Nulla dolor lectus, posuere et, cursus a, tincidunt non, mi. Vestibulum
interdum turpis in erat vehicula consequat. Vivamus sit amet turpis vitae
massa tristique auctor. Mauris quis turpis. Quisque at mi. Suspendisse
consequat faucibus elit. Morbi scelerisque porttitor ligula. Vestibulum
non purus. </p>
</div>
</div>
<div id="footer">
<p> <img src="images/tiger.jpg" alt="tiger logo" style="float: left;" /> | <a href="#"> homepage </a> | <a href="#"> school
information </a> | <a href="#"> departments </a> | <a href="#"> clubs </a> | <a href="#"> scc </a> | <a href="#"> resources </a> | <br />
Copyright <span style="font-size: x-small;"> 2007 </span> Secondary
School. </p>
</div>
</body>
</html>
And this is my style sheet: Code:
/* Secondary School CSS Document
/* Page and Link Formatting
---------------------------- */
a
{
text-decoration: underline;
font-family: Georgia;
padding-bottom: 3px;
color: #FF42B1;
}
#nav a
{
text-decoration: none;
font-family: Georgia;
font-size: 12px;
padding: 12px 10px 8px 10px;
color: #F9F9F9;
}
#nav a:hover
{
background: #454545;
}
#nav li
{
display: inline;
}
body
{
background: url('images/header.png') repeat-x;
margin: 0px;
padding: 0px;
text-align:center;
}
/* Divs etc...
---------------------------- */
#container
{
margin:0px auto;
width: 700px;
text-align: left;
}
#container h1
{
margin-top: 60px;
}
#primaryRail
{
width: 350px;
float: left;
}
#secondaryRail
{
width: 350px;
float: left;
}
#primaryContent
{
margin: 55px 0px 0px 0px;
width: 500px;
float: left;
}
#secondaryContent
{
margin: 55px 0px 0px 25px;
width: 175px;
float: left;
}
#footer
{
clear: both;
text-align: center;
background: #EDEDED;
border: #E2E2E2 2px solid;
}
/* Standard Elements
---------------------------- */
h1
{
font-family: Georgia;
font-weight: normal;
font-size: 2em;
color: #F9F9F9;
}
h2
{
font-family: Georgia;
font-weight: normal;
font-size: 1.5em;
color: #454545;
}
h3
{
font-family: Georgia;
font-weight: normal;
font-size: 1.5em;
color: #812F2F;
}
.rail h2
{
color: #FFD11B;
}
p
{
font-family: Georgia;
font-size: .85em;
color: #454545;
}
.rail p
{
color: #F9F9F9;
}
.content p
{
line-height: 1.5em;
}
ul
{
padding: 0px;
}
li
{
list-style: none;
}
table
{
color: #AFAFAF;
}
td
{
padding: 5px;
padding-top: 2px;
padding-bottom: 2px;
}
.days
{
background: #DCDCDC;
font-weight: bold;
font-size: .75em;
}
.week
{
background: #FFFFFF;
font-size: .75em;
}
.nomonth
{
background: #FAFAFA;
}
#swd_info
{
display: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
position: absolute;
width: 180px;
background-color: #FFFF99;
color: #000000;
border: 1px solid #000000;
padding: 3px;
font-size: 10px;
text-align: justify;
}
This is how it looks in FF, and that is how I would like to to be in FF, and any common browser that the user may be operating: img133.imageshack.us/my.php?image=ffexampletx6.jpg Thank you! Hey guys. You can run an image, a border, text, whatever you want off the top of the page, but can you do it with the bottom of the page. Code:
.top {
position: relative;
left: 0px;
top: -75px;
}
That will of course run an image off the top of the page, but Code:
.bottom {
position: relative;
left: 0px;
bottom: -250px;
}
this line of code will simply but the image relative to the top image and it's completely visible, meaning the user can view the entire image simply by scrolling down. I'm placing my <id>'s in tables right now, but I'm open to whatever. I simply want an image consistently, running off the top of the page and the bottom of the page at all times. Any ideas? Thanks in advance. When I start my page layout, it always starts around an inch down from the top of the browser. Ive seen websites, like techeblog.com that start all the way from the top. How do i do that? Thanks. Dear all I need page height vary from page to page. But I cannot do this , please send your comments for this You can access my css , Other question is , different appear for firefox and IE , some time footer overlap I need to set pages height for their contents, can I do it with one , it is difficult to do all pages for separate styles This is my link "www. kawdoco. com/ test /" Thanks asanka Maybe you guys could tell me why my site is so messed up in IE. http://tabmatic.com/tabmatic/showartist.php?aid=1 2 of the 3 top links are underlined, but aren't supposed to be. The rows in the main area aren't the right height. The images on the sides aren't the right height. If you refresh it after going there, it changes the row heights again. Could anyone tell me what's wrong? |
|||||||