Jump to content
Sign in to follow this  
hena

alignment chnages when i press print screen

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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...