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

подскажите пожалуйста! Нужно из фиксированного шаблона шириной 800 пикселей сделать резиновый чтобы он растягивался не на всю страничку браузера 100% а только на 80%
колонки в шаблоне две левая резиновая правая с меню фиксированная 200 пикселей Где мне что прописать? Заранее спасибо!

 

нужно видеть сайт. так сказать не получится.

 

прикрепил файлы

 

Изменил след.

Код (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]

 

vesy Огромное спасибо! Если такое возможно неоткажите в помощи! Ширина окна браузера может меняться в зависимости от разрешения монитора у разных пользователей Возможно ли сделать так чтобы contayner растягивался на 80% только в том случае если ширина окна браузера равнялась 1000 пикселям или более 1000 пикселей А если ширина окна браузера была менее 1000 пикселей то contayner оставался фиксированным 800 пикселей Спасибо!

 

Попробуйте

Код (CODE):

1. #contayner {
2.   background-color: #CCCCCC;
3.   margin: 0 auto 0;
4.   min-width: 800px;
5.   padding: 0;
6.   width: 80%;
7. }

 

Ещё раз Спасибо! Остался один вопрос как опустить 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. }

 

Измените ширину левой колонки, как надо вам

 

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

 

С помощью JS или таблицами пробуйте

 

невыходит При 100% ширина левой колонки растягиваеться на 800 пикселей и правая колонка сезжает вниз при 80% если ширину окна браузера увеличить более 1000 пикселей то разрыв между колонками увеличиваеться а нужен в 10 пикселей

 

С помощью JS
А что это?

 

JavaScript. Все же попробуйте таблицы, их никто не отменял.

 

С колонками разобрался Всё сделал как задумал. Добавил фиксированный вон и вот сдесь появилась проблемка Сам фон остаёться не подвижный но при прокручивании странички снизу наползает белый фон Подскажите как от него избавиться? Спасибо!

Код (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. }

 

Код (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. }

 

добрый день! Нужна помощь Подскажите как в один блок вставить две картинки одну по левому краю другую по правому краю.

Код (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. }

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

 

Код (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. }

 

Ещё раз спасибо за помощь! vesy
Можно ещё вопросик!?
У блоков на страничке сделал закруглённые углы В каждый блок вписывал

Код (CODE):

1. border-radius: 7px;
2. -moz-border-radius: 7px;
3. -webkit-border-radius: 7px;
4. -khtml-border-radius: 7px;

а нельзя ли как нибудь написать это один раз и применить ко всем нужным блокам?

 

конечно можно!

Код (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" Вот и все

 

А в php файл что нужно дописать? Спасибо!