0

ヘッダーに連絡先情報を含む div を配置するのが困難です。この問題について数時間読んでいますが、まだ解決策が見つかりません。レイアウトの右上に連絡先情報を積み重ねようとしています。

--

私が達成したいことのイメージ：

http://i45.tinypic.com/2zrgu8o.jpg

私のコードが現在生成しているものの画像:

http://i48.tinypic.com/mbhlcz.jpg

--

私のHTML：

<html>
    <head>

  <link rel="stylesheet" href="/css/header.css" />

    </head>

<meta http-equiv="Content-Type" content="text/html; charset=big5" /></head>

<body style="margin:0; padding:0;">

<div id="logo">
<img src="/images/logo-top.png">
</div>

<div class="contact">
Email: sadlkj@yahoo.com | Phone: 1 (732) 235-7239
</div>



<div id="header-bg"> 
</div>


</body>
</html>

私のCSS：

#logo {
    postion: fixed;
    width: 300px;
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto; 
    margin-right: auto;
    z-index: 1;

} 

#header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;       
    background-image: url("/images/header-bg.png");
    background-repeat: repeat-x;
    z-index: -1;


}

.contact {
    float:right;
    margin-left:10px;
    margin-bottom:10px;}
}

あなたの助けに感謝します。

4

4 に答える 4

0

このhtml構造を使用してcssを変更してください

<div id="header-bg"> 
<div class='center_wrap'> 
 <div id="logo">
 <img src="/images/logo-top.png">
 </div>

 <div class="contact">
 Email: sadlkj@yahoo.com | Phone: 1 (732) 235-7239
 </div>
</div>
</div>

時間の幸運をこれ以上行うことはできません

于 2012-05-26T08:58:54.210 に答える
0

<span>div の代わりに aを使用することをお勧めします。<div style="display: inline;">

于 2012-05-26T07:15:29.613 に答える
0

クラス定義に typeo があるだけです。ポジショニングには 0 ではなく 0px と言う必要があります

top:0px;
left:0px;

ここで...見てください：http://jsfiddle.net/t5LZL/2/

于 2012-05-26T07:16:31.903 に答える
0

この問題は、HTMLにcontact divBEFOREを挿入することで解決できます。logo div

float上ではなく、右または左にのみフロートします。はのcontact div底部の下にあるlogo divため、その高さで浮きます。の前に置くことで、が押し下げるlogo直前に浮きます。logo

于 2012-05-26T08:48:59.267 に答える