Требуется разбить 1 блок на 2 колонки. (DLE)

@xshevx · Регистрация: 07.04.2011

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

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

То есть, имеется определенный блок (основная колонка), в ней публикуются новости. Этот блок (колонка), занимает, скажем 100% возможной по экрану ширины. Мне нужно сделать так, чтобы этот блок разделился на 2 колонки. Один был шириной 70%, затем он аккуратно заканчивался, и рядом с не большим отступом начиналась вторая колонка.

По скриншоту все видно.

Дизайн сделан под DLE 9.7.

Вот, что имеется на данный момент:

https://www.cyberforum.ru/atta... 1378632825

В основном блоке как-бы уже имеется 2 колонки, но между ними нет плавного перехода. То есть, нужно из 1-го блока сделать 2 отдельно стоящие колонки.

Вот что я хотел бы сделать: (Фотошоп)

https://www.cyberforum.ru/atta... 1378633282

То есть, получается что та колонка что слева, является основной и имеет футер. А колонка справа - это просто колонка, которая имеет начало, и заканчивается аналогично.

Вот html код:

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
<!-- Новости -->     
<div class="pbt-top">
<div class="pb-left"><div class="pb-right">
<div class="pbt-left"><div class="pbt-right">           
<table class="structure"><tr>
    
<td id="maincol">
<div class="dcont">
    {info}
    {content} 
 </div>                                        
</td>
<!-- Новости -->
                        
     
<!-- Правая колонка -->    
<td id="rightcol"><div class="substanc2"><br>
                            
<div class="block">
 <center>
                
<script type="text/javascript" src="//vk.com/js/api/openapi.js?100"></script>
 
<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "250", height: "330"}, 20003922);
</script>
                
 </center>
 
</div>
 <br>
<div class="block">
            <center>
<img src="http://test.ru/app/templates/united-apps/images/block.jpg">
            </center>
        </div>
    <br>
                <div class="block">
            <center>
<img src="http://test.ru/app/templates/united-apps/images/block.jpg">
            </center>
        </div>
    
    <br>
 
</div>                       
</tr></table>
</div></div>
</div></div>
</div>
<!-- Правая колонка -->    
 
 
  
<!-- Футер -->          
     <div class="footer">
            <div class="fb-right"></div>
            <div class="fb-center">
                <div class="fb-left"></div>
                <ul class="menub">
              <li><a title="Категория" href="/"><img src="http://test.com/images/News/sys/wm.jpg" width="88" height="31" ></a></li>            </ul>
        </div>
    </div>
    
   <center>
       <div class="copyright">Copyright 2013. All rights reserved.</div>
   </center>
    
</div>
<!-- Футер -->

Вот стили 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
.pbt-top { background: #ffffff url("../images/pbt_top.png") repeat-x left top; }
.pbt-left { background: transparent url("../images/pbt_left.png") no-repeat left top; }
.pbt-right { background: transparent url("../images/pbt_right.png") no-repeat right top;}
.pb-left { background: transparent url("../images/pb_left.png") repeat-y left top; }
.pb-right { background: transparent url("../images/pb_right.png") repeat-y right top; }
 
table.structure { width: 100%; }
.substanc2{margin:7px 1px 0 6px;}
.dcont { padding: 15px; font-size:0.9em; } 
 
#leftcol { width: 18px; vertical-align: top; }
#rightcol { width: 18px; vertical-align: top;}
#maincol { width: 100%; vertical-align: top;}
 
.infore{line-height: 1.3em; background: #e8f1f4; height:auto; overflow:auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; width:98%; margin:0px auto;}
.errorss { background:url(../images/errors.png) no-repeat; width:30px; height:32px; float:left; margin:10px; }
.error-ser { padding:11px; }
 
.pbd-bottom, .pbd-bottom .dleft, .pbd-bottom .dright { height: 18px; }
.pbd-bottom { overflow: hidden; background: #ffffff url("../images/pbd_bottom.png") repeat-x left top; width: 100%; }
.pbd-bottom .dleft { background: transparent url("../images/pbd_left.png") no-repeat left top; }
.pbd-bottom .dright { background: transparent url("../images/pbd_right.png") no-repeat right top; }
 
#rightcol .block { margin-right: 15px; margin-bottom: 4px; width: 255px; background: url("../images/bb-r.png") repeat-y -510px top; }
#rightcol .block .dtop { background: url("../images/bb-r.png") no-repeat left top; }
#rightcol .block .dbottom { background: url("../images/bb-r.png") no-repeat -255px bottom; }
#rightcol .block .dcont { padding: 16px 10px 17px 10px; }
#rightcol div.block h3.title { font-family: Arial, Tahoma, Helvetica, Sans-serif; font-size: 0.9em; font-weight: bold; color: #6d6d6d; padding:0px 0 25px 3px;}

Если кто знает, как тут что можно сделать - помогите, пожалуйста. Я пробовал сам, ничего не получилось. Пришлось обращаться за помощью на форум. Заранее спасибо.

@xshevx · 08.09.2013, 13:52 **[ТС]**

Вот css код футера:

CSS
1
2
3
4
5
6
7
8
9
10
11
.footer { height:53px; margin-top: -9px; }
.fb-left { background: url(../images/fb-l.gif) no-repeat; width:18px; height:53px; float:left; }
.fb-center { background: url(../images/fb-c.gif) repeat-x; height:53px; }
.fb-right { background: url(../images/fb-r.gif) no-repeat; width:18px; height:53px; float:right; }
.copyright { float: center; font-size:1.0em; color:#6d6d6d; padding:7px 15px 15px 0; }
 
 
.footer-top { height:35px; margin-top: -9px; }
.fb-left-top { background: url(../images/fb-l-top.gif) no-repeat; width:18px; height:16px; float:left; }
.fb-center-top { background: url(../images/fb-c-top.gif) repeat-x; height:16px; }
.fb-right-top { background: url(../images/fb-r-top.gif) no-repeat; width:18px; height:16px; float:right; }

@xshevx · 08.09.2013, 19:58 **[ТС]**

Ребята, я сам практически все сделал. Остался один нюанс, один шажок:

Получилось так, что я разделил блок на 2 колонки. Только одна колонка находится по центру, а вторая под ней (внизу ее). Места освободилось, осталось только перенести одну колонку выше.

Мне кажется, при нужных знаниях CSS это не так уж и сложно. Помогите, пожалуйста, кто что знает. Вот скрины, на них видно что нужно сделать.

На первом скриншоте наглядный пример, а на втором я показываю - как нужно сделать.

@StopSmell · 08.09.2013, 21:42

Код вашего переделанного?

@xshevx · 08.09.2013, 21:46 **[ТС]**

StopSmell, вот:

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
<!-- Новости -->   
<div class="wrapper-2">
<div class="pbt-top">
<div class="pb-left"><div class="pb-right">
<div class="pbt-left"><div class="pbt-right">           
<table class="structure"><tr>
    
<td id="leftcol">
<div class="dcont">
    {info}
    {content} 
 </div>                                        
</td>                     
</tr></table>
</div></div>
</div></div>
</div>
<!-- Новости -->
                        
        
  
<!-- Футер -->          
     <div class="footer">
            <div class="fb-right"></div>
            <div class="fb-center">
                <div class="fb-left"></div>
                <ul class="menub">
              <li><a title="Категория" href="/"><img src="http://test.com/images/News/sys/wm.jpg" width="88" height="31" ></a></li>            </ul>
        </div>
    </div>
  </div>
<!-- Футер --> 
 
 
<!-- Правая колонка --> 
<div class="wrapper-3"> 
<div class="pbt-top">
<div class="pb-left"><div class="pb-right">
<div class="pbt-left"><div class="pbt-right">           
<table class="structure"><tr>
<td id="rightcol">    
    
<td id="rightcol"><div class="substanc2"><br>
                            
    
        <div class="block">
            <center>
                
<script type="text/javascript" src="//vk.com/js/api/openapi.js?100"></script>
 
<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "250", height: "330"}, 20003922);
</script>
                
            </center>
        </div>
    <br>
            <div class="block">
            <center>
<img src="http://test.by/app/templates/united-apps/images/block.jpg">
            </center>
        </div>
    <br>
                <div class="block">
            <center>
<img src="http://test.by/app/templates/united-apps/images/block.jpg">
            </center>
        </div>
    
    <br>
    
</div></tr></table>
</div></div></div></div></div>   
    
<div class="footer-top">
<div class="fb-right-top"></div>
<div class="fb-center-top">
<div class="fb-left-top">  
</div></div></div></div>
<!-- Правая колонка -->

CSS файл прикрепил к данному сообщению. Если нужно - могу и ссылку на сайт дать, чтобы вы лучше увидели как все выглядит. Я пробовал уже менять местами колонки, и чуть в css менял - все равно не получается. Либо одна колонка выше другой, либо ниже, либо смешиваются, а нужного результата нет.

@StopSmell · 08.09.2013, 22:01

HTML - Оборачиваем весь ваш код доп. оберткой с классом wrap

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
<div class="wrap">
<!-- Новости -->   
<div class="wrapper-2">
<div class="pbt-top">
<div class="pb-left"><div class="pb-right">
<div class="pbt-left"><div class="pbt-right">           
<table class="structure"><tr>
    
<td id="leftcol">
<div class="dcont">
    {info}
    {content} 
 </div>                                        
</td>                     
</tr></table>
</div></div>
</div></div>
</div>
<!-- Новости -->
                        
        
  
<!-- Футер -->          
     <div class="footer">
            <div class="fb-right"></div>
            <div class="fb-center">
                <div class="fb-left"></div>
                <ul class="menub">
              <li><a title="Категория" href="/"><img src="http://test.com/images/News/sys/wm.jpg" width="88" height="31" ></a></li>             </ul>
        </div>
    </div>
  </div>
<!-- Футер --> 
 
 
<!-- Правая колонка --> 
<div class="wrapper-3"> 
<div class="pbt-top">
<div class="pb-left"><div class="pb-right">
<div class="pbt-left"><div class="pbt-right">           
<table class="structure"><tr>
<td id="rightcol">    
    
<td id="rightcol"><div class="substanc2"><br>
                            
    
        <div class="block">
            <center>
                
<script type="text/javascript" src="//vk.com/js/api/openapi.js?100"></script>
 
<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "250", height: "330"}, 20003922);
</script>
                
            </center>
        </div>
    <br>
            <div class="block">
            <center>
<img src="http://test.by/app/templates/united-apps/images/block.jpg">
            </center>
        </div>
    <br>
                <div class="block">
            <center>
<img src="http://test.by/app/templates/united-apps/images/block.jpg">
            </center>
        </div>
    
    <br>
    
</div></tr></table>
</div></div></div></div></div>   
    
<div class="footer-top">
<div class="fb-right-top"></div>
<div class="fb-center-top">
<div class="fb-left-top">  
</div></div></div></div>
<!-- Правая колонка --> 
</div>

CSS -

CSS
1
2
3
.wrap {width: 1000px; margin: 0 auto;}
.wrapper-2,
.wrapper-3 {float: left;}

И корректируем правила для бОльшего wrapper'а

CSS
1
.wrapper-2 { width: 680px; margin-right: 20px; }

Смотрю у вас в css вообще-то есть правило для элемента wrapper, но в html я его не вижу, если он действительно существует тогда и дополнительных оберток (указанным мной выше) делать не нужно.

@xshevx · 08.09.2013, 22:07 **[ТС]**

Поставил вот так:

CSS
1
2
3
.wrap {width: 1020px; margin: 0 auto;}
.wrapper-2 {float: left;}
.wrapper-3 {float: right;}

И все стало как я и хотел.

Мужик, спасибо тебе большое. Очень помог.

wrapper там был уже один, но он для слайд-шоу, его не видно на скриншотах (он вверху страницы), и с ним все окей.

Ещё раз - большое спасибо. Все отлично.

@StopSmell · 08.09.2013, 22:11

Эммммм пожалуйста, только я не мужик.

@xshevx · 08.09.2013, 22:11 **[ТС]**

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

Эммммм пожалуйста, только я не мужик.

Ой, извините тогда пожалуйста.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@xshevx 0 / 0 / 0 Регистрация: 07.04.2011 Сообщений: 53
	08.09.2013, 19:58 [ТС]
	Ребята, я сам практически все сделал. Остался один нюанс, один шажок: Получилось так, что я разделил блок на 2 колонки. Только одна колонка находится по центру, а вторая под ней (внизу ее). Места освободилось, осталось только перенести одну колонку выше. Мне кажется, при нужных знаниях CSS это не так уж и сложно. Помогите, пожалуйста, кто что знает. Вот скрины, на них видно что нужно сделать. На первом скриншоте наглядный пример, а на втором я показываю - как нужно сделать. Миниатюры 0

@StopSmell 293 / 169 / 29 Регистрация: 16.09.2012 Сообщений: 370
	08.09.2013, 21:42
	Код вашего переделанного? 1

@StopSmell 293 / 169 / 29 Регистрация: 16.09.2012 Сообщений: 370
	08.09.2013, 22:11
	Эммммм пожалуйста, только я не мужик. 1