Фиксированный шаблон в резиновый
Страницы: 1
Фиксированный шаблон в резиновый, Как сделать с фиксированного шаблон в резиновый
Добрый вечер вормучани. Подскажите пожалуйста как сделать с фиксированного шаблон в резиновый?
Можно все на примере что да куда вставить.Еще такой вопрос у меня на сайте имеются картинки они тоже будут автоматически растягиваться или им тоже нужно прописывать атрибуты?Ниже приведен мой style.css

/* 

Theme Name: Green Relax
Theme URI:
Description: Green Relax WordPress Theme. green, white, yellow colors, 3 columns, left sidebar, right sidebar, widgets.
Author: Saroyama
Author URI:

*/

body {
background: #ffffff url(images/bg.jpg) top left repeat-x;
margin: 0;
padding: 0;
font: 10pt verdana, arial, helvetica, sans-serif;}

#wrapper {
width: 100%;
height: 100%;
margin: 0 auto;}

#rss {
position: absolute;
top: 10px;
right: 15px;
text-decoration: none;
color: #000000;}

#rss a {
background: url(images/rss.png) no-repeat;
padding-left: 15px;
font-size: 7pt;
text-decoration: none;
color: #000000;}

#rss a:hover {
text-decoration: underline;}

/* TOP NAVIGATION */

#navbar {
float: left;
display: inline;
width: 100%;
margin: 0;
padding-top: 55px;
text-align: left;}

.menu * {
padding: 0;
margin: 0;}

.menu {
float: left;
display: inline;
width: 100%;
padding: 0;
margin: 0;}

.menu ul {
margin: 0;
padding-left: 60px;
position: relative;
list-style-type: none;}

.menu ul li {
float: left;
display: inline;
padding-right: 30px;
list-style: none;}

.menu li a {
float: left;
display: inline;
font: 8pt verdana, arial, helvetica, sans-serif;
text-align: center;
text-decoration: none;
color: #ffffff;}

.menu li.current_page_item a {
text-decoration: underline;}

.menu li a:hover {
text-decoration: underline;}

/* BLOG NAME PROPERTIES */

h1 {
float: left;
display: inline;
margin: 0;
padding: 72px 8px 0 60px;
font: bold 17pt "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #006600;}

a.mainlink {
text-decoration: none;
color: #006600;}

a.mainlink:hover {
text-decoration: none;
color: #006600;}

#description {
padding-top: 80px;
font: bold 8pt "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333333;}

/* SIDEBAR */

#leftnav {
float: left;
width: 200px;
margin-top: 30px;
padding-left: 60px;
padding-right: 25px;
padding-bottom: 30px;
color: #000000;}

#mainnav {
float: left;
width: 200px;
margin-top: 30px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 30px;
color: #000000;}

.nav h2 {
clear: both;
font: 13pt "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-top: 15px;
padding: 7px 0;
color: #000000;}

.nav * {
padding: 0;
margin: 0;}

.nav li {
list-style: none;}

.nav li a {
display: block;
padding: 5px 0;
width: 200px;
background: url(images/arrow.gif) 1px 10px no-repeat;
font: 10pt verdana, arial, helvetica, sans-serif;
border-bottom: 1px solid #E9E9E9;
text-decoration: none;
text-indent: 13px;
text-transform: capitalize;
color: #000000;}

.nav li a:hover {
text-decoration: none;
color: #006600;}

/* MAIN PROPERTIES */

#main {
float: left;
margin-top: 51px;
padding-right: 10px;
padding-bottom: 30px;
line-height: 16px;
text-align: left;
width: 440px;
font: 10pt verdana, arial, helvetica, sans-serif;
color: #2b2b2b;}

h3 {
margin: 3px 0;
font: bold 14pt "Lucida Sans", arial;
letter-spacing: -1px;
text-align: left;
margin-bottom: 10px;
color: #064400;}

a.link {
margin-top: 20px;
text-decoration: none;
color: #064400;}

a.link:hover {
text-decoration: none;
color: #064400;}

.reply {
clear: both;
margin-top: 20px;
font: bold 14pt "Lucida Sans", arial;
letter-spacing: -1px;
text-align: left;
margin-bottom: 14px;
color: #064400;}

blockquote {
padding-left: 7px;
padding-right: 5px;
font-size: 8pt;
border: 1px solid #006600;
color: #8D8D8D;}

.clear {
clear: both;}

/* AUTHOR TEXT */

.postauthor {
display: block;
margin: 0;
padding: 0 0 7px 0;
background: url(images/dottedbg.gif) bottom repeat-x;
font-weight: bold;
color: #006600;}

.date {
display: block;
margin: 0;
padding: 5px 0 0 0;
color: #555555;}

.entries {
clear: both;
height: 25px;
padding: 0;
margin-top: 35px;
margin-bottom: 20px;}

.entries a {
font-weight: bold;
text-decoration: none;
font-size: 12px;}

.entries a:hover {
text-decoration: none;}

.left {
float: left;}

.right {
float: right;}

/* COMMENTS */

.com {
clear: both;
text-align: right;
height: 18px;
padding-right: 7px;
margin-bottom: 20px;
color: #4C8398;}

.com a {
background: url(images/comment.gif) left no-repeat;
padding-left: 18px;
padding-bottom: 1px;
text-decoration: none;
color: #353535;}

.com a:hover {
text-decoration: underline;
color: #999999;}

.edit {
float: left;
background: url(images/edit.gif) left no-repeat;
padding-left: 17px;}

.edit a {
padding: 0;
background: none;}

.author {
padding: 7px 0 0 10px;
font: bold 10pt verdana, arial, helvetica, sans-serif;
color: #333333;}

.author a {
color: #333333;}

.alt {
border: 1px solid #E5E5E5;}

.comment {
padding: 0 10px;}

.userinfo {
padding: 0 10px 10px 0;
text-align: right;}


/* INPUT PROPERTIES */

#search {
margin-top: 26px;
margin-bottom: 30px;}

.searchform {
background-color: #ffffff;
border: 1px solid #A9A9A9;
padding-left: 6px;
color: #2b2b2b;}

.field {
background-color: #ffffff;
border: 1px solid #A9A9A9;
color: #2b2b2b;}

.comments {
background-color: #ffffff;
border: 1px solid #A9A9A9;
color: #2b2b2b;}

.button {
background-color: #333333;
border: 1px solid #006600;
color: #ffffff;}

* html .button {
height: 20px;}

/* IMAGE STYLE */

img {
float: left;
padding-right: 5px;
border: 0;}

.wp-smiley {
float: none;}

/* GENERAL LINK STYLE */

a {
text-decoration: none;
color: #006600;}

a:hover {
text-decoration: none;
color: #999999;}

/* WIDGET PROPERTIES */

#calendar_wrap {
border: 1px solid #000000;}

.widget_calendar td {
padding: 2px 5px;}

.widget_calendar caption {
font-weight: bold;
font-size: 10pt;
padding: 6px 0;
color: #2b2b2b;}

.widget_calendar th {
color: #006600;}

.widget_recent_comments li {
display: block;
padding: 5px 0;
width: 200px;
background: url(images/arrow.gif) 1px 10px no-repeat;
font: 10pt verdana, arial, helvetica, sans-serif;
border-bottom: 1px solid #E9E9E9;
text-decoration: none;
text-indent: 13px;
text-transform: capitalize;
color: #000000;}

.widget_recent_comments li a {
border: none;
background: none;}

.widget_recent_comments li a:hover {
background: none;}

.widget_search {
padding-top: 26px;}

.widget_search input#s {
background-color: #ffffff;
border: 1px solid #A9A9A9;
padding-left: 6px;
color: #2b2b2b;}

.widget_search input {
background-color: #525F19;
border: 1px solid #006600;
color: #ffffff;}

.widget_text {
line-height: 16px;
font: 10pt verdana, arial, helvetica, sans-serif;}

/* FOOTER */

#footer {
clear: both;
background-color: #006600;
border-top: 2px solid #000000;
padding-left: 60px;
height: 20px;
padding-top: 5px;
padding-bottom: 0px;
font-size: 7pt;
color: #ffffff;}

#footer p {
font-size: 8pt;
color: #ffffff;}

#footer a {
font-size: 8pt;
color: #ffffff;}

#footer a:hover {
text-decoration: underline;
color: #339933;}

/* FOOTER2 */

#footer2 {
clear: both;
background-color: #006600;
padding-left: 60px;
height: 20px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 7pt;
color: #008800;}

#footer2 p {
font-size: 7pt;
color: #008800;}

#footer2 a {
font-size: 7pt;
color: #008800;}

#footer2 a:hover {
text-decoration: none;
color: #008800;}

.related {width:557px; background-color:#ccfff;  padding:0px; margin:0px; margin-left:0px;  color:#333; }
.related h4 {font:bold 14px Verdana; color:#333;}
.related a {font:normal 12px Verdana; color:#cc0000; text-decoration:underline;}
.twlink{
font: bold 20px Verdana; color:#333; text-decoration:underline;
}

/*breadcrumbs - start*/
/* цвет шрифта и его размер, отступы, ширина */
#breadcrumbs {
width:auto;
font-size:14px;
color:#0000CC;
text-align:center;
overflow:hidden;
background-clip: border-box;
background-origin: padding-box;
background-position: 5% 5%;
background-repeat: repeat;
background-size: auto;
border-bottom-color: rgb(80, 80, 80);
border-bottom-style: dashed;
border-bottom-width: 3px;
border-top-color: rgb(80, 80, 80);
border-top-style: dashed;
border-top-width: 3px;
}
/* цвет ссылок */
#breadcrumbs a, #breadcrumbs a:visited {
color:#0000CC;
text-decoration:none;
outline:none;}
/* цвет ссылок при наведении курсора */
#breadcrumbs a:hover, #breadcrumbs a:active {
color:#FF0000;
text-decoration:none;
outline:none;}

Заранее всем спасибо за ответ!!!
Изменено: Алексей Суворов - 29 Августа 2012 19:02
везде где  width: 100%; установите значение в пикселях, например width: 980px;
Продай свою работу здесь spacetemplate.ru
Цитата
reneisance пишет:
везде где width: 100%; установите значение в пикселях, например width: 980px;
А можно просто auto?
Цитата
reneisance пишет:
везде где width: 100%; установите значение в пикселях, например width: 980px;
От этого шаблон точно резиновым не станет.
Скорее всего, хотя и не наверняка в

/* MAIN PROPERTIES */

#main {
float: left;
margin-top: 51px;
padding-right: 10px;
padding-bottom: 30px;
line-height: 16px;
text-align: left;
width: 440px;
font: 10pt verdana, arial, helvetica, sans-serif;
color: #2b2b2b;}

поменять width: 440px;  на width: 90%; тогда середина начнет тянуться, сайдбары останутся фиксированными.
Какие картинки имеются ввиду?

Цитата
Алексей Суворов пишет:
Еще такой вопрос у меня на сайте имеются картинки они тоже будут автоматически растягиваться или им тоже нужно прописывать атрибуты?
Цитата
nilxxx пишет:
Какие картинки имеются ввиду?
Цитата
Алексей Суворов пишет:
Еще такой вопрос у меня на сайте имеются картинки они тоже будут автоматически растягиваться или им тоже нужно прописывать атрибуты?
Картинки те которые в постах.
Алексей Суворов,
Ширина картинок нигде не задана, так что какая была такая и останется, если только другим кодом, напр. явой, не задается.
Цитата
nilxxx пишет:
поменять width: 440px; на width: 90%; тогда середина начнет тянуться, сайдбары останутся фиксированными.
Сделал так,но вся середина сползла вниз.
Еще как вариант поставить в
/* SIDEBAR */

#leftnav {
float: left;
width: 200px;
margin-top: 30px;
padding-left: 60px;
padding-right: 25px;
padding-bottom: 30px;
color: #000000;}

#mainnav {
float: left;
width: 200px;
margin-top: 30px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 30px;
color: #000000;}

например,  по with: 20%; а в первом случае 60%, и попробовать уменьшать, если влазить не будет. Трудно так не видя чего куда двигается точно определить сколько ставить.
Страницы: 1
Похожие темы:
Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)
Новые темыОбъявленияСвободное общение
13:23 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 
13:16 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 
08:26 Помогите! ОТКРЫЛАСЬ монетизация на ЮТЮБ! Но Как быть в 2024 с Adsense? 
08:23 Rotapost прикрыли! Чем пользоваться? 
17:53 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 
12:39 2Index - быстрая индексация страниц сайта и обратных ссылок 
06:17 3snet - гемблинг, беттинг, форекс, бинарные опционы, майнинг 
17:34 CryptoGraph — Анонимный обмен криптовалют без KYC и AML 
17:06 TETChange-Обменник криптовалют 
14:45 TIGER SMS — Виртуальные номера для SMS-верификации (опт и розница) 
14:43 Onechange.me — надежный обменник криптовалют и фиатных средств 
14:03 Quix Email - сервис почтовых активаций 
13:54 PonyBit.ru - обменный пункт PonyBit.ru (Понибит.ру) 
13:34 Рассылки СМС/SMS, Вайбер/Viber, Ватсап/Whatsapp, Телеграм/Telegram любой тематики по всему миру 
13:08 Бесплатный майнинг Tether (USDT) 
10:29 С юмором по жизни! 
16:49 monetizer.agency – рекламная сеть для взрослого и развлекательного трафика. 100$ новому вебмастеру 
20:43 Добро пожаловать в цифровой мир... 
15:59 Про мясо 
23:09 ПП от PMS remote.team - 200$ за команду 
13:28 Компьютерная мышь