Как сделать страницу по всей ширине экрана?

голоса: 0
Подскажите, пожалуйста, как сделать текст страницы по все ширине (вправо)? Справа страницы было место под "поиск" и "карту гугл", теперь этих элементов нет, но содержимое страниц ограничено.
Адрес сайта http://geoteacher.info/
| Автор: | Категория: Дизайн сайта
Изменение категории | | Автор: webanet

Ответов: 1

голоса: 0
 
Лучший ответ

в таблице стилей строчка

 #center {margin-left:auto;margin-right:auto;width:54%;padding:20px 0px;text-align:center;} 

ширина выделена красным. далее строчка

 #textBlock {overflow:auto;width:98%;text-align:left;margin-left:auto;margin-right:auto;}

регулируйте отступы

| Автор:
Выбор ответа лучшим | | Автор: Yuri_Geruk

не смог сделать, можно чуть подробнее?

таблицу стилей нашёл. эту строчку (#center нашёл). уменьшение или увеличение показателя width не изменяет ширину текста. будто бы справа место оставлено под какие-то элементы сайта. 

Антон Жохов,

В значении width:98%; замените 98% как пример на 1300px

Yuri_Geruk,

Не могу разобраться где в коде настройки изображения шапки страницы. По-прежнему, фотография размером не полным (её размер 131*1920). Не получается сделать её по всей ширине. 

Вот код из таблицы стилей CSS ("General Style"):

/* General Style */
body {background:#FFFFFF; margin:0px; padding:0px;}
#wrap {height:70px;background:url('http://geoteacher.info/osnov_zastavkakopirovanie.jpg') bottom repeat-x #FAF9F1;text-align:left;}
#dataBar {padding:15px;font-size:10pt;color:#BBB696;}
#loginBlock {float:right;padding:15px;font-size:10pt;color:#BBB696;}
#logo {height:131px;}
#logoName {float:left;width:30%;}
#logoName h1 {position:relative;top:50px;text-align:center;color:#124256;font-size:20pt;font-weight:normal;margin:0;padding:0;}
#logoPick {float:right;width:69%;background:url('/.s/t/836/3.jpg') no-repeat #D3F1FD;height:131px;max-width:1024px;}
.subLine {clear:both;height:12px;background:url('/.s/t/836/4.gif') repeat-x #9E0B0F;}
#leftColumn {position:relative;float:left;width:22%;left:0px;background:#F1F0E8;text-align:center;}
#rightColumn {position:relative;float:right;width:22%;right:0px;background:#F1F0E8;text-align:center;}
#center {margin-left:auto;margin-right:auto;width:54%;padding:20px 0px;text-align:center;} 
*html #center {width:98%;}
#textBlock {overflow:auto;width:98%;text-align:left;margin-left:auto;margin-right:auto;}
#footer {background:url('/.s/t/836/1.gif') repeat-x #FAF9F1;text-align:center;padding:20px;}

.boxTable {padding:0;margin-left:auto;margin-right:auto;text-align:center;width:90%;margin-top:15px;margin-bottom:15px;border-top:1px solid #D3D2CB;border-left:1px solid #D3D2CB;background:#FAF9F1;border-bottom:2px solid #93C3D7;border-right:1px solid #FFFFFF;}
.boxTable h2 {font-size:10pt;color:#FAF9F1;padding:5px;margin:0px;text-align:center;background:#99977F;border:1px solid #FAF9F1;}
.boxContent {margin-left:auto;margin-right:auto;width:90%;padding:5px 2px;text-align:left;}
.center {text-align:center;}
.searchTable {margin-left:auto;margin-right:auto;}

h1 {color:#505050;font-size:14pt;font-weight:normal;}

#navBar a:link {text-decoration:underline; color:#DCDBD4;}
#navBar a:active {text-decoration:underline; color:#DCDBD4;}
#navBar a:visited {text-decoration:underline; color:#DCDBD4;}
#navBar a:hover {text-decoration:none; color:#FFFFFF;}

a:link {text-decoration:underline; color:#838383;}
a:active {text-decoration:underline; color:#838383;}
a:visited {text-decoration:underline; color:#838383;}
a:hover {text-decoration:none; color:#000000;}


td, body {font-family:verdana,arial,helvetica; font-size:8pt;}
form {padding:0px;margin:0px;}
input,textarea,select {vertical-align:middle; font-size:8pt; font-family:verdana,arial,helvetica;}
.copy {font-size:7pt;}

a.noun:link {text-decoration:none; color:#99977F}
a.noun:active {text-decoration:none; color:#99977F}
a.noun:visited {text-decoration:none; color:#99977F}
a.noun:hover {text-decoration:none; color:#000000}

hr {color:#DCDBD4;height:1px;border:none;background:#DCDBD4;}
label {cursor:pointer;cursor:hand}

.blocktitle {font-family:Verdana,Sans-Serif;color:#787878;font-size:12px;}

a.menu1:link {text-decoration:underline; color:#FAF9F1}
a.menu1:active {text-decoration:underline; color:#FAF9F1}
a.menu1:visited {text-decoration:underline; color:#FAF9F1}
a.menu1:hover {text-decoration:underline; color:#DCDBD4}
.menuTd {padding-left:12px;padding-right:10px; background: url('/.s/t/836/5.gif') no-repeat 0px 3px;}

.mframe {border-left:1px solid #E5E7EA; border-right:1px solid #E5E7EA;}
.colgray {border-right:1px solid #E5E7EA;}
.colwhite {border-right:1px solid #FAF9F1;}
.msep {border-top:1px solid #FAF9F1;}
/* ------------- */

Антон Жохов,

В стилях найдите строку номер 9:

#logoPick {float:right;width:69%;background:url('/.s/t/836/3.jpg') no-repeat #D3F1FD;height:131px;max-width:1024px;}

удалите выделенное. После строку номер 3:

#wrap {height:70px;background:url('http://geoteacher.info/osnov_zastavkakopirovanie.jpg') bottom repeat-x #FAF9F1;text-align:left;}

замените на:

#wrap {height: 200px;background:url('http://geoteacher.info/osnov_zastavkakopirovanie.jpg') bottom repeat-x #FAF9F1;text-align:left;background-position-y: 62px;}

вот и все, Готово.

Yuri_Geruk,

Сделал всё, что вы написали в сообщении выше. Всё равно фото не полное по ширине. При уменьшении масштаба изображение ы шапке неполное (1280), в менеджере файлов её можно просмотреть (1920 пиккселей поширине).

Вот код из таблицы стилей CSS ("General Style"), исправленный:

/* General Style */
body {background:#FFFFFF; margin:0px; padding:0px;}
#wrap {height: 200px;background:url('http://geoteacher.info/osnov_zastavkakopirovanie.jpg') bottom repeat-x #FAF9F1;text-align:left;background-position-y: 62px;}
#dataBar {padding:15px;font-size:10pt;color:#BBB696;}
#loginBlock {float:right;padding:15px;font-size:10pt;color:#BBB696;}
#logo {height:131px;}
#logoName {float:left;width:30%;}
#logoName h1 {position:relative;top:50px;text-align:center;color:#124256;font-size:20pt;font-weight:normal;margin:0;padding:0;}
#logoPick {float:right;width:69%;height:131px;max-width:1024px;}
.subLine {clear:both;height:12px;background:url('/.s/t/836/4.gif') repeat-x #9E0B0F;}
#leftColumn {position:relative;float:left;width:22%;left:0px;background:#F1F0E8;text-align:center;}
#rightColumn {position:relative;float:right;width:22%;right:0px;background:#F1F0E8;text-align:center;}
#center {margin-left:auto;margin-right:auto;width:54%;padding:20px 0px;text-align:center;} 
*html #center {width:98%;}
#textBlock {overflow:auto;width:98%;text-align:left;margin-left:auto;margin-right:auto;}
#footer {background:url('/.s/t/836/1.gif') repeat-x #FAF9F1;text-align:center;padding:20px;}

.boxTable {padding:0;margin-left:auto;margin-right:auto;text-align:center;width:90%;margin-top:15px;margin-bottom:15px;border-top:1px solid #D3D2CB;border-left:1px solid #D3D2CB;background:#FAF9F1;border-bottom:2px solid #93C3D7;border-right:1px solid #FFFFFF;}
.boxTable h2 {font-size:10pt;color:#FAF9F1;padding:5px;margin:0px;text-align:center;background:#99977F;border:1px solid #FAF9F1;}
.boxContent {margin-left:auto;margin-right:auto;width:90%;padding:5px 2px;text-align:left;}
.center {text-align:center;}
.searchTable {margin-left:auto;margin-right:auto;}

h1 {color:#505050;font-size:14pt;font-weight:normal;}

#navBar a:link {text-decoration:underline; color:#DCDBD4;}
#navBar a:active {text-decoration:underline; color:#DCDBD4;}
#navBar a:visited {text-decoration:underline; color:#DCDBD4;}
#navBar a:hover {text-decoration:none; color:#FFFFFF;}

a:link {text-decoration:underline; color:#838383;}
a:active {text-decoration:underline; color:#838383;}
a:visited {text-decoration:underline; color:#838383;}
a:hover {text-decoration:none; color:#000000;}


td, body {font-family:verdana,arial,helvetica; font-size:8pt;}
form {padding:0px;margin:0px;}
input,textarea,select {vertical-align:middle; font-size:8pt; font-family:verdana,arial,helvetica;}
.copy {font-size:7pt;}

a.noun:link {text-decoration:none; color:#99977F}
a.noun:active {text-decoration:none; color:#99977F}
a.noun:visited {text-decoration:none; color:#99977F}
a.noun:hover {text-decoration:none; color:#000000}

hr {color:#DCDBD4;height:1px;border:none;background:#DCDBD4;}
label {cursor:pointer;cursor:hand}

.blocktitle {font-family:Verdana,Sans-Serif;color:#787878;font-size:12px;}

a.menu1:link {text-decoration:underline; color:#FAF9F1}
a.menu1:active {text-decoration:underline; color:#FAF9F1}
a.menu1:visited {text-decoration:underline; color:#FAF9F1}
a.menu1:hover {text-decoration:underline; color:#DCDBD4}
.menuTd {padding-left:12px;padding-right:10px; background: url('/.s/t/836/5.gif') no-repeat 0px 3px;}

.mframe {border-left:1px solid #E5E7EA; border-right:1px solid #E5E7EA;}
.colgray {border-right:1px solid #E5E7EA;}
.colwhite {border-right:1px solid #FAF9F1;}
.msep {border-top:1px solid #FAF9F1;}
/* ------------- */

сделайте 3-4 раза ctrl+f5 на странице
webanet,
Благодарю Всех за помощь. Получилось. Теперь изображение в шапке повторяется как бы орнаментом. Спасибо!
...