1

画像 -ここに画像の説明を入力してください

コード-

<html>
<header>
<style>
body {
margin: 0px 0px 0px 0px;
    font-family: Arial, Helvetica, sans-serif;
background-image:url('http://www.wallpaperpimper.com/wallpaper/Landscape/Plants/Leaf-In-Front-Of-Blur-1-1600x1200.jpg');
background-attachment: fixed;
background-size:cover;
}
p {
color:#fff;
}
#navi {
position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    height: 25px;
    font-size: 15px;
    width: 100%;
    z-index: 1000;
    background-color:#505050;
    padding-top:3px;
    padding-left:2px;

}
#wrapper {

width:100%;
height:100%;

}
#header {
Width:76%;
height:20%;
background-color:   #303030 ;
margin-top:3%;
margin-left:12%;
background-image:url('http://www.browsewallpapers.com/files/winter-landscape-landscape-7452.jpg');
background-size:cover;
text-align: right;
}
#content {
Width:50.5%;
Height:100%;
background-color:   #303030 ;
margin-left:12%;
margin-top:0.5%;
float:left;
opacity:0.8;

}
#sidecontent {
float:right;
background-color:   #303030 ;
width:25%;
height:40%;
margin-right:12%;
margin-top:0.5%;
opacity:0.8;
}
</style>
</header>
<body>


        <div id="navi">
            <p> HELLO </p>
        </div>

        <div id="wrapper">
            <div id="header">
                <p>Daily call</p>
            </div>
            <div id="content">
                <p> THIS IS DOG</p>
            </div>
            <div id="sidecontent">
                <p>no this is This is patrick</P>
            </div>
        </div>

</body>
</html>

Operaではすべてが正常に機能し、chromeとfirefoxはテキストを押し下げます。つまり、ヘッダーのサイズを変更します。

これを修正する方法はありますか？

4

1 に答える 1

0

ええと、あなたはすべてのコードを書き直す必要があります:)

コンテンツブロックを中央に配置する場合は、幅とマージンを自動に設定するだけです。例：

.wrapper { width: 900px; margin: 0 auto;}

ラッパーヘッダーdiv内に配置するよりも、ヘッダー幅を100％に設定するよりも。

于 2012-09-14T11:52:29.740 に答える