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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Website layout varies in different resolutions

    Hi all,
    I'm a new HTML/CSS coder. After starting on a website, I saw that in different resolutions or if I resized the page, different parts of the website would be moved around. I've spent a while now looking for the fix, but often I don't understand what I have to change or I don't know how to go about doing so.

    I'd like the website to be like this or google, or a lot of others, where it shows full screen no matter what resolution but then you can resize it and use the scrollbars to move around.

    Thanks in advance for the help, my source code is below

    .html file
    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    		<title>MainPage</title>
    		<meta name="description" content="">
    		<meta name="author" content="Zach">
    
    		<meta name="viewport" content="width=device-width; initial-scale=1.0">
    
    		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
    		<link rel="shortcut icon" href="/favicon.ico">
    		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
    		<link rel="stylesheet" type="text/css" href="MainPageStyleSheet.css"/>
    	</head>
    
    	<body>
    		<header>
    			<div id="banner">
    				<ul>
    					<li>
    						<a href="http://www.google.com" class="leftnav">Home</a>
    					</li>
    					
    					<li>
    						<a href="http://www.google.com" class="leftnav">About</a>
    					</li>
    					
    					<li>
    						<a href="http://www.google.com" class="rightnav">Games</a>
    					</li>
    					
    					<li>
    						<a href="http://www.google.com" class="rightnav">Donate</a>
    					</li>
    				</ul>
    			</div>
    			<div id="header">
    				<h1>Pizza Pie Studios</h1>
    			</div>
    		</header>
    
    		<footer>
    			<div>
    				&copy; Copyright  by Pizza Pie Studios
    			</div>
    		</footer>
    	</body>
    </html>
    .css file
    Code:
    body {
    	width: 1415px;
    	height: 800px;
    }
    
    h1 {
    	color: #3B3B3B;
    	font-family: Verdana;
    	text-align: center;
    }
    
    #container {
    	min-width: 800px;
    	margin: 0 auto;
    	margin-top: 1%;
    }
    
    #header {
    	width: 25%;
    	height: 50px;
    	border-bottom-right-radius: 10px;
    	border-bottom-left-radius: 10px;
    	background-color: #FAAB00;
    	margin: auto;
    	position: relative;
    	top: -65px;
    	box-shadow: 0px 8px 5px #888;
    }
    
    footer {
    	width: 100%;
    	position: fixed;
    	margin: auto;
    	bottom: 0px;
    }
    
    footer div {
    	text-align: center;
    	font-family: Verdana;
    	color: #3B3B3B;
    	width: 25%;
    	height: 30%;
    	border-top-right-radius: 10px;
    	border-top-left-radius: 10px;
    	background-color: #FAAB00;
    	margin: auto;
    	box-shadow: 0px -8px 5px #888;
    }
    
    #banner {
    	width: 99%;
    	height: 50px;
    	background-color: #FFAE00;
    	position: relative;
    	top: -5px;
    	box-shadow: 0px 5px 5px #888;
    	border-radius: 5px;
    }
    
    ul {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    
    li {
    	display: inline;
    }
    
    a:hover {
    	color: red;
    }
    
    .leftnav {
    	color: #3B3B3B;
    	position: relative;
    	text-decoration: none;
    	font-family: Verdana;
    	font-weight: bold;
    	font-size: 30px;
    	padding-left: 125px;
    	right: 35px;
    	top: 5px;
    }
    
    .rightnav {
    	color: #3B3B3B;
    	position: relative;
    	text-decoration: none;
    	font-family: Verdana;
    	font-weight: bold;
    	font-size: 30px;
    	padding-left: 125px;
    	left: 400px;
    	top: 5px;
    }

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    369
    Thanks
    2
    Thanked 26 Times in 26 Posts
    Set all the width and margins as percentage. then the minimum width at which the=ins get out of control and set that as the min-width for the body. Then you can experiment and tweak it a little for fine control.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #3
    New Coder
    Join Date
    Apr 2011
    Location
    California
    Posts
    52
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Here are some of the more common screen resolutions I've encountered on my sites lately. Your site's mileage may vary, since it probably caters to a different audience. thesitewizard.com tends to have a lot more technically-savvy visitors, resulting in a number of people using the higher resolution screens.

    800x600
    1024x768
    1280x800
    1400x900
    1680x1050
    There are of course other resolutions. For example, some monitors come with a 1280x1024 resolution while others have a default resolution of 1920x1200. I've also omitted 640x480 from the list since few people appear to use such monitors nowadays.
    App Developer, Front End Designer and Learner at>> Facebook App Development Company - Cygnis Media


  •  

    Posting Permissions

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