За последние 24 часа нас посетил 22191 программист и 1546 роботов. Сейчас ищут 1038 программистов ...

Обтекание

Тема в разделе "HTML и CSS", создана пользователем Apple, 25 мар 2011.

  1. Apple

    Apple Активный пользователь

    С нами с:
    13 янв 2007
    Сообщения:
    4.984
    Симпатии:
    2
    Кхм, столкнулся с задачей по верстке, сделавшей всё дальшейшее полным пиздецом.
    Гуглил до посинения на буржуйских и русских сайтах, копал сайты в закладках, но решения так и не нашел.
    Встречал на нескольких форумах ПРИМЕРНО подобное, но говорят, что невозможно.
    Но если вдруг кто встречался.

    Задача:
    [​IMG]

    Словами:
    Справа слой, слева от него тянущиеся (резиновые) элементы.

    Решение: Не найдено.

    Возможно с применением JavaScript, но с этим я уже справлюсь сам (просчет координат правого блока на столкновение).
    Мне ХОТЕЛОСЬ БЫ решение элегантное, пускай костыльное, но элегантное. На CSS.
    JS напишу сам без проблем
     
  2. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
  3. Shumomer

    Shumomer Активный пользователь

    С нами с:
    12 мар 2011
    Сообщения:
    194
    Симпатии:
    1
    Адрес:
    из вашего вображения
    :D Хорошая шутка

    По теме - проблема только со вторым сверху желтым дивом. Вот этот уголок в нем так уж необходим? Вообще - посмотри верстку блогов на дивах - это их стандартная раскладка (правда мало кто выступ делает, но есть)
     
  4. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    моя говорить: задай обтекание у картинки, и возможно див не съедет, а пойдет лесенкой как требуется.
     
  5. Kreker

    Kreker Старожил

    С нами с:
    8 апр 2007
    Сообщения:
    5.433
    Симпатии:
    0
    Я сплю почти и не понимаю проблемы.
    А что будет, если у image добавить float: right?
     
  6. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    правый плавающий это именно картинка или див?
     
  7. Апельсин

    Апельсин Активный пользователь

    С нами с:
    20 мар 2010
    Сообщения:
    3.645
    Симпатии:
    2
    Ну вот, только и дай людям потроллить. Падабу вон сразу самый кроссбраузерный вариант выдал :)
     
  8. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    не говори... флудеров развелось...
     
  9. Апельсин

    Апельсин Активный пользователь

    С нами с:
    20 мар 2010
    Сообщения:
    3.645
    Симпатии:
    2
    igordata
    Во-во.. флудят и флудят.. Сколько ж это может продолжаться.
     
  10. Kreker

    Kreker Старожил

    С нами с:
    8 апр 2007
    Сообщения:
    5.433
    Симпатии:
    0
    apple, выложи плиз сверстанный тобой вариант, а над ним уже поколдуем.
     
  11. Apple

    Apple Активный пользователь

    С нами с:
    13 янв 2007
    Сообщения:
    4.984
    Симпатии:
    2
    Слой должен быть по ширине 100%, т.е занимать всю допустимую область на произвольном участке.
    Дело не в выступе, дело в том, что контент слоя (а это НЕ только текст) должен занимать ВСЮ ширину, а она, в зависимости от размера картинки, разная.
     
  12. Shumomer

    Shumomer Активный пользователь

    С нами с:
    12 мар 2011
    Сообщения:
    194
    Симпатии:
    1
    Адрес:
    из вашего вображения
    Еще раз повторяю - если "ступенька" не важна - это все решается через цсс без проблем (див со ступенькой будет той-же ширины что и верхний, а те что ниже - уже полной ширины). Если "ступенька" критично нужна - цсс сильно упрощается но придется делать добавку из яваскрипта. Потому и спросил - насколько важна именно ступенька.
     
  13. Apple

    Apple Активный пользователь

    С нами с:
    13 янв 2007
    Сообщения:
    4.984
    Симпатии:
    2
    Shumomer
    Нет, ступенька не важна.
    Напиши, пожалуйста, пример.
     
  14. Apple

    Apple Активный пользователь

    С нами с:
    13 янв 2007
    Сообщения:
    4.984
    Симпатии:
    2
    Как и оказалось - я не полный дебил.
    Поговорил с профи, который работает дизайнером в Сансет Студио, сказал, что такое сделать технически невозможно на чистом HTML и CSS, поскольку плавающие блоки расположены иначе в потоке элементов, и обтекающий блок слой должен иметь фиксированный отступ, чтобы не "уплыть" под блок, поэтому растягивание сводится к решению на JavaScript, но такое решение могу написать и я сам.
     
  15. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    сделай плс пример. ничерта не понятно, а интересно.
     
  16. Shumomer

    Shumomer Активный пользователь

    С нами с:
    12 мар 2011
    Сообщения:
    194
    Симпатии:
    1
    Адрес:
    из вашего вображения
    Apple
    да пусть себе утекает. Контент-то не утечет.
     
  17. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    покажите!!!!
     
  18. Namer

    Namer Активный пользователь

    С нами с:
    14 апр 2010
    Сообщения:
    492
    Симпатии:
    0
    Дык интересно кто в итоге оказался прав:
    или
    А, Apple?
     
  19. Namer

    Namer Активный пользователь

    С нами с:
    14 апр 2010
    Сообщения:
    492
    Симпатии:
    0
    Так ясности и не появилось, кто же оказался прав. ТС стал упорно "обтекать" свой же топик :D
     
  20. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Вот мне тоже интересно, как решилось то?
     
  21. Mr.M.I.T.

    Mr.M.I.T. Старожил

    С нами с:
    28 янв 2008
    Сообщения:
    4.586
    Симпатии:
    1
    Адрес:
    у тебя канфетка?
    Ненавижу верстку.
    HTML:
    1. <div>
    2. <div style='float:left;'>some text</div> <div align='right'>some text</div>
    3. </div><br>
    4. <hr>
    Опера нормально переносит hr на новую строчку, в фф и оселе hr тоже оптекает епт...