резиновый шаблон 80%

Тема в разделе "Изменение шаблона (кастомизация)", создана пользователем diki, 23.04.2011.

  1. Offline

    diki Недавно здесь

    Регистрация:
    09.03.2011
    Сообщения:
    118
    Симпатии:
    0
    Пол:
    Мужской
    подскажите пожалуйста! Нужно из фиксированного шаблона шириной 800 пикселей сделать резиновый чтобы он растягивался не на всю страничку браузера 100% а только на 80%
    колонки в шаблоне две левая резиновая правая с меню фиксированная 200 пикселей Где мне что прописать? Заранее спасибо!
     
  2.  
  3. vesy
    Offline

    vesy специалист

    Регистрация:
    02.07.2010
    Сообщения:
    263
    Симпатии:
    53
    Пол:
    Мужской
    нужно видеть сайт. так сказать не получится.
     
  4. Offline

    diki Недавно здесь

    Регистрация:
    09.03.2011
    Сообщения:
    118
    Симпатии:
    0
    Пол:
    Мужской
    прикрепил файлы
     

    Вложения:

  5. vesy
    Offline

    vesy специалист

    Регистрация:
    02.07.2010
    Сообщения:
    263
    Симпатии:
    53
    Пол:
    Мужской
    Изменил след.
    Код (CODE):
    1. #contayner{
    2.     margin:0 auto;
    3.     margin-top:0px;
    4.     padding:0px;
    5.     padding-bottom:0px;
    6.     background-color: #CCC;
    7.     max-width:80%;
    8.     min-height:100%;
    9. }
    10. #left{
    11.     margin:0 auto;
    12.     margin-top:50px;
    13.   padding:0px;
    14.     background-color: #369;
    15.     min-width:590px;
    16.     min-height:200px;
    17.     width: 80%;
    18.     float:left;
    19. }
    [CODE][/CODE]
     

    Вложения:

    • template.rar
      Размер файла:
      375 байт
      Просмотров:
      11
    diki нравится это.
  6. Offline

    diki Недавно здесь

    Регистрация:
    09.03.2011
    Сообщения:
    118
    Симпатии:
    0
    Пол:
    Мужской
    vesy Огромное спасибо! Если такое возможно неоткажите в помощи! Ширина окна браузера может меняться в зависимости от разрешения монитора у разных пользователей Возможно ли сделать так чтобы contayner растягивался на 80% только в том случае если ширина окна браузера равнялась 1000 пикселям или более 1000 пикселей А если ширина окна браузера была менее 1000 пикселей то contayner оставался фиксированным 800 пикселей Спасибо!
     
  7. vesy
    Offline

    vesy специалист

    Регистрация:
    02.07.2010
    Сообщения:
    263
    Симпатии:
    53
    Пол:
    Мужской
    Попробуйте
    Код (CODE):
    1. #contayner {
    2.   background-color: #CCCCCC;
    3.   margin: 0 auto 0;
    4.   min-width: 800px;
    5.   padding: 0;
    6.   width: 80%;
    7. }
     
  8. Offline

    diki Недавно здесь

    Регистрация:
    09.03.2011
    Сообщения:
    118
    Симпатии:
    0
    Пол:
    Мужской
    Ещё раз Спасибо! Остался один вопрос как опустить left колонку на 10 пикселей под фиксированную шапку? Так чтобы не нарушить структуры вёрстки. СПАСИБО!
    Код (PHP):
    1. html, body{
    2.     margin:0px;
    3.     padding:0px;
    4.     height:100%;
    5. }
    6.  
    7. #body{
    8.     margin:0 auto;
    9.     min-width:800px;
    10.     height:100%;
    11. }
    12.  
    13. #contayner {
    14.  background-color:#CCC;
    15.  margin:0 auto;
    16.   min-width:800px;
    17.   width:80%;
    18.   min-height:100%;
    19. }
    20.  
    21. #left{
    22.     background-color:#CCF;
    23.     margin-right:160px;
    24.     min-width:640px;
    25.     min-height:500px;
    26. }
    27. #right{
    28.     background-color:#369;
    29.     margin-top:50px;
    30.     width:150px;
    31.     height:400px;
    32.     float:right;
    33. }
    34. #top{
    35.     background-color:#036;
    36.     margin:0 auto;
    37.     min-width:800px;
    38.     height:40px;
    39.     width:80%;
    40.     position:fixed;
    41. }
    42. #bot{
    43.     background-color: #036;
    44.     margin:0 auto;
    45.     margin-top:-20px;
    46.     min-width:800px;
    47.     width:80%;
    48.     height:20px;
    49. }
    50. #otstup{
    51.     height:10px;
    52.     clear:both;
    53. }
     

    Вложения:

  9. vesy
    Offline

    vesy специалист

    Регистрация:
    02.07.2010
    Сообщения:
    263
    Симпатии:
    53
    Пол:
    Мужской
    Измените ширину левой колонки, как надо вам
     

    Вложения:

  10. Offline

    diki Недавно здесь

    Регистрация:
    09.03.2011
    Сообщения:
    118
    Симпатии:
    0
    Пол:
    Мужской
    А есть другое решение, чтобы опустить левую колонку под шапку на 10 пикселей!? В вашем предложенном варианте Вы ставите float: left; для левой колонки Этот вариант уже опробывал в этом случае колонка не растягиваеться в ширину. Мнебы хотелось чтобы она автаматически растягивалась до правой колонки с отступом в 10 пикселей от неё Спасибо!
     
  11. vesy
    Offline

    vesy специалист

    Регистрация:
    02.07.2010
    Сообщения:
    263
    Симпатии:
    53
    Пол:
    Мужской
    С помощью JS или таблицами пробуйте
     
  12. Offline

    diki Недавно здесь

    Регистрация:
    09.03.2011
    Сообщения:
    118
    Симпатии:
    0
    Пол:
    Мужской
    невыходит При 100% ширина левой колонки растягиваеться на 800 пикселей и правая колонка сезжает вниз при 80% если ширину окна браузера увеличить более 1000 пикселей то разрыв между колонками увеличиваеться а нужен в 10 пикселей
     
  13. Offline

    diki Недавно здесь

    Регистрация:
    09.03.2011
    Сообщения:
    118
    Симпатии:
    0
    Пол:
    Мужской
    С помощью JS
    А что это?
     
  14. vesy
    Offline

    vesy специалист

    Регистрация:
    02.07.2010
    Сообщения:
    263
    Симпатии:
    53
    Пол:
    Мужской
    JavaScript. Все же попробуйте таблицы, их никто не отменял.
     
  15. Offline

    diki Недавно здесь

    Регистрация:
    09.03.2011
    Сообщения:
    118
    Симпатии:
    0
    Пол:
    Мужской
    С колонками разобрался Всё сделал как задумал. Добавил фиксированный вон и вот сдесь появилась проблемка Сам фон остаёться не подвижный но при прокручивании странички снизу наползает белый фон Подскажите как от него избавиться? Спасибо!
    Код (PHP):
    1. html, body{
    2.     margin:0px;
    3.     padding:0px;
    4.     height:100%;
    5. }
    6.  
    7. #body{
    8.     background-repeat:repeat-x;
    9.     background-image:url(../images/page_g.jpg);
    10.     background-attachment:fixed;
    11.  
    12.     margin:0 auto;
    13.     min-width:800px;
    14.     height:100%;
    15. }
    16.  
    17. #contayner {
    18.  background-color: #CCC;
    19.  margin:0 auto;
    20.   min-width:800px;
    21.   width:80%;
    22.   min-height:100%;
    23. }
    24.  
    25. #left{
    26.     background-color:#CCF;
    27.     margin-right:160px;
    28.     min-width:640px;
    29.     min-height:900px;
    30. }
    31. #right{
    32.     background-color:#369;
    33.     /*margin-top:50px;*/
    34.     width:150px;
    35.     height:1000px;
    36.     float:right;
    37.    
    38. }
    39. #top{
    40.     background-color:#036;
    41.     margin:0 auto;
    42.     min-width:800px;
    43.     height:40px;
    44.     width:80%;
    45.     position:fixed;
    46. }
    47. #bot{
    48.     background-color: #036;
    49.     margin:0 auto;
    50.     margin-top:-20px;
    51.     min-width:700px;
    52.     width:80%;
    53.     height:20px;
    54. }
    55. #otstup1{
    56.     background-color:#0CF;
    57.     height:50px;
    58.     clear:both;
    59. }
    60.  
    61. #otstup2{
    62.     background-color:#0CF;
    63.     height:30px;
    64.     clear:both;
    65. }
     

    Вложения:

  16. vesy
    Offline

    vesy специалист

    Регистрация:
    02.07.2010
    Сообщения:
    263
    Симпатии:
    53
    Пол:
    Мужской
    Код (CODE):
    1. body{
    2.     background-repeat:repeat-x;
    3.     background-image:url(../images/page_g.jpg);
    4. }
    5. #body{ 
    6.     margin:0 auto;
    7.     min-width:800px;
    8.     height:100%;
    9. }
     

    Вложения:

  17. Offline

    diki Недавно здесь

    Регистрация:
    09.03.2011
    Сообщения:
    118
    Симпатии:
    0
    Пол:
    Мужской
    добрый день! Нужна помощь Подскажите как в один блок вставить две картинки одну по левому краю другую по правому краю.
    Код (CODE):
    1. #op1{
    2.             background-image:url(../images/3.jpg);
    3.                     background-repeat:no-repeat;
    4.                     background-position:left;
    5.                     margin:0 auto;
    6.                     min-width:800px;
    7.                     height:60px;
    8.                     width:100%;
    9. }

    КАК Сюда можно добавить ещё одну картинку Спасибо!
     
  18. vesy
    Offline

    vesy специалист

    Регистрация:
    02.07.2010
    Сообщения:
    263
    Симпатии:
    53
    Пол:
    Мужской
    Код (CODE):
    1. <div id="op1">
    2. <div id="op2"></div>
    3. </div>
    4. #op1{
    5. background:url(../images/1.jpg) no-repeat right;
    6. }
    7. #op2{
    8. background:url(../images/2.jpg) no-repeat left;
    9. margin:0 auto;
    10. min-width:800px;
    11. height:60px;
    12. width:100%;
    13. }
     
  19. Offline

    diki Недавно здесь

    Регистрация:
    09.03.2011
    Сообщения:
    118
    Симпатии:
    0
    Пол:
    Мужской
    Ещё раз спасибо за помощь! vesy
    Можно ещё вопросик!?
    У блоков на страничке сделал закруглённые углы В каждый блок вписывал
    Код (CODE):
    1. border-radius: 7px;
    2. -moz-border-radius: 7px;
    3. -webkit-border-radius: 7px;
    4. -khtml-border-radius: 7px;
    а нельзя ли как нибудь написать это один раз и применить ко всем нужным блокам?
     
  20. vesy
    Offline

    vesy специалист

    Регистрация:
    02.07.2010
    Сообщения:
    263
    Симпатии:
    53
    Пол:
    Мужской
    конечно можно!
    Код (CODE):
    1. .circle {
    2. border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px;
    3. }

    потом применяете через атрибут class="circle", если есть еще класс, который применяется к элементу, то class="circle myclass" Вот и все
     
  21. Offline

    diki Недавно здесь

    Регистрация:
    09.03.2011
    Сообщения:
    118
    Симпатии:
    0
    Пол:
    Мужской
    А в php файл что нужно дописать? Спасибо!
     

Поделиться этой страницей

Загрузка...