灵活或居中的HTML CSS [英] flexible or centered page HTML CSS

问题描述

我必须使用灵活或居中的页面设计，即使用户的屏幕分辨率为800 * 600。当我让我的页面更小，元素是移动和改变他们的位置。对于灵活的或居中的页面是正常的吗？

页面的CSS代码;

 
 code> body {
 margin-left：auto; 
 margin-right：auto; 
 text-align：center;} 
 
 div.header {
 padding-top：1pc; 
 text-align：center; 
 width：100％; 
 color：＃000000;} 
 
 div.header h1 {
 color：＃493831; 
 padding-bottom：30px; 
 margin：0;} 
 
 div.menu {
 list-style：none; 
 margin：0; 
 padding：0; 
 width：100％; 
 text-align：center; 
 background：＃FBB117;} 
 div.menu ul {
 font-size：14px; 
 margin-left：auto; 
 margin-right：auto; 
 margin-top：3px; 
 margin-bottom：3px; 
 width：100px 
 padding：0; 
 display：inline-block;} 
 div.menu li {
 display：inline; } 
 div.menu li a {
 text-decoration：none; 
 padding：7px 0; 
 width：100px; 
 background：＃FBB117; 
 color：＃4C4646; 
 float：left; 
 text-align：center; 
 border-left：1px solid #fff;} 
 div.menu li a：hover {
 background：＃a2b3a1; 
 color：＃000} 
 
 
 div.sidebar {
 padding-top：2pc; 
 margin-right：15％; 
 margin-left：15px; 
 text-align：center; 
 float：right; 
 width：200px; 
 color：＃000000; 
 list-style：none; } 
 div.sidebar ul {
 font-size：14px; 
 margin-left：auto; 
 margin-right：auto; 
 margin-top：3px; 
 margin-bottom：3px; 
 padding：0; 
 list-style：none; 
 display：inline-block; } 
 div.sidebar li {
 display：inline; } 
 div.sidebar li a {
 text-decoration：none; 
 padding：10px 0; 
 width：100％; 
 background：＃FBB117; 
 color：＃4C4646; 
 float：right; 
 text-align：center; 
 border-bottom：1px solid #fff;} 
 div.sidebar li a：hover {
 background：＃a2b3a1; 
 color：＃000} 
 
 div.content {
 width：80％; 
 padding-top：2pc; 
 text-align：left; 
 margin-left：15％; 
 margin-right：300px; 
 color：＃000000} 
 div.content p {
 font-weight：lighter; 
 color：＃493831; 
 padding-bottom：30px; 
 margin：0;} 
 
 
 div img.bw {
 float：left; 
 margin-right：15px; 
 width：200px; 
 height：200px; } 
 
 div img.map {
 float：right; 
 margin-right：15px; 
 width：300px; 
 height：100px; } 
 
 div.footer {
 padding：100px; 
 text-align：center; 
 height：100px; 
 color：＃000000} 
  

解决方案

方法来控制当您尝试限制大小限制时，您的页面正在发生什么是分配不同的样式表以更改网站的分辨率。这些将针对使用不同分辨率访问您网站的用户。

http://css-tricks.com/resolution-specific-stylesheets/ ：提供的链接

这个问题困扰了很多设计师很长一段时间，在90年代，当流体布局都是愤怒这个问题必须克服。

请注意，随着移动设备的开发和不断增长的使用情况来查看网页，制作您的网站的移动版本，这也是采取的方法。 p>

在此过程中，您将应用一个全新的网页布局，以充分利用可用空间。此外，如果用户浏览器不支持此声明，那么他们仍然可以查看您的网站....每个人都是赢家。

I have to use a flexible or centered page design that works even for users screen resolutions of 800*600. When I make my page smaller, the elements are moving and changing their positions. Is it normal for flexible or centered page? If it is not how is supposed to be?

CSS code for the page;

body {
             margin-left: auto;
             margin-right: auto;
             text-align:center;}

 div.header {
     padding-top: 1pc;
     text-align:center;
     width:100%;
     color: #000000;}

 div.header h1 {
color: #493831;
padding-bottom: 30px;
margin: 0;}

 div.menu { 
    list-style:none; 
    margin:0; 
    padding:0; 
    width:100%;
    text-align:center;
    background:#FBB117;} 
 div.menu ul{ 
    font-size:14px;
    margin-left: auto;
    margin-right: auto; 
    margin-top: 3px;
    margin-bottom: 3px;
    width: 100px 
    padding:0;
    display:inline-block;} 
 div.menu li{ 
    display:inline; } 
 div.menu li a{ 
    text-decoration:none; 
    padding:7px 0; 
    width:100px; 
    background:#FBB117; 
    color:#4C4646; 
    float:left; 
    text-align:center; 
    border-left:1px solid #fff;}  
 div.menu li a:hover{ 
    background:#a2b3a1; 
    color:#000 } 


 div.sidebar {
     padding-top: 2pc;
     margin-right: 15%;
     margin-left: 15px;
     text-align:center;
     float: right;
     width: 200px;
     color: #000000;
     list-style:none; }
 div.sidebar ul{
     font-size:14px;
     margin-left: auto;
     margin-right: auto; 
     margin-top: 3px;
     margin-bottom: 3px;
     padding:0;
     list-style: none;
     display:inline-block;  }
 div.sidebar li{
     display:inline; }
 div.sidebar li a{ 
    text-decoration:none; 
    padding:10px 0; 
    width:100%; 
    background:#FBB117; 
    color:#4C4646; 
    float:right; 
    text-align:center; 
    border-bottom:1px solid #fff;}  
 div.sidebar li a:hover{ 
    background:#a2b3a1; 
    color:#000 } 

 div.content {
     width:80%;
     padding-top: 2pc;
     text-align:left;
     margin-left: 15%;
     margin-right: 300px;
     color: #000000 }
 div.content p {
font-weight: lighter;
color: #493831;
padding-bottom: 30px;
margin: 0;}


 div img.bw {
     float:left;
     margin-right:15px;
     width:200px;
     height:200px; }

 div img.map {
     float:right;
     margin-right:15px;
     width:300px;
     height:100px; }

 div.footer {
     padding: 100px;
     text-align:center;
     height: 100px;
     color: #000000 }

解决方案

The best method to control what is going on with your page when trying to limit size restrictions is to assign different stylesheets to change the site subject to resolution. These will be for users that are accessing your site using different resolutions.

http://css-tricks.com/resolution-specific-stylesheets/: link provided

This issue has troubled many designers for a long time and back in the 90s when fluid layouts were all the rage this problem had to be overcome.

Bare in mind that with the development and growing usage of mobile devices to view webpages, making a mobile version of your site then this is also the method to take.

In doing this you are applying a totally new layout of your webpages to make best use of the available space. Also, if a users browser does not support this declaration then they will still be able to view your site.... Everyone is a winner.

这篇关于灵活或居中的HTML CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！