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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jun 2010
    Posts
    163
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Content moving when screen resizes

    Hi, I am currently creating the template for a website I am working on. When I resize the window, the Links and the top right image move out of place. I need these to stay in place no matter what size the window is or what resolution is using. What am I doing wrong?

    Here's my code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta name="description" content="Bed Bug & Dust Mite Services - Mattress Doctor">
    <meta name="keywords" content="bed,bug,dust,mite,mattress,cleaning,service,doctor,saint,george,utah">
    <meta name="author" content="Mattress Doctor - We clean mattresses to destroy and remove dust mites and bed bugs!">
    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
    <title>Mattress Doctors</title>
    <link rel="stylesheet" type="text/css" href="styles/style.css">
    <style type="text/css">
    #header{
    	height: 130px;
    	background:url(../img/header.gif);
    	width: 100%;
    }
    #headleft{
    	width: 40px;
    	height: 130px;
    	background:url(../img/header.gif);
    	float: left;
    }
    #logo{
    	width: 222px;
    	height: 130px;
    	text-align: center;
    	position: relative;
    	overflow: hidden;
    }
    #slogan{
    	width: 602px;
    	height: 130px;
    	float: left;
    }
    #schedule{
    	position: absolute;
    	right: 0px;
    	top: 20px;
    	width: 200px;
    	height: 130px;
    	text-align: center;
    	overflow: hidden;
    }
    #nav{
    	position: absolute;
    	top: 130px;
    	width: 100%;
    	height: 40px;
    	background:url(../img/nav.gif);
    	text-align: center;
    }
    #link{ 
    	float: left;
    }
    #container{
    	height: 600px;
    	background:url(../img/bg.gif);
    }
    body{
    	font-weight: bold;
    	margin: 0px auto;
    }
    img{
    	border: none;
    }
    </style>
    </head>
    <body bgcolor="#ffffff">
    
    <!-- Header -->
    <div id="header">
    	<div id="headleft"></div>
    	<div id="logo"><img src="img/logo.png" alt="Mattress Doctors"></div>
    	<div id="slogan"></div>
    	
    	<div id="schedule">1-800-Bug-Free<br><a href="schedule.php"><img src="img/schedule.png" alt="Schedule Service"></a></div>
    </div>
    
    <!-- Nav -->
    <div id="nav">
    	<a href="home.php"><img src="img/home.gif"></a>
    	<a href="problem.php"><img src="img/problem.gif"></a>
    	<a href="solution.php"><img src="img/solution.gif"></a>
    	<a href="process.php"><img src="img/process.gif"></a>
    	<a href="faq.php"><img src="img/faq.gif"></a>
    	<a href="contact.php"><img src="img/contact.gif"></a>
    </div>
    
    <!-- Content -->
    <div id="container">
    
    
    
    
    </div>
    
    <!-- Footer -->
    <div id="footer">
    
    
    </div>
    
    
    
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Oct 2010
    Location
    Portsmouth, UK
    Posts
    32
    Thanks
    1
    Thanked 1 Time in 1 Post
    by saying you want them to stay in place do you mean you want them as static?
    because at the moment they are dynamic?

  • #3
    Regular Coder
    Join Date
    Jun 2010
    Posts
    163
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Basically I need it to be fluid. Yes I think static is what I need. Right now, for example, this one image will be on the top right, but when the screen resizes, instead of just hiding the image because the window is too small, it moves the image onto the next line.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    If I understand you correctly, you should look into fluid layouts. Instead of using pixels for widths and heights of elements, percentages work much better.


  •  

    Posting Permissions

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