Обтекание рекламного блока

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

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

    OnArs

    Регистр.:
    30 авг 2008
    Сообщения:
    259
    Симпатии:
    74
    Здравствуйте, Нульдяне! :)

    Подскажите пожалуйста:

    Как сделать так чтобы при обтекании объекта сверху не оставалось пустоты?
    В данном случае для "жёлтого" слоя используются сдледующие настройки стиля:
    Код:
       #layer {
        float: left; 
        background: #fd0; 
        margin: 100 0 0 0;
        border: 1px solid black; 
        padding: 10px; 
        width: 40%; 
       }
    html код страницы:
    HTML:
    
      <div id="layer">
      Жёлтый слой
      </div>
      <div style="clear: left"></div>
      <p>Много текста здесь...</p> 
    
    В прикреплении 2 скриншота, 1.jpg как сейчас, 2.jpg как требуется сделать.
    Заранее благодарен всем ответам! :ay:
     

    Вложения:

    • 2.jpg
      2.jpg
      Размер файла:
      45,8 КБ
      Просмотров:
      13
    • 1.jpg
      1.jpg
      Размер файла:
      53,4 КБ
      Просмотров:
      2
  2. t3s

    t3s

    Регистр.:
    16 фев 2008
    Сообщения:
    719
    Симпатии:
    290
    HTML:
    
       #layer {
        float: left; 
        background: #fd0; 
        margin: 5px;
        border: 1px solid black; 
        padding: 10px; 
        width: 40%; 
       }
    
    HTML:
    
    <body>
    тут много текста
    <div id="layer">Жёлтый слой</div>
    а тут тоже дофигища текста
    </body>
    
    если используете тег p, то обнулите его, иначе будет не совсем как на скрине (параграф добавляет свои отступы)
     
  3. OnArs

    OnArs

    Регистр.:
    30 авг 2008
    Сообщения:
    259
    Симпатии:
    74
    Большое спасибо за ответ, но такой вариант не совсем подходит, т.к. у меня строгое расположение элементов:

    Сначала <div>, затем <p>

    И двигать Я их не могу.

    Какие - то альтернативные варианты существуют?
     
  4. t3s

    t3s

    Регистр.:
    16 фев 2008
    Сообщения:
    719
    Симпатии:
    290
    строгое расположение элементов можно сделать, к примеру, с помощью отрицательных марджинов... уверены что осилите? Если интересно, посмотрите

    alistapart.com
    пожалуй, лучший в инете ресурс для верстальщиков
     
  5. nittis

    nittis Постоялец

    Регистр.:
    21 апр 2009
    Сообщения:
    68
    Симпатии:
    29
    Такой вариант подойдет или создание нового дива так же не желательно?

    HTML:
      
       #wrapper {
        float: left; 
        margin: 5px;
        width: 40%; 
        padding-top: 100px;
       }
    
       #layer {
        float: left; 
        background: #fd0; 
        border: 1px solid black; 
        padding: 10px; 
       }
    
      <div id="wrapper">
      <div id="layer">
      Жёлтый слой
      </div>
      </div>
      <div style="clear: left"></div>
      <p>Много текста здесь...</p> 
    
     
  6. OnArs

    OnArs

    Регистр.:
    30 авг 2008
    Сообщения:
    259
    Симпатии:
    74
    У меня вот что получилось по приведённому Вами коду...

    Что-то мб не праивльно делаю? :bc:
     

    Вложения:

    • 3.jpg
      3.jpg
      Размер файла:
      36,9 КБ
      Просмотров:
      1
  7. nittis

    nittis Постоялец

    Регистр.:
    21 апр 2009
    Сообщения:
    68
    Симпатии:
    29
    Я в прошлый раз код не проверил - просто хотел показать идею, но если нужен полностью рабочий пример, то вот он

    HTML:
      <style> 
       #wrapper {
        float: left; 
        margin: 5px;
        width: 40%; 
        padding-top: 100px;
       }
       #layer {
        background: #fd0; 
        border: 1px solid black; 
        padding: 10px;
       }
      </style> 
       
      <div id="wrapper">
      <div id="layer">
      Жёлтый слой
      </div>
      </div>
      <p>Много текста здесь</p>
    На сей раз удостоверился в правильности отображения в IE, FF и Chrome
     
  8. troop3r

    troop3r Постоялец

    Регистр.:
    14 ноя 2009
    Сообщения:
    138
    Симпатии:
    22
    OnArs, эту конструкцию
    HTML:
     <div style="clear: left"></div>
      <p>Много текста здесь...</p> 
    заменяешь на
    HTML:
    Много текста здесь...
    баг должен исчезнуть.
     
  9. OnArs

    OnArs

    Регистр.:
    30 авг 2008
    Сообщения:
    259
    Симпатии:
    74
    Покажите мне скриншоты того что у Вас получилось, т.к. у меня получается всё так же как в моём последнем сообщении
     
  10. nittis

    nittis Постоялец

    Регистр.:
    21 апр 2009
    Сообщения:
    68
    Симпатии:
    29
    Вот из Crome, например.

    В остальных примерно та же картина.
     

    Вложения:

    • yellowblock.png
      yellowblock.png
      Размер файла:
      36,1 КБ
      Просмотров:
      3
Статус темы:
Закрыта.