Проблема с вёрсткой

Тема в разделе "Верстка", создана пользователем casinolot, 5 сен 2011.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. casinolot

    casinolot

    Регистр.:
    22 окт 2010
    Сообщения:
    547
    Симпатии:
    84
    Кто подскажет

    Вот есть сайт, и его главная страница
    Перейти по ссылке
    стиль
    Перейти по ссылке
    Почему блоки типа Анонсы статей с картинками , идет не до конца страницы.
    И нормально ли у вас отображается в IE,Firefox,Opera,Chrome.
    Вот внутренняя страница.
    Перейти по ссылке
    сам код страницы
    код стиля
    Как правильно сделать ,чтобы блок Реклама оставался справа
    А,блок Рекламный блок или баннер и Другие статьи раздела
    находились ровно внизу.Т.е.
    Должно быть так в приложенном рисунке

     

    Вложения:

    • structure.jpg
      structure.jpg
      Размер файла:
      14,4 КБ
      Просмотров:
      29
  2. septor

    septor Постоялец

    Регистр.:
    25 июн 2011
    Сообщения:
    131
    Симпатии:
    12
    Что значит "находились ровно внизу", были привязаны к низу?
    Во первых, дивам нельзя задать размер на всю высоту типа 100%, только фиксировано, так что блок текст всегда будет по высоте вложенного в него текста, и соответственно идущие за ним блоки будут прилеплены к нему, если так верстать.
    По твоему скрину разметки, проще будет сделать на таблице, и задать ей высоту в 100%. На дивах будет точно такое сделать сложней, учитывая твой уровень познаний вёрстки.

    Вот возьми за основу код, он хоть и не идеальный, но может решить проблему с привязкой нижних блоков к низу.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Футер в низу</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    html, body {
    height: 100%;
    }

    body {
    margin: 0;
    padding: 0;
    }

    .main {
    position: relative;
    min-height: 100%;
    height: auto !important;
    _height: 100%;
    }

    .footer-margin {
    position: static;
    width: auto;
    border: 0px dotted maroon;
    clear: both;
    margin: 0;
    padding: 0;
    height: 1;
    font-size: 1px;
    height: 70px; //* должен быть больше чем высота футера*/
    }

    .footer {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 6;
    height: 54px;
    width: 100%;
    overflow: hidden;
    border: 0px dotted green;
    background: #f8f7f1;
    }

    </style>
    </head>
    <body>

    <div class="main">
    контент<br>контент<br>контент<br>контент<br>контент<br>контент<br>контент<br>контент<br>контент<br>контент<br>контент<br>
    контент<br>контент<br>контент<br>контент<br>контент<br>контент<br>контент<br>контент<br>контент<br>контент<br>контент<br>

    <div class="footer-margin"></div>
    <div class="footer">
    Футер, который всегда будет внизу
    </div>

    </div>

    </body>
    </html>
    или порой в сети на эту тему, там зватает примеров.

    Что касается браузеров, глянул в 5 основных, везде по разному. Что и как, сам сможешь посмотреть, если установишь все последние браузеры. У меня стоят мозила, опера, сафари, хром и 9-й осёл со встроенной поддержкой просмотра 7-го и 8-го осла. Не что друг другу не мешает, так что ставь и смотри.
    Ну и верстай не в осле, а в хроме или лисе, тогда вёрстка будет одинаково отображаться почти во всех браузерах, а для старых ослов возможно надо будет пару фиксов сделать.
     
  3. casinolot

    casinolot

    Регистр.:
    22 окт 2010
    Сообщения:
    547
    Симпатии:
    84

    Спасибо, за советы. Иногда приходится самому версткой заниматься.
    Перейти по ссылке
    Я сейчас вот так сделал.
    В IE меня все устраивает и все так должно быть, хотя обычно проблемы у всех с эксплорером.

    Но вот в OPERE и FIREFOX
    Блоки Анонсы статей с картинками и Новости и последние статьи
    растянуты по ширине больше экрана, как это убрать?
     
  4. solarb

    solarb Постоялец

    Регистр.:
    11 июл 2009
    Сообщения:
    64
    Симпатии:
    15
    переделай CSS етих блоков -> "block1" и "advert2" на
    block1:

    margin-left: 20%;
    width: 80%;

    advert2:

    margin-left: 20%;
    background: white;
    width: 80%;


    можно тоже попробовать убрать width с двух блоков
     
  5. septor

    septor Постоялец

    Регистр.:
    25 июн 2011
    Сообщения:
    131
    Симпатии:
    12
    casinolot, IE не надо брать за основу для верстки, так как изначально майкрософт не поддерживала веб стандарты, и только с 9-й версии осёл нормально поддерживает стандарты.
    Ну а проблемы с эксплорером у всех, как раз из за не поддержки стандартов. Если верстать к примеру в лисе, то можно с гарантией сказать что сайт не развалится во всех браузерах, и потребуется разве что пара - другая фиксов для 6-го осла. Если верстать в осле до 9-го, то можно гарантировать что потребуется дохрена фиксов для остальных браузеров.

    Что касается последних изменений по ссылке, то не чего не изменилось толком, только в ослах с 7-го по 9-й не что не куда не уходит, а в остальных как и было, разве что в хроме теперь основной текст сбоку меню, а не как в опере под меню, зато так же как и в лисе выходит на четверть за границу ширины браузера.
     
  6. casinolot

    casinolot

    Регистр.:
    22 окт 2010
    Сообщения:
    547
    Симпатии:
    84
    width: 79%;
    Я уже пробывал, уменьшается ширина, так ,что блок не доходит до конца экрана. Это в IE, а в Опере нормально все становится
    Возможно придется тогда фиксить по IE

    Сделал специально под IE стили и все решилось
     
  7. septor

    septor Постоялец

    Регистр.:
    25 июн 2011
    Сообщения:
    131
    Симпатии:
    12
    Ну ну ;)

    Погляди прикреплённый скрин, сомневаюсь что всё решилось, решилась может проблема с развалом блоков в браузерах, но не с самими блоками. Вылазит это уже при разрешении 1024х768, что является минимум для вёрстки.
    В данном случае проблема в фиксированной высоте этих четырёх блоков, которая проявляется в других браузерах, кроме осла.
    PHP:
    .cont width:49%; height:90pxfloat:leftmargin:0 0 0 0; }
    Задай минимальный размер для всей страницы, в 980 пикселей, это с учётом вертикальной полосы прокрутки. Ну и убери фиксированную высоту, сделай так.
    PHP:
    .cont width:49%; min-height:90pxfloat:leftmargin:0 0 0 0; }
     

    Вложения:

    • 123.JPG
      123.JPG
      Размер файла:
      87,3 КБ
      Просмотров:
      14
Статус темы:
Закрыта.