Jump to content

alignment chnages when i press print screen


hena
 Share

Recommended Posts

hi friends,

 

my webpage works fine with chrome but when i press the print screen(ctrl+p) header alignment changes.

i tried to correct in many ways nothing seems to work.

 

the twist it works fine for all sub menu

 

the alignment problem is only with main main pages(my logo is on right corner it is moving towards center when print)

<!DOCTYPE html><!--using html 5--><html lang="en-US"><head><meta name="description" content="for family safety"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta http-equiv="X-UA-Compatible" content="chrome=1" />         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="index.css" rel="stylesheet" type="text/css" /></head><body><div id="header"><!--starts of header-->	<div id="site_title">	<h2>'IMPROVING HSE AT HOME' site!</h2>	<img class="image_wrapper image_fr" src="images/Logo_lockup.jpg" alt="image" />    <br><br><br>	</div></div> <!-- end of header --><div id="menu"> <!--starts of menu--><nav><ul><li><a href="index1.html">Home</a></li><li><a href="health.html" class="current">Health</a></li><li><a href="safety.html">Safety</a></li><li><a href="environment.html">Environment</a></li></ul></nav></div><!--end of menu--><div id="main"><!--start of main-->  <div class="inner_box last">     <div class="col_w900_last">    	 <div class="col_w420 lp_box float_l">		    <div class="inner_box">                <h2>HEALTH</h2>                   <P class="intro">Due to weather conditions in our Region, d healthy places to live.<br>                   			</div>		</div>		<div class="col_w420 float_r">          	<div class="post_box">            <div class="post_header">			  <img width="400" height="400" src="images/Health_93453718.jpg" alt="Image 001" />               </div> 		</div>	</div> </div></div> </div>  <!--end of main--><div id="footer">   </div> <!-- end of footer --></body></html>		
body {	margin: 0;	padding: 0;	color: #fff;	font-family: Arial;    font-size: 14px;	line-height: 1.5em; 	background-color: #ccc;	background-position: top}h1, h3, h4, h5, h6 { color: #fff; font-weight: normal }h1 { font-size: 34px; margin: 0 0 30px 0; padding: 5px 0; }h2 { font-size: 26px; margin: 0 0 20px 0; padding: 0;line-height: 1.1em; color:rgb(255,221,0); }.cleaner { clear: both }.h10 { height: 10px }.h20 { height: 20px }.h30 { height: 30px }.h40 { height: 40px }.h50 { height: 50px }.h60 { height: 60px }.float_l { float: left }.float_r { float: right }.image_wrapper { 	display: inline-block; 	padding: 0px; 	background: #000; 	margin-bottom: 5px; }.image_fr {position: absolute;top: 0;right: 0%;	float: right;height:100px;width:220px;	margin: 0px 0px 15px 15px; }#header {	clear:both;	height:110px;	margin:0 auto;	background-image:url(images/86930033.JPG);	}#site_title { 		}#site_title h2 {	margin: 0; 	text-align:center;	padding-top: 30px;	font-size:28px;    color:#000;text-shadow:2px 2px #0093d0;			}#menu {	width:960px;	position:relative;	margin: 0px auto;	background:#0093d0;}nav {	position:relative;}#main {	clear: both;	width: 900px;	margin: 0 auto;	padding: 45px 30px 0;	background-color: #54534a;	overflow:hidden;}.col_w900 { width: 900px; padding-bottom: 30px }.col_w420 { width: 420px }.col_allw280 { float: left; width: 280px; margin-right: 30px }.col_w900_last { margin: 0; background: none; }.inner_box { margin-bottom: 50px; padding-bottom: 50px;   }.last { margin: 0; padding: 0; border: none }.post_box { clear: both; margin-bottom: 30px }.post_box .post_header { padding: 10px 0; border: 1px; border-left: none; border-right: none; margin-bottom: 15px }.#footer {		clear: both;	width:900px;    /* padding: 25px 30px 0; */	padding: 45px 30px 15px;	margin: 0 auto;	background-color:#0093d0;	text-align: center;	color:  #fff;	}
Edited by hena
Link to comment
Share on other sites

The size of the paper is not the same as your browser window. If the website is responsive it should adapt to the page properly.

 

Having fixed widths is going to cause problems when the viewport isn't wide enough, such as when printing. You need to use percentage widths and margins instead of pixels.

Link to comment
Share on other sites

The size of the paper is not the same as your browser window. If the website is responsive it should adapt to the page properly.

 

Having fixed widths is going to cause problems when the viewport isn't wide enough, such as when printing. You need to use percentage widths and margins instead of pixels.

i tried with % still its not working.still the logo coming towards center

Edited by hena
Link to comment
Share on other sites

@foxy mod: i tried with % still its not working.still the logo coming towards center

the weird part when i press print screen it works perfectly fine with all sub menu only the main menus has problem that the log moving towards center for all i am using the same css

Edited by hena
Link to comment
Share on other sites

the weird part when i press print screen it works perfectly fine with all sub menu only the main menus has problem that the log moving towards center for all i am using the same css

difference between menu and sub menu is i have form (for checklist) for tat.when i added form in to this alignment works fine but i need a checklist for mu main page .how to solve this

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...