Разрешение 1024х768

johncy · December 3, 2008

Подскажите, что нужно сделать. Есть шаблон и в разрешении 1280х1024 все видно хорошо, но у некоторых пользователей разрешение 1024х768 в этом случае появляется горизонтальная прокрутка, что нужно сделать, чтобы от нее избавиться и страница сама подстроилась под нужное разрешение?

Вот код CSS

html {
	padding: 0px;
	margin: 0px;
	border: 0px;
}

body {
	margin: 0px;
	padding: 0px;
	border: 0px;
	height: 100%;
	width: 100%;
	text-align: center; /* required for centering the page in IE */
	background-repeat: no-repeat;
	font-family: Arial, sans-serif;
	font-size: 12px;
	color: #E9E9E9;
	line-height: 19px;
	background-attachment: fixed;
	background-position: left bottom;
	background-color: #000000;
}

.bodytext p {
   font-size: 12px;
}

.poll {
	overflow: hidden;
	text-align: left;
}

.bgthumbs {
	margin: 2px;
	border: 2px solid #000000;
}

.bgthumbs a:hover {
	border: 2px solid #0099CC;
}

h1, h2, h3, h4, p, ul, li, .poll, table.contentpaneopen {
	margin: 0px;
	padding: 0px;
	border:0px;
	list-style-type:none;
	font-size:12px;
}

h1,h2,h3,.componentheading, .contentheading {
	font-family: Trebuchet MS, Tahoma, Verdana, Arial;
	font-style: inherit;
	padding-bottom: 0px;
	text-align: left;
	color: #88CFFF;
	line-height: 18px;
	font-size: 16px;

}

div.componentheading {
	padding-bottom: 10px;
	text-decoration: underline;
}

.moduletable_menu h3 {
	text-indent: 10px;
	padding-bottom: 5px;
}

h1,.componentheading, .contentheading {
	font-size: 18px;
}

fieldset.input {
	border: 0px none;
}

a:link {
	color: #88CFFF;
	font-weight: bold;
}

a:hover {
	text-decoration: none;
}

a:visited{
	color: #88CFFF;
	font-weight: bold;
}

.moduletable {
	padding-bottom: 15px;
		text-align: center;
}

.mostread {
	list-style-type: none;
}

#logo {
	width: 330px;
	height: 90px;
	float: left;
	background-image: url(../images/logo.png);
	background-repeat: no-repeat;
}

#user5 {
	width: 456px;
	height: 90px;
	float: left;
	background-image: url(../images/banners/eyes3.png);
	background-repeat: no-repeat;
}

#headwrap {
	width: 1240px;
	height: 70px;
	margin-bottom: 10px;
}

#topbannerad {
	float: left;
	width: 728px;
	height: 90px;
}

#wrapper {
	height: 100%;
	width: 1240px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
}

#leftwrap {
	text-align: left;
	width: 180px;
	margin-right: 10px;
	float: left;
}

* html #left { display: inline; }

#left{
	width: 180px;
	background-image: url(../images/left-mid.png);
	background-repeat: repeat-y;
}

#leftinner2 .moduletable{
	padding-left: 10px;
}

#right {
	width: 700px;
	text-align: left;
	float: left;
}

* html #right { display: inline; }

#rightinner {
	background-image: url(../images/right-mid.png);
	background-repeat: repeat-y;
	width: 860px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}

#rightinner2 {
	margin-left: 0px;
	list-style-type: none;
	padding: 10px;
	border: 0px;
}

table.contentpane {
	width: 558px;
	overflow: hidden;
	display: inline;
	padding-bottom: 10px;
}

#farrightwrap {
	text-align: left;
	margin-left: 0px;
	width: 180px;
	margin-left: 10px;
	float: right;
}

#farright {
	width: 180px;
	background-image: url(../images/left-mid.png);
	background-repeat: repeat-y;

}

* html #farright { display:inline; }

#farrightinner2 {
	padding-left: 10px;
	padding-right: 10px;
	overflow: hidden;
}

#TopModule {
	width: 468px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 15px;
}

#BottomModule {
	width: 468px;
	margin-right: auto;
	margin-left: auto;
}

.logoLeft {
	float: left;
	margin: 10px;
}

.module_menu, #left .module {
	list-style-type: none;
	border: 0px;
	padding: 0px;
	margin: 0px;
}

ul.menu {
	padding-bottom: 15px;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #666666;
}

.menu li, .menu {
	display: block;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	text-indent: 18px;
	line-height: 21px;
}

.menu li a {
	display: block;
	height: 20px;
	padding: 3px;
	position: relative;
	left: 1px;
	width: 172px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #666666;
	background-image: url(../images/star.png);
	background-repeat: no-repeat;
	background-position: 4px 50%;
}

.menu li a:link, ul.menu a:visited {
	display: block;
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
}

.menu li a:hover {
	display: block;
	background-color: #88cfff;
	color: #000;
	background-image: url(../images/star-hover.png);
	background-repeat: no-repeat;
	background-position: 4px 50%;
}

ul#mainlevel a:link#active_menu, ul#mainlevel a:visited#active_menu {
	background-image: none;
	background-color: #FFF;
	color: #000;
}

li.mostread, li.latestnews{
	padding-bottom: 4px;
}

li.mostread, li.latestnews a:link{
	background-repeat: no-repeat;
}

.bear {
	float: right;
}
.sublevel {
	text-indent: 15px;
}

.column_separator {
	padding-left: 20px;
}

.article_column {
}

li.contentpaneopen, ul.contentpaneopen {
	list-style-type: none;
}

table .contentpaneopen {
	width: 100%;
	display: inline;
}

.buttonheading img, .hasTip img, .bs_contentdiv img {
	border: 0px;
}

.small, .createdate, .modifydate {
	font-size: 90%;
	font-style: italic;
	padding-bottom: 5px;
}

a.readon {
	font-size: 12px;
	float: right;
	margin-top: 2px;
	padding-top: 3px;
	padding-right: 20px;
	padding-bottom: 3px;
	padding-left: 7px;
	display: inline;
	background-color: #000000;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
	background-attachment: scroll;
	C40004-height: 15px;
	color: #88cfff;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	border: 1px solid #666;
	background-position: right 48%;
}

a.readon:hover, a.readon:active, a.readon:focus {	color:#000000;
	background-color: #88cfff;
	background-image: url(../images/arrow-hover.png);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-x-position: 5px;
	background-y-position: 48%;
	border: 1px solid #000000;
}

html {
	margin-bottom: 1px;
	height: 100%!important;
	height: auto;
}

#mod_search_searchword {
	font-size: 12px !Important;
	width: 140px;
}

#mod_login_password, #mod_login_username {
	width:160px;
	color: #FFF;
}

form {
	margin: 0;
	padding: 0;
}

input, select {
	font-size: 12px !Important;
}

label {
	font-size: 12px;
	text-align: left;
	margin: 0px;
	padding: 0px;
}

.pollstableborder {
	text-align: left;
}

select, .inputbox {
	padding: 4px;
	font-size: 12px;
}

textarea {
	font-size: 12px;
}

.button {
	border: 1px solid #666;
	padding: 2px 6px!important;
	background: url(../images/button-bg.gif) repeat-x top #000;
	color: #88CFFF;
	font-weight: bold;
	font-size: 12px;
}

#modlgn_remember {
	border: 0px;
	padding: 0px;
	margin: 0px;
	height: 14px;
	width: 14px;
}

#form-login {
}

ul.latestnews {
}

.button:hover  {
	background: url(../images/button-bg.gif) repeat-x top #88CFFF;
	color: #000;
	border: 1px solid #000;
}

.button:active, .button:focus {
	border: 1px solid #222222;
}

#form-login-remember {
	display:inline;
	vertical-align:top;
}

#mod_search_searchword .inputbox {
	font-size:12px;
}

.inputbox {
	font-size: 12px;
	border: 1px solid #3F3F3F;
	background: #000;
	color: #FFFFFF;
	text-indent: 3px;
}


#left .inputbox, #mainContent .inputbox {
	margin-top: 5px;
	margin-bottom: 5px;
	background: #000 !important;
	text-indent: 3px;
}

#left .inputbox:hover, #left .inputbox:focus, #mainContent .inputbox:hover, #mainContent .inputbox:focus, #farrightinner2 .inputbox:focus, #farrightinner2 .inputbox:hover{
	border: 1px solid #88CFFF;
}

#farrightinner2 form {
	width:160px;
}

#form-login-remember .inputbox:hover {
	border:none
}

s0rr0w · December 3, 2008

И что нам делать с твоим кодом CSS?

kalyaka-malyaka · December 3, 2008

ну как минимум:

#wrapper {

height: 100%;

width: 1240px;

margin-right: auto;

margin-left: auto;

margin-top: 10px;

}

и вполне вероятно, что еще какие-то ширины, складываясь, дают число больше, чем 1024.

без html или ссылки на страницу дальше только телепат разберется.

homm · December 3, 2008

Да, вполне вероятно, что 1240 + еще что-то будет больше чем 1024

kalyaka-malyaka · December 3, 2008

Да, вполне вероятно, что 1240 + еще что-то будет больше чем 1024

вот-вот, нельзя исключать такую возможность

johncy · December 3, 2008

Вот тут http://depositfiles.com/files/ellsf6htl целяком шаблон. А это адрес сайта: www.89reg.com

А по поводу width: 1240px; это значение нужно исправить на 1024, так? А как же он на высоком разрешении будет?

kalyaka-malyaka · December 3, 2008

Вот тут http://depositfiles.com/files/ellsf6htl целяком шаблон. А это адрес сайта: www.89reg.com

спасибо, простой ссылки на сайт достаточно

А по поводу width: 1240px; это значение нужно исправить на 1024, так? А как же он на высоком разрешении будет?

хреново будет.

поэтому надо не просто 1240 на 1024 исправлять, а перевёрстывать.

у вас, кстати, <head> не закрыт. валидатор 132 ошибки выдал.

Edited December 3, 2008 by kalyaka-malyaka

johncy · December 4, 2008

у вас, кстати, <head> не закрыт. валидатор 132 ошибки выдал.

Дело в том, что я занимаюсь этим сайтом, да и вообще, каким либо сайтом, всего 2 месяца. Это мой первый сайт, поэтому у меня есть вопрос, те ошибки, которые выдал валидатор необходимо исправить, но я не все строки распознал, вернее они же из разных файлов, как их все найти? И валидатор выделяет красным то, что нужно исправить и прелагает нужный вариант? Извиняюсь, если непонятно выразил мысль.

Edited December 4, 2008 by johncy

kalyaka-malyaka · December 4, 2008

вы исправляйте последовательно и обновляйте страницу проверки в валидаторе. дело в том, что из-за какого-нить одного незакрытого тега куча последующих могут восприниматься им как не закрытые.

для начала добавьте </head> и закройте все одинарные теги (я не уверена в правильности термина "одинарный" но ничего другого не мигу ни вспомнить, ни подобрать). одинарные - это те, у которых к открывающемы <тег> не полагается в пару закрывающий </тег>. одинарные зактываются так: <одинарный-тег />

т. е. не <img>, а <img />. не <br>, а <br />.

одинарных немного:

<area />
<base />
<basefont />
<bgsound />
<br />
<col />
<frame />
<hr />
<img />
<input />
<link />
<meta />
<param />

а после этого снова проверьте страницу валидатором. и читайте, что валидатор говорит. он все объясняет

# Error Line 91, Column 150: end tag for "img" omitted, but OMITTAG NO was specified.
…width="88" height="31" border="0"></a></div>
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

все же написано английским по белому.

Edited December 4, 2008 by kalyaka-malyaka

Sign In

Разрешение 1024х768

Question

johncy

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

s0rr0w

Link to comment

Share on other sites

kalyaka-malyaka

Link to comment

Share on other sites

homm

Link to comment

Share on other sites

kalyaka-malyaka

Link to comment

Share on other sites

johncy

Link to comment

Share on other sites

kalyaka-malyaka

Link to comment

Share on other sites

johncy

Link to comment

Share on other sites

kalyaka-malyaka

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information