Обтекание diva c position:absolute

@cevil · Регистрация: 07.04.2014

Студворк — интернет-сервис помощи студентам

Добрый вечер Форумчане! При изучении резиновой верстки, возник вот такой вопрос:
Есть div с position:ablolute, (эт который с рамкой желтого цвета) блок с навигацией, который например прилеплен к верхнему правому краю, всю остальную область занимает текст. Вот как сделать чтоб этот текст обтекал этот блок, а не был под ним?

@Lazy_Den · 04.11.2014, 20:01

cevil, во-первых, ваш вопрос скорее из области HTML/CSS, но это не суть важно. Во-вторых, для решения вашей конкретной задачи, нужно видеть и разметку, и стили.

@cevil · 04.11.2014, 22:57 **[ТС]**

Мда не обратила внимания на раздел в котором разместила вопрос.

Добавлено через 5 минут
Что касается кода

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<body>
<div id="page-wrap">
    <div id="page">
    <div id="body">
           
 
    <div id="content">
        <div id="content-block">            
            <div class="centr">
                <div class="yellow">
                    <ul >
                        <li><img src="img/point.png" alt="point"><a href="#">Наши преподаватели</a><img src="img/point.png" alt="point"></li>
                        <li><img src="img/point.png" alt="point"><a href="#">Учебный план</a><img src="img/point.png" alt="point"></li>
                        <li><img src="img/point.png" alt="point"><a href="#">Игры учеников</a><img src="img/point.png" alt="point"></li>
                        <li><img src="img/point.png" alt="point"><a href="#">Где мы находимся</a><img src="img/point.png" alt="point"></li>
                    </ul>
                </div>
            <h2> GAME DEVELOPERS ACADEMY </h2>
 
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non porttitor ipsum. Maecenas gravida gravida sapien, ut viverra arcu ornare eu. Sed condimentum eleifend nibh, quis rutrum turpis vulputate eleifend. Vivamus gravida lacus id mauris eleifend sed consequat mauris egestas. Etiam eget velit libero. Etiam tincidunt, nunc eu sodales volutpat, sem est rhoncus tellus, non auctor sem neque eget tellus. Integer sed mi vestibulum risus dignissim molestie. Quisque rhoncus vulputate mi, in posuere lorem molestie ac. Donec bibendum sem nec leo aliquet interdum.Cras pulvinar tincidunt vulputate. Nulla mauris metus, ullamcorper a egestas ac, cursus nec tortor. Duis ut mi odio. Duis augue diam, hendrerit vitae aliquet et, egestas et tellus. Nullam eu leo erat. Aliquam egestas aliquam nibh, eget congue mi aliquam eget. Aliquam massa felis, sodales vitae viverra at, aliquam pretium purus. Phasellus nec turpis arcu, vitae mattis orci. Nullam mauris ligula, consequat non condimentum in, lacinia vel odio. Pellentesque vitae congue nisl.
 
 
            </div>
        </div>
 
        <!--- menu-->
            <div class="sidebar" role="complementary">
                <div class="wrapper">
                    <div class="design-selection" id="design-selection">
                    <img src="img/logo.png">        
                    <ul class="cbp-vimenu">
                        <li><a href="#">О нас</a></li>                  
                        <li><a href="#">Свежие новости</a></li>
                        <li><a href="#">Игры учеников</a></li>
                        <li><a href="#">Наши мероприятия</a></li>    
                        <li><a href="#">Галерея</a></li> 
                        <li><a href="#">База знаний</a></li>
                        <li><a href="#">Контакты</a></li>       
                    </ul>   
                    </div>
                </div>
            </div>
         <!--- menu-->
    </div>
 
 
    </div>     
    </div>
</div>
</body>

стили

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 100%;
}
 
#page-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
 
#page {
    max-width: 1900px;
    min-width: 450px;
    height: 100%;
    margin: 0 auto;
   
}
 
#body {
    width: 100%;
    height: auto;
    min-height: 100%;
    margin: 0;
    padding: 0;
   
}
 
#content {
    width: 100%;
    margin: 0;
   
}
 
#content-block {
    margin: 0 0 0 277px;
 
}
 
/* left menu*/
.sidebar {
    position: absolute;
    top: 0px;
    left: 0;
    width: 277px;
    height: 100%;
    
    }
.sidebar .wrapper {
    font: 1.2em courier, monospace;
    padding: 10px;
    width: 250px;
    height: 100%;
    float: right;
    position: fixed;
    background: url('../img/pattern.jpg') repeat-y center;
 
    }
.centr{
    position: relative;
    min-width: 695px;
} 
.yellow{
    position: absolute;
    right: 0; top: 0;
    border: 8px solid #ffdc4c;
    text-align: center;
    padding-top: 10px;
    width: 12em;
    overflow: hidden;
    float: left;
}

@Lazy_Den · 04.11.2014, 23:30

cevil, абсолютное позиционирование тут неуместно. Для резиновой верстки, в вашем случае, вполне можно использовать псевдотабличные свойства:
display: table | table-row | table-cell;
Они поддерживаются начиная с IE8 и во всех остальных нормальных браузерах. По сути, нам достаточно такой разметки:

CSS
1
2
3
4
5
6
7
<div class="table">
    <div class="table-row">
        <div class="table-cell"></div>
        <div class="table-cell"></div>
        <div class="table-cell"></div>
    </div>   
</div>

Классы я назвал так, как должно быть определено свойство "display" для каждого. Посмотрите пример в действии

Добавлено через 2 минуты
P.S. Без второго дочернего элемента table-row можно обойтись, но без него могут быть баги в Safari 3.1. Хотя, эта версия устарела и теоретически её можно сбросить со счетов.

Добавлено через 3 минуты
Еще пара советов. Я заметил, что вы используете изображения в качестве оформления или разделителей в пунктах меню. Если дизайн позволяет, то лучше использовать псевдоклассы ":before, :after" или псевдоэлементы для современных браузеров "::before, ::after"

@cevil · 04.11.2014, 23:39 **[ТС]**

Никогда прежде не использовала display: table. Весьма удобно!!!
Но если я правильно поняла, обтекание текста внизу желтого блока не будет, т.к это три разные ячейки.

Добавлено через 1 минуту
На счет псевдокласов ":before, :after" возьму на заметку, спасибо! А то в вопросах верстки совсем сырые знания еще

@Lazy_Den · 04.11.2014, 23:51

Сообщение от cevil

обтекание текста внизу желтого блока не будет

Для обтекания желтого блока, не нужно разделять на три колонки, а достаточно этому блоку задать свойство float: right; (смотрим), но при этом блок должен находится первым в родительском блоке.

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

@cevil 12 / 12 / 5 Регистрация: 07.04.2014 Сообщений: 174

	Обтекание diva c position:absolute 04.11.2014, 19:39. Показов 3384. Ответов 5 Метки нет (Все метки) Добрый вечер Форумчане! При изучении резиновой верстки, возник вот такой вопрос: Есть div с position:ablolute, (эт который с рамкой желтого цвета) блок с навигацией, который например прилеплен к верхнему правому краю, всю остальную область занимает текст. Вот как сделать чтоб этот текст обтекал этот блок, а не был под ним? Изображения 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	04.11.2014, 20:01
	cevil, во-первых, ваш вопрос скорее из области HTML/CSS, но это не суть важно. Во-вторых, для решения вашей конкретной задачи, нужно видеть и разметку, и стили. 0

@cevil 12 / 12 / 5 Регистрация: 07.04.2014 Сообщений: 174
	04.11.2014, 23:39 [ТС]
	Никогда прежде не использовала display: table. Весьма удобно!!! Но если я правильно поняла, обтекание текста внизу желтого блока не будет, т.к это три разные ячейки. Добавлено через 1 минуту На счет псевдокласов ":before, :after" возьму на заметку, спасибо! А то в вопросах верстки совсем сырые знания еще 0

Опции темы