Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Mar 2015
    Posts
    1
    Member #
    48465

    Print style sheet

    I wanna create a print style sheet (css).
    I want to know how i would changes the font for all non-heading text to Times New Roman and i want to remove the borders and box shadow from the left column/section
    that is in the html file.
    All when the page is printing. I also am looking to add a media query so that way when the user’s max display area (the browser window) width is 480 pixels,
    the width of both the left column/section and the right column/aside are both 100%.
    I dealt with css and html, this print style is all new to me. HTML code is below. I know you have to link the html with the print.css, which i did.


    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="ISO-8859-1">
    <!-- Apple Bavarian Torte
         Author: Thomas Arnold
    	 Date:   02/06/2015
    -->	 
        <title>Apple Bavarian Torte</title>
    	<script src="modernizr-1.5.js"></script>
    	
    	<link href="dessertstyles.css" rel="stylesheet" type="text/css" />
    	<link href="print.css" rel="stylesheet" media="print" />
    	 
    </head>
    
    <body>
    <header> 
    <h1><img src="dessertweb.jpg" alt="dessertWeb" /></h1>
    </header>
    <section>
    <h1>Apple Bavarian Torte &#9733&#9733&#9733&#9733</h1>
    <img src="torte.jpg" width=250 alt="Torte image" /> 
    
    
    <p>A classic European torte baked in a springform pan. Cream cheese, sliced almonds, and apples make this the perfect holiday treat (12 servings).</p>
    <section><h2>INGREDIENTS</h2>
    <ul>
     <h2><ul><li>&#189 cup butter</li>
      <li>&#8531 cup white sugar</li>
      <li>&#188 teaspoon vanilla extract</li>
      <li>1 cup all-purpose flour</li>
      <li>1 (8 ounce) package cream cheese</li>
      <li>&#188 cup white sugar</li>
      <li>1 egg</li>
      <li>&#189 teaspoon vanilla extract</li>
      <li>6 apples - peeled, cored, and sliced</li>
      <li>&#8531 cup white sugar</li>
      <li>&#189 teaspoon ground cinnamon</li>
      <li>&#188 cup sliced almonds</h2></ul></li>
    </ul>
    <h2>DIRECTIONS</h2>
    
     <h2><ol><li>Preheat oven to 450 &deg F (230 &deg C).</li>
      <li>Cream together butter, sugar, vanilla, and flour.</li>
      <li>Press crust mixture into the flat bottom of a 9-inch springform pan. Set aside.</li>
      <li>In a medium bowl, blend cream cheese and sugar. Beat in egg and vanilla. Pour cheese mixture over crust.</li>
      <li>Toss apples with sugar and cinnamon. Spread apple mixture over all.</li>
      <li>Bake for 10 minutes. Reduce heat to 400 &deg F (200 &deg C) and continue baking for 25 minutes.</li>
      <li>Sprinkle almonds over top of torte. Continue baking until lightly browned. Cool before removing from pan.</h2></li>
     </ol>
      </section>
     
    <aside><h1>REVIEWS</h1>
    <p>&#9733&#9733&#9733&#9733</p>
    <p><blockquote>I loved the buttery taste of the crust which complements the apples very nicely.</blockquote></p>
    <p><cite>&#151Reviewed on Sep. 22, 2014 by MMASON.</cite></p>
    <p>&#9733&#9733</p>
    <p><blockquote>Nothing special. I like the crust, but there was a little too much of it for my taste, and I liked the filling but there was too little of it. I thought the crunchy apples combined with the sliced almonds detracted from the overall flavor.</blockquote></p>
    <p><cite>&#151Reviewed on Sep. 1, 2014 by GLENDACHEF.</cite></p>
    <p>&#9733&#9733&#9733&#9733&#9733</p>
    <p><blockquote>Delicious!! I recommend microwaving the apples for 3 minutes before baking, to soften them. Great dessert - I'll be making it again for the holidays.</blockquote></p>
    <p><cite>—Reviewed on August 28, 2014 by BBABS.</aside></cite></p>
    </body>
    </html>

  2.  

  3. #2
    Junior Member PeterG11's Avatar
    Join Date
    Mar 2015
    Location
    RI
    Posts
    3
    Member #
    48625
    Hello, would be glad to help you. Is this website online? What is the address? I would suggest using Firebug editor for Firefox to play with your CSS. But, it looks like all your non-heading texts in your HTML are <p> and <li>. So in your print.css file you can override any CSS with the !important tag, that is if you need to use your other stylesheets to maintain certain styles.

    Such as:

    p, li { font-family: "Times New Roman", Sans-Serif !important; }

    To remove the border you can do the same thing assuming that <ul> is your left column

    ul { border:none !important; box-shadow: none !important; }

    In your media query do something like this, again assuming ul is your left column and ol is your right. You usually do not need !important for media queries but it sometimes can help.

    @media (max-width: 480px) {

    ul, ol { width:100%; }

    }

  4. #3
    Banned
    Join Date
    Feb 2015
    Posts
    100
    Member #
    42499
    Liked
    4 times
    body {
    font-family: Georgia, serif;
    background: none;
    color: black;
    }
    #page {
    width: 100%;
    margin: 0; padding: 0;
    background: none;
    }
    #header, #menu-bar, #sidebar, h2#postcomment, form#commentform, #footer {
    display: none;
    }
    .entry a:after {
    content: " [" attr(href) "] ";
    }
    #printed-article {
    border: 1px solid #666;
    padding: 10px;
    }

    This is how you can create a print style sheet.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:40 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com