CSS / HTML позиционирование - элементы наложения контента - PullRequest
Новая
       24

CSS / HTML позиционирование - элементы наложения контента

1 голос
/ 06 ноября 2011

Простите, если мой вопрос глуп, но я не веб-программист, и я потратил последние 2 часа, пытаясь выяснить это.

Итак, я использую Weebly для своего сайта,и есть область контента, где я могу разместить элементы.Затем справа и слева от области «контента» я хочу разместить рекламу.

Я разобрался, как это сделать, используя абсолютное позиционирование, и оно отлично смотрится в браузере компьютера, но на мобильном устройстве.(Независимо от используемого пользовательского агента) объявления Google AdSense перекрывают мою область контента.

Вот как я хочу, чтобы это выглядело так:

http://testing.jakaar.net/ (этого веб-сайта нетбольше существует.

РЕДАКТИРОВАТЬ: http://android.jakaar.net/index.html (это мой веб-сайт, и он работает сейчас, ответ на мой вопрос см. ниже).

Но это не работает на мобильном телефоне. Объявления по-прежнему отображаются, они просто накладываются.
РЕДАКТИРОВАТЬ: Теперь это работает, см. Мой ответ ниже.

Я пытался использовать position: относительный в моем 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, но он дал то же поведение, что и абсолютное позиционирование.

Любая помощь очень ценится.

Ответы [ 3 ]

1 голос
/ 06 ноября 2011

Я создал макет из 3 столбцов и разместил свои объявления в столбце 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>
0 голосов
/ 06 ноября 2011

Вы также можете использовать отрицательное поле, чтобы сместить его влево или вправо (-80px), чтобы применить ширину, как в моем примере: http://jsfiddle.net/q7Cf7/

0 голосов
/ 06 ноября 2011

Вы можете попробовать установить margin-left и margin-right вашего элемента контента в размере, необходимом для ваших объявлений слева и справа (должно быть 240 пикселей = .left padding-left + left ad width). Вам нужно будет настроить атрибут ширины контента, чтобы он подходил.

Кстати, вы можете испортить свой сайт в обычном браузере, если вы не установите его в полноэкранном режиме.

См. здесь , чтобы получить красивую картинку для Box Model.

...