Бесплатная помощь по верстке

**3s777** · 24.08.2013 22:38

С кодом беда. Сайта на wordpress, установлен на локалке.
Содержание и якоря формируются автоматически через плагин TOC+. Он выдергивает h2 и h3 заголовки и делает из них содержание.
Ссылки имеют вид #i-1, #i-2, #i-3 и т.д.
Вот так выглядит в коде содержание

Код HTML:

<aside id="toc-widget-2" class="widget toc_widget"><h3 class="widget-title">Содержание</h3><ul class="toc_widget_list"><li><a href="#i"><span class="toc_number toc_depth_1">1</span> Безопасность вашего автомобиля</a><ul><li><a href="#i-2"><span class="toc_number toc_depth_2">1.1</span> Недостатки спутниковой сигнализации на авто</a></li><li><a href="#i-3"><span class="toc_number toc_depth_2">1.2</span> Основным, и пожалуй</a></li></ul></li><li><a href="#i-4"><span class="toc_number toc_depth_1">2</span> Единственный выход из положения</a></li></ul></aside>

Вот так контент

Код HTML:

<h2 style="text-align: center;"><span id="i">Безопасность вашего автомобиля</span></h2> <p>гарантируется (при условии подключения) такой спутниковой противоугонной системой, как «Цезарь – Сателлит», например.<br />
То есть, преимущества спутниковой системы сигнализации авто бесспорны. Но… как всегда бывает одно «но».</p> <h3 style="text-align: center;"><span id="i-2">Недостатки спутниковой сигнализации на авто</span></h3> <p><a class="shutterset_72" href="http://wp.local/wp-content/uploads/2013/07/apartamenti-sredec.jpg"><img class="alignleft size-full wp-image-104" alt="apartamenti-sredec" src="http://wp.local/wp-content/uploads/2013/07/apartamenti-sredec.jpg" width="300" height="212" /></a>Один человеческий гений придумывает систему обеспечения безопасности, другой, систему её обхода. С противоугонным устройством «костыль» было проще – чем толще металл, тем дольше пилить. В электронных системах все гораздо проще для специалиста, чем нам, обычным гражданам кажется.</p> <h3 style="text-align: center;"><span id="i-3">Основным, и пожалуй</span></h3> <p>единственным, недостатком электронных противоугонных систем является возможность вычисления алгоритма кодируемых сигналов.</p>

**cOAPerator** · 26.08.2013 00:15

3s777, вот код 100% рабочий. адаптируйте подсебя как нужно

прокрутка к якорям вниз + кнопка наверх

Код:

<!DOCTYPE>
<html>
 <head>

  <title>Тег А, атрибут name</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style type="text/css">
  body{
    height: 4000px;
  }

  </style>
  <script>
   $(function(){
    $("#back-top").hide();
			$(window).scroll(function () {
			if ($(this).scrollTop() > 150) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});

	   $('a[href^="#"]').click(function(){
    var target = $(this).attr('href');
    $('html, body').animate({scrollTop: target ==  '#top' ? 0 :$(target).offset().top}, 800);
    return false;
});

	});


  </script>
 </head>
 <body>

  
  <p style="height:3000px;">Здесь много-много текста.
   Прокручивай его вниз. <br><a  href="#center">К середине</a>
  <p  style=" height: 100px auto "><a id="center">center</a></p>
   </p>

  <p id = "back-top" style="position:  fixed ; top: 30px; left: 500px"><a href="#top" >Наверх</a></p>

 </body>
</html>

[свернуть]

**3s777** · 26.08.2013 14:36

cOAPerator,может я баран, бараном, но ничего у меня не вышло.
Я даже взял чисто этот код, создал новый html файл и увидел, что там просто появляется кнопка "Наверх", которая просто подымает страницу на самый верх. А при переходе по ссылке "К середине", переходит к якорю Center, который также находится вверху окна, и никакого отступа сверху к сожалению нет...
Может я не понимаю как это должно работать, потому что я в JS дубовый... Объясните, как правильно пользоваться этим кодом.

**cOAPerator** · 26.08.2013 20:33

Сообщение от 3s777

переходит к якорю Center, который также находится вверху окна, и никакого отступа сверху к сожалению нет...

возможно где то ошибка в тегах, там Center тоже с отступом в 3000px от верха
ща вот попробовал скопировать, все работает
покрасил тег вам в другой цвет, чтобы видно было

новый код

Код:

<!DOCTYPE>
<html>
 <head>

  <title>Тег А, атрибут name</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style type="text/css">
  body{
    height: 4000px;
  }

  </style>
  <script>
   $(function(){
    $("#back-top").hide();
			$(window).scroll(function () {
			if ($(this).scrollTop() > 150) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});

	   $('a[href^="#"]').click(function(){
    var target = $(this).attr('href');
    $('html, body').animate({scrollTop: target ==  '#top' ? 0 :$(target).offset().top}, 800);
    return false;
});

	});


  </script>
 </head>
 <body>

  
  <p style="height:3000px; background: #aaa;">Здесь много-много текста.
   Прокручивай его вниз. <br><a  href="#center">К середине</a>
  <p  style=" height: 100px auto "><a id="center">center</a></p>
   </p>

  <p id = "back-top" style="position:  fixed ; top: 30px; left: 500px"><a href="#top" >Наверх</a></p>

 </body>
</html>

[свернуть]

а ссылка наверх она прикрепленная

**3s777** · 26.08.2013 23:51

Еще раз спасибо. Но как и прежде я ничего не понял как это может мне помочь.
Да, цвет до текста center вы сделали серым. Да, этот текст находится на 3000px ниже верха документа. Но если я вверху нажимаю на <a href="#center">К середине</a>, то надпись center все равно в самом верху страницы, без никаких отступов, а должен быть над ней оступ, чтобы его меню плавающее не перекрывало.
Я наверное туплю, но я не вижу, как мне может помочь это решение

**cOAPerator** · 27.08.2013 01:55

3s777, вот пример наш:

Код:

$('html, body').animate({scrollTop: target ==  '#top' ? 0 :$(target).offset().top}, 800);

если дописать вот так:

Код:

$('html, body').animate({scrollTop: target ==  '#top' ? 100 :$(target).offset().top}, 800);

то будет отступ сверху для кнопки наверх в 100px

если вот так:

Код:

$('html, body').animate({scrollTop: target ==  '#top' ? 0 :$(target).offset().top+50}, 800);

то будет отступ для якорей сверху в 50px

вот тут можно пример посмотреть _http://starnox.ru/articles/php/upload-failov-i-vse-s-etim-svyazannoe.html

**3s777** · 27.08.2013 02:46

Вы волшебник! Помогло! Спасибо огромнейшее!
Помогла вот такая конструкция: $('html, body').animate({scrollTop: target == '#top' ? 0 :$(target).offset().top-50}, 800);
т.е. вместо + я поставил - и отлично заработало на ура!
Еще раз спасибо!!!

**cOAPerator** · 27.08.2013 04:12

3s777, я не волшебник, я только учусь

да, регулируйте значения + и - в зависимости от шаблона. У меня например + стоит. Это от верстки шаблона зависит.

**Magolov** · 29.08.2013 16:09

Использую в короткие ссылки на сайте (движок Wordpress). Делаю перелинковку, в итоге выходит вот так:

Нажмите на изображение для увеличения. Название: dfgfdg.jpg Просмотров: 10 Размер: 23.5 Кб ID: 11278

Как поисковики видят такую ссылку? Нормально или не очень?

**ximet** · 30.08.2013 15:35

Сообщение от Magolov

Как поисковики видят такую ссылку? Нормально или не очень?

поисковики схавают всё) Даже полностью не валидный код. Вопрос только в том, что вы веделяете тегом strong? По идее, с ним проблем никогда не возникало, но в проектах, его стараюсь редко использовать. Лучше font-weight использовать (но это мое ИМХО).

Вообще принято, меньше засорять html документ, оставляя в нём только структуру. А со стилями работать уже в CSS

	24.08.2013 22:38 #81
3s777 Гуру Регистрация: 09.02.2013 Сообщений: 1,417 Репутация: 384 Webmoney BL: ?	С кодом беда. Сайта на wordpress, установлен на локалке. Содержание и якоря формируются автоматически через плагин TOC+. Он выдергивает h2 и h3 заголовки и делает из них содержание. Ссылки имеют вид #i-1, #i-2, #i-3 и т.д. Вот так выглядит в коде содержание Код HTML: <aside id="toc-widget-2" class="widget toc_widget"><h3 class="widget-title">Содержание</h3><ul class="toc_widget_list"><li><a href="#i"><span class="toc_number toc_depth_1">1</span> Безопасность вашего автомобиля</a><ul><li><a href="#i-2"><span class="toc_number toc_depth_2">1.1</span> Недостатки спутниковой сигнализации на авто</a></li><li><a href="#i-3"><span class="toc_number toc_depth_2">1.2</span> Основным, и пожалуй</a></li></ul></li><li><a href="#i-4"><span class="toc_number toc_depth_1">2</span> Единственный выход из положения</a></li></ul></aside> Вот так контент Код HTML: <h2 style="text-align: center;"><span id="i">Безопасность вашего автомобиля</span></h2> <p>гарантируется (при условии подключения) такой спутниковой противоугонной системой, как «Цезарь – Сателлит», например.<br /> То есть, преимущества спутниковой системы сигнализации авто бесспорны. Но… как всегда бывает одно «но».</p> <h3 style="text-align: center;"><span id="i-2">Недостатки спутниковой сигнализации на авто</span></h3> <p><a class="shutterset_72" href="http://wp.local/wp-content/uploads/2013/07/apartamenti-sredec.jpg"><img class="alignleft size-full wp-image-104" alt="apartamenti-sredec" src="http://wp.local/wp-content/uploads/2013/07/apartamenti-sredec.jpg" width="300" height="212" /></a>Один человеческий гений придумывает систему обеспечения безопасности, другой, систему её обхода. С противоугонным устройством «костыль» было проще – чем толще металл, тем дольше пилить. В электронных системах все гораздо проще для специалиста, чем нам, обычным гражданам кажется.</p> <h3 style="text-align: center;"><span id="i-3">Основным, и пожалуй</span></h3> <p>единственным, недостатком электронных противоугонных систем является возможность вычисления алгоритма кодируемых сигналов.</p>
0 3s777

	26.08.2013 14:36 #83
3s777 Гуру Регистрация: 09.02.2013 Сообщений: 1,417 Репутация: 384 Webmoney BL: ?	cOAPerator,может я баран, бараном, но ничего у меня не вышло. Я даже взял чисто этот код, создал новый html файл и увидел, что там просто появляется кнопка "Наверх", которая просто подымает страницу на самый верх. А при переходе по ссылке "К середине", переходит к якорю Center, который также находится вверху окна, и никакого отступа сверху к сожалению нет... Может я не понимаю как это должно работать, потому что я в JS дубовый... Объясните, как правильно пользоваться этим кодом.
0 3s777

	26.08.2013 23:51 #85
3s777 Гуру Регистрация: 09.02.2013 Сообщений: 1,417 Репутация: 384 Webmoney BL: ?	Еще раз спасибо. Но как и прежде я ничего не понял как это может мне помочь. Да, цвет до текста center вы сделали серым. Да, этот текст находится на 3000px ниже верха документа. Но если я вверху нажимаю на <a href="#center">К середине</a>, то надпись center все равно в самом верху страницы, без никаких отступов, а должен быть над ней оступ, чтобы его меню плавающее не перекрывало. Я наверное туплю, но я не вижу, как мне может помочь это решение
0 3s777

	27.08.2013 02:46 #87
3s777 Гуру Регистрация: 09.02.2013 Сообщений: 1,417 Репутация: 384 Webmoney BL: ?	Вы волшебник! Помогло! Спасибо огромнейшее! Помогла вот такая конструкция: $('html, body').animate({scrollTop: target == '#top' ? 0 :$(target).offset().top-50}, 800); т.е. вместо + я поставил - и отлично заработало на ура! Еще раз спасибо!!!
0 3s777

	29.08.2013 16:09 #89
Magolov Студент Регистрация: 21.06.2012 Сообщений: 77 Репутация: 12	Использую в короткие ссылки на сайте (движок Wordpress). Делаю перелинковку, в итоге выходит вот так: Как поисковики видят такую ссылку? Нормально или не очень?
0 Magolov

Бесплатная помощь по верстке

Опции темы

прокрутка к якорям вниз + кнопка наверх

Спасибо сказали:

новый код

Спасибо сказали:

Спасибо сказали:

Спасибо сказали:

Спасибо сказали:

Тэги топика:

Похожие темы

Бесплатная помощь по wordpress

Бесплатная помощь по ucoz сайтам

Нужна помощь по верстке.

Нужна не бесплатная помощь в заполнении сайта

Нужна небольшая помощь в верстке (DLE). Вывод популярных новостей.

Тем:

Сообщений:

Пользователей:

Сейчас на сайте:

Вход

Сайт

Разделы

Прочее

Следите за нами

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Золотые темы форума

Последние новости

Популярные темы

Информеры

Темы	Раздел	Ответов	Последний пост
Бесплатная помощь по wordpress	WordPress	2451	02.12.2018 02:53
Бесплатная помощь по ucoz сайтам	Создание сайтов	6	31.03.2013 15:25
Нужна помощь по верстке.	Web программирование	3	25.02.2013 12:54
Нужна не бесплатная помощь в заполнении сайта	Копирайтинг, переводы, постинг	4	22.12.2012 01:33
Нужна небольшая помощь в верстке (DLE). Вывод популярных новостей.	DLE	3	01.07.2012 18:09