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
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post

    Id truly appreciate input on making this type of layout work on all screens/resolutio

    Hello guys, I'm hoping you can shed some input on how I should properly code this layout to work and look appealing in a variety of screens (wide,square 1024, higher res, etc). Iv pretty much sized things to work at 1024 and up but on real high res or real big screens, there is a lot of wasted space. Also, if people have toolbars on a 1024 screen, obviously things wont fit.

    I Really Really want my main content centered horizontally and vertically (which iv achieved) but I wanted to see if there is something better I can do with the coding to make it look good for most visitors. I want a fluid type layout so its not just a boring design.

    If somebody can take a look. Iv made a very generic layout with boxes to show what Im trying to do. It looks great on my 1600 x 900 laptop display but I know it will look bad for somebody. maybe using min-width's and heights would be helpful? Iv seen a bunch of sites out there with centered content but im not sure what the proper approach is.

    (***please keep in mind, I am not worried about mobile devices, ipads, etc. I have a totally different site that will render on those. This post is about how it appears on regular computer screen)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    	width:100%;
    	height:100%;
    	background-color: #333;
    	margin: 0px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;	
    }
    #header {
    	height: 35px;
    	width: 100%;
    	background-color: #FFF;
    	line-height: 35px;
    	position:fixed;
    	text-align:center;
    	
    }
    #main {
    	height: 400px;
    	width: 980px;
    	margin-top: -200px;
    	margin-left: -490px;
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	line-height: 400px;
    	background-color: #900;
    	text-align: center;
    	
    	
    	
    }
    #footer {
    	line-height: 35px;
    	text-align: center;
    	height: 35px;
    	width: 100%;
    	position: fixed;
    	bottom: 0px;
    	color: #FFF;
    	background-color: #000;
    }
    #logo {
    	line-height: 75px;
    	background-color: #9F6;
    	height: 75px;
    	width: 250px;
    	position: absolute;
    	left: 25px;
    	bottom: 70px;
    	text-align: center;
    }
    </style>
    </head>
    
    <body>
    <div id="header">Header Content Here</div>
    <div id="main">Main Content Here</div>
    <div id="logo">Logo Here</div>
    
    <div id="footer">Foot Content Here (includes navigation links)</div>
    </body>
    </html>
    Last edited by gribbs100; 02-07-2012 at 12:00 AM.


 

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
  •