1

横スクロールのみのサイトを作ろうと思っています。このデモをご覧ください。私の問題は、ブラウザーのサイズを変更すると、コンテンツ (明るい黄色のボックス内の段落) の位置が変更されないことです。その段落を黄色のリング セグメントの上に配置したいと考えています。どうやってやるの？

以下は私のコードです。

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />

<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</head>
<body>

<div id="container">

<img id="backimage" src="images/rings.png" />

<div id="info">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubia
</p>
</div><!-- end of info -->


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

</body>
</html>

CSS

a { text-decoration:none; }

li {list-style-type:none; }

body { overflow-y:hidden; }

#container {
    position:absolute;
    height:100%;
    width:10000px;
    background-color:#FC9;
}

#info {
    position:absolute;
    width:200px;
    height:220px;
    background-color:#FFC;
    top:180px;
    left:250px;
}

#backimage {
    position:absolute;
    height:100%;
    background-size:cover;
    bottom:0;
}

#infoの位置をに設定してみましrelativeたが、そうするとページから消えてしまいます。

4

2 に答える 2

0

あなたはすべての位置を絶対として定義しています。これは良い解決策ではありません。代わりに、相対レイアウトを使用する必要があります。それらはもう少し複雑で「無料」ではないかもしれませんが、ほとんどの問題を解決します。HTMLからbackImageとcontainerを削除し、次のようにします。

a { text-decoration:none; }

li {list-style-type:none; }

body { 
    overflow-y:hidden; 
    background:url(images/rings.png);
    background-color:#FC9;
}

#container { //body is the container. You dont need something like this in this case.
}

#info {
    background-color:#FFC;

    //width and height are dynamic to the size of content

    margin-top:180px; //You just set the margin (outer gap) instead of the position.
    margin-left:250px;
}

#backimage { //You don't need a back-image if you use background:url(...) in body
}

ウィンドウが小さい場合にボックスの外側のギャップを小さくしたい場合は、マージンのあるパーセンテージを使用します。

情報divのサイズを制限する場合は、max-width：xyzを使用します。

私が他の答えへのあなたのコメントを読んだように、あなたはdivが背景の特定の部分の上にあることを望みます。これは、background-positionを使用して実現できます。

于 2013-01-28T15:46:20.900 に答える
0

コンテンツで何をしたいですか？現在のパラメータでは、位置が相対か絶対かは関係ありません。バックイメージの左上隅から 180 ピクセル下と 250 ピクセル内にとどまります...また、そのサイズは変更されません。

于 2013-01-28T15:16:08.017 に答える