Нужна помощь в укладке - один div торчит в сторону. - PullRequest
Новая
       4

Нужна помощь в укладке - один div торчит в сторону.

1 голос
/ 29 июля 2011

У меня есть страница, которую я не могу понять с точки зрения нескольких деталей стиля.

http://www.comehike.com/earn_money.php

У меня есть две проблемы, которые я не могукажется, что это правильно (во многом потому, что дизайн и стиль - мое исцеление от Ахилла).

Проблема 1: внизу div нижнего колонтитула торчит справа.Я попытался обернуть его в diff div и посмотреть через FireBug, но не могу заставить его перестать торчать ... возможно, потому что я устал и ушел из головы:)

Проблема 2: ВыПосмотрите, как главная страница div заканчивается над нижним колонтитулом и div?Есть ли способ сделать так, чтобы основная область страницы расширялась ниже нижнего колонтитула?

Спасибо!

Ответы [ 4 ]

2 голосов
/ 29 июля 2011

Установите ширину div нижнего колонтитула равным 900px из 960, чтобы устранить выпадение нижнего колонтитула 

width: 900px;

задачи2. Расположение верное, как и должно быть. Вот как выглядит макет 

<div>
   <div class="basic">
   <div> <-- google ads
   <div> <-- footer
</div>

чтобы исправить это, просто измените макет на 

<div>
   <div class="basic">
       <div /> <-- google ads
       <div /> <-- footer
   </div>
</div>
2 голосов
/ 29 июля 2011

  1. Снимите width с CSS нижнего колонтитула.

  2. Если вы хотите, чтобы нижний колонтитул находился на главной странице, вы должны расположить его в пределах .basic

2 голосов
/ 29 июля 2011

Для первой части вашего вопроса вы можете исправить это, просто удалив свойство width в нижнем колонтитуле, поскольку это блочный элемент, и он будет занимать 100% доступной ширины (после заполнения / поля / и т. Д.)).

Что касается второй части вашего вопроса, я не совсем уверен, что вы спрашиваете, но я думаю, что вы изменили бы стиль на #mainBody на: padding: 5px 5px 20px; или какой-то другой большойчисло для третьего значения?

1 голос
/ 29 июля 2011

Задача № 1:

Похоже, вы хотите, чтобы ширина вашего нижнего колонтитула составляла 960 пикселей. Но у вас есть 10-пиксельная белая рамка, которая делает ширину нижнего колонтитула 980 пикселей. Удалите границу, и ваш нижний колонтитул снова будет 960 пикселей, как вы разработали. Тогда кажется, что вам придется подправить width: 960px;, пока он не подойдет должным образом. 950px, кажется, работает хорошо. 

.footer{
    width: 960px;
    padding: 0.5em 0;
    margin: 0 auto;
    margin-bottom: 20px;  
    text-align: center;
    vertical-align:center;
    background: #fff;
    color: #462c1f;
    border: 10px solid #fff;  
}

Должно быть ... 

.footer{
    width: 950px; /* adjust the width to fit */
    padding: 0.5em 0;
    margin: 0 auto;
    margin-bottom: 20px;  
    text-align: center;
    vertical-align:center;
    background: #fff;
    color: #462c1f;
}

Задача № 2:

Вам необходимо поместить <div> и <div class="footer">...</div> баннера внутри и в нижней части <div class="basic">...</div>

...