Блоки CSS

@Пиу Пиуу · Регистрация: 17.11.2012

Есть код, который делает три блока как на 1 скрине, при добавлении текста в левый блок(1) , 2 и 3 блок смещаются вниз, как этого избежать? нужно чтобы блоки оставались на том же месте, но были с текстом внутри

HTML5

<!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>

@Давран · 15.02.2015, 17:34

так правильней

HTML5

<!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>

@Пиу Пиуу · 15.02.2015, 17:47 **[ТС]**

Спасибо, сделал так и все стало норм.

HTML5

<!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

*{
            margin:0;
            padding:0;
        }

@Давран · 15.02.2015, 17:49

Сообщение от Пиу Пиуу

*{
* * * * * * margin:0;
* * * * * * padding:0;
* * * * }

дает правило чтоб у всего на странице по умолчанию не было отступов

@phpk · 15.02.2015, 22:12

Сообщение от Пиу Пиуу

Только остался вопрос, а что делает это?

Каждый браузер устанавливает свои правила и свои начальные размеры отступов в css, поэтому нужно сбросить эти правила

И тег <font> является устаревшим!

@Давран 202 / 151 / 44 Регистрация: 24.11.2013 Сообщений: 1,106
	15.02.2015, 17:49	4
	Сообщение от Пиу Пиуу { * * * * * margin:0; * * * * * * padding:0; * * * * } дает правило чтоб у всего на странице по умолчанию не было отступов 0

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313
	15.02.2015, 22:12	5
	Сообщение от Пиу Пиуу Только остался вопрос, а что делает это? Каждый браузер устанавливает свои правила и свои начальные размеры отступов в css, поэтому нужно сбросить эти правила И тег <font> является устаревшим! 0

Опции темы