Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
0 / 0 / 0
Регистрация: 17.11.2012
Сообщений: 10
1

Блоки CSS

15.02.2015, 17:24. Просмотров 382. Ответов 4
Метки нет (Все метки)


Есть код, который делает три блока как на 1 скрине, при добавлении текста в левый блок(1) , 2 и 3 блок смещаются вниз, как этого избежать? нужно чтобы блоки оставались на том же месте, но были с текстом внутри
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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    .block1_0 {
    width: 500px;
    height: 500px;
    }
    .block1_1 {
    width: 150px;
    height: 500px;
    background: Blue;
    }
    .block1_3 {
    width: 350px;
    height: 100px;
    background: Red;
    margin-left: 150px;
    }
    .block1_2 {
        width: 350px;
        height: 400px;
        margin-left: 150px;
        background: Green;
    }
    </style>
</head>
<body>
<div class="block1_0">
    <div class="block1_1">
        <p align="center"><font  size="5" color="red"> ytertw</font></p>
        <br/>
        <div class="block1_3">
            <img src="CSS_pic1.png" >
        </div>
 
        <div class="block1_2">
 
        </div>
    </div>
</div>
</body>
</html>
0
Миниатюры
Блоки CSS   Блоки CSS  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
15.02.2015, 17:24
Ответы с готовыми решениями:

CSS Задание CSS блоки
Создайте страницу

блоки в css
Здравствйте ребята. Подскажите пожалуйста, какую команду прописать, чтобы блоки при перемещние не...

Блоки css
krabo.ru/index.php?route=product/category&amp;path=88 Я чайник, поэтому не знаю как правильно это...

Блоки в CSS
Доброго времени суток! Помогите плиз с DIVфами... Существует резиновый сайт. Мне нужно в...

__________________
Помогаю в написании курсовых работ и дипломов здесь.
4
202 / 151 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
15.02.2015, 17:34 2
так правильней
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
51
52
53
54
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    *{
    margin:0;
    padding:0;
    }
    .block1_0 {
    margin-left:150px;
    position:reletive;
    width: 500px;
    height: 500px;
        }
    .block1_1 {
    position:absolute;
    left:0;
    top:0;
    width: 150px;
    height: 500px;
    background: Blue;
    
 
    }
    .block1_3 {
    width: 350px;
    height: 100px;
    background: Red;
    }
    .block1_2 {
        width: 350px;
        height: 400px;
        background: Green;
    }
    </style>
</head>
<body>
<div class="block1_0">
    <div class="block1_1">
        <p align="center"><font  size="5" color="red"> ytertw</font></p
    </div>  
    <div class="block1_3">
            <img src="CSS_pic1.png" >
    </div>
 
    <div class="block1_2">
    
    </div>
    
</div>
</body>
</html>
1
0 / 0 / 0
Регистрация: 17.11.2012
Сообщений: 10
15.02.2015, 17:47  [ТС] 3
Спасибо, сделал так и все стало норм.
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
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
 
        *{
            margin:0;
            padding:0;
        }
        .block1_0 {
 
            position:absolute;
            width: 500px;
            height: 500px;
        }
        .block1_1 {
            position:absolute;
            left:0;
            top:0;
            width: 150px;
            height: 500px;
            background: Blue;
 
 
        }
        .block1_3 {
            top:0;
            margin-left: 150px;
            position:absolute;
            width: 350px;
            height: 100px;
            background: Red;
        }
        .block1_2 {
            position:absolute;
            margin-top: 73px;
            margin-left: 150px;
            width: 350px;
            height: 400px;
            background: Green;
        }
    </style>
</head>
<body>
<div class="block1_0">
    <div class="block1_1">
        <p align="center"><font  size="5" color="red"> ytertw</font></p
    </div>
    <div class="block1_3">
        <img src="CSS_pic1.png" >
    </div>
 
    <div class="block1_2">
 
    </div>
 
</div>
</body>
</html>
Только остался вопрос, а что делает это?
HTML5
1
2
3
4
*{
            margin:0;
            padding:0;
        }
0
202 / 151 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
15.02.2015, 17:49 4
Цитата Сообщение от Пиу Пиуу Посмотреть сообщение
*{
* * * * * * margin:0;
* * * * * * padding:0;
* * * * }
дает правило чтоб у всего на странице по умолчанию не было отступов
0
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
15.02.2015, 22:12 5
Цитата Сообщение от Пиу Пиуу Посмотреть сообщение
Только остался вопрос, а что делает это?
Каждый браузер устанавливает свои правила и свои начальные размеры отступов в css, поэтому нужно сбросить эти правила

И тег <font> является устаревшим!
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
15.02.2015, 22:12

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь или здесь.

блоки CSS
Делаю блоки CSS. Что я заметил. Во первых: при уменьшении окна браузера блоки могут немного...

Блоки в css
два блока текста с разным цветом и единым фоном

Блоки в css html
подскажите как сделать 3 блока подряд &lt;div id=&quot;vse&quot;&gt; &lt;div id=&quot;vse1&quot;&gt;&lt;/div&gt; &lt;div...

Div Блоки CSS
Вот песочница. Можно блок css использовать многократно? допустим у нас есть блок: #blockshop {...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.