Выявим ошибку вместе! (:

boompaw · March 8, 2011

Есть плагин jcarousel, уже весь мозг съел своими вопросами о нем, на форуме, но всё же вот он (надеюсь последний) вопрос.

Нужно, чтобы было видно 3 с пункта меню и путём нажатия кнопок они менялись.

Во-первых, по не понятным мне причинам половины первого пункта меню даже не видно.

Во-вторых, ездит только текст, картинка (которую чуть-чуть, но можно разглядеть) стоит на месте.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<title>Bo0m-paw</title>
		<link href="css/style.css"  rel="stylesheet" type="text/css">
		<script type="text/javascript" src="../js/jquery.js"></script>
		<script type="text/javascript" src="../js/jcarousel.js"></script>

<style type="text/css">

		li { display: list-item;
}

	ul.list{
		width: 350px;
		margin:0 auto;
		border: 0;
		list-style-type: none;
		padding:0;
	}
	ul.list h1{
		text-align: left;
				padding-left: 40px;
				font-size: 1.0em;
	}
	ul.list > li{
		display: block;
		clear: both;
		border: 0;
		overflow: hidden;
	}
	ul.list > li > img{	
		height: 80px;
		width : 80px;
		border: 1px solid #000;
		float: left;

	}
	/*ul.list > li > img,
	ul.list ul{
		display: inline-block;
		clear: none;
		vertical-align: middle;
	}*/
	ul.list ul{
		width: auto;
				padding-top: 3%;
				padding-left: 27%;
		list-style-type: none;
				color: #888;
	}

h1 {font-size: 12px;}

.nav {
  position:absolute;
  z-index:90;
  top:13px;
  left:22px;
  width:380px;
  left:10px;
}


  .nav a {
	display: inline-block;
	width:25px;
	height:13px;
  }
  .nav a.prev {
	background:url(../img/l.jpg);
	float:left;
  }
  .nav a.next {
	background:url(../img/r.jpg);
	float:right;
  }

.wrap { height: 500px; width: 1200px }

</style>

<script>
$(function() {
  $(".slid").jCarouselLite({
	btnNext: ".next",
	btnPrev: ".prev",
	vertical: true,
	visible: 3
  });
});

</script>

</head>

<body>

<div class="wrap">

  <div class="slid" style="visibility: visible;overflow-x: hidden;overflow-y: hidden;position:relative;z-index: 

2;left: 0px;height:500px;>

	<ul class='list' style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; 

padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; position: relative; list-style-type: 

none; z-index: 1; height: 1925px; top: 0px; ">

		<li style="overflow-x: hidden; overflow-y: hidden; float: none; width: 340px; height: 250px; ">
			<h1>Название сервера</h1>
			<img src="img/1.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="img/1.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="img/1.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="img/1.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="img/1.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="img/1.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="img/1.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="img/1.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="img/1.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>			  
	</ul>
	</div>	 

   <div class="nav">
	 <a href="#" class="prev"></a>
	 <a href="#" class="next"></a>
   </div> 

</div>

</body>
</html>

swetlana · March 8, 2011

в этом коде пути неверные

boompaw · March 8, 2011

в этом коде пути неверные

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

Edited March 8, 2011 by boompaw

swetlana · March 8, 2011

первая проблема именно в этом.

ругань-то на пути.

boompaw · March 8, 2011

у меня всё находится на локалке.

у меня нет ругани на пути, ошибка где-то в ul, li или div, а найти её не могу. по 500 раз всё уже поменял, поперетыркал и всё-равно.

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

совсем печаль

Edited March 8, 2011 by boompaw

swetlana · March 8, 2011

воистину печаль.

Мы-то не можем попасть к вам на локалку

boompaw · March 8, 2011

воистину печаль.
Мы-то не можем попасть к вам на локалку

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

swetlana · March 8, 2011

Сударь, вам помощь нужна или доказать, что вы всё правильно делаете?

Если нужна помощь, то не поленитесь почитать форум. Бесплатные хостинги, куда можно заливать примеры, обсуждались неоднократно.

Если что-то доказывать, то лучше не надо. И так согласимся

boompaw · March 8, 2011

Указал пути. Проблема не исчезла.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<title>Bo0m-paw</title>	  

		<script type="text/javascript" src="http://www.fms.by/js/jquery.js"></script>
		<script type="text/javascript" src="http://www.fms.by/js/jcarousel.js"></script>

<style type="text/css">

		li { display: list-item;
}

	ul.list{
		width: 350px;
		margin:0 auto;
		border: 0;
		list-style-type: none;
		padding:0;
	}
	ul.list h1{
		text-align: left;
				padding-left: 40px;
				font-size: 1.0em;
	}
	ul.list > li{
		display: block;
		clear: both;
		border: 0;
		overflow: hidden;
	}
	ul.list > li > img{	
		height: 80px;
		width : 80px;
		border: 1px solid #000;
		float: left;

	}
	/*ul.list > li > img,
	ul.list ul{
		display: inline-block;
		clear: none;
		vertical-align: middle;
	}*/
	ul.list ul{
		width: auto;
				padding-top: 3%;
				padding-left: 27%;
		list-style-type: none;
				color: #888;
	}

h1 {font-size: 12px;}

.nav {
  position:absolute;
  z-index:90;
  top:13px;
  left:22px;
  width:380px;
  left:10px;
}


  .nav a {
	display: inline-block;
	width:25px;
	height:13px;
  }
  .nav a.prev {
	background:url(http://holod72.ru/themes/default/images/strel.png);
	float:left;
  }
  .nav a.next {
	background:url(http://holod72.ru/themes/default/images/strel.png);
	float:right;
  }

.wrap { height: 500px; width: 1200px }

</style>

<script>
$(function() {
  $(".slid").jCarouselLite({
	btnNext: ".next",
	btnPrev: ".prev",
	vertical: true,
	visible: 3
  });
});

</script>

</head>

<body>

<div class="wrap">

  <div class="slid" style="visibility: visible;overflow-x: hidden;overflow-y: hidden;position:relative;z-index: 

2;left: 0px;height:500px;>

	<ul class='list' style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; 

padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; position: relative; list-style-type: 

none; z-index: 1; height: 1925px; top: 0px; ">

		<li style="overflow-x: hidden; overflow-y: hidden; float: none; width: 340px; height: 250px; ">
			<h1>Название сервера</h1>
			<img src="http://my-cs.ru/images/maps/cs16/de_dust2.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="http://my-cs.ru/images/maps/cs16/de_dust2.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="http://my-cs.ru/images/maps/cs16/de_dust2.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="http://my-cs.ru/images/maps/cs16/de_dust2.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="http://my-cs.ru/images/maps/cs16/de_dust2.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="http://my-cs.ru/images/maps/cs16/de_dust2.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="http://my-cs.ru/images/maps/cs16/de_dust2.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="http://my-cs.ru/images/maps/cs16/de_dust2.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="http://my-cs.ru/images/maps/cs16/de_dust2.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>			  
	</ul>
	</div>	 

   <div class="nav">
	 <a href="#" class="prev"></a>
	 <a href="#" class="next"></a>
   </div> 

</div>

</body>
</html>

swetlana · March 8, 2011

и действительно… проблема не исчезла

Ну что поделать…

boompaw · March 8, 2011

и действительно… проблема не исчезла
Ну что поделать…

Вы писали об использовании visible и css (в другой теме на этот счет), я подумал вы разобрались с этим

wildhind · March 8, 2011

1. Тема связана с js, надо было и писать в разделе про js.

2. Никто не обязан разбираться с вашими проблемами. Но я попробую. Покажите ссылку на страницу, где наблюдается проблема.

boompaw · March 8, 2011

1. Тема связана с js, надо было и писать в разделе про js.
2. Никто не обязан разбираться с вашими проблемами. Но я попробую. Покажите ссылку на страницу, где наблюдается проблема.

извините за мою не внимательность (новенький и в связи с этим не разобрался ещё полностью)

понимаю, что с моими проблемами никто не обязан разбираться, поэтому всего-лишь прошу её, а не обязываю.

Вот страница с кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<title>Bo0m-paw</title>	  

		<script type="text/javascript" src="http://www.fms.by/js/jquery.js"></script>
		<script type="text/javascript" src="http://www.fms.by/js/jcarousel.js"></script>

<style type="text/css">

		li { display: list-item;
}

	ul.list{
		width: 350px;
		margin:0 auto;
		border: 0;
		list-style-type: none;
		padding:0;
	}
	ul.list h1{
		text-align: left;
				padding-left: 40px;
				font-size: 1.0em;
	}
	ul.list > li{
		display: block;
		clear: both;
		border: 0;
		overflow: hidden;
	}
	ul.list > li > img{	
		height: 80px;
		width : 80px;
		border: 1px solid #000;
		float: left;

	}
	/*ul.list > li > img,
	ul.list ul{
		display: inline-block;
		clear: none;
		vertical-align: middle;
	}*/
	ul.list ul{
		width: auto;
				padding-top: 3%;
				padding-left: 27%;
		list-style-type: none;
				color: #888;
	}

h1 {font-size: 12px;}

.nav {
  position:absolute;
  z-index:90;
  top:13px;
  left:22px;
  width:380px;
  left:10px;
}


  .nav a {
	display: inline-block;
	width:25px;
	height:13px;
  }
  .nav a.prev {
	background:url(http://holod72.ru/themes/default/images/strel.png);
	float:left;
  }
  .nav a.next {
	background:url(http://holod72.ru/themes/default/images/strel.png);
	float:right;
  }

.wrap { height: 500px; width: 1200px }

</style>

<script>
$(function() {
  $(".slid").jCarouselLite({
	btnNext: ".next",
	btnPrev: ".prev",
	vertical: true,
	visible: 3
  });
});

</script>

</head>

<body>

<div class="wrap">

  <div class="slid" style="visibility: visible;overflow-x: hidden;overflow-y: hidden;position:relative;z-index: 

2;left: 0px;height:500px;>

	<ul class='list' style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; 

padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; position: relative; list-style-type: 

none; z-index: 1; height: 1925px; top: 0px; ">

		<li style="overflow-x: hidden; overflow-y: hidden; float: none; width: 340px; height: 250px; ">
			<h1>Название сервера</h1>
			<img src="http://my-cs.ru/images/maps/cs16/de_dust2.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="http://my-cs.ru/images/maps/cs16/de_dust2.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="http://my-cs.ru/images/maps/cs16/de_dust2.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="http://my-cs.ru/images/maps/cs16/de_dust2.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="http://my-cs.ru/images/maps/cs16/de_dust2.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="http://my-cs.ru/images/maps/cs16/de_dust2.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="http://my-cs.ru/images/maps/cs16/de_dust2.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="http://my-cs.ru/images/maps/cs16/de_dust2.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>

		<li>
			<h1>Название сервера</h1>
			<img src="http://my-cs.ru/images/maps/cs16/de_dust2.jpg">
			<ul>
				<li>Игроков: 21/21</li>
				<li>Карта:&nbsp35hp_2</li>
				<li>Адрес сервера:&nbspboom-paw.com</li>
			</ul>
		</li>			  
	</ul>
	</div>	 

   <div class="nav">
	 <a href="#" class="prev"></a>
	 <a href="#" class="next"></a>
   </div> 

</div>

</body>
</html>

Просто скопируйте в notepad и откройте через браузер.

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

wildhind · March 8, 2011

Это кому надо, Вам или кому-то ещё? Если Вам не надо, боюсь, я тоже не смогу помочь, хотя наверняка всё дело в непрочитанной документации. Проблемы с jcarousel это что-то из области фантастики. Ждите, может найдутся самоотверженные герои, кому будет охота возиться с вашими портянками.

boompaw · March 8, 2011

Это кому надо, Вам или кому-то ещё? Если Вам не надо, боюсь, я тоже не смогу помочь, хотя наверняка всё дело в непрочитанной документации. Проблемы с jcarousel это что-то из области фантастики. Ждите, может найдутся самоотверженные герои, кому будет охота возиться с вашими портянками.

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

Int · March 9, 2011

Проблемы нет, здесь помогают по собственной воле и иногда такая воля может пропасть, только и всего.

Не пробовали переделать на простом примере с нуля, чтобы разобраться?

boompaw · March 9, 2011

Пробовал.

Сначала начал ставить уже на готовом шаблоне, ничего не вообще не получилось, затем решил с нуля попробовать.

Решил сделать просто прокрутку списка ссылок. Мне это удалось в идеале как и хотел.

Затем переоформил, сделал подсписки и оформил их..и вот результат.

kvant · March 10, 2011

2topicstarter

Хотите совета? Забудьте на время, что есть CSS, сделайте просто html, без стилей. Должно отображаться корректно, но некрасиво. Потом постепенно добавляйте стили. Сначала простейшие - отступы, шрифты и т.п. Если после этого шага все устраивает, то вы победили, если нет, то добавляйте более сложные стили. На каждом шаге отображение должно быть корректным, ничего не должно плыть, пока не добьетесь корректного отображения более сложные стили не добавляйте. И только если и это не устраивает, прибегайте к position, z-index и пр, да и то только после того, как вы хорошо подумали и пришли к выводу, что нужного вам эффекта не добиться более простым способом.

wanntuzz · March 11, 2011

Этот сайт будет весь разьежаться!

Serlutin · March 12, 2011

Как-то так: http://pastehtml.com/view/1dlgu05.html

Sign In

Выявим ошибку вместе! (:

Question

Link to comment

Share on other sites

19 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information