talksr Posted December 10, 2007 Share Posted December 10, 2007 Hello, I have created a 3 collumn plus masthead web page layout using css exclusively to set the layout. Here is my css code: /* CSS Document */ body, html { margin: 0; padding: 0; font: 11px tahoma, arial, serif; } #container { margin: auto; padding: 0; width: 760px; border: 1px solid #000000; } #header { width: 760px; height: 120px; border-bottom: 1px solid #000000; } #left { width: 180px; float: left; height: 500px; } #middle { width: 398px; float: left; height: 500px; border-left: 1px solid #000000; border-right: 1px solid #000000; } #right { width: 180px; height: 500px; float: left; } br { clear: both; } And here is my html: <!-- HTML document --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="css.css" rel="stylesheet" type="text/css"> <!-- link to css file --> </head> <body> <p> </p> <p> </p> <div id="container"> <div id="header"></div> <div id="left"></div> <div id="middle"></div> <div align="center"></div> <div id="right"></div> <br/> </div> </body> </html> <!-- end of html --> My question is, how can I extend the css to enable an appropriate text only masthead and the center column to appear in print? Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted December 10, 2007 Share Posted December 10, 2007 You can specifically target print media Option 1 - If you use this in your head: <link rel="stylesheet" type="text/css" href="css.css"> <link rel="stylesheet" type="text/css" href="print.css" media="print"> The styles in css.css will also be used for print media. You'll have to override whatever is inappropriate. Option 2 - If you use this in your head: <link rel="stylesheet" type="text/css" href="css.css" media="screen,projection"> <link rel="stylesheet" type="text/css" href="print.css" media="print"> The styles is css.css will only be used for screen or projection media. The styles in print.css will be the only thing styling print media. It's up to you to work out which is most practical in your situation. You'll have to use the appropriate styles in print.css to style your text-only masthead and center column. Rather than using pixel/em/percentage measurements you can use pt and mm. And to remove elements that you don't want to be printed, you just use something like: #left, #right {display:none;} And one more thing, try not to use line-breaks or empty paragraphs to position elements. Just use padding or margin in the css. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.