Горизонтально разместить блок новостей под меню

@BadPawn · Регистрация: 26.08.2016

Студворк — интернет-сервис помощи студентам

Всем привет.

Удалось сделать с помощью margin и clear: both, но при изменении масштаба блок то выше, то ниже. В зависимости от разрешения(+\-).

Подскажите пожалуйста, как достичь этого без изъянов.

@N-Star · 23.03.2017, 06:37

Кидайте код хоть что ли)))

@BadPawn · 23.03.2017, 07:02 **[ТС]**

spassk-gdp.ru — не реклама. Слева расположено основное меню и ниже картинки, вот эти картинки нужно разместить ниже отдельным блоком div.

Код:

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
<!DOCTYPE html>
<html lang="ru">
    <head>
        <TITLE>Главная | «Спасская ГДП»</TITLE>
        <META CHARSET="utf-8">
        <meta name="title" content="Главная" alt="спасская городская детская поликлиника">
        <LINK REL="stylesheet" HREF="main_style/style_main.css" type="text/css">
        <LINK href="main_images/favicon.ico" rel="shortcut icon" type="image/ico"/>
    </head>
 
    <body>
        <div class="header">
            <a href="http://spassk-gdp.ru"><img style="text-align: center;" src="main_images/логотип.jpg" alt="Спасская городская детская поликлиника"></a>
        </div>
 
        <div class="clear">
 
        </div>
        
        <div class="menu">
            <ul>
                <li><a href="index.html"><span>Главная</span></a></li>
                <li><a href="news.html"><span>Новости и события</span></a></li>
                <li><a href="information_list.html"><span>Сведения об учреждении</span></a>
                    <ul class="submenu">
                        <li><a href="charter.html"><span>Устав и лицензии</span></a></li>
                        <li><a href="structure.html"><span>Структура</span></a></li>
                        <li><a href="organs_control.html"><span>Вышестоящие и контролирующие организации</span></a></li>
                        <li><a href="types_medical.html"><span>Виды оказываемой медицинской помощи</span></a></li>
                        <li><a href="working_job.html"><span>Режим работы</span></a></li>
                        <li><a href="spe******ts.html"><span>Специалисты и график приёма</span></a></li>
                        <li><a href="contacts.html"><span>Контакты</span></a></li>
                        <li><a href="vacancies.html"><span>Вакансии</span></a></li>
                    </ul>
                </li>
                <li><a href="information_base.html"><span>Информационная база</span></a></li>
                <li><a href="zapis.html"><span>Запись на приём к врачу</span></a></li><br>
            </ul>
        </div>
 
        <div class="clear">
 
        </div>
        
        <div class="test">
            <a href="https://www.rosminzdrav.ru/polls/9-anketa-dlya-otsenki-kachestva-okazaniya-uslug-meditsinskimi-organizatsiyami-v-ambulatornyh-usloviyah?region_code=PRI"><img width="250" height="100" src="main_images/vote.png" alt="Анкета для оценки качества оказания услуг медицинскими организациями"></a>
            <a href="http://pkmiac.ru/anketa_mis.php"><img width="250" height="100" src="main_images/competition.png" alt="Анкета по оценке работы регистратуры поликлиники"></a>
            <a href="corruption.html"><img width="250" height="100" src="main_images/corruption.jpg" alt="Запрет коррупции"></a>
            <a href="stock1.html"><img width="250" height="200" src="main_images/stock1.jpg" alt="Государственная услуга «Тройня»"></a>
            <a href="stock2.html"><img width="250" height="200" src="main_images/stock2.jpg" alt="Риск развития нарушения слуха"></a>     
        </div>
    
        <div class="content">
            <img style="text-align: center;" width="825" height="600" src="main_images/main.jpg">
            <p>Добро пожаловать на сайт краевого государственного бюджетного учреждения здравоохранения «Спасская городская детская поликлиника».</p>
            <p>У нас Вы получите интересную и полезную информацию.</p>
            <p>По вопросам связанных с работой сайта, оставить отзыв или подать жалобу, задать вопрос, писать на электронный адрес <a href="mailto:muzsgdp@yandex.ru">muzsgdp@yandex.ru</a> с соответствующим названием темы сообщения.</p>
        </div>
 
        <div class="clear">
 
        </div>
 
        <div class="footer">
            <img style="text-align: center;" src="main_images/подвал.jpg" alt="Главная">
        </div>
    </body>
</html>

Css:

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
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
* {
    margin: 0 auto;
    padding: 2px;
}
 
body {
    width: 300px;
    min-width: 1250px;
    
    background: -moz-radial-gradient(center, ellipse cover, #008B8B, #AFEEEE);
    background: -webkit-linear-gradient(top, #008B8B, #AFEEEE);
    background: -o-linear-gradient(top, #008B8B, #AFEEEE);
    background: -ms-linear-gradient(top, #008B8B, #AFEEEE);
}
 
.header {
    font-family: 'Kotta One', serif;
    text-align: center;
    
    height: 97px;
    min-height: 97px;
    max-height: 97px;
    width: 1150px;
    min-width: 1193px;
    max-width: 1193px;
    
    border: 2px solid #2F4F4F;
    border-radius: 5px;
    background: #F0FFF0;
    z-index: 1;
    
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 10px;
}
 
.menu {
    font-family: 'Kotta One', serif;
    margin-left: 25px;
    float: left;
    width: 330px;
    min-width: 330px;
    max-width: 330px;
 
    z-index: 2;
 
    border: 2px solid #2F4F4F;
    border-radius: 5px;
    background: #F0FFF0;
}
div.menu > ul {
    list-style: none;
    margin-left: 10px;
}
div.menu > ul > li > a {
    font-size: 20px;
    color: #0e316e;
}
div.menu > ul > li:hover > a {
    color: red;
}
div.menu > ul > li > ul.submenu > li:hover > a {
    color: red;
}
div.menu > ul > li > ul.submenu > li {
    list-style: none;
}
div.menu > ul > li > ul.submenu > li > a {
    font-size: 14px;
    color: #4682B4;
}
 
.content {
    float: right;
    
    width: 840px;
    min-width: 840px;
    max-width: 840px;
 
    border: 2px solid #2F4F4F;
    border-radius: 5px;
    background: #F0FFF0;
    z-index: 3;
    
    margin-top: -349px;
    margin-right: 25px;
}
.content p {
    font-family: 'Kotta One', serif;
    margin: 5px 10px 5px 10px;
    font-size: 16px;
}
 
.footer {
    font-family: 'Kotta One', serif;
    text-align: center;
    height: 52px;
    width: auto;
    
    z-index: 4;
    border: 2px solid #2F4F4F;
    border-radius: 5px;
    background: #F0FFF0;
    
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 10px;
}
 
div.test {
    font-family: 'Kotta One', serif;
    margin-left: 25px;
    margin-top: 4px;
 
    float: left;
 
    width: 330px;
    min-width: 330px;
    max-width: 330px;
    
    z-index: 2;
    
    border: 2px solid #2F4F4F;
    border-radius: 5px;
    background: #F0FFF0;
}

Большой код. Почему выложил весь, потому, что маленький пиксель в любом месте может сменить местоположение блока.

Очень прошу помочи.

@mrtoxas · 23.03.2017, 09:56

CSS
1
2
3
4
* {
    margin: 0 auto;
    padding: 2px;
}

Что это за чудеса?

У вас есть класс .clear, но стили для него вы нигде не определяете. Одно добавление блока с этим классом ничего не даст.

CSS
1
2
3
4
5
.clear:after{
  content: '';
  display:table;
  clear: both;
}

@BadPawn · 23.03.2017, 11:05 **[ТС]**

Дружище, подскажи пожалуйста, что делать? Добавил выше код, результата не дало. Не понимаю, что нужно подправить/добавить.

@mrtoxas · 23.03.2017, 11:18

Разбейте страницу на две колонки. В одной колонке будут menu и test, а во второй - content.

HTML5
1
2
3
4
5
6
7
8
<div class="wrapper">
  <div class="header"></div>
  <div class="aside">
    <div class="menu"></div>
    <div class="test"></div>
  </div>
  <div class="content"></div>
</div>

Или так

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="wrapper">
  <div class="header"></div>
  <div class="container">
    <div class="aside">
      <div class="menu"></div>
      <div class="test"></div>
    </div>
    <div class="content"></div>
  </div>
  <div class="footer"></div>
</div>

Это избавит вас от дальнейших проблем с расположением блоков, у вашей страницы будет нормальная структура и вам не потребуется поднимать блоки при помощи отрицательных margin'ов.
Вот, можете почитать про создание двуколоночной сетки.

@The_Host · 23.03.2017, 14:18

Я бы посоветовал почитать о Bootstrap'е
Есть документация на русском, там все просто и понятно

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@BadPawn 15 / 0 / 2 Регистрация: 26.08.2016 Сообщений: 62

	Горизонтально разместить блок новостей под меню 23.03.2017, 06:33. Показов 2544. Ответов 6 Метки нет (Все метки) Всем привет. Удалось сделать с помощью margin и clear: both, но при изменении масштаба блок то выше, то ниже. В зависимости от разрешения(+\-). Подскажите пожалуйста, как достичь этого без изъянов. 0

@N-Star 60 / 60 / 29 Регистрация: 03.11.2016 Сообщений: 292 Записей в блоге: 2
	23.03.2017, 06:37
	Кидайте код хоть что ли))) 0

@BadPawn 15 / 0 / 2 Регистрация: 26.08.2016 Сообщений: 62
	23.03.2017, 11:05 [ТС]
	Дружище, подскажи пожалуйста, что делать? Добавил выше код, результата не дало. Не понимаю, что нужно подправить/добавить. 0

@The_Host 7 / 7 / 3 Регистрация: 20.08.2016 Сообщений: 188
	23.03.2017, 14:18
	Я бы посоветовал почитать о Bootstrap'е Есть документация на русском, там все просто и понятно 0

Горизонтально разместить блок новостей под меню

Решение