Kristinka77
Гуру форума
- Регистрация
- 30 Янв 2015
- Сообщения
- 177
- Реакции
- 65
- Автор темы
- #1
Мне надо чтоб красный блок основной был как бы резиновый, а два блока в нём стояли на своих местах и когда страницу сжимаешь по горизонтали чтоб эти два блока жёлтый и синий не наползали друг на друга, вот смотрите на скринах:
Для просмотра ссылки Войдиили Зарегистрируйся
и вот если сжать страницу, красный нормально сжался, жёлтый вроде на месте но синий пролез под жёлтым и вылез слева:
Для просмотра ссылки Войдиили Зарегистрируйся
HTML такой:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<link href="proba.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="blok1">
<div class="blok2"></div>
<div class="blok3"></div>
</div>
</body>
</html>
А в CSS вот что у меня:
.blok1 {
position: relative;
height: 150px;
width: 100%;
background-color: #F00;
}
.blok2 {
position: absolute;
left: 6px;
top: 10px;
height: 89px;
width: 308px;
background-color: #FF0;
}
.blok3 {
position: absolute;
height: 89px;
width: 750px;
top: 10px;
right: 10px;
background-color: #00F;
}
Где я напортачила? Нужно чтоб как при полной странице блоки стояли на своих местах, и между ними было фиксированное расстояние так и при сжатой странице чтоб они выглядили одинаково и расстояние между ними не менялось и чтоб они никуда не налазили и не вылезали... Плиз помогите мне , я только начала изучать это дело, сложно.
Для просмотра ссылки Войди
и вот если сжать страницу, красный нормально сжался, жёлтый вроде на месте но синий пролез под жёлтым и вылез слева:
Для просмотра ссылки Войди
HTML такой:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<link href="proba.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="blok1">
<div class="blok2"></div>
<div class="blok3"></div>
</div>
</body>
</html>
А в CSS вот что у меня:
.blok1 {
position: relative;
height: 150px;
width: 100%;
background-color: #F00;
}
.blok2 {
position: absolute;
left: 6px;
top: 10px;
height: 89px;
width: 308px;
background-color: #FF0;
}
.blok3 {
position: absolute;
height: 89px;
width: 750px;
top: 10px;
right: 10px;
background-color: #00F;
}
Где я напортачила? Нужно чтоб как при полной странице блоки стояли на своих местах, и между ними было фиксированное расстояние так и при сжатой странице чтоб они выглядили одинаково и расстояние между ними не менялось и чтоб они никуда не налазили и не вылезали... Плиз помогите мне , я только начала изучать это дело, сложно.
