|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
22.09.2013, 15:44 | #1 |
Новичок
Джуниор
Регистрация: 19.09.2013
Сообщений: 1
|
Вёрстка, неполучается убрать два блока под несколько других.
Надо так:
У меня получается так: Не могу частично спрятать два синих блока под остальные блоки. Если вкладываю блоки класс синего квадрата, то всё смещается и синий блок пропадает. Понимаю что ошибки в наследовании и позиционировании. Но найти не могу. Каким образом правильно расположить синие блоки так, как указано в задании? Код HTML:
<!DOCTYPE HTML> <html> <head> <title>Главная страница</title> <meta charset="utf-8"> <link rel="stylesheet" href="style/style.css" type="text/css"/> <style type="text/css"> </style> </head> <body> <div class="one1"> <div class="green1"> </div> <div class="black1"> </div> <div class="white1"> </div> <div class="brown1"> </div> </div> <div class="grey1"> <div class="red1"> </div> </div> <div class="blue1"> </div> <div class="blue2"> </div> <div class="blue3"> </div> </body> </html> Код HTML:
/* файл стилей css*/ .one1 { /* класс главного родительского блока для четырёх разноцветных*/ height:200px;/*высота*/ width: 200px;/*ширина*/ border:1px solid black; /*бордюр, рамка*/ background: yellow; /*цвет фона*/ position: relative; /* позиционирование относительно исходного места left, top, right и bottom изменяет позицию*/ } .green1 {/*класс зелёного квадрата*/ height:100px; width: 100px; background: green; position: relative; } .black1 { /*класс чОрного квадрата*/ height: 100px; width: 100px; background: black; position: relative; } .white1 {/*класс белого квадрата*/ height:100px; width: 100px; background: white; position: relative; left: 100px; bottom: 200px; } .brown1 { height: 100px; width: 100px; background: brown; position: relative; left: 100px; bottom: 200px; } .grey1 {/*класс здоровенного сегого прямоугольника*/ border:1px solid black; /*бордюр, рамка*/ height: 200px; width: 560px; background: grey; position: relative; left:220px; bottom: 202px; } .red1 {/*класс здорового красного прямоугольника*/ height:140px; width: 500px; background: red; position: relative; left:30px; top:30px; } .blue1{ /*класс синего квадрата, с ним проблема*/ height:150px; width: 150px; background: blue; position: absolute; left: 140px; top: 160px; } .blue2 { height:150px; width: 150px; background: blue; position: absolute; left: 300px; top: 160px; } .blue3 { height:150px; width: 150px; background: blue; position: absolute; left: 460px; top: 160px; } |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Передача двух страниц в два div-блока одной ссылкой | lino217 | JavaScript, Ajax | 0 | 22.07.2013 04:06 |
Вёрстка макета psd под MaxSite | -=Virus=- | Фриланс | 0 | 06.01.2013 02:53 |
(Delphi) разделение одного массива на несколько других | Semiotica | Помощь студентам | 6 | 01.05.2012 21:42 |
Два блока в контейнере | mutabor | HTML и CSS | 5 | 02.01.2011 00:41 |
Как в файле собственного типа (с возможностью шифрования) сохранять несколько других файлов? | Кронос | Помощь студентам | 1 | 20.01.2010 21:27 |