Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> помогите сверстать наложения див, фото как должно быть прилагается 
:(
    Опции темы
idti
Дата 17.9.2009, 08:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 139
Регистрация: 28.2.2009
Где: pnz

Репутация: нет
Всего: нет
Пробывал сделать относительным позиционированием, при которым место под дивы резервируется и остается незадействованным(пустым). Резервируется место я так понимаю для совместимости, чтоб в случае чего было куда размешать) А мне с этой пустатой что делать? При абсолютном нужно знать координаты каждого =( Как же можно сверстать наложение блоков чтоб не было лишнего места вокруг и с абсолютными координатами не встрявать?

user posted image

user posted image
PM MAIL   Вверх
WebDisaster
Дата 17.9.2009, 09:05 (ссылка) | (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19
Цитата(idti @  17.9.2009,  08:49 Найти цитируемый пост)
с абсолютными координатами не встрявать

С абсолютными и нужно встревать. Почему нельзя знать "координаты каждого", из задачи совершенно не понятно.
PM MAIL   Вверх
idti
Дата 17.9.2009, 09:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 139
Регистрация: 28.2.2009
Где: pnz

Репутация: нет
Всего: нет
блоков каждый раз разное количество от одного до шести и выравнивать нужно по центру. в таком случае абсолютных координат мне кажется должно быть 6 вариантов это громоздко.
PM MAIL   Вверх
brother79
Дата 17.9.2009, 12:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 471
Регистрация: 18.8.2009

Репутация: 1
Всего: 6
Я что-то так и не понял что надо сделать. Эту лесенку чтоли воткнуть по центру?


--------------------
http://www.nastandart.com
PM MAIL WWW   Вверх
idti
Дата 17.9.2009, 13:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 139
Регистрация: 28.2.2009
Где: pnz

Репутация: нет
Всего: нет
Эта лесенка в центре. Но главное чтоб лесенка с относительными координатами, так их легче считать(в данном случае). Дивы размещаются друг под другом и резервируют пустоту, которая получается при относительном смещении(пустота плохо). Может использовать float:left Но выравнивание по центру не получается тогда. Пробывал тэг span но он вообще какой то не юзабельный относительное позиционирование у него что - то не работает, хотя эти блоки располагаются друг за другом(т.е. пустоты с низу не было бы, если он позиционировался).
PM MAIL   Вверх
brother79
Дата 17.9.2009, 15:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 471
Регистрация: 18.8.2009

Репутация: 1
Всего: 6
Я что-то совсем запутался, если float:left - то друг на друга как на картинке - они никогда не лягут.  А если по центру надо - так ты их в див с фиксированной шириной запихай, и сделай по центру его. 




--------------------
http://www.nastandart.com
PM MAIL WWW   Вверх
Violator
Дата 17.9.2009, 18:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15
brother79, 
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    * { margin: 0; padding: 0; }
    .d { width: 50px; height: 50px; float: left }
    .d1 { background: red; margin: 0 0 0 0; }
    .d2 { background: green; margin: 3px 0 0 -40px; }
  </style>
</head>
<body>
  <div class="d d1"></div>
  <div class="d d2"></div>
</body>
</html>


idti, 
может я не совсем правильно понял...
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    * { margin: 0; padding: 0; }
    table.tbl { width: 500px; margin: 0 auto; border-collapse: collapse; background: gray; }
    table.tbl td { vertical-align: top; }
    .d { width: 50px; height: 50px; }
    .first, .last { width: 50%; }
    .d1 { background: red; margin: 0 0 0 0; }
    .d2 { background: green; margin: 3px 0 0 -40px; }
    .d3 { background: blue; margin: 6px 0 0 -40px; }
    .d4 { background: yellow; margin: 9px 0 0 -40px; }
    .d5 { background: orange; margin: 12px 0 0 -40px; }
    .d6 { background: violet; margin: 15px 0 0 -40px; }
    * html .d { position: relative; }
    html>body .d { position: relative; }
  </style>
</head>
<body>
  <table class="tbl">
    <tr>
      <td class="first"></td>
      <td>
        <div class="d d1"></div>
      </td>
      <td>
        <div class="d d2"></div>
      </td>
      <td>
        <div class="d d3"></div>
      </td>
      <td>
        <div class="d d4"></div>
      </td>
      <td>
        <div class="d d5"></div>
      </td>
      <td>
        <div class="d d6"></div>
      </td>
      <td class="last"></td>
    </tr>
  </table>
</body>
</html>
PM MAIL   Вверх
brother79
Дата 17.9.2009, 19:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 471
Регистрация: 18.8.2009

Репутация: 1
Всего: 6
Я что-то не уловил за каким там таблица в вёрстке, и о каких пустотах в начале идт речь? 

Если тебе надо именно такое наложение сделать - дык поставь position:absolute и left и top у каждого, попробуй их в див запихать, который будет по центру? Див по центру делать умеешь?, надо задать ему margin:auto, ширину, а у роди

тельского прописать text-align:center;


Цитата(idti @  17.9.2009,  13:08 Найти цитируемый пост)
Пробывал тэг span но он вообще какой то не юзабельный относительное позиционирование у него что - то не работает, хотя эти блоки располагаются друг за другом(т.е. пустоты с низу не было бы, если он позиционировался). 


Оно впринципе не должно работать, этот тег сроду для не для этого.

http://htmlbook.ru/html/span.html  

Там же всё написанно:

Код

В отличие от блочных элементов, таких как <TABLE>, <P> или <DIV>, с помощью тега <SPAN> можно выделить часть информации внутри других тегов и установить для нее свой стиль.



--------------------
http://www.nastandart.com
PM MAIL WWW   Вверх
idti
Дата 17.9.2009, 20:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 139
Регистрация: 28.2.2009
Где: pnz

Репутация: нет
Всего: нет
brother79, Violator, ага, спасибо!
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0637 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.