CSS/HTML 위치 - 요소 오버레이 내용

내 질문에 어리 석다면 용서해주십시오.하지만 웹 프로그래머가 아니며 지난 2 시간 동안이 문제를 해결하려고했습니다.CSS/HTML 위치 - 요소 오버레이 내용

저는 웹 사이트에 Weebly를 사용하고 있으며 요소를 배치 할 수있는 "콘텐츠"영역이 있습니다. 그런 다음 '콘텐츠'영역의 오른쪽과 왼쪽에 광고를 배치하고 싶습니다.

절대 위치 지정을 사용하여이 작업을 수행하는 방법을 알아 냈지만 컴퓨터 브라우저에서는 괜찮은 것처럼 보였지만 모바일에서는 (사용 된 사용자 에이전트에 관계없이) Google 애드 센스 광고가 내 콘텐츠 영역을 오버레이합니다. 여기

내가 그것을 같이하지 할 것입니다 :.이 웹 사이트는 존재에 더 이상 (

~~http://testing.jakaar.net/~~

편집 :http://android.jakaar.net/index.html (이 즉 휴대 전화에 작동하지 않는다, 내 웹 사이트이며, 그것은 내 문제에 대한 대답) 아래 참조 작동합니다.

~~하지만. 광고는 여전히 보여, 그들은 단지 오버레이.~~
편집 : 그것은 지금 작동, 아래 내 대답을 참조하십시오.

내 css에서 position : relative를 사용하여 왼쪽과 오른쪽으로 광고를 배치했지만 그 중 하나가 내 콘텐츠 영역 위 또는 아래에 있으므로 모두 위아래로 밀고 있습니다. 여기

내가 관련되어 있다고 생각하는 그 CSS입니다 :

되는 HTML에 대한 다음

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; 
}

<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

내가 3 열 레이아웃을 생성 및 배치 1 열과 3 열의 광고는 2 열에 '콘텐츠'를 넣었습니다. 자습서로 http://webdesign.about.com/od/csstutorials/ss/css_layout_sbs_9.htm을 사용했습니다.

~~내 광고에도 position:fixed을 사용하여 페이지를 스크롤합니다.~~
고정식 위치 지정을 제거 했으므로 지금 당장 해결할 필요가없는 서식 문제가 발생했습니다.

#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 : 여기

http://android.jakaar.net/index.html가 관련 CSS입니다 :

결과

는 여기

<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 =. 왼쪽 여백 + 왼쪽 + 왼쪽 광고 너비 여야 함)로 설정해보십시오. 콘텐츠 너비 특성을 적합하게 조정해야합니다.

Btw를 사용하면 전체 화면으로 설정하지 않으면 일반 브라우저에서 사이트를 엉망으로 만들 수 있습니다.

박스 모델에 대한 멋진 사진은 here을 참조하십시오. 당신은 왼쪽 또는 오른쪽으로 떨어져 이동하는뿐만 아니라 음의 여백을 사용할 수 있습니다

출처

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 위치 - 요소 오버레이 내용

답변

관련 문제