Помогите сверстать

Тема в разделе "Веб-дизайн", создана пользователем rafic, 28 авг 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Нужно в центре страницы разместить блок с новостями. Это как бы первый вопрос - каким способом разместить в центре страницы блок так, что бы он был по центру в большинстве браузеров. Пробывал такой способ:
    PHP:
    <div class="block-login">
             
    Content
    </div>
    PHP:
    .block-login{
        
    width300px
        
    height:200px
        
    positionabsolute
        
    left50%; top:50%; 
        
    margin-lef;t: -150px
        
    margin-top:-100px;
    }
    Но таким способом в Chrome и ИЕ 8 не работает. Блок в верхнем левом углу.
    И второй вопрос - как лучше сверстать сам блок? Тоже нужно чтобы он был максимально оптимизирован для отображения в разных браузерах. Я сначала сделал в таблицах:
    PHP:
    <table class="onetable" cellpadding="0" cellspacing="0">
      <
    tbody>
        <
    tr>
          <
    td><div class="onetable-top-l"></div></td>
          <
    td><div class="onetable-top-c"></div></td>
          <
    td><div class="onetable-top-r"></div></td>
        </
    tr>
        <
    tr>
          <
    td><div class="onetable-center-l"></div></td>
          <
    td class="onetable-center-c">
    Content
          
    </td>
          <
    td><div class="onetable-center-r"></div></td>
        </
    tr>
        <
    tr>
          <
    td><div class="onetable-bottom-l"></div></td>
          <
    td><div class="onetable-bottom-c"></div></td>
          <
    td><div class="onetable-bottom-r"></div></td>
        </
    tr>
      </
    tbody>
    </
    table>
    PHP:
    .onetable{width800pxborder:0px;positionrelative;}
    .
    onetable-top-l{height20pxwidth20pxbackground:url(images/admin/table-top-left.jpg); background-repeatno-prepeat;}
    .
    onetable-top-c{height20pxwidth:100%; background:url(images/admin/table-top-center.jpg); background-repeatprepeat-x;}
    .
    onetable-top-r{height20pxwidth20pxbackground:url(images/admin/table-top-right.jpg); background-repeatno-prepeat;}
    .
    onetable-center-l{height100%; width20pxbackground:url(images/admin/table-center-left.jpg); background-repeatno-prepeat;}
    .
    onetable-center-c{height100%; width100%; background:#fff; vertical-align: top;}
    .onetable-center-r{height100%; width20pxbackground:url(images/admin/table-center-right.jpg); background-repeatno-prepeat;}
    .
    onetable-bottom-l{height20pxwidth20pxbackground:url(images/admin/table-bottom-left.jpg); background-repeatno-prepeat;}
    .
    onetable-bottom-c{height20pxwidth:100%; background:url(images/admin/table-bottom-center.jpg); background-repeatrepeat-x;}
    .
    onetable-bottom-r{height20pxwidth20pxbackground:url(images/admin/table-bottom-right.jpg); background-repeatno-prepeat;}
    Но в Opere нет левого края, а в Chrome нет правого и левого краев. В ИЕ 8 нормально все, что творится в ИЕ 7 не смотрел, но думаю что тоже нормально. ИЕ 6 не интересует.
    Поправьте меня в чем я не прав, укажите на ошибки, подскажите как лучше?
    Вот макет самого блока:
     

    Вложения:

    • Макет.jpg
      Макет.jpg
      Размер файла:
      41,5 КБ
      Просмотров:
      11
  2. Dizeloid

    Dizeloid Постоялец

    Регистр.:
    17 июл 2009
    Сообщения:
    68
    Симпатии:
    3
    По всей видимости заменить lef;t на center

    Оно?
     
  3. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Не совсем, но я нашел решение к первому вопросу.
    Остался теперь второй вопрос - как лучше сверстать сам блок?
     
  4. Dizeloid

    Dizeloid Постоялец

    Регистр.:
    17 июл 2009
    Сообщения:
    68
    Симпатии:
    3
    Во второму вопросу - такое можно сделать на Java Script.
     
  5. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Хм а что именно? Можно по-подробнее? Приводите примеры, так как JavaScript`ом я не владею. И мне кажется, что это только усложнить задачу. Там можно сверстать дивами или таблицей, например как я сделал, но вот почему не отображает поля в браузерах Opera и Chrome я не могу понять. По этому прошу помощи...
     
  6. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Ответ на первый мой вопрос я уже нашел. Все работает нормально. Меня интересует как сверстать самц рамку так, чтобы она нормально отображалась в браузерах. Проблемы с отображением которые есть сейчас смотрите на пост выше.
     
  7. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Неужели не кто не может помочь?
     
Статус темы:
Закрыта.