CSS - Alternate Printer Friendly Page In Frames

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

Hello,

Is it possible to create a CCS stylesheet that will not only produce a printer-friendly HTML page, but create that page in the form of columns like a newsletter?

What I don't want are columns like a web page, that simply read straight down to the end of the page, giving little regard to the fact that text in column one extends to the next page before continuing to subsequent columns.

I want the text to read down from the left column to the right column, and then continue to each subsequent page, always reading from the left column to the right column--just like a newsletter.

I know I can use PDF, but I find those file huge and combersome, and would prefer to create this in HTML & CSS if possible.

I searched this board using "printer version" & columns, and when I found nothing I searched just "printer version" and found nothing. I could search just using columns, but wading through several postings about creating columns for a screen doesn't seem productive.

Thanks in advance. Angie

Hey all,
I have a webpage w/a top, left column, and content column. The page has been designed using CSS. Is there anyway to load a seperate HTML page (of which I have no control) in my content column and keep the top (and possibly left) columns in place? Is there a way to do this w/CSS? (Basically I want frame functionality using CSS).

So far my instincts say no... but before I spend too much time on solution I thought I'd check here.

Thanks!
BB

what I am wanting to do is have a reverse of this so that all the areas i contain within a given <div class="printerOnly"></div> is not shown on the screen but is ready to be printed, when the print button is pressed of course. and all the other areas are not printed.

is this possible ?
Code:

<style type="text/css">
@media all {
  .page-break { display: none; }
}

@media print
{
  .page-break { display: block; page-break-befo  always; }
}

@media print {
	div.screenOnly { display: none; }
}
@media print {
	div.noborder { border-width: 0px;  border-style: none; }
}

</style>


<div class="screenOnly">
this shows on the screen
</div>

<div>this is printed</div>

Is there a way to use CSS to format printer output specifically for a sheet of paper such that page breaks can be formatted in at specific points?

Hi all,

i have sum problem in css, want to create alternate
tr(row) color appear in dynamic table creation ,
and it shoul be pure css code.

hlp me if any one !
tanks

What i am trying to do is when the user tries to print out the HTML document, then the printer prints out what is in this:

<link rel=alternate media=print href="printthis.doc">

It works in IE but it doesn't work in Mozilla Firefox.

Does anyone know a way on how this is done in Mozilla Firefox or even both...??

Cheers,

Jackson

Hi All,

I'm rejigging an intranet site to make its display context specific. So when you log in from Branch Office 1 you see one thing and from Branch Office 2, you see something else. Part of the rejig is to give each Branch Office its own colours and icon set.

I'm using a set of alternate links, (e.g. <link href="branch1.css" rel="alternate stylesheet" type="text/css" title='B1' /> ) for the non-structural css. These contain all the new colours and background images. However, the main css still contains the original colours and images. My intent is for the alternate stylesheets to override the main css. To be sure this happens, they are included after the main.css

Mostly things work fine. But I have an odd problem with html element that have multiple classes.

Code:

<div class=" gateway gwWarmfuzzies ">
  <h3><a href="warmfuzzies/">Warm Fuzzies</a></h3>
  <p>Help celebrate some of our colleagues' achievements.</p>
</div>

This is in main.css:
Code:

div.gateway {
	padding-left: 95px;
	width: 195px;
	float: left;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: top left;
	margin: 1em 5px 8px 0;
	height: 67px;
}

.gwWarmfuzzies {
	background-image: url(../i/gf/warmfuzzies.gif);
}

.gwWarmfuzzies should be overridden by one of the alternate stylesheets.
Code:

.gwWarmfuzzies {
	background-image: url(../i/gf/ BRANCH1 /warmfuzzies.gif);
}

The alternate version of gwWarmfuzzies is completely ignored. I've tried removing the main.css version of gwWarmfuzzies. When I do that, no background-image is applied at all.

This does not happen when the element has a single class, only with multiple classes.

Advice?

I have this proplem on my site where it looks perfect in IE but in Fire Fox it looks like cr@p.
http://www.bf2editor.org/

I want my CSS to look the same way on Fire Fox how can I fix this? This is my CSS doc

Code:

a:link    {color: black; text-decoration: underline}
a:visited {color: black; text-decoration: underline}
input {font-size: 12px; font-weight: bold;}



body      {
background-color: 000000; 
margin:0;
padding:0;
line-height: 1.5em;
}
hr         {color: black}

.top{

clear: left;
width: 100%;
background-image: 
url('bar2.png');
background-repeat: repeat-x
color: #FFF;
text-align: center;
font-style: arial;
font-family: arial;
}

.top2{

clear: left;
width: 100%;
background-image: 
url('bar2.png');
background-repeat: repeat-x
color: #FFF;
text-align: center;
font-style: arial;
font-family: arial;
}

.top3{

clear: left;
width: 100%;
background-image: 
url('bar2.png');
background-repeat: repeat-x
color: #FFF;
text-align: center;
font-style: arial;
font-family: arial;
margin-top: -48;
}



div#news
{
   background-color: E5E5E5;
   width: 140px;
   margin-top: 30;
   margin-left: 22;
}

div#login
{
   background-color: E5E5E5;
   width: 140px;
   margin-left: 22;
   margin-top: 2;
}

div#about
{
   background-color: #CCCCCC;
   width: 797px;
   height: 500;
   margin-top: -2;
   margin-left: 52;
}


div#who
{
   background-color: E5E5E5;
   width: 140px;
   margin-left: 22;
   margin-top: 2;
}

}

div#info
{
   background-color: 898989;
   width: 600px;
   margin-top:  1cm;
   margin-left: 4cm;
}
   div#info h2 { background: url( bar.png ); color: #ffffff; 
background-repeat: repeat-x;
}
   div#p { }


/*Page Layout*/



#maincontainer{
width: 969px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}


#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 100px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 160px; /*Width of left column*/
height: 836px;
margin-left: -990px; /*Set left margin to -(MainContainerWidth)*/
background: #898989;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

Quote:
Dan Cederholm of SimpleBits:

It's important to note that the cascading effect of CSS still applies, and alternate style sheets work just like any other style sheet, in that only common rules are overridden when the alternate styles are active. So if we had layout, positioning, and other site-wide rules in default.css that weren't repeated in the alternate style sheets, those default rules would still work.


I'm making a site that has a default stylesheet with a fixed layout and an alternative one with a fluid layout. The problem I'm having is the alternative sheet not inheriting css from the default stylesheet even though the rules are not overridden.

At the moment, my alternative stylesheet is an exact copy of the original (everything included) with only 3 width values changed to percentages. Theoretically, I should be able to only include these three rules alone in the alt sheet, as rules are carried over from the default sheet unless overridden.

However, when I do try to reduce the alt sheet to just:

Code:

#container { width: auto; }

#main { width: 65%; }

#navbar { width: 30%; }

all unincluded formatting is lost.

Am I doing something wrong?

Cheers, Sam.

Hi, i wonder how to get a table behav like this (example: http://help.live.com) what is this layout called??? css frames? or something else? only css can do the job or we will need javascript as well??? You got link to ne tutorial or ne working example?? please help

thnx

Hi everyone,

I am in the midst of converting my fathers website from an old frames based version into a CSS version, and I have had some trouble getting it working properly in both firefox and ie explorer. I would really appreciate if anyone could give me some advice!

The original page is he
http://www.qualspec.com.au

I have started by just trying to replicate the frames look with css, and have come up with this single page:

http://www.qualspec.com.au/test/testid.html

It seems to work well in internet explorer, but as soon as I load up firefox, it looks ugly as hell (I was using topstyle which uses IE as the internal css and html preview). Can anyone help me out here?

Thanks in advance!

Regards,
Thomas.

Having issues with this. I need this page & cross browser

--------------------
- W-100% H-121px - <--- non-Scrolling
--------------------
-#############- <--- W - 100px
-#############- <--- H - auto
-#############- <--- Scrolling
-#############-
--------------------

Im using frames now, it was a quick fix. for what I needed. now I got to get away from from them.

I need this to be full screen and resizeable

Thanks for any help you can offer

Thanks

Hi:

What I need to do is to have a 3 column design, left column should contain the navigation and the center main content. When the user clicks on the navigation boutton it should bring a set of thumnails of images in the right column. And clicking on any thumbnail should bring a larger image and detail of that image in the center column. I could do this using frames but I want to avoid using frames. I never used CSS before and read lot about positioning layers but couldn't quite figure out how I can target the links to open in the same page as I wanted. The way I have it opens in a new window which is not what I wanted. I want the navigation, center and right column to be visible all the time. What should I do in the following html or CSS to achieve that.

Code:

<html>
<head>
<title> Testing</title>
<link rel="stylesheet" type="text/css" href="./test.css">

<script language="javascript">
new Image().src="./QTimages/image2b.jpg";
</script>

</head>

<body>

<div id="header">

<img src="../QTimages/banner8.jpg"
 width="300" height="50" alt="header image">
</div>

<div id="menu">
<br><br><br><br><br><br><br>
<a href="./images.html"><img name="imagebutton" id="imagebutton" src="../QTimages/image2.jpg" onMouseOver="document.images['imagebutton'].src='../QTimages/image2b.jpg'" onMouseOut="document.images['imagebutton'].src='../QTimages/image2.jpg'" border="0"background="transparent"></a>
</div>

<div id="content">
<h1>Welcome to my site...</h1>
</div>

<div id="thumbnail">
Testing
</div>

</body>
</html>

CSS code:

Code:

#header { position: absolute; top: 0px; left: 350px; }
#menu {  position: absolute; top: 0px; left: 10px;
  width: 0px; height: 100%;}


#content { position: relative; top: 60px; left: 180px;
  width: 80%; height: 100%; background-color: #FFFAAA;
  color: #000EED"}

#thumbnail { position: absolute; top:50px; right:0px;
  height: 100%;
  background-image: url("../QTimages/background.jpg");
background-repeat: repeat-y
z-index: 3;
}

And also the right column is not positioning right.. Any help is greatly appreciated. Thanks

mayflower

I've seen several examples of how to emulate frames using CSS, but I haven't seen anywhere explain how to create "frames" without having to add the entire frame code to every page in which it appears. With frames, I used to be able to create a menu which would appear throughout my site. I would modify the one, single menu.html file, and the changes would be visible throughout the site. How can I do this using the CSS-emulated frames?

Thanks