Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
vjacheslav9
14 / 4 / 0
Регистрация: 06.02.2015
Сообщений: 242
1

Расположение блоков рядом

21.11.2016, 15:40. Просмотров 286. Ответов 1
Метки нет (Все метки)

Подскажите пожалуйста как можно расположить блоки Left и Content рядом? написал в CSS код, но только ничего не выходит.
CSS
1
2
3
4
#content{
background-color:#83a0f3;
margin-left:150px;
}
в блоке Content устанавливаю обтекание но обтекание не получается сделать.
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
<DOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
<html>
<head>
<meta http-equiv="Content-Type"content="text/html"; charset=windows-1251">
<title>Блочная верстка</title>
<link href="style_1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="content"><div id="left">
<h3>left Content</h3>
</div>
 <h1>Main Content</h1>
 <p>Lorem ipsum dolor sit amet consectetuer adlplscing elit.
 Praesent allquam, justo convailis luctus rutrum, erat nulla fermentum
 lnteger turpis arcu, pellentesque eget, cursus et, fementum ut, seplen.
 Fursce metus mi, eleifend sollictudin, molestie id, varius et, nibh.
 Donec nec libero.</p>
<h1>Content</h1>
 <p>Lorem ipsum dolor sit arment, consectetuer adipiscing elit.</p>
 <p>Quisque ornare risurs quis liqula Phasellus tristique
 purus a augue condimentum adioiscung. Aenean sagitttis.
 Etlam leo pede, rhoncus venatis, tristique in, dulputate at, odio.</p>
</div>
 <div id="footer">
 <p><strong>Footer</strong></p>
 </div>
 </body>
 <html>
CSS
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
/* CSS Document */
body, html {
margin:0px; /*Это хорошая практика обнулять поля и отступы, т.к.
Различные браузеры их по разному воспринимают.*/
padding:0px;
text-align:center; /*Выравниваем макет (содержимое элемента body
будет посередине) по центру в старых версиях браузеров*/
}
#container{
margin:0 auto; /*выравниваем макет по центру в современных браузерах*/
width:650px;
}
/*Здась пишем стили для шапки сайтов*/
#header{
background-color:#64dab2;
}
/*Здесь пишем стили для блока контента*/
#content{
background-color:#83a0f3;
margin-left:150px;
}
/*Здесь пишем стили для левой колонки сайта*/
#left{
background-color:#ffff66;
float:left;
}
#content h1 {
margin:0px; /* Обнуляем отступы для заголовка первого уровня, 
находящегося в блоке контента.*/
}
/*Здесь пишем стили для подвала сайта */
#footer{
cltar:both;
background-color:#ccc;
}
  </style>
Получается сделать только так. Пытаюсь расположить блок "left Content" с лева.
0
Миниатюры
Расположение блоков рядом  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
21.11.2016, 15:40
Ответы с готовыми решениями:

Расположение блоков
Возможно ли без лишних шаманств (кроссбраузерно и валидно) отобразить блок в...

Расположение блоков
Здравствуйте. Почему блоки &quot;menu1&quot;, &quot;menu2&quot;, &quot;menu3&quot;, &quot;menu4&quot;, &quot;menu5&quot;...

Расположение блоков
Снова вопрос, работаю над адаптивностью и в 5-ти блоках что через флекс,...

Расположение блоков
Линию та что по середине сделал по подобию как мне написали в теме. Но вот с...

Расположение блоков
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;...

1
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2745 / 2305 / 1017
Регистрация: 15.12.2012
Сообщений: 8,561
Записей в блоге: 1
21.11.2016, 16:02 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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type"content="text/html"; charset=windows-1251">
        <title>Блочная верстка</title>
        <link href="style_1.css" rel="stylesheet" type="text/css">
        <style>
            /* CSS Document */
            body, html {
            margin:0px; /*Это хорошая практика обнулять поля и отступы, т.к.
            Различные браузеры их по разному воспринимают.*/
            padding:0px;
            text-align:center; /*Выравниваем макет (содержимое элемента body
            будет посередине) по центру в старых версиях браузеров*/
            }
            #container{
            margin:0 auto; /*выравниваем макет по центру в современных браузерах*/
            width:650px;
            }
            /*Здась пишем стили для шапки сайтов*/
            #header{
            background-color:#64dab2;
            }
            /*Здесь пишем стили для блока контента*/
            #content{
            background-color:#83a0f3;
            margin-left:150px;
            }
            /*Здесь пишем стили для левой колонки сайта*/
            #left{
            background-color:#ffff66;
            float:left;
            }
            #content h1 {
            margin:0px; /* Обнуляем отступы для заголовка первого уровня, 
            находящегося в блоке контента.*/
            }
            /*Здесь пишем стили для подвала сайта */
            #footer{
            cltar:both;
            background-color:#ccc;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <h1>Header</h1>
            </div>
            <div id="left">
                <h3>left Content</h3>
            </div>
            <div id="content">
                <h1>Main Content</h1>
                <p>Lorem ipsum dolor sit amet consectetuer adlplscing elit.
                Praesent allquam, justo convailis luctus rutrum, erat nulla fermentum
                lnteger turpis arcu, pellentesque eget, cursus et, fementum ut, seplen.
                Fursce metus mi, eleifend sollictudin, molestie id, varius et, nibh.
                Donec nec libero.</p>
                <h1>Content</h1>
                <p>Lorem ipsum dolor sit arment, consectetuer adipiscing elit.</p>
                <p>Quisque ornare risurs quis liqula Phasellus tristique
                purus a augue condimentum adioiscung. Aenean sagitttis.
                Etlam leo pede, rhoncus venatis, tristique in, dulputate at, odio.</p>
            </div>
            <div id="footer">
            <p><strong>Footer</strong></p>
        </div>
    </body>
 </html>
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
21.11.2016, 16:02

Расположение блоков
Здраствуйте. Как расположить блоки так, как показано на рисунке:

Расположение блоков
Подскажите как разместить блоки на одной строке, чтобы один был по центру, а...

Расположение блоков
Доброго дня. Такая проблемка появилась. Имеются 3 блока, выстроенные в 1...


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

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

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