Вёрстка, неполучается убрать два блока под несколько других. - Помощь студентам

Aigaion · 22.09.2013, 15:44

Надо так:

У меня получается так:

Не могу частично спрятать два синих блока под остальные блоки. Если вкладываю блоки класс синего квадрата, то всё смещается и синий блок пропадает. Понимаю что ошибки в наследовании и позиционировании. Но найти не могу.

Каким образом правильно расположить синие блоки так, как указано в задании?

Код 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