Симпле 2 колону ЦСС лаыоут, ЦСС, дизајн, цсс лаыоут |

Једноставна 2 колону ЦСС лаыоут

Ово је туториал како користити ЦСС за израду једноставних два колоне формат.

Формат се састоји од заглавља, главни садржај колоне, Сидебар, а Фусноте. Згодан основни формат, и није уопште тешко створити са ЦСС једном кад знате како се носити са неизбјежним Интернет Експлорер бугова.

1. Основна структура

Пре свега, ми стварамо основних ХТМЛ структура:


  > <див ид = "паге"> 
  > </div> <див ид = "хеадер"> </ див> 
  > </div> <див ид = "сидебар"> </ див> 
  > </div> <див ид = "маин"> </ див> 
  > </div> <див ид = "фоотер"> </ див> 
  </ Див> 


  Након тога смо ставили неки садржај у различите одељке: 

  > <див ид = "паге"> 
  > <див ид = "хеадер"> 
  <х1> Назив предузећа </ Х1> 
  <х4> Унесите ваш слоган </ Х4> 
  </ Див> 

  > <див ид = "сидебар"> 
  <х2> Навигација </ Х2> 
  <ул> 
  > Home </a> </li> <ли> <а хреф = "#"> Почетна страница </ а> </ ли> 
  > About us </a> </li> <ли> <а хреф = "#"> О нама </ а> </ ли> 
  > Srevices </a> </li> <ли> <а хреф = "#"> Сревицес </ а> </ ли> 
  > Contact </a> </li> <ли> <а хреф = "#"> Контакт </ а> </ ли> 
  > Sitemap </a> </li> <ли> <а хреф = "#"> Мапа страница </ а> </ ли> 
  </ Ул> 
  </ Див> 

  > <див ид = "маин"> 
  <х2> садржај </ Х2> 
  <п> Лорем ипсум бол сједити амет, цонсецтетуер диписцинг 
  Елите.  Цум Дис Порођајни монтес, насцетур ридицулус мус.  1. јануара  
  2002 Лорем ипсум бол сједити амет, цонсецтетуер адиписцинг елите.  Цум Дис  
  Порођајни монтес, насцетур ридицулус мус.  1. јануар 2002 </ п> 
  </ Див> 
  > <див ид = "фоотер"> 
  <х2> фоотер </ Х2> 
  </ Див> 
  </ Див>

2. Цсс Шифра

Сада стварамо цсс цоде:


  / * Стил две колоне лаыоут * / 
  ; padding : 0 ; } * (Маргин: 0; паддинг: 0;) 
  тело 
  ( 
  фонт-сизе: 100%; 
  фонт-уеигхт: нормална; 
  ; фонт-фамилы: Ариал, Хелветица, санс-сериф; 
  ) 
  * Хтмл, боды 
  ( 
  хеигхт: 100%; 
  ; мин-хеигхт: 100% / * Фирефокс * /; 
  ) 


  хтмл, # страници 
  (  
  маргин: 0; 
  паддинг: 0; 
  хеигхт: 100%; 
  ) 
  # Страници 
  ( 
  ; Маргин: 0 ауто; 
  Паддинг: 0; 
  Уидтх: 1009пкс; 
  Хеигхт: 100%; 
  ) 


  ; } једном (текст-децоратион: ноне;) 

   text-decoration :underline } а: ховер (текст-децоратион: Ундерлине) 

  ; padding : 0 ; } ул, ол, ли (маргин: 0; паддинг: 0;) 


  Х1, Х2, Х3, Х4, Х5, х6 
  ( 
  маргин: 0; 
  20px ; паддинг: 10пкс 0 0 20пкс; 
  ) 

  ; } Х1 (фонт-сизе: 28пкс;) 
  ; } Х2 (фонт-сизе: 24пкс;) 
  ; } Х3 (фонт-сизе: 18пкс;) 
  ; } Х4 (фонт-сизе: 12пкс;) 
  ; } Х5 (фонт-сизе: 10пкс;) 

  ; п (маргин: 0; 
  лине-хеигхт: 18пкс; 
  10px 20px ; паддинг: 0 0 10пкс 20пкс; 
  фонт-сизе: 12пкс;  
  ) 

  # Страници 
  ( 
  ; Маргин: 0 ауто; 
  Паддинг: 0; 
  Уидтх: 1009пкс; 
  Хеигхт: 100%; 
  ) 

  # Хеадер 
  ( 
  маргин: 0; 
  паддинг: 0; 
  уидтх: 100%; 
  хеигхт: 151пкс; 
  дисплаы: блоцк; 
  ; бацкгроунд-цолор: # ееееее; 
  ) 

  # Сидебар 
  ( 
  пловак: лево; 
  маргин: 0; 
  паддинг: 0; 
  ; дисплаы: инлине / * Интернет Експлорер * /; 
  уидтх: 200пкс; 
  хеигхт: 100%; 
  ; бацкгроунд-цолор: # цццццц; 
  ) 

  # Сидебар ул 
  ; } (Лист-стыле-тыпе: ноне;) 

  display : inline /*internet explore*/ ; } # Сидебар ул ли (дисплаы: инлине / * интернет истражити * /;) 

  # Сидебар ул ли један 
  (  
  ; паддинг: 3пкс 4пкс; 
  дисплаы: блоцк; 
  16px ; маргин: 0пкс 0 0 16пкс; 
  текст-децоратион: ноне; 
  цолор: # 0000Е8 
  ) 

  # Сидебар ул ли а: ховер 
  : #CC0000 } (Цолор: # ЦЦ0000)  

  главни # 
  ( 
  маргин: 0; 
  паддинг: 0; 
  пловак: лево; 
  дисплаы: блоцк; 
  уидтх: 809пкс; 
  хеигхт: 100%; 
  бацкгроунд: # дддддд 
  ) 
  # Фоотер 
  ( 
  маргин: 0; 
  паддинг: 0; 
  дисплаы: блоцк; 
  уидтх: 100%; 
  хеигхт: 50пкс; 
  ; бацкгроунд: # ееееее; 
  оверфлоу: скривени; 
  )