Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Printing webpage changes layout of 2 divs.

    Hi guys, i have just finished coding my home page, i have gone to print it out and on the print preview two divs have swapped positioning.

    I have attached the images, if you look at the 'view all' button and the Copyright div with the email link in, they have swapped places.

    Any help or ANYTHING that shines a light onto this situation would be great!

    I want the view all button to be first then the email link underneath.

    Thanks, Sam.

    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    		<title>RikCatlow.co.uk</title>
    		<link rel="stylesheet" type="text/css" href="main.css" />
    	</head>
    	<body>
    		<div id="container">
    			<div id="hdr">
    				<a href="index.html"><img class="logo" src="images/logo.png" alt="Rik Catlow"/></a>
    			</div>
    			<div id="nav">
    				<ul>
    					<li id="home" class="selected"><a href="index.html"><p>HOME</p></a></li>
    					<li id="process"><a href="process.html">PROCESS</a></li>
    					<li id="about"><a href="about.html">ABOUT</a></li>
    				</ul>
    			</div>
    			<p class="intro">My name is Rik Catlow. I'm a designer & artist originally from Secaucus, NJ, but now live in beautiful Charlotte, NC. Below is recent work that I have for sale.</p>
    			<div id="forsalecontent">
    				<ul>
    					<li><a href="https://www.etsy.com/listing/111310916/grrrl"><img src="images/1.jpg"/><h4>GRRR!</h4><p>$100<span>USD</span></p></a></li>
    					<li><a href="https://www.etsy.com/listing/88901152/workers"><img src="images/2.jpg"/><h4>Workers</h4><p>$100<span>USD</span></p></a></li>
    					<li><a href="https://www.etsy.com/listing/16346148/howling"><img src="images/3.jpg"/><h4>Howling</h4><p>$100<span>USD</span></p></a></li>
    					<li><a href="https://www.etsy.com/listing/19619972/woozy"><img src="images/4.jpg"/><h4>Woozy</h4><p>$100<span>USD</span></p></a></li>
    					<li><a href="https://www.etsy.com/listing/53287681/push"><img src="images/5.jpg"/><h4>Push</h4><p>$100<span>USD</span></p></a></li>
    					<li><a href="https://www.etsy.com/listing/54992568/opening"><img src="images/6.jpg"/><h4>Opening</h4><p>$100<span>USD</span></p></a></li>
    					<li><a href="https://www.etsy.com/listing/113921204/think"><img src="images/7.jpg"/><h4>Think</h4><p>$100<span>USD</span></p></a></li>
    					<li><a href="https://www.etsy.com/listing/9680726/regenerated"><img src="images/8.jpg"/><h4>Regenerated</h4><p>$100<span>USD</span></p></a></li>
    					<li><a href="https://www.etsy.com/listing/71868448/wish"><img src="images/9.jpg"/><h4>Wish</h4><p>$100<span>USD</span></p></a></li>
    					<li><a href="https://www.etsy.com/listing/111310916/grrrl"><img src="images/1.jpg"/><h4>GRRR!</h4><p>$100<span>USD</span></p></a></li>
    					<li><a href="https://www.etsy.com/listing/88901152/workers"><img src="images/2.jpg"/><h4>Workers</h4><p>$100<span>USD</span></p></a></li>
    					<li><a href="https://www.etsy.com/listing/16346148/howling"><img src="images/3.jpg"/><h4>Howling</h4><p>$100<span>USD</span></p></a></li>
    					<li><a href="https://www.etsy.com/listing/19619972/woozy"><img src="images/4.jpg"/><h4>Woozy</h4><p>$100<span>USD</span></p></a></li>
    					<li><a href="https://www.etsy.com/listing/53287681/push"><img src="images/5.jpg"/><h4>Push</h4><p>$100<span>USD</span></p></a></li>
    					<li><a href="https://www.etsy.com/listing/54992568/opening"><img src="images/6.jpg"/><h4>Opening</h4><p>$100<span>USD</span></p></a></li>
    					<li><a href="https://www.etsy.com/listing/113921204/think"><img src="images/7.jpg"/><h4>Think</h4><p>$100<span>USD</span></p></a></li>
    					<li><a href="https://www.etsy.com/listing/9680726/regenerated"><img src="images/8.jpg"/><h4>Regenerated</h4><p>$100<span>USD</span></p></a></li>
    					<li><a href="https://www.etsy.com/listing/71868448/wish"><img src="images/9.jpg"/><h4>Wish</h4><p>$100<span>USD</span></p></a></li>
    					<li><a href="https://www.etsy.com/rikcat" class="viewallwidebutton">View All</a></li>
    				</ul>
    			</div>
    			<div id="ftr">
    				&copy;2012 Rik Catlow - <a href="mailto:rik.catlow@gmail.co.uk">rik.catlow@gmail.co.uk</a>
    			</div>
    		</div>
    	</body>
    </html>
    CSS
    Code:
    * {
    	padding: 0;
    	margin: 0;
    }
    
    img{border: 0;}
    
    body{
    	text-align: center;
    	font-family: helvetica, arial;
    	font-size: x-large;
    }
    
    #container{
    	width: 740px;
    	margin: 20px auto 0;
    }
    
    #hdr{
    
    }
    
    img.logo {
    	padding-bottom: 30px;
    }
    
    #nav{
    	border-bottom: solid 1px #999;
    }
    
    #nav ul{
    	list-style-type: none;
    }
    
    #nav ul li{
    	display: inline-block;
    	margin-left: 20px;
    	height: 40px;
    	line-height: 37px; /****** MODIFY TO ADJUST GAP ABOVE UNDERLINE ******/
    }
    
    #nav ul li:first-child{margin-left: 0px;}
    
    #nav ul li#home { margin-left: 13px;}
    #nav ul li#process {}
    #nav ul li#about {}
    #nav ul li.selected p{border-bottom: 3px solid #999; font-weight: bold;}
    
    #nav ul li a{
    	text-decoration: none;
    	display: block;
    	color: black;
    }
    
    #nav ul li a:hover{
    	color: #999;
    }
    
    .intro{
    	text-align: left;
    	font-size: 90%;
    	line-height: 25pt;
    	padding: 40px 0;
    }
    
    #forsalecontent{
    	font-size: 80%;
    	padding-bottom: 10px;
    	width: 714px;
    	margin: 0 auto;
    	overflow: auto;
    }
    
    #forsalecontent h4{margin-left: 7px; text-align: left; font-size: 95%;}
    #forsalecontent p{margin-left: 7px; text-align: left; font-size: 80%}
    #forsalecontent span{color: grey; font-size: 75%}
    #forsalecontent ul li img {margin-top: 7px;}
    #forsalecontent ul{list-style-type: none;}
    #forsalecontent ul li{}
    #forsalecontent ul li a{
    	text-decoration: none;
    	color: black;
    	margin: 0 3px 9px;
    	display: block;
    	border: 1px solid #ddd;
    	border-radius: 2px;
    	width: 230px;
    	height: 210px;
    	float: left;
    }
    #forsalecontent ul li a:hover{box-shadow: 0 1px 3px #ddd; border: 1px solid #bbb;}
    #forsalecontent ul li a.viewallwidebutton{width: 706px; height: auto; margin-top: 15px; line-height: 40px;}
    
    #ftr{
    	color: grey;
    	font-size: 75%;
    	padding-bottom: 30px;
    }
    
    #ftr a{
    	color: grey;
    	text-decoration: none;
    }
    
    #ftr a:hover{text-decoration: underline;}
    Attached Thumbnails Attached Thumbnails Printing webpage changes layout of 2 divs.-untitled-1.jpg  


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •