StOK

Подскажите, пожалуйста, как на HTML и CSS без java и jquery сделать видеофон для подвала сайта с адаптивным шаблоном. В интернете есть готовые решения на HTML и CSS без java и jquery, но на всю страницу и там предлагается загрузить видео на сайт в нескольких форматах. А нужно, чтобы видео отображалось только в подвале, и чтобы ссылка на видео вела с Ютуб. Это сложно реализовать? На шаблон сайта можно взглянуть тут.

Даниил Виттманн, большое спасибо Вам за ответ! Спасибо Вам за подсказку с тегами. Исправила по Вашему примеру на <h2 id="a1">Первый подзаголовок</h2> и так далее. Код меню брала в инете, чем руководствовался его создатель не в курсе.

Уважаемые специалисты, пожалуйста, допишите стили для сайта, шаблон которого не совсем адаптивный. Сайт на Amiro CMS. Стили тут https://jsfiddle.net/StKo/u3a4k842/5/ Главная страница сайта нормально отображается на мобильных, как и главная страница блога: http://www.responsinator.com/?url=http%3A%2F%2Finternetsayt.wmsite.ru%2F http://www.responsinator.com/?url=http%3A%2F%2Finternetsayt.wmsite.ru%2Fblog Но страница с текстом в блоге адаптивна только на мобильных с шириной монитора от 500px. http://www.responsinator.com/?url=http%3A%2F%2Finternetsayt.wmsite.ru%2Fblog%2Feto-pervaja-zapis-v-moem Если добавить объемное изображение (например, 800х500рх) на любую страницу, хоть на главную, хоть на страницу блога, шаблон перестает быть адаптивным, изображение не сжимается. Может, кто-нибудь сможет подправить стили, чтобы шаблон стал полностью адаптивным?

Даниил Виттманн, извините за навязчивость. Не могли бы Вы подсказать мне в данной теме? https://htmlforum.io/topic/57520-chtoby-podzagolovok-ne-zakryvalsya-plavayuschim-menyu/

Наверное, Вы правы. Я когда писала старалась, как раз в уважительной форме обратиться. Извините, если и вправду грубо получилось. Спасибо Вам большое за код!

У меня на сайте плавающее меню реализовано через скрипт: <script type="text/javascript">var $ = jQuery.noConflict();var h_hght=100;var h_mrg=0;jQuery(function(){jQuery(window).scroll(function(){var top=jQuery(this).scrollTop();var elem=jQuery('#top-menu');if(top+h_mrg<h_hght){elem.css('top',(h_hght-top));elem.removeClass('fix')}else{elem.css('top',h_mrg);elem.addClass('fix')}})});</script> Стала делать в статьях навигационное меню типа: <blockquote><span style="font-weight:bold">Содержание:</span> <a href="#a1"><li>Здесь первый пункт содержания</a> <a href="#a2"><li>Здесь второй пункт содержания</a></blockquote> Каждый подзаголовок заключается в теги: <h2><a2 id="a1">Первый подзаголовок</a2></h2> При клике на пункт меню, перебрасывает к подзаголовку, но плавающее меню его скрывает. Что можно задать в скрипте, указанном выше, чтобы подзаголовки не закрывались плавающим меню? Как я поняла, это - var h_mrg=0; отступ от шапки страницы. Как задается отступ снизу в таком скрипте?

Подскажите, как сделать тень для кнопки? У одних кнопок на сайте class="submit" у других class="css-button". Пожалуйста, закройте тему. Справилась своими силами.

Уважаемые, может, кто-нибудь соизволит бесплатно создать выезжающий блок для моего сайта. В интернете куча кодов такого блока. Перепробовала все, ни один не работает на моих сайтах. Почему, не могу понять, в jQuery не разбираюсь. Мои сайты такого типа - с таким шаблоном test.degavo.ru Нужно чтобы блок выезжал в конце каждой статьи при прокрутке страницы читателем.

Большое спасибо за грамотное решение. В Вашем примере все отлично работает. Я пытаюсь прилепить этот код на страницу, сверстанную на ботстрапе через программку Mobirise. Там Ваше решение работает корректно в первой и второй строке. Третья и четвертая грузятся одновременно в первой. Не могли бы Вы подсказать, что может мешать корректной работе этого кода?

Подскажите, как сделать средствами CSS, но не скриптами, чтобы каждая строка начинала прописываться после того, как предыдущая закончила прописываться. Сейчас все строки прописываются одновременно. HTML: <p class="text-typing">1 строка</p> <p class="text-typing">2 строка</p> <p class="text-typing">3 строка</p> <p class="text-typing">4 строка</p> CSS: .text-typing { width: 21em; color:green; font-size: 22px; font-family: 'Marck Script', cursive; white-space:nowrap; overflow:hidden; -webkit-animation: type 5s steps(34, end); animation: type 5s steps(34, end); } @keyframes type{ from { width: 0; } } @-webkit-keyframes type{ from { width: 0; } }

Подскажите, пожалуйста, почему может съезжать сайдбар при отключении комментариев к записям. Отключаю их так: в списке записей отмечаю галочкой одну, затем нажимаю "Изменить" и "Применить". Вверху появляется название записи и ее параметры. Там запрещаю комментирование стандартными функциями Ворпресс. После этого оба сайдбара и правый и левый съезжают вниз под боди. Что нужно прописать в стилях, чтобы сайдбары не съезжали? Если комментарии разрешены, то код на странице вот такой: <div class="coment-titles"><span class="comments-post"></span><a href="http://test.ru/hglkdhoas/#respond"><span class="leave-reply">Написать сообщение</span></a> </div> <div id="comments" class="comments-area"> <div class="some-advertising"> </div> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/hglkdhoas/#respond" style="display:none;">Отменить ответ</a></small></h3> <form action="http://test.dru/wp-comments-post.php" method="post" id="commentform" class="comment-form"> <p class="comment-notes"><span id="email-notes">Ваш e-mail не будет опубликован.</span> Обязательные поля помечены <span class="required">*</span></p> <p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" aria-required='true' required='required' /></p> <p class="comment-form-email"><label for="email">E-mail <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" aria-describedby="email-notes" aria-required='true' required='required' /></p> <p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" /></p> <p class="comment-form-comment"><label for="comment">Комментарий</label> <textarea id="comment" name="comment" cols="45" rows="8" aria-describedby="form-allowed-tags" aria-required="true" required="required"></textarea></p> <p class="form-allowed-tags" id="form-allowed-tags">Можно использовать следующие <abbr title="HyperText Markup Language">HTML</abbr>-теги и атрибуты: <code>&lt;a href=&quot;&quot; title=&quot;&quot;&gt; &lt;abbr title=&quot;&quot;&gt; &lt;acronym title=&quot;&quot;&gt; &lt;b&gt; &lt;blockquote cite=&quot;&quot;&gt; &lt;cite&gt; &lt;code&gt; &lt;del datetime=&quot;&quot;&gt; &lt;em&gt; &lt;i&gt; &lt;q cite=&quot;&quot;&gt; &lt;s&gt; &lt;strike&gt; &lt;strong&gt; </code></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='127' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p> </form> </div><!-- #respond --> </div><!-- #comments .comments-area --> </div><!-- #content --> </div><!-- #primary --> </div> <!-- overlay-site-content --> Когда комментарии запрещены, код меняется вот так и появляются лишние дивы: </div> <div id="comments" class="comments-area"> <div class="some-advertising"> </div> </div><!-- #comments .comments-area --> </div><!-- #content --> </div><!-- #primary --> </div><!-- overlay-site-content --> Проблема не в стилях и html, а в php? Или я ошибаюсь?

Здравствуйте! Столкнулась с такой проблемой: установила скрипт воздушных шариков на странице подарков за первый комментарий, а скрипт создает вертикальную полосу прокрутки и передергивает страницу из стороны в сторону. Передергивания убрала тем, что добавила в стили: html {overflow-y: scroll;} Но полосу прокрутки не смогла убрать. Если отключаю в стилях полосу прокрутки, то ее нет и на мобильных устройствах. Мне такой вариант не подходит, ведь шаблон страницы адаптивный. Как сделать так, чтобы скрипт не создавал полосу прокрутки, но чтобы она оставалась на мобильных? Код скрипта: <script type="text/javascript"><!-- var ballmax = 10; var sinkspeed = 0.6; var ballmaxsize = 30; var ballminsize = 30; var ballspeed = 120; var ballingzone = 1; var ballreverb = false; var i = 0; grphcs = new Array(); grphcs[i++] = "assets/images/orangevii scharik.png"; grphcs[i++] = "assets/images/selenii scharik.png"; grphcs[i++] = "assets/images/belii scharik.png"; grphcs[i++] = "assets/images/krasnii scharik.png"; grphcs[i++] = "assets/images/fioletivii scharik.png"; grphcs[i++] = "assets/images/goluboi scharik.png"; var ball = new Array(); var marginbottom; var marginright; var timer; var i_ball = 0; var x_mv = new Array(); var crds = new Array(); var lftrght = new Array(); var browserinfos = navigator.userAgent; var ie5 = document.all&&document.getElementById&&!browserinfos.match(/Opera/); var ns6 = document.getElementById&&!document.all; var opera = browserinfos.match(/Opera/); var browserok = ie5||ns6||opera; function randommaker(range){ rand=Math.floor(range*Math.random()); return rand; } function randoms(min, max){ return Math.floor(Math.random() * (max - min + 1)) + min; }; function preloadimages(img){ image = new Image(); for(var i = 0; i < img.length; i++) image.src = img; } function getBallXPos(oball){ if(ballingzone == 1){return randommaker(marginright - oball.size)} if(ballingzone == 2){return randommaker(marginright / 2 - oball.size)} if(ballingzone == 3){return randommaker(marginright / 2 - oball.size) + marginright / 4} if(ballingzone == 4){return randommaker(marginright / 2 - oball.size) + marginright / 2} if(ballingzone >= 100){return (randoms(0,1) == 0)?((randommaker(marginright / 2 - oball.size)) - ballingzone / 2) (randommaker(marginright / 2 - oball.size) + marginright / 2) + ballingzone / 2);} return 0; } function initball() { if (ie5 || opera) { marginbottom = document.body.scrollHeight; marginright = document.body.clientWidth - 15; } else if (ns6) { marginbottom = document.body.scrollHeight; marginright = window.innerWidth - 15; } var ballsizerange = ballmaxsize - ballminsize; for (var i = 0; i <= ballmax; i++) { crds = 0; lftrght = Math.random() * 15; x_mv = 0.03 + Math.random() / 10; ball = document.getElementById('s' + i); ball.onclick = function(){ this.posx = getBallXPos(this); this.posy = marginbottom - 2 * this.size } ball.size = randommaker(ballsizerange) + ballminsize; ball.style.width = ball.size + 'px'; ball.style.height = ball.size + 'px'; ball.style.zIndex = 100 + ball.size; ball.sink = sinkspeed * ball.size / 5; ball.posx = getBallXPos(ball); ball.posy = randommaker(2 * marginbottom - marginbottom - 2 * ball.size); ball.style.left = ball.posx + 'px'; ball.style.top = ball.posy + 'px'; } moveball(); } function moveball(){ for (var i = 0; i <= ballmax; i++){ crds += x_mv; ball.posy -= ball.sink; ball.style.left = (ballreverb)?(ball.posx + lftrght * Math.sin(crds) + 'px'):(ball.posx + lftrght + 'px'); ball.style.top = ball.posy + 'px'; if(ball.posy < -ballmaxsize || parseInt(ball.style.left) > (marginright - 3 * lftrght)){ ball.posx = getBallXPos(ball); ball.posy = marginbottom - 2 * ball.size } } var timer = setTimeout('moveball()', ballspeed) } preloadimages(grphcs); for(var i = 0; i <= ballmax; i++){ imgsrc = grphcs[randoms(0,grphcs.length-1)]; document.write('<img src="' + imgsrc + '" id="s' + i + '" style="position:absolute;top:-' + ballmaxsize + '">'); } if(browserok){ window.onload = initball; }//--></script>

Спасибо за эту подсказку. Попробую так сделать.

Спасибо. Но в этом шаблоне не срабатывает.

Здравствуйте! Заказала у фрилансера адаптивный резиновый шаблон. Сама еще такие вещи писать не умею. Проблема в подвале, который налазит на виджеты и контент. Если на сайте короткая статья и много виджетов в сайдбаре, то виджеты оказываются под футером. Если на сайте мало виджетов и статья короткая, то футер оказывается посредине. Шаблон тестирую тут test.degavo.ru Фрилансер пишет, что нужен скрипт, типа он дорогой, и только он может выровнять подвал. Что это за скрипт? Фрилансер смог написать бесплатный, который не срабатывает. Вот этот: <!-- 3 colums --> <script type="text/javascript"> $(document).ready(function(){var $=jQuery.noConflict();setTimeout(alertFunc,5000);function alertFunc(){var $ColumsCenter=$(".site-content").height();var $ColumsLeft=$(".widget-left").height();var $ColumsRight=$(".widget-right").height();if($ColumsCenter=>$ColumsRight){$(".site-content").css('height',$ColumsCenter)}if($ColumsCenter=>$ColumsLeft){$(".site-content").css('height',$ColumsCenter)}if($ColumsCenter<=$ColumsRight){$(".site-content").css('height',$ColumsRight)}if($ColumsCenter<=$ColumsLeft){$(".site-content").css('height',$ColumsLeft)}}}); </script> <!-- 3 colums --> Что сделать? Как выровнять подвал? Подскажите, как устранить этот глюк простым способом. Я уже неделю с этим неполноценным шаблоном мучаюсь. Заказала на свою голову. Нашла в footer.php две строчки </div><!-- #main .wrapper --> </div><!-- #page --> с закрывающими дивами, а перед ними нет открывающих дивов. Если дивы убрать, то подвал оказывается на втором нижнем меню и закрывает первый анонс. Проблема может крыться в этих дивах? Чем их можно заменить?

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

Картинку сдвигает влево. Где-то в инете нашла. Спасибо. Уже поняла, что у меня не в коде не срабатывает вертикальное выравнивание текста, а стили шаблона не позволяют его выровнять. Буду копать стили шаблона.

Я внедряю картинку и текст оказывается снизу так проверил же первым делом, потому и не верю Я внедряю картинку и текст оказывается снизу

Проверьте не верю Проверьте

В указанном мной коде, vertical-align не срабатывает.

Подскажите, пожалуйста, что прописать в коде, чтобы текст выровнялся по центру. Он располагается возле картинки, но внизу. Сам код: <div style="padding:8px; border-radius:10px; background: #FF7F50"><div style="padding:15px; border-radius:8px; background: #FFFFFF; text-align:right; img-aligh: left; font-weight:bold; color: #000000"><img border="0" src="" alt="картинка 80х80px">Текст, который нужно выровнять по вертикали</div></div>

Громадное спасибо! И с картинками, и с видео помогло.

Здравствуйте! Поменяла шаблон на вордпресс-сайте. Область контента теперь шире чем нужно, картинки лепятся к левому краю. Я их не загружаю в текст, а прописывают отдельно через <img border="0" src="" alt=""> Что прописать в стилях, чтобы все картинки на сайте показывались по центру? По идее можно к каждому изображению добавить <DIV ALIGN="CENTER"> Но это долго и нудно - страниц очень много. Что прописать в стилях для видео, чтобы оно тоже отображалось по центру?

Спасибо за пояснение. Немного понятней стало. Код примерно такой: <div style="float:none;margin:10px 0 10px 0;text-align:center;"> <script async src="//ads.site.ru" onload="InitAipg_9568347097(this)"></script> </div> У дива не указан класс. Как ему прописать стили? Выложите рабочий пример на JSFiddle. Этого я не смогу сделать. О JSFiddle узнала из Вашего сообщения и погуглила. Шаблон у меня на Ворпресс стоит, я его не писала.

Спасибо за пояснение. Немного понятней стало. Код примерно такой: <div style="float:none;margin:10px 0 10px 0;text-align:center;"> <script async src="//ads.site.ru" onload="InitAipg_9568347097(this)"></script> </div> У дива не указан класс. Как ему прописать стили?