помогите в прокрутке новостей

vladbadhero · August 19, 2010

сама страница www.praypeople.ucoz.ru

проблема в том, что новости с прокруткой не так работает, в Opere прокрутка справа в Internet Explorer появляется нижняя прокрутка, не могу составить правильную прокрутку помогите пожалуйста очень прошу.

в самом низу код на на новости $LAST_NEWS$

я щитаю что дело в margin: 0 auto; у меня он рапространяется на все "формы" удалив в "форме, margin: 0 auto;" с окном на новости, распадается вся страница...

я прошу малого тока чтобы прокрутка отображалась коректно с правого края и всё

вот в этой "форме" "новостей" я менял всё подряд не чего не помагало...

body {

font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;

background: #42413C;

margin: 0;

padding: 0;

color: #000;

background-color: #FFF;

}

.container {

width: 960px;

background: #FFF;

margin: 0 auto; /* автоматическое задание величин по бокам в совокупности с шириной центрирует макет */

}

.content {

padding-top: 50px;

height: 300px;

width: 650px;

float: right;

}

САМ САЙТ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>praypeople</title>
<style type="text/css">
<!--
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #42413C;
	margin: 0;
	padding: 0;
	color: #000;
	background-color: #FFF;
}

/* ~~ Селекторы элементов/тегов ~~ */
ul, ol, dl { /* Из-за различий между браузерами рекомендуется обнулять поля в списках. Для согласованности можно указать нужные величины либо здесь, либо в элементах списка (LI, DT, DD), которые они содержат. Помните, что сделанное здесь последовательно включается в список .nav, если только не будет прописан более конкретный селектор. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* удаление верхнего поля позволяет обойти проблему выхода полей за границы содержащего их контейнера DIV. Оставшееся нижнее поле отделит его от любых последующих элементов. */
	padding-right: 15px;
	padding-left: 15px; /* добавление боковых полей к элементам внутри контейнеров DIV, а не к самим контейнерам избавляет от необходимости расчетов рамочной модели. В качестве альтернативы можно использовать вложенный контейнер DIV с боковыми полями. */
}
a img { /* этот селектор убирает стандартную синюю рамку, которая появляется у изображений в некоторых браузерах, если вокруг изображения есть ссылка */
	border: none;
}

/* ~~ Оформление ссылок на вашем сайте должно оставаться в этом порядке, включая группу селекторов, создающих эффект наведения. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* если только ссылки не должны выглядеть исключительно своеобразно, то для быстрого зрительного распознавания рекомендуется использовать подчеркивание */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* эта группа селекторов обеспечивает пользователю, работающему с клавиатурой, такие же возможности наведения, как и при использовании мыши. */
	text-decoration: none;
}

/* ~~ этот контейнер фиксированной ширины окружает все остальные DIV ~~ */
.container {
	width: 960px;
	background: #FFF;
	margin: 0 auto; /* автоматическое задание величин по бокам в совокупности с шириной центрирует макет */
}

/* ~~ верхнему колонтитулу не задана ширина. Он растянется на всю ширину макета. Он содержит заполнитель для изображения, который должен быть заменен логотипом по ссылке ~~ */
.header {
	background: #FFF;
	padding-top: 50px;
}

/* ~~ Столбцы для макета. ~~ 

1) Поля размещены только вверху и/или внизу DIV. Элементы в этих DIV имеют боковые поля. Это избавляет пользователя от необходимости расчетов рамочной модели. Помните, что при добавлении боковых полей или границы к самому DIV их ширина будет добавлена к задаваемой ширине, что образует "полную" ширину. Кроме того, можно удалить поля элемента в DIV и поместить внутри него второй DIV без ширины и с необходимыми по проекту полями.

2) Столбцы не снабжаются полями, поскольку все они обтекающие. Если нужно добавить поля, то желательно не с той стороны, с которой обтекается столбец (например, правое поле у div, настроенного на обтекание справа).  Часто вместо этого можно применить padding. В случаях, когда это правило приходится нарушить, следует добавить к правилу div объявление "display:inline", чтобы исправить ошибку с удвоением полей в некоторых версиях Internet Explorer. 

3) Поскольку классы можно использовать в документе многократно (а к элементу можно применять несколько классов), то столбцам вместо идентификаторов назначены имена классов. Например, два DIV с боковыми панелями могут при необходимости стыковаться. По желанию имена можно легко заменить на идентификаторы при условии, что они используются по одному на документ.

4) Если вы предпочитаете, чтобы панель навигации была справа, а не слева, просто установите обтекание столбцов в противоположном направлении (все справа, а не слева), они выстроятся в обратном порядке. Перемещать DIV в исходном коде HTML-документа не нужно.

*/
.sidebar1 {
	float: left;
	width: 266px;
	background: #FFF;
	padding-top: 50px;
}
.content {
	padding-top: 50px;
	height: 300px; 
	width: 650px;
	float: right;
}

/* ~~ Этот сгруппированный селектор выдает списки в пространстве .content ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* это поле зеркально повторяет правое поле в правиле для заголовков и параграфов выше. Внизу поле помещено как граница между элементами списков, а слева — как отступ. Поля можно настраивать по желанию. */
}

/* ~~ Стили списка навигации (можно убрать, если решено использовать готовое подменю, например Spry) ~~ */
ul.nav {
	list-style: none; /* удаляет маркер списка */
	border-top: 1px solid #666; /* создает верхнюю границу ссылок — все остальные размещаются с использованием нижней границы в LI */
	margin-bottom: 15px; /* создает пространство между навигацией по содержимому ниже */
}
ul.nav li {
	border-bottom: 1px solid #666; /* разделяет кнопки */
}
ul.nav a, ul.nav a:visited { /* группировка этих селекторов гарантирует, что ссылки будут выглядеть как кнопки даже после того, как пользователь перейдет по ним */
	padding: 5px 5px 5px 15px;
	display: block; /* наделяет ссылку свойствами блока, из-за чего она заполняет весь содержащий ее элемент LI. При этом вся область реагирует на щелчок мышью. */
	width: 160px;  /*такая ширина позволяет нажимать всю кнопку в IE6. Если вам не нужна поддержка IE6, это можно удалить. Чтобы вычислить правильную ширину, вычтите ширину полей этой ссылки из ширины контейнера боковой панели. */
	text-decoration: none;
	background: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* изменяет цвет текста и фона при навигации с помощью клавиатуры и мыши */
	background: #ADB96E;
	color: #FFF;
}

/* ~~ Нижний колонтитул ~~ */
.footer {
	padding-top: 50px;
	background: #CCC49F;
	position: relative;/* IE6 получает hasLayout для правильной очистки */
	clear: both; /* это свойство очистки заставляет .container видеть место окончания столбцов и включать их */
	background-color: #FFFFFF;
}

/* ~~ прочие классы float/clear ~~ */
.fltrt {  /* этот класс можно использовать для обтекания элемента справа на странице. Обтекаемый элемент должен предшествовать элементу, с которым он должен находиться рядом на странице. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* этот класс можно использовать для обтекания элемента слева на странице. Обтекаемый элемент должен предшествовать элементу, с которым он должен находиться рядом на странице. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* этот класс можно поместить в теге <br /> или в пустом блоке DIV в качестве конечного элемента, следующего за последним обтекаемым DIV (внутри #container), если .#footer удален или извлечен из #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
-->
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onload="MM_preloadImages('сайт/меню/новости/newsusamabenladen.jpg','сайт/меню/команда/commandusamabenladen.jpg')">

<div class="container">
  <div class="header"><img src="http://www.praypeople.ucoz.ru/mainpage/mainpage/logo.jpg" width="961" height="232" id="logo" style="background: #FFF; display:block;" /> 
	<!-- end .header --></div>
  <div class="sidebar1"><a href="/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','http://www.praypeople.ucoz.ru/mainpage/mainpage/menu/newsusamabenladen.jpg',1)"><img src="http://www.praypeople.ucoz.ru/mainpage/mainpage/menu/news.jpg" name="news" width="168" height="59" border="0" id="news" /></a><a href="command" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('command','','http://www.praypeople.ucoz.ru/mainpage/mainpage/menu/commandusamabenladen.jpg',1)"><img src="http://www.praypeople.ucoz.ru/mainpage/mainpage/menu/command.jpg" name="command" width="266" height="59" border="0" id="command" /></a>
	<!-- end .sidebar1 --></div>
<div class="content">
$LAST_NEWS$
<!-- end .content --></div>
  <div class="footer" align="right">
$POWERED_BY$
  <!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>

Edited August 19, 2010 by vladbadhero

Vlad · August 19, 2010

Нет смысла приводить такой большой код если дана ссылка на сайт.

Добавь overflow-x: none к полю с новостями.

vladbadhero · August 19, 2010

не помогло вообще пропала перекрутка, ниже указал "overflow" если вставляю туда код новостей то все каректно как надо отображается во всех браузерах.

подскажите пожалуйста как мне вот это ниже засунуть бы мне на страницу а канкретно в новости...

я думаю что все дело в "container" а именно margin: 0 auto; /* автоматическое задание величин по бокам в совокупности с шириной центрирует макет */

он не дает задать свои настройки прокрутки, посмотрите кто видит ошибку у меня исправьте пож.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>overflow</title>
  <style type="text/css">
   .layer {
	overflow-y: scroll; /* Добавляем полосы прокрутки */
	width: 600px; /* Ширина блока */
	height: 400px; /* Высота блока */
	padding-top: 50px; /* Поля вокруг текста */
   } 
  </style>
 </head>
 <body> 

  <div class="layer">
   <h2>$LAST_NEWS$</h2>
  </div> 

 </body>
</html>

Edited August 19, 2010 by vladbadhero

Lincky · August 19, 2010

Добавь overflow-x: none к полю с новостями.

Влад, я думаю ты опечатался со значением overflow-x:none.

Тут надо overflow-x:hidden. Если не поможет, то для этого же блока position:relative;

{overflow-y:scroll; overflow-x:hidden}

Vlad · August 19, 2010

Да, ошибся.

vladbadhero · August 19, 2010

большое спосибо помогло, еще один последний вопрос у меня прокрутка почемуто накаладывается на padding, как сделать чтобы прокрутка осталась в окне и не заходила на padding а мог кантролировать её высоту?

ЗАРАНЕЕ БОЛЬШОЕ СПОСИБО!

.content {

padding-top: 50px;

height: 300px;

width: 650px;

float: right;

overflow-y:scroll;

overflow-x:hidden;

position:relative;

}

vladbadhero · August 19, 2010

применил вот это как считаете правильно сделал или можно было что-то лучше применить?

border: solid 50px white;

Edited August 19, 2010 by vladbadhero

Sign In

помогите в прокрутке новостей

Question

vladbadhero

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

vladbadhero

Link to comment

Share on other sites

Lincky

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

vladbadhero

Link to comment

Share on other sites

vladbadhero

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information