CSS/HTML定位 - 元素覆蓋內容

請原諒我，如果我的問題很愚蠢，但我不是一個網絡程序員，我花了過去2個小時試圖弄清楚。CSS/HTML定位 - 元素覆蓋內容

因此，我將Weebly用於我的網站，並且有一個「內容」區域，可以放置元素。然後，在「內容」區域的左側和右側，我想放置廣告。

我已經想出瞭如何使用絕對定位來做到這一點，它在電腦瀏覽器上看起來很好，但在移動（不管用戶代理使用），谷歌AdSense廣告覆蓋我的內容區域。

這是我希望它看起來像：

~~http://testing.jakaar.net/~~（這個網站不再存在

編輯：http://android.jakaar.net/index.html（此是我的網站，現在的工作，請參見下面的回答我的問題）。

~~但是，這並沒有在手機上運行。該廣告仍在展示，他們只是覆蓋。~~
編輯：它現在的作品，請參閱我的答案。

我嘗試使用position：relative在我的css中將廣告定位到左側和右側，但它們位於我的內容區域的上方或下方，因此它將所有內容向上或向下推進。

這裏是CSS，我認爲是相關的：

body { 
    background: url(bodybg.jpg) top repeat-x; 
    background-color:#efefef; 
    font-family: arial, sans-serif; 
    font-size:12px; 
    color:#666666; 
    margin:0; 
    padding:0; 
} 

#content{ 
    margin-left:auto; 
    margin-right:auto; 
    width: 898px; 
    background: #fff; 
    min-height: 500px; 
    _height: 500px; 
    padding: 32px; 
}

那麼對於HTML：

<head> 
<title>{title}</title> 
<style type="text/css"> 
.right 
{ 
position:absolute; 
right:0px; 
padding-right:80px; 
padding-left:80px; 
margin-top:180px; 
} 
.left 
{ 


    position:absolute; 
    left:0px; 
    padding-right:80px; 
    padding-left:80px; 
    margin-top:180px; 
    } 
    </style> 


     <div id="wrapper"> 
      <div id="header"> 
       <div id="headerleft">{logo max-height="60"}</div> 
       <div id="navigation">{menu}</div> 
      </div> 

      <div class="right"> 
    //adsense add that goes on the right 
    </div> 
    <div class="left"> 
    //adsense add that goes on the left 
    </div> 
<div id="content"> 
     {content} 
     </div> 

     <div id="footer">{footer}</div> 
    </div>

我也嘗試使用float:left和float:right，但它給了相同的行爲絕對定位。

任何幫助，非常感謝。

來源

2011-11-05 Jakar

我創建了一個三欄佈局，並放置我的廣告在第1列和第3列隨後在第2列中放置了「內容」。我使用http://webdesign.about.com/od/csstutorials/ss/css_layout_sbs_9.htm作爲教程。

~~我也用我的廣告position:fixed，讓他們滾動頁面。~~
這造成了我現在不想修復的格式問題，所以我刪除了固定位置。

其結果是在這裏：http://android.jakaar.net/index.html

下面是相關的CSS：

#wrapper { 
    width: 1402px; 
    margin: 0 0 0 20px; 
    padding: 0; 
} 
#wrapper #topad 
{ 
margin-top:20px; 
margin-bottom:20px; 
} 
#wrapper #col1 
{ 
width: 190px; 
float: left; 
margin-top: 230px; 
} 
#col1 #leftad 
{ 
float:right; 
position:fixed; 
width:160px; 
} 
#wrapper #col2outer 
{ 
width: 1202px; 
float: right; 
margin: 0; 
padding: 0; 
} 
#col2outer #col2mid 
{ 
width: 962px; 
float: left; 
} 
#col2outer #col2side 
{ 
margin-top: 230px; 
width: 190px; 
float: right; 
} 
#col2side #rightad 
{ 
position:fixed; 
width:160px; 
}

和相關的HTML：

<body> 
<center><!--I used this to enclose the entire body because otherwise everything was off-center, of course--> 
    <div id="wrapper"> 
     <div id="col1"> 
     <div id="leftad"> 
     <!--google adsense ad code--> 
     </div> 
     </div> 

     <div id="col2outer"> 
     <div id="col2mid"> 
     <div id="header"> 
      <div id="headerleft">{logo max-height="60"}</div> 
      <div id="navigation">{menu}</div> 
      </div> 
      <div id="topad"> 
      <!--google adsense ad code--> 
     </div> 

     <div id="content"> 
      {content} 
      </div> 
      </div><!--this is the close of "col2mid"--> 

      <div id="col2side"> 
      <!--google adsense ad code--> 
      </div> 

      </div><!--this is the close of "col2outer"--> 



     <div id="footer">{footer} 
     </div> 

    </div><!--this is the close of "wrapper"--> 

    </center> 
</body>

來源

2011-11-06 19:00:07 Jakar

您可以嘗試將內容元素的margin-left和margin-right設置爲廣告左側和右側所需的尺寸（應爲240px = .left padding-left + left ad width）。您將不得不調整您的內容寬度屬性以適合。

順便說一句，如果你不把它設置爲全屏模式，你也可以在普通瀏覽器中搞亂你的網站。

請參閱here以獲得Box模型的精美圖片。

來源

2011-11-06 00:14:45 FlyingFoX

我試過了，而且排序的工作。它與內容區域的大小相混淆，並且它也使得它不能像我喜歡的那樣在頁面上居中。 – Jakar

我決定只使用3列，查看我發佈的答案。不過謝謝你的幫助。 – Jakar

可以使用負保證金以及以切斷變速它向左或向右（-80px）讓你應用一些寬度按我的例子： http://jsfiddle.net/q7Cf7/

來源

2011-11-06 00:17:03 Andy

不幸的是，這仍然有相同的問題。 – Jakar

您還可以在絕對元素上添加負值位置 – Andy

您只需將左右div放入主包裝或內容區域即可。確保你選擇放置它有位置相對和寬度。然後左右浮動負邊距，將它們放在盒子外面。 – Andy

CSS/HTML定位 - 元素覆蓋內容

回答

相關問題