Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Вёрстка...

 PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
armancho7777777 Супермодератор
Отправлено: 28 Июня, 2012 - 16:36:50
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)




Всем привет.
Сколько раз пробовал сделать то, что будет описано ниже, но так и не получалось сделать это))
Сверстать трёхколоночный макет растянутый по высоте и при этом чтобы блок с контентом в разметке находился выше боковых блоков не проблема.
А как можно сверстать тоже самое, но так, что бы при удалении одного, или обоих боковых блоков, средний блок с контентом растягивался по ширине, заполнив освободившиеся места автоматически?
То есть, обычно, при верстке трёхколоночного макета, устанавливаются боковые отступы
равные ширине боковых блоков что бы освободить место для них, а при их удалении те же отступы надо обнулить.
И вот надо мне сверстать так, чтобы избежать в дальнейшем эти манипуляции.
Не знаю, доходчиго-ли объяснил, но кто верстал подобные макеты, поймут о чём реч, я думаю)
Может знает кто пример в инете, и скинет ссылочку, буду благодарен)
Или, может, это не возможно Однако

(Отредактировано автором: 28 Июня, 2012 - 16:44:01)

 
 Top
LIME
Отправлено: 28 Июня, 2012 - 17:23:35
Post Id


Активный участник


Покинул форум
Сообщений всего: 10732
Дата рег-ции: Нояб. 2010  


Помог: 322 раз(а)




три дива с обтеканием
крайним задаем ширину
среднему - нет
или что?
 
 Top
armancho7777777 Супермодератор
Отправлено: 28 Июня, 2012 - 17:30:49
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)




Прочитайте внимательно сообщение.
Вынесу ключевые моменты:
1. Трёхколоночный макет растянутый по высоте
2. Средний блок с контентом в разметке должен находиться над боковыми блоками
3. При удалении одного, или обоих боковых блоков, средний блок с контентом растягивается по ширине, заполнив освободившиеся пространство автоматически

Первые 2 пункта не проблема.
Задача в пункте №3.

(Отредактировано автором: 28 Июня, 2012 - 17:36:01)

 
 Top
LIME
Отправлено: 28 Июня, 2012 - 17:36:32
Post Id


Активный участник


Покинул форум
Сообщений всего: 10732
Дата рег-ции: Нояб. 2010  


Помог: 322 раз(а)




ниче не понятно
давай пример верстки
 
 Top
armancho7777777 Супермодератор
Отправлено: 28 Июня, 2012 - 17:41:00
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)




Разметка:
CODE (html):
скопировать код в буфер обмена
  1.  <body>
  2.  
  3.     <div id="conteiner">
  4.       <div id="wrapper">
  5.          <div id="main">
  6.              <div id="header-wrapp">
  7.                 <div id="header">
  8.                   <h1>Шапка сайта</h1>
  9.                 </div>
  10.              </div>
  11.            <div id="all">
  12.               <div id="out">
  13.                 <div id="in">
  14.                    <div id="wrapp-content">
  15.                       <div id="content">
  16.                         <div class="columns">
  17.                           <div class="box">
  18.                             Контент Контент Контент Контент Контент
  19.                             Контент Контент Контент Контент Контент
  20.                             Контент Контент Контент Контент Контент
  21.                             Контент Контент Контент Контент Контент
  22.                             Контент Контент Контент Контент Контент
  23.                             Контент Контент Контент Контент Контент
  24.                             Контент Контент Контент Контент Контент
  25.                           </div>
  26.                         </div>
  27.                       </div>
  28.                    </div>
  29.                    <div id="right-column">
  30.                      <div class="columns">
  31.                         <div class="box">Правый блок</div>
  32.                      </div>
  33.                    </div>
  34.                 </div>
  35.                 <div id="left-column">
  36.                   <div class="columns">
  37.                     <div class="box">Левый блок раздела</div>
  38.                   </div>
  39.                 </div>
  40.               </div>
  41.            </div>
  42.              <div id="footer-wrapp">
  43.                <div id="footer">
  44.                  <p>Подвал</p>
  45.                </div>
  46.              </div>
  47.           </div>
  48.        </div>
  49.      </div>
  50.  
  51.  </body>


CSS:
CODE (css):
скопировать код в буфер обмена
  1.  
  2. HTML, BODY, #conteiner {
  3.         width:100%;
  4.         height:100%;
  5.         margin:0 auto;
  6.         padding:0;
  7.         }
  8.        
  9.        
  10.        
  11. HTML, BODY {
  12.         overflow:hidden;
  13.         }
  14.  
  15.  
  16.  
  17. HTML {
  18.         font-size:19px;
  19.         font-family:"Times New Roman", Times, serif;
  20.         color:#000;
  21.         background:#FFF;
  22.         }
  23.  
  24.  
  25.        
  26. #conteiner {
  27.         overflow:auto;
  28.         position:relative;
  29.         }
  30.        
  31.  
  32.  
  33. #wrapper {
  34.         padding:0 40px;
  35.         height:100%;
  36.         position:relative;
  37.         }
  38.  
  39.  
  40.  
  41.  
  42.  
  43. #main {
  44.         min-width:860px;
  45.         max-width:1100px;
  46.         height:100%;
  47.         margin:0 auto;
  48.         position:relative;
  49.         }
  50.  
  51.  
  52.  
  53.  
  54.        
  55. #header-wrapp {
  56.         background:#939DC9;
  57.         position:relative;
  58.         z-index:10;
  59.         }
  60.        
  61.        
  62.        
  63. #header {
  64.         height:150px;
  65.         position:relative;
  66.         z-index:10;
  67.         border-top:2px solid #AFBAF0;
  68.         border-bottom:2px solid #AFBAF0;
  69.         }
  70.        
  71.        
  72. #header H1 {
  73.         text-align:center;
  74.         margin:0;
  75.         height:100%;
  76.         line-height:145px;
  77.         }
  78.        
  79.        
  80.        
  81. #all {
  82.         height:auto !important;
  83.         height:100%;
  84.         min-height:100%;
  85.         position:relative;
  86.         margin:-154px 0 -54px;
  87.         }
  88.        
  89.        
  90.        
  91.        
  92. #out {
  93.         padding:154px 0 54px;
  94.         overflow:hidden;
  95.         zoom:1;
  96.         }
  97.        
  98.        
  99.  
  100. #in {
  101.         float:right;
  102.         width:100%;
  103.         margin-left:-220px;
  104.         }
  105.  
  106.  
  107.  
  108. #wrapp-content {
  109.         float:left;
  110.         width:100%;
  111.         margin-right:-220px;
  112.         }
  113.  
  114.  
  115.  
  116.  
  117. #content {
  118.         margin:0 220px;
  119.         }
  120.        
  121.  
  122.  
  123.  
  124. #left-column {
  125.         width:220px;
  126.         float:left;
  127.         }
  128.        
  129.        
  130.                
  131. #right-column {
  132.         width:220px;
  133.         float:right;
  134.         }
  135.        
  136.        
  137.        
  138. #left-column .columns,
  139. #right-column .columns {
  140.         padding:10px 0;
  141.         }      
  142.        
  143.        
  144.  
  145. #content {
  146.         padding:10px 0;
  147.         zoom:1;
  148.         }
  149.        
  150.        
  151.  
  152. #content .columns {
  153.         padding:10px;
  154.         border:1px solid #939DC9;
  155.         margin:0 10px;
  156.         }      
  157.  
  158.  
  159. #content .box {
  160.         padding:10px 15px;
  161.         }
  162.        
  163.        
  164. #left-column .box,
  165. #right-column .box {
  166.         height:250px;
  167.         background:#E6E9F2;
  168.         padding:10px 15px;
  169.         border:1px solid #939DC9;
  170.         }
  171.        
  172.        
  173.        
  174. #content .columns,
  175. #left-column .box,
  176. #right-column .box {
  177.         height: auto !important;
  178.         height:300px;
  179.         min-height:300px;
  180.         }
  181.  
  182.  
  183.    
  184.    
  185. #footer-wrapp {
  186.         background:#8591C2;
  187.         z-index:10;
  188.         position:relative;
  189.         zoom:1;
  190.         }
  191.    
  192.  
  193. #footer {
  194.         height:50px;
  195.         z-index:10;
  196.         position:relative;
  197.         border-top:2px solid #AFBAF0;
  198.         border-bottom:2px solid #AFBAF0;
  199.         }
  200.  
  201.  
  202. #footer p {
  203.         margin:0;
  204.         margin-top:2px;
  205.         text-align:center;
  206.         line-height:48px;
  207.         }
  208.  
  209.  


И если, на пример, убрали левый блок из разметки:
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <div id="left-column">
  3.   <div class="columns">
  4.     <div class="box">Левый блок</div>
  5.   </div>
  6. </div>
  7.  

... то надо что бы средний блок растянулся автоматом, заполнив освободившееся пространство.
А пока что приходится править стили.

(Отредактировано автором: 12 Августа, 2012 - 05:33:46)

 
 Top
IllusionMH
Отправлено: 28 Июня, 2012 - 23:18:53
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)




armancho7777777, контейнер с содержимым обязательно сверху?
Если да, то тогда только через JS задавать отступы
Если может быть снизу, то может поможет пример (но здесь стандартная трехколоночная верстка, с отступами по ситуации)
 
 Top
armancho7777777 Супермодератор
Отправлено: 29 Июня, 2012 - 00:32:41
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)




IllusionMH пишет:
контейнер с содержимым обязательно сверху?

Конечно))
Не догадываетесь почему?)
 
 Top
IllusionMH
Отправлено: 29 Июня, 2012 - 01:49:27
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)




armancho7777777, если честно - не совсем разобрался зачем))) Объясните если не затруднит.
(а пока не знаю об обязательности нахождения блока сверху)
Перекроил код слегка(вообще убрал div#in) сделал по принципу трехколоночного макета (аналогично примеру по ссылке)
Прикрепил результат к сообщению (левая колонка закомментированна для демонстрации работы)
Скачать файл: example.html
Скачан раз: 27
 
 Top
armancho7777777 Супермодератор
Отправлено: 29 Июня, 2012 - 02:02:58
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)




IllusionMH пишет:
armancho7777777, если честно - не совсем разобрался зачем))) Объясните если не затруднит.
(а пока не знаю об обязательности нахождения блока сверху)
Перекроил код слегка(вообще убрал div#in) сделал по принципу трехколоночного макета (аналогично примеру по ссылке)
Прикрепил результат к сообщению (левая колонка закомментированна для демонстрации работы)

Основной блок с контентом должен быть выше боковых по причине того,
что поисковикам в первую очередь надо скармливать основной контент, а не менюшки, и прочее второстепенное.
Это одно из главных аспектов поисковой оптимизации сайта.
А с основным блоком внизу проблем-то не было никогда)
Но за потраченное время спасибо)

(Отредактировано автором: 29 Июня, 2012 - 02:06:21)

 
 Top
IllusionMH
Отправлено: 29 Июня, 2012 - 02:35:28
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)




armancho7777777, так и думал. Понятно.
Тут слегка должен помочь HTML5 с его семантически верными объектами, которые должны показать, что навигация, что боковая панелька, а что нужный контент. (если верить в быстроразвивающиеся поисковые технологии)
Ну или дождаться реализации Selectors Level 4 3[dot]2[dot] Determining the Subject of a Selector
#wrapp-content! ~ #left-column

Из доступных решений: при создании страницы на сервере или JS проверкой добавлять класс noleft/noright к body или html, а в CSS соостветствующие стили

(Отредактировано автором: 29 Июня, 2012 - 02:53:52)

 
 Top
armancho7777777 Супермодератор
Отправлено: 29 Июня, 2012 - 02:50:08
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)




Да ну решение-то можно найти)
Просто я хотел получить его при наименьшем сопративлении))
(Добавление)
IllusionMH пишет:
armancho7777777, так и думал.

Не сомневался))
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB