0

何らかの理由で、サンプル画像にある要素がページの上部に配置されません。私はしばらく HTML/CSS を扱っていませんが、四角形を 5px 下にシフトするようなコーディングは見当たりません。ここに画像の説明を入力

このページのバーを達成しようとしています: http://gradients.glrzad.com/

これが私のコードです。HTML:

<!DOCTYPE "html">
<html>
<head>
<title>Mobile Site</title>
<link href="mobileCSS.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="titleBar">
<strong>Coles Web</strong>
</div>
<div id="container">



</div>
</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */

body{
    background-color:#666;
}
#container{
    width:auto;

}

#titleBar{
    position:fixed;
    position:relative;
    width:auto;
    height:15px;
    text-align:left;
    font-family:Verdana, Geneva, sans-serif;
    font-size:small;
    color:#00FFFF;
    background-color:#000;
    box-shadow:0 3px 5px #333333;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
}


.bubble{
    width:auto;
    height: 40px;
    position:relative;
    border-spacing: 3px;
    background-color:#0FF;
    border-radius:3px;
    font-family:Impact, Verdana, Geneva, sans-serif;
    text-align:center;

}

前もって感謝します！

4

2 に答える 2

2 
body{
    background-color:#666;
    padding: 0;
    margin:0;
}
于 2013-02-03T03:13:02.100 に答える
0

以下を #titlebar に追加します。

top:0;
left:0;

また、ポジションは1つしか持てません。相対または固定。

于 2013-02-03T05:21:01.133 に答える