在CSS中的位置問題

Question

嗯，我正在開發一個網站，並在CSS中遇到麻煩，請幫我擺脫這個問題。

您可以看到下面的圖像的最終結果。

http://i51.tinypic.com/5bwpee.jpg

所以I CODE像

<div id="header"> 
    <div class="pattern"></div> <!-- .pattern --> 
    <div id="wrapper"> 
     <div class="topHeader"> 

     </div> 
    </div> 
</div> <!-- #header --> 

和CSS是..實際上是在以下代碼我使用的梯度圖像和使用圖案圖像溢出的背景。

#header { 
    width:100%; 
    height:150px; 
    background:url(images/header_gradient.png) repeat-x; 
} 

.pattern { 
    width:100%; 
    height:150px; 
    background:url(images/header_transparent.png) repeat; 
} 

#wrapper { 
    width:1200px; 
    margin:0 auto; 
    background-color:#F00; 
    height:100px; 
} 

所以請您幫我解決這個問題，即如何在我的頭中心設立標誌和作者信息..

我試過的位置，但也許它出錯。

---

現在我編輯我的代碼下面的結果，但仍然有問題

<div id="wrapper"> 
    <div id="header"></div> 
    <div id="pattern"></div> 
    <div id="main"> 
     <img src="http://i52.tinypic.com/16i6z9d.jpg" /> 
    </div> 
</div> 

CSS

#wrapper { 
    position:relative; 
} 

#header { 
    width:100%; 
    height:150px; 
    background:url(http://i55.tinypic.com/1zpgny8.jpg) repeat-x; 
} 

#pattern { 
    width:100%; 
    height:150px; 
    background:url(http://i51.tinypic.com/ao75eg.jpg) repeat; 
    position:absolute; 
    top:0px; 
} 

#main { 
    width:1200px; 
    margin:0 auto; 
    margin-top:-103px; 
} 

#main img { 
    z-index:5px; 
} 

做這一切仍然有問題後，該#pattern在所有層。所以請幫助我解決這個問題。

謝謝大家。

Answer 1

爲您的徽標和網站內容創建一個div。 向右移動div position:relative; left: 400px或任何你需要的距離。
浮動徽標和sitename讓他們並排排隊。 將容器格（#logoandsitename）設置爲overflow:auto;以包含浮標。

HTML

<div id="header"> 
    <div class="pattern"></div> <!-- .pattern --> 
     <div id="wrapper"> 
     <div class="topHeader"> 
      <div id="logoandsitename"> 
       <img src="img.source" /> 
       <span id="sitename">Your Site Name</span> 
      </div> 
     </div> 
    </div> 
</div> <!-- #header --> 

CSS

#logoandsitename { 
    overflow: auto; 
    width: 300px; 
    height: 100px; 
    position: relative; 
    left: 300px; 
} 

#logoandsitename img { 
    float:left; 
} 

#sitename { 
    float:left; 
    font-size: 40px; 
} 

這幾乎你在找什麼？

Answer 2

爲什麼你需要「width：1200px;」在#wrapper中？

爲什麼不試試這個html？

<div id="header"> 
    <div id="wrapper"> 
     <div class="topHeader"> 
      <div id="logo">Logo</div> 
      <div id="author">Author Details</div> 
     </div> 
    </div> 
    <div class="pattern"></div> <!-- .pattern --> 
</div> <!-- #header --> 

這個CSS：

#header { 
    width:100%; 
    height:150px; 
    background:url(images/header_gradient.png) repeat-x; 
} 

.pattern { 
    width:100%; 
    height:150px; 
    background:url(images/header_transparent.png) repeat; 
} 

#wrapper { 
    width:1200px; 
    margin:0 auto; 
    background-color:#F00; 
    height:100px; 
} 
#logo, #author{ 
    width:200px; 
    height:50px; 
    float:left; 
} 
#author{ 
margin-left:20px; 
} 
.topHeader{ 
    width:500px; 
    margin:0 auto; 
}