0

私のコンピューターでは、見た目は完璧です。17インチです。

私は別のコンピューターのwww.hrcprojectconsulting.comで開発中の自分のWebを見に行きました。古い画面は1080x600だと思います。

右側のパネルがその位置から外れ、中央のコンテナを取りました

私はそれを包む一つのメインコンテナ、左のコンテナ、中央のコンテナ、そして右のコンテナとして考えました。メインコンテナをマージンの中央に配置しました：0 auto; そしてそれはすべて良さそうだった。それから私はあなたが見るであろう青い縞である旗を持っていなければなりませんでした：

これは、すべてのページの私の青写真です。

<link rel="stylesheet" href= "<?php echo base_url() ?>css/style.css" />
<script type ="text/javascript" src="<?php echo base_url()?>js/1.8.js"></script>




    <div id = "contenedor_principal">

    main wrapper
    <div id = "left_container">
    content for left panel
    </div>


     <div id="container-center"><!-- 1 -->

センターパネルのコンテンツ

     </div> <!-- end of container center 1 -->

    <div id = "right_container">

    and for the right panel
    </div>
    </div>

これはヘッダーです：

<!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 profile="http://gmpg.org/xfn/11">
    <link rel="stylesheet" href= "<?php echo base_url() ?>css/main_style.css" />        
    <link rel="stylesheet" href= "<?php echo base_url() ?>css/webform.css" />
    <script type ="text/javascript" src="<?php echo base_url()?>js/1.8.js"></script>



</head>

<div id="header" class = "header"><h1 class="header">Real Estate Worldwide</h1>


<body>

そしてこれはCSSです：

#contenedor_principal
{

    background:orange;
    width:1040px;
    margin: 0 auto;

}   



    div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#FFFFFF;

}

#container-center{

  width:635px; /*** Set to = center col width ***/
  height:500px;

  font-size:8px;
  display:inline;
  position:absolute;
    left:485px;
    top:80px;

/* \*/
  margin-left:-1px;
/* Hidden from IE-mac */
}


#left_container{
  width:200px; /*** Set to = center col width ***/

  height:500px;
  float:right;
  margin-right:0px;
  font-size:8px;
  display:inline;
  position:absolute;
    left:275px;
    top:80px;

/* \*/
  margin-left:-1px;
/* Hidden from IE-mac */
}

#right_container{
  width:202px; /*** Set to = center col width ***/
  margin-left:0px;
  height:600px;
  float:right;
  font-size:8px;
  display:inline;
  position:absolute;
  right:260px;
  background:url('../assets/uploads/miweb/bg_body.png');
        background-repeat:repeat-x;
  top:80px;

/* \*/
  margin-left:-1px;
/* Hidden from IE-mac */

}



#header {

    float:inherit;
    background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
    font-family: 'trebuchet ms',geneva,arial,tahoma,sans-serif;
    font-size: 10px;
    margin: 0 auto;
    margin-top: 2px;
    padding: 0;
    width: 1050px;
    height:75px;
    h2 {color:#ffffff;}


}

とにかく私が言ったように私のウェブ上でライブで見ることができるより。1660 x900および17"を使用していますが、どの解像度と画面でも表示できるはずです。

なぜそれがすべて逆さまになったのかについての手がかりはありますか？

ありがとうございました

4

2 に答える 2

1

使用しているレイアウトが間違っています。position: absoluteすべてのdivに使用してから、上部と左側を設定する必要はありません。

その代わりに、以下の構造に従ってください。

HTML

<html>
    <head>
        <title>Website</title>
    </head>
    <body>
        <div id="container">
            <div id="header"></div>
            <div id="content">
                <div id="left_content"></div>
                <div id="middle_content"></div>
                <div id="right_content"></div>
            </div>
        </div>
    </body>
</html>​

CSS

#container  {
    width:960px;
    margin:0 auto;
}
#header {
    background: blue;
    height:50px;
    margin-bottom:20px;
}
#left_content {
    float: left;
    width:150px;
    background: red;
    min-height: 600px;
    margin-right:20px;
}
#middle_content {
    float: left;
    width:620px;
    background: green;
    min-height: 600px;
    margin-right:20px;
}
#right_content {
    float: right;
    width:150px;
    background: red;
    min-height: 600px;
}​

ライブデモ これがお役に立てば幸いです。

于 2012-11-16T11:34:04.320 に答える
0

CSS では、画面にのみ正しく表示されるように、すべてを明確にコーディングしました。

特に間違っているのは、あなた#right_containerが言うあなたのことfloat:rightですright:260px。

cssの簡単なfloat:left(しかし悪い) 解決策は、左からのピクセル数の代わりに配置float:rightして定義することですleft:1190px(1190 は概算です) 。

より良い解決策は、適切にcssを学び、後でそれをいじることです!

于 2012-11-16T11:22:11.297 に答える