-1

ブラウザーの幅に広がる背景を持つカルーセルを作成する計画があります。これを行うにmargin:0; padding:0;は、本文に設定しdiv、背景にまたがる my を に設定しwidth:100%ます。これを選択したdivのは、左右の margin:auto; を持つ別のものが含まれているためです。2 番目をブラウザ全体のdiv中央に配置します。div

divブラウザの幅にまたがる背景画像を に追加しようとして問題が発生しました。私が使用background-repeat:repeat-x;すると、ブラウザの左端にまだ 550x1 px のスライバーが表示されます。繰り返さない。これは幅が 100% であるためだと考えています。100% 幅を手放すと、div使用しているモニターの解像度に応じて、内側が強制的に右または左に移動するという問題が発生します。私はこれが起こることを望んでいません。

100% の幅を達成/シミュレートし、まだ使用できる方法を知っている人はいますbackground-repeat:repeat-x;か?

編集、シルバーライトを適用しているため、2つのdivを使用し、画面上に芸術的に配置したいと考えています。ここに私のコードがあります。1 div が 2 div よりも優れているとまだ信じている場合は、間違っていることを教えてください。ただし、コードは次のとおりです。多くのことが Silverlight で行われるため、非常に単純です。または、少なくとも多少単純になると思いましたが、そのようになります。

HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="imd_data_Home" %>

<!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 runat="server">
    <title>Home</title>
    <link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id=NavContainer>
<div id="Navigation">
    <img src="img_data/dem_Logo.png" id="Logo"/>
</div>

</div>
<div id="Carousel">
<div id="SilverlightContainer">

</div>
</div>

</body>
</html>








CSS
body 
{
    margin:0;
    padding:0;
    background-color:#000061;
}

#NavContainer
{
    width:900px;
    margin-left:auto;
    margin-right:auto;
}

#Navigation
{
    height:75px;
    width:100%;
}

#Logo
{
    float:left;
}

#Carousel
{
    height:550px;
    width:100%;
    background-image:url('img_data/carousel_bar_01.png');
    background-repeat:repeat-x;
}

#SilverlightContainer
{
    height:550px;
    width:900px;
    margin-left:auto;
    margin-right:auto;
}
4

4 に答える 4

0

解決しました！問題は、画像の正しい場所に配置していなかったことcarousel_bar_01.pngです。

于 2012-05-24T00:24:31.417 に答える
0

真ん中に必要な div が 1 つだけ必要です。

<div class="centered"></div>

本文に背景を設定します。

body {
    min-height: 550px; 
    background: url(path/image.png) repeat-x;
    background-size: 1px 550px;
}

そして、中央のdivがあります：

.centered {
    min-height: 150px; /* whatever values you wish for height and width */
    width: 300px;
    margin: 75px auto; /* whatever values you wish for top/ bottom margin */
}

http://dabblet.com/gist/2774626でライブを見ることができます。

于 2012-05-23T11:20:58.470 に答える
0

これを試して：

body {
 width:100%;
 height:100%;
 background:url(your-image.jpg) repeat-x;
 position:absolute;
}
于 2012-05-23T10:59:55.943 に答える