Как сделать блок под блоком?
Всем привет, вот такой вопрос, помогите пож.
Как добавить еще блоки под левый блок, что бы не накладывались.
И еще, как в зависимости от написанного увеличивалась автоматически высота блока?
Спасибо заранее=))
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
/*-- Шапка сайта -- */ .header { width: 800px; height: 130px; border: 1px solid #0099FF; } /*-- Блоки (тело) -- */ .left_block { background-image: url("img/head_table.jpg"); background-repeat: no-repeat; width: 200px; float: left; } .left_block_1 { background-image: url("img/head_table.jpg"); background-repeat: no-repeat; width: 200px; } .block_main { width: 830px; height: 150px; border: 1px solid #0099FF; float: left; } .right_block { width: 200px; height: 150px; background-image: url("img/head_table.jpg"); background-repeat: no-repeat; float: right; } /*-- Оформление заголовков -- */ .write {font-family: "Times New Roman", serif; font-style: italic; color: #ffffff; font-size: 20px; } /*-- Подвал сайта -- */ .footer { width: 1250px; height: 50px; border: 1px solid #0099FF; float: both; }
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
html> head> title>Obris - все о с++ /title> link rel="stylesheet" type="text/css" href="style_h.css" /> /head> body> div class="header">img src="img/head.jpg">/div> div class="left_block">span class="write">b>Левый блок/center>/b>/span> br> ffdkfdfjsdkfs br> ddddddd br> ffffffff br> ffdkfdfjsdkfs /div> div class="left_block_1">span class="write">b>Левый блок/center>/b>/span> br> ffdkfdfjsdkfs br> ddddddd br> ffffffff br> ffdkfdfjsdkfs /div> div class="block_main">span class="write"> Центральный блок/center>/span>/div> div class="right_block">span class="write"> Правый блок/center>/span>/div> div class="footer">span class="write"> Правый блок/center>/span>/div> /body> /html>
Как с помощью CSS наложить элементы друг на друга
При разработке веб-дизайна часто нужно сделать так, чтобы два элемента перекрывались или полностью накладывались друг на друга. В CSS это можно реализовать с помощью свойства position и Grid.
Способ 1. Использование свойства Position
Свойство position со значением absolute разместит абсолютно позиционированный элемент на странице. В этом случае указывается позиция элемента относительно левого верхнего угла веб-страницы.
При добавлении других элементов первый будет смещаться вниз. Это можно исправить, установив для родительского элемента position: relative. Тогда все дочерние элементы с position: absolute будут размещены абсолютно относительно верхнего угла родительского элемента.
Также этот подход можно использовать для размещения одного элемента поверх другого. Например, два дочерних элемента, расположенных друг над другом, один из которых будет смещен на 150 пикселей. Они располагаются в одном родительском элементе и остаются внутри него.
Parent
Child 1
Child 2
.child < position: absolute; top: 0; >.child-1 < left: 0; >.child-2 < left: 150px; >.parent
Способ 2. Использование CSS Grid
Еще одним способом наложения элементов друг на друга является использование CSS Grid. Но эта технология поддерживается не всеми старыми браузерами.
С помощью Grid мы можем разместить элемент внутри контейнера следующим образом:
И если один элемент должен накладываться на другой, то нужно поместить их в одну область сетки. Давайте также немного сместим элемент, используя отступ.
Для облегчения позиционирования я создал CSS Grid Generator , который поможет вам визуально сконструировать необходимый макет.
Описанные выше методы позволяют накладывать элементы, создавать слои, управлять смещением элементов и их расположением на любой веб-странице.
Нужно наложить нижний блок на блок стоящий выше
Нужно #bg (в нем находится фон) поднять на #content. Пробывал писать для и для того и для другого:
position:relative; top:-150px/bottom:-150px;
Команды работают, и #bg поднимается. НО если я пишу эти правила для самого #bg, появляется отступ между #bg и #footer. Если пишу для #content отступ появляется между #content и #header. Есть у кого идеи по устранению данной проблемы.
Заранее благодарен за ответы.
Как наложить блок выше слоя scroll навигации
Здравствуйте уважаемые знатоки. Очередной раз прошу помощи в области web-дизайна. На этот раз.
Нужно чтобы нижний блок был ссылкой
Вопрос наверное глупый т.к. все делается почти наобум и фактически без знаний но. такая.
Смещаеться блок если на него наложить текст
Здраствуйте. Столкнулся с проблемой. Когда на блок с квадратом ложу текст, он почему-то смещаеться.
Bootstrap наложить один блок поверх другого
подскажите, как реализовать при помощи бутстрапа желательно вот такую систему. Чтоб один блок.
Мне надо чтобы девушки были на уровне «Novotex».
Да и пробывал в #content размещать блок #bg, но так же без результатно.
обе картинки в один блок, то есть в шапку и всё получится)))
У Вас просто по коду html получается, что девушки внизу, а в шапке будут наверху. Ну при условии правильного CSS, конечно))
position:relative; right:20px; top:50px;
координаты на глаз написал
можно ещё relative на absolute заменить, тогда остальные блоки будут себя вести так, будто блока с posotion:absolute не существует
Сообщение от rean1mator 
position:relative; right:20px; top:50px;
координаты на глаз написал
можно ещё relative на absolute заменить, тогда остальные блоки будут себя вести так, будто блока с posotion:absolute не существует
Как раз, на счет этого я и говорил, если и задавать, то соответственно отрицательный (т.к. надо ведь на другой элемент залесть). А когда я задаю для content
появляется отступ между bg и footer. Но правило срабатывает, фон встает на нужное место. Как тогда бороться с появляющимся отступом?
Надеюсь что правильно понял вашу проблему, P.S, CSS полностью выкладывать нужно(естественно тот который нужно).
Это делается следующим образом: Главному(родительскому) диву нужно задать position:relative; без дополнительных атрибутов позиционирования.
Вложенному(девушки в диве) элементу присвоить position:absolute, и выровнять его с помощью свойств позиционирования. Внутренний элемент в данном случае выйдет из потока(то-есть станет независимым от других) и будет позиционироваться относительно родительского, таким образом он всегда будет находиться на нужном месте.
Сообщение от Dmitry
Я если честно, плохо знаю про это правило, не могли бы вы подсказать. Что-то вспоминаю, он тоже используется вместе с правилом position? =)
Сообщение от Inocs
Надеюсь что правильно понял вашу проблему, P.S, CSS полностью выкладывать нужно(естественно тот который нужно).
Это делается следующим образом: Главному(родительскому) диву нужно задать position:relative; без дополнительных атрибутов позиционирования.
Вложенному(девушки в диве) элементу присвоить position:absolute, и выровнять его с помощью свойств позиционирования. Внутренний элемент в данном случае выйдет из потока(то-есть станет независимым от других) и будет позиционироваться относительно родительского, таким образом он всегда будет находиться на нужном месте.
Помогло без проблем лишь только в опере (пробывал еще хром и фаерфокс), а в двух других то, что на рисунке. То есть фон основной (тот что красный) не продолжился на footer и трубка стояла между адресом и телефоном.
если я правильно понял, z-index указывает номер слоя (от меньших (нижних) до больших значений (верхних)).
#recdiv { z-index:5; background:red; width:240px; height:50px; margin:0px; top:25px; left:25px; position:absolute; border: #a32828 3px solid; }
вот блок с параметрами описанными выше прекрасно располагается у меня поверх всего, находящегося в основном поле страницы, у которой z-index равен 1.
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
#wrapper{ background:#ed1c24; margin:0; } #main{ background:url(images/bg.png) no-repeat; width:780px; margin:auto; position:relative; } #header{ width:780px; height:110px; margin: 0 0 20px; } #content{ margin:0; width:780px; } #left{ width:550px; float:left; background:url(images/strip-vert.png) no-repeat 545px 400px; padding:0 0 50px; } #right{ margin:0 0 0 550px; padding:0px 0 0 10px; width:200px; height:100%; }#bg{ background:url(images/workers.png) no-repeat; width:780px; height:213px; position:absolute; top:720px; } #footer{ background:url(images/tube.png) no-repeat 440px 0; width:780px; height:90px; }
Выложил правила для так сказать главных блоков.
А на счет z-index у меня не получается грамотно поднять нужный мне блок, а если я его поднимаю, он находится выше слоем и закрывает то на который залезает, но спасибо за идею )
Добавлено через 10 часов 12 минут
Не только на footer фон не работает, а не появляется при прокрутки скрола вниз.