Jump to content
  • 0

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

johncy

Asked by johncy,

 Share

Question

johncy Explorer

johncy

Posted
Posted

Подскажите, что нужно сделать. Есть шаблон и в разрешении 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
}

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
kalyaka-malyaka Explorer

kalyaka-malyaka

Posted
Posted

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

#wrapper {

height: 100%;

width: 1240px;

margin-right: auto;

margin-left: auto;

margin-top: 10px;

}

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

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

Link to comment
Share on other sites
  • 0
kalyaka-malyaka Explorer

kalyaka-malyaka

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

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

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

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

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

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

Edited by kalyaka-malyaka
Link to comment
Share on other sites
  • 0
johncy Explorer

johncy

Posted
  • Author
Posted (edited)
у вас, кстати, <head> не закрыт. валидатор 132 ошибки выдал.

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

Edited by johncy
Link to comment
Share on other sites
  • 0
kalyaka-malyaka Explorer

kalyaka-malyaka

Posted
Posted (edited)

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

для начала добавьте </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 by kalyaka-malyaka
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept