Хочу чуть расширить свой блог. Там css немного нестандартный.
Вот сам блог – http://softhelp.org.ua/
/*
Theme Name: green-box
Theme URI: http://www.xhtmlvalid.com/2008/04/09/green-box/
Author: XHTMLValid.com
Version: 0.1
Author URI: http://www.xhtmlvalid.com/
*/
/* Тема переведена Avdenago (http://avdenago.com) для блога ВебТема (http://webtheme.ru) 25 мая 2009 года. */
body{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px;margin:0px;padding:0;background-color:#44433e;}
img {margin: 0px; padding:0px;border:0px;}
#mainpage {width:900px;margin:0 auto;padding-left:16px;padding-right:16px;background:url('images/mainbg.png') repeat-y;background-color:#FFFFFF;}
h2 {font: 24px Tahoma;color:#000000;margin:0;padding:0;padding-left:10px;}
h3 {font: 24px Tahoma;color:#000000;margin:0;padding:0;padding-left:10px;}
h4 {font: 24px Tahoma;color:#000000;margin:0;padding:0;padding-left:10px;}
.h2{font-family:Arial, Helvetica, sans-serif;line-height:18px;font-size:12px;color:#312E2E;font-weight:700;}
a:link, a:visited, a:active{color:#000000;text-decoration:none;font-weight:bold;}
a:hover{text-decoration:underline;}
input {border:1px solid #303030;vertical-align: middle;}
#header{float:left;height:115px;width:900px;padding:0;background:url('images/headerbg.png') no-repeat;margin:0px;padding:0px;}
#header .title {float:left;}
#header .title h1 {margin:0px;font:30px Verdana;color:#FFFFFF;padding-left:20px;padding-top:20px;}
#header .title h1 a {font-weight:normal;color:#FFFFFF;}
#header .title h1 a:hover {text-decoration:none;}
#header .title h2 {margin:0px;font:17px Verdana;color:#FFFFFF;padding-left:20px;}
#header .search {float:right;padding-top:42px;padding-right:65px;}
.input {border:0px;background:none;height:17px;width:120px;font:12px Verdana;color:#FFFFFF;font-weight:bold;padding-top:3px;}
.submit {border:0px;height:33px;width:33px;}
#menu {height:43px;width:900px;float:left;background:url('images/menubg.png') repeat-x;border-bottom:3px solid #F0F0F0;}
ul.menu{height:43px;line-height:43px;float:left;list-style:none;margin:0px;padding:0;width:898px;border-left:1px solid #8EBD3D;border-right:1px solid #8EBD3D;}
ul.menu li{float:left;list-style-type:none;margin:0;background:url('images/menudiv.png') no-repeat;}
ul.menu li a {float:left;font:14px Tahoma;color:#FFFFFF;text-transform:uppercase;padding-left:20px;padding-right:20px;line-height:38px;padding-top:5px;}
ul.menu li a:hover {text-decoration:none;background:url('images/menuhover.png') repeat-x;}
ul.menu li:hover {}
ul.menu li a:visited {color:#FFFFFF;font-weight:normal;}
#content{font: 12px Tahoma;color:#000000;float:left;width:584px;margin:0px;padding:0;overflow:hidden;padding-left:24px;padding-right:27px;}
.entry{float:left;width:584px;margin:0px;padding:0px;background:url('images/entrybg.png') repeat-y;}
.head {float:left;width:584px;float:left;background:url('images/h2bg.png') no-repeat;}
.date {float:left;width:156px;}
.title {float:left;}
.entry h5 {font:12px Verdana;text-align:center;font-weight:bold;color:#FFFFFF;margin:0px;padding:0;line-height:46px;padding-top:18px;}
.entry h2 {font: 20px Tahoma;color:#FFFFFF;margin:0px;padding:0;line-height:46px;padding-top:18px;height:64px;white-space:nowrap;}
.entry h2 a {text-decoration:none;color:#FFFFFF;margin:0;font-weight:normal;}
.entry h2 a:hover{text-decoration:none;}
.entry h2 a:visited {color:#FFFFFF;font-weight:normal;}
.entry h3 {background:url('images/h3bg.png') no-repeat;font: 20px Tahoma;color:#FFFFFF;margin:0px;padding:0;line-height:46px;padding-top:18px;padding-left:20px;}
.entry h4 {font: 12px Tahoma;color:#000000;margin:0;padding:0;text-align:center;line-height:36px;background:url('images/entrybot.png') no-repeat;}
.entry h4 a {text-decoration:none;color:#000000;font-weight:normal;margin:0;}
.entry h4 a:hover {text-decoration:underline;}
.entry p {margin:0px;padding-left:15px;padding-right:13px;padding-bottom:10px;}
#sidebar{float:left;width:243px;margin:0px;padding:0px;font: 11px Verdana;padding-right:22px;}
.rsidebar{font: 13px Verdana;color:#303030;float:right;width:243px;}
.rsidebar h2{font: 18px Tahoma;color:#FFFFFF;padding:0;line-height:37px;padding-left:26px;background:url('images/sidebarh2.png') no-repeat;}
.rsidebar a {font-weight:normal;}
.rsidebar ul{list-style-type:none;margin:0;padding:0;padding-top:18px;}
.rsidebar ul li{list-style-type:none;margin:0 0 0px;padding:0;padding-left:0px;}
.rsidebar ul li ul{list-style-type:square;margin:0;padding:0 0px;background:url('images/sidebarbot.png') no-repeat;background-position:0% 100%;padding-bottom:22px;}
.rsidebar ul li ul li{list-style-type:none;border:0px none;margin:0;background:url('images/sidebarbg.png') repeat-y;padding-left:25px;padding-right:25px;}
.rsidebar ul li ul li a {font:12px Tahoma;font-weight:normal;color:#FFFFFF;line-height:35px;}
.rsidebar ul li ul li a:visited {color:#FFFFFF;font-weight:normal;}
.rsidebar ul li ul li a:hover {text-decoration:none;}
.rsidebar ul li ul li:hover {background:url('images/sidebarhover.png') no-repeat;}
.navigation{float:left;color:#303030;width:636px;margin:0px;padding:0px;margin-left:13px;margin-right:19px;padding-top:6px;}
.navigation p {color:#303030;margin:0px;}
.navigation a:hover {text-decoration:underline;}
.alignright{float:right;margin-top:10px;}
.alignleft{float:left;margin-top:10px;}
.postmetadata{text-align:right;font: 12px Verdana;color:#600320;margin:0;padding:0px;}
.postmetadata a {color:#600320}
.boxcomments{width:584px;background:url('images/entrybot2.png') no-repeat;background-position:0% 100%;}
#commentform label{display:block;margin:0;padding-top:10px;}
#commentform input{width:170px;margin:0 5px 10px 0;padding:1px;}
#commentform textarea{width:400px;margin:0 0 10px;padding:0;}
#commentform #submit{margin:0 0 0px;}
#commentform p{margin:0px 0;padding-top:5px;}
ol.commentlist{margin:0 0 0 0px;padding:0;background:url('images/entrybot2.png') no-repeat;background-position:0% 100%;}
ol.commentlist li{display:block;list-style:none;margin:0;padding:0px 0px 1px;}
ol.commentlist li.commenthead{display:block;list-style:none;margin:0;padding:0px;}
ol.commentlist li.commenthead h2{margin:0;background:url('images/h3bg.png') no-repeat;padding-left:20px;}
ol.tblist{border-top:1px solid #fff;list-style:none;margin:0 0 1px;padding:15px;}
ol.tblist li{display:block;padding-left:15px;list-style-type:none; margin-left:0; margin-right:0; margin-top:0; margin-bottom:5px;}
#footer{color:#FFFFFF;clear:both;height:0px;margin:0;padding:0;}
#footerbox{color:#FFFFFF;margin:0;padding:0;width:900px;height:63px;margin: 0 auto;background:url('images/footerbg.png') no-repeat;}
#footerbox p {color:#FFFFFF;margin:0px;font-size:12px;margin-top:0px;}
.footer{text-align:center;width:900px;color:#F1DCE3;margin:0 auto;padding:0;}
.footer a:hover{text-decoration:underline;border:none;}
.footer a:link, .footer a:active, .footer a:visited {color:#FFFFFF;border:none;font-weight:normal;}
.footer p {margin:0px;font:12px Tahoma;color:#FFFFFF;line-height:36px;}
Попробуйте изменить ширину в диве #mainpage
Ну вот изменяю с 900 на 1000
и вот что выходит
Ну так подгоните остальные блоки под эту ширину, в чем проблема то…
Я мягко говоря в этом не совсем силен, вот если бы вы ткнули меня носом, я бы был вам очень признателен
#mainpage, #header, #menu, #content, .entry, .head, .navigation, #footerbox, .footer – вот в этих элементах нужно подогнать необходимую ширину. Только смотрите, там НЕ нужно прописать одну и ту же ширину, подгоните в соответствии с элементами учитывая все отступы и другие элементы.
Да уж, легко сказать. Короче я так понял, что моя идея рассыпалась даже не начавшись. Похоже, что это в данной теме такие сложности, потому как я смотрел другие примеры расширения блога, то там буквально несколько цифр изменили и все.
Так здесь тоже самое. Нужно подправить вот так(если увеличить к 1000 пикселей):
#mainpage {width:1000px;margin:0 auto;padding-left:16px;padding-right:16px;background:url(‘images/mainbg.png’) repeat-y;background-color:#FFFFFF;}
#header{float:left;height:115px;width:1000px;padding:0;background:url(‘images/headerbg.png’) no-repeat;margin:0px;padding:0px;}
#menu {height:43px;width:1000px;float:left;background:url(‘images/menubg.png’) repeat-x;border-bottom:3px solid #F0F0F0;}
#content{font: 12px Tahoma;color:#000000;float:left;width:684px;margin:0px;padding:0;overflow:hidden;padding-left:24px;padding-right:27px;}
.entry{float:left;width:684px;margin:0px;padding:0px;background:url(‘images/entrybg.png’) repeat-y;}
.head {float:left;width:684px;float:left;background:url(‘images/h2bg.png’) no-repeat;}
.navigation{float:left;color:#303030;width:736px;margin:0px;padding:0px;margin-left:13px;margin-right:19px;padding-top:6px;}
#footerbox{color:#FFFFFF;margin:0;padding:0;width:1000px;height:63px;margin: 0 auto;background:url(‘images/footerbg.png’) no-repeat;}
.footer{text-align:center;width:1000px;color:#F1DCE3;margin:0 auto;padding:0;}
Вот что вышло:
Пардон, скорее всего я что-то напутал. Переделаю, напишу. Спасибо.