Как изменить положения блока

@Fuzy · Регистрация: 18.11.2016

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

Всем привет почему-то блок уже не встает под верхний , а идёт в бок с чём это может быть связано???

@mrtoxas · 10.02.2017, 14:58

Это определенно с чем-то связано

Только отсюда не видно с чем именно.

@thedude · 10.02.2017, 21:48

Обратитесь к эстрасенсу

@Fuzy · 11.02.2017, 11:44 **[ТС]**

А да мой косяк вот код просто стыдно скидать его ) он ужасен )

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
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
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Наше слово Менський інтернет-портал</title> 
</head> 
<body> 
<header> 
<h1> 
<a class="link" href="#" title="Менський інтернет-портал">Наше слово</a> 
</h1> 
<hr class="hr" noshade size="4" width="80%" color="#FFFACD"> 
<nav class="one"> 
<ul class="topmenu"> 
<li><a class="cmenu" href="#">Головна</a></li> 
<li><a class="onecolor" href="#">Новини</a></li> 
<li><a class="onecolor" href="#">Блоґи</a></li> 
<li><a class="onecolor" href="#">Оголошення</a></li> 
<li><a class="onecolor" href="#">Афіша</a></li> 
<li><a class="onecolor" href="#">Довідник</a></li> 
<li><a class="onecolor" href="#">Погода</a></li> 
<li ><a class="cmenu" href="#">Інше<i class="fa"></i></a> 
<ul class="submenu"> 
<li><a href="">Телебачення</a></li> 
<li><a href="">Радіо</a></li> 
<li><a href="">Газета</a></li> 
<li><a href="">Ігри</a></li> 
<li><a href="">Карта</a></li> 
<li><a href="">Архів</a></li> 
</ul> 
</li> 
</ul> 
</nav> 
<hr size="4" noshade color="#FFFACD"> 
</header> 
<div class="wrapper"> 
<a class="asd" href="#" title="Менську лікарню не закриють – і на тому “спасибі”?" style="margin-left:150px"> 
<img src="http://nslovo.com/wp-content/uploads/2017/02/DSCN0225.." alt="Менську лікарню не закриють – і на тому “спасибі”? width="75" height="75"> 
<span class="text">Менську лікарню не закриють – і на тому “спасибі”?</span> 
</a> 
</div> 
<div class="wrapper"> 
<a class="asd" href="#" title="«Золотий Фенікс » розправляє крила"> 
<img src="http://nslovo.com/wp-content/uploads/2017/01/8e57cd86.." alt="«Золотий Фенікс » розправляє
крила" width="75" height="75"> 
<span class="text">«Золотий Фенікс » розправляє крила</span>
</a> 
</div> 
<div class="wrapper"> 
<a class="asd" href="#" title="10 порад психолога як впоратися із зимовою депресією"> 
<img src="http://nslovo.com/wp-content/uploads/2015/08/images2..." alt="10 порад психолога як впоратися із зимовою депресією" width="75" height="75"> 
<span class="text">10 порад психолога як впоратися із зимовою депресією</span> 
</a> 
</div> 
<div class="wrapper"> 
<a class="asd" href="#" title="Вибори у Менській об’єднаній громаді відбудуться 30 квітня"> 
<img src="http://nslovo.com/wp-content/uploads/2017/01/index-2-.." alt="Вибори у Менській об’єднаній громаді відбудуться 30 квітня" width="75" height="75"> 
<span class="text">Вибори у Менській об’єднаній громаді відбудуться 30 квітня</span> 
</a> 
</div> 
<hr width="80%"> 
<div align="right" style="margin-right:100px"> 
<div class="reklama"> 
<a style="padding: 2px" target="blank" href="http://vkontakte.ru/nashe_slovo"><img src="http://nslovo.com/wp-content/uploads/2016/07/vk.gif" title="В Контакте"> </a> 
<a style="padding: 2px" target="blank" href="http://www.odnoklassniki.ua/#/group/50728377254048"><img src="http://nslovo.com/wp-content/uploads/2016/07/ok.gif" title="Одноклассники"></a> 
<a style="padding: 2px" target="blank" href="http://www.facebook.com/pages/Nase-slovo/149492558409.."><img src="http://nslovo.com/wp-content/uploads/2016/07/fb.gif" title="Facebook"></a> 
<a style="padding: 2px" target="blank" href="http://twitter.com/nashe_slovo"><img src="http://nslovo.com/wp-content/uploads/2016/07/t.gif" title="Twitter"></a> 
</div> 
<script type="text/javascript" src="//vk.com/js/api/openapi.js?139"></script> 
<!— VK Widget —> 
<div id="vk_groups"></div> 
<script type="text/javascript"> 
VK.Widgets.Group("vk_groups", {mode: 5, width: "305"}, 25225379); 
</script> 
<div id="ok_group_widget" style="margin-top: 40px;margin-bottom: 40px;"></div> 
<script> 
!function (d, id, did, st) { 
var js = d.createElement("script"); 
js.src = "https://connect.ok.ru/connect.js"; 
js.onload = js.onreadystatechange = function () { 
if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") { 
if (!this.executed) { 
this.executed = true; 
setTimeout(function () { 
OK.CONNECT.insertGroupWidget(id,did,st); 
}, 0); 
} 
}} 
d.documentElement.appendChild(js); 
}(document,"ok_group_widget","50728377254048",'{"width":305,"height":335}'); 
</script> 
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fnashe.slovo%2F&tabs&width=305&height=230&small_header=false&adapt_container_width=false&hide_cover=false&show_facepile=true&appId" width="305" height="230" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
<h3 class="reklama">РЕКЛАМА</h3> 
<h4 style="color:#838B83" class="reklama"> 
Прохання повернути речі (сіру чоловічу сумку з документами, довідками, книжки та інші цінні речі) за винагороду. Або підкинте в редакцію, на пошту чи в інше людне місце. 
</h4> 
<h4 style="color:#838B83" class="reklama"> 
Вячеслав. 093-88-20-795, 095-70-44-826. 
</h4> 
<br> 
</div> 
<hr align="right" width="30%"> 
<div align="right" style="margin-right:100px"> 
<p><img src="http://nslovo.com/wp-content/uploads/2017/02/yIhQ1VKl.." alt="" width="305" height="200"</p> 
<h3 class="reklama" style="margin-bottom: 8px;">АВТОРИ</h3> 
<div class="avtor"> 
<a class="avtor" style="padding-top: 0px;" href="http://nslovo.com/blog/author/valeriy">Валерій Тихонов</a> 
<a class="avtor" style="padding-top: 0px;" href="http://nslovo.com/blog/author/irina">Ірина Примак</a> 
<a class="avtor"
style="padding-top: 0px;" href="http://nslovo.com/blog/author/furman">Анатолій Фурман</a> 
<a class="avtor" style="padding-top: 0px;" href="http://nslovo.com/blog/author/valentinafe">Валентина Фещенко</a> 
<a class="avtor" style="padding-top: 0px;" href="http://nslovo.com/blog/author/olexandr">Олександр Назаренко</a> 
<a class="avtor" style="padding-top: 0px;" href="http://nslovo.com/blog/author/ProstoSuper">Дмитро Михайленко</a> 
<a class="avtor" style="padding-top: 0px;" href="http://nslovo.com/blog/author/raisa">Раїса Михайленко</a> 
<a class="avtor" style="padding-top: 0px;" href="http://nslovo.com/blog/author/sergiy">Сергій Лавський</a> 
<a class="avtor" style="padding-top: 0px;" href="http://nslovo.com/blog/author/tregube">Сергій Трегубенко</a> 
<a class="avtor" style="padding-top: 0px;" href="http://nslovo.com/blog/author/yuris">Юрій Стальниченко</a> 
</div> 
</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
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
<style> 
.link {color: #000; 
text-decoration: none; 
font-size:49px; 
margin-left:40%; 
display: block; 
padding: 20px 0; 
} 
.link:hover {color:#6495ED;} 
body {margin:0; 
background: #f2f2f2; 
} 
nav { 
display:block; 
width: 740px; 
margin: 0 auto 30px; 
} 
a { 
display: block; 
padding: 10px 15px; 
text-decoration: none; 
outline: none; 
font-family: 'Lora', serif; 
transition: .5s linear; 
} 
ul { 
list-style: none; 
margin: 0; 
padding: 0; 
} 
.topmenu > li { 
display: inline-block; 
position: relative; 
} 
.topmenu > li:last-child { 
margin-right: 0; 
} 
.fa { 
font-family: "FontAwesome"; 
padding-left: 10px; 
} 
.submenu { 
position: absolute; 
top: 100%; 
left: 0; 
width: 150px; 
} 
.one { 
margin-bottom: 8px; 
} 
.onecolor { 
color:#363636; 
font-weight:bold; 
} 
.one .submenu { 
display: none; 
background: #FFF5EE; 
border:4px; 
} 
.one ul li:hover .submenu { 
display: block;} 
 
.submenu li a { 
border-bottom: 3px solid rgba(255,255,240,2); 
color: black; 
} 
.cmenu { 
color: red; 
font-weight:bolder; 
} 
header{ 
background: white; 
} 
.text{color: #000;} 
.text:hover {color: red;} 
.wrapper { 
display: inline-block; 
} 
.asd{ 
cursor: pointer; 
text-decoration: none; 
color: #222; 
display: flex; 
flex-flow: row nowrap; 
align-items: flex-start; 
max-width: 250px; 
padding: 5px; 
} 
.reklama{ 
text-decoration: none; 
display: flex; 
flex-flow: row nowrap; 
margin-right:50px; 
align-items: flex-start; 
max-width: 250px; 
padding: 5px; 
text-align:left; 
} 
.avtor{ 
display: flex; 
flex-flow: column; 
margin-right:70px; 
align-items: flex-start; 
max-width: 250x; 
padding: 5px; 
color:#B0C4DE; 
text-align:left; 
float:right; 
cursor: pointer; 
font-size:17px; 
} 
.avtor:hover{ 
color:red; 
} 
</style> 
<script src="https://vk.com/js/api/openapi.js?139" type="text/javascript"></script>

@Fedor92 · 11.02.2017, 12:19

Fuzy, о Боги, я просто ослеп от ужаса...

Для начала:

CSS
1
.wrapper{vertical-align:top}

Вы в курсе, что Ваш скрин не соответствует проблеме?

Точнее код живёт своей жизнью, а скрин своей...

@Fuzy · 11.02.2017, 17:53 **[ТС]**

А что все на столько ужасно?

@Fedor92 · 11.02.2017, 18:10

Сообщение от Fuzy

А что все на столько ужасно?

Вообще это

, к Вашей фразе:

Сообщение от Fuzy

он ужасен )

А в целом, сайт у Вас двухколоночный, поэтому скелет Вы пока делаете неверно... Надо область для контента разбить на две колонки левую и правую... Соответственно в правой размещаете информацию об авторах, рекламу и т.д., а в левой контент... Вы позже поймёте о чём я, если ещё не догадались...

@Fuzy · 12.02.2017, 10:04 **[ТС]**

Мне нужно с лева колонка по средине и с права

@Fedor92 · 12.02.2017, 10:53

Сообщение от Fuzy

Мне нужно с лева колонка по средине и с права

Ну так сделайте три колонки и размещайте в них контент...

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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html, body{width: 100%; height: 100%; margin: 0}
        .wrapper{width: 100%; height: 100%}
        .left, .right, .content{float:left}
        .left, .right{width: 20%; height: 100%; background: red}
        .content{
            width:60%;
            height: 100%;
            background: blue
        }
        @media screen and (max-width: 1100px){
            .left, .right, .content{
                float:none;
                width:100%
            }
            .left, .right{
                background: green;
            }
            .content{
                background: red
            }
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="left"></div>
        <div class="content"></div>
        <div class="right"></div>
    </div>
</body>
</html>

@Fuzy · 14.02.2017, 11:47 **[ТС]**

CSS
1
2
3
4
5
6
7
8
9
10
11
12
@media screen and (max-width: 1100px){
            .left, .right, .content{
                float:none;
                width:100%
            }
            .left, .right{
                background: green;
            }
            .content{
                background: red
            }
        }

я вот последнюю колонку с media не понял и ещё обязательно такое заполнение .left, .right, .content{float:left}? или можно .left{float:left} .right{float:right} и т.д?

@Fedor92 · 14.02.2017, 11:53

Сообщение от Fuzy

я вот последнюю колонку с media не понял

Это медиазапрос, написан, чтобы сайт при разрешении меньше 1100px собирался в одну колонку? Если не нужен можете убрать...

Сообщение от Fuzy

обязательно такое заполнение .left, .right, .content{float:left}? или можно .left{float:left} .right{float:right} и т.д?

Можно...

Я Вам просто пример показал, а там дальше верстайте, как душе угодно...

Новые блоги и статьи Все статьи Все блоги /
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .

@Fuzy 0 / 0 / 0 Регистрация: 18.11.2016 Сообщений: 116

	Как изменить положения блока 10.02.2017, 14:05. Показов 2116. Ответов 10 Метки нет (Все метки) Всем привет почему-то блок уже не встает под верхний , а идёт в бок с чём это может быть связано??? Миниатюры 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	10.02.2017, 14:58
	Это определенно с чем-то связано Только отсюда не видно с чем именно. 0

@thedude 36 / 37 / 23 Регистрация: 31.05.2014 Сообщений: 131
	10.02.2017, 21:48
	Обратитесь к эстрасенсу 0

@Fuzy 0 / 0 / 0 Регистрация: 18.11.2016 Сообщений: 116
	11.02.2017, 17:53 [ТС]
	А что все на столько ужасно? 0

@Fuzy 0 / 0 / 0 Регистрация: 18.11.2016 Сообщений: 116
	12.02.2017, 10:04 [ТС]
	Мне нужно с лева колонка по средине и с права 0

Как изменить положения блока

Решение