Dolce

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

Здравствуйте. Подскажите пожалуйста такую вещь, я решил сделать новый шаблон для старого интернет магазина с использованием тегов html5 для более ясного семантического понимания поисковыми системами(да и нужно идти в ногу с современными тенденциями ).Открыл я перечень html5 тегов вот тут http://htmlbook.ru/html5 Сижу читаю про каждый, думаю какой куда применить. Возникло несколько вопросов, допустим очень интересует оберточный тег для карточек товара на страницах категорий, раньше это был обычный див(часто встречаю что подобное оборачивают в тег li, не знаю на сколько это правильно, в нем идет фотография товара, описание, цена и форма с кнопками, многовато как-то для li помоему), есть ли для этих целей какой-то тег в html5? Я нашел нечто похожее - <figure> текст описание внутри можно разместить в <figcaption> - или это не правильно? Возможно лучше разместить в теге <section>? Возможно есть какие-то более подходящие для этого теги? Второй вопрос касательно тега <article> - хорошо ли будет в этот тег впихнуть статью - описание товара(текст) на странице товара? Возможно кто-то из своего опыта подскажет еще какие-нибудь теги которые можно было бы использовать в шаблоне интернет-магазина? Описание тегов в основном касается новостных лент или блогов, по этому не совсем ясно стоит ли или как применять эти теги в интернет магазинах.

Спасибо, уже разобрался..ошибка в синтаксисе была...закрывающую скобку не в ту сторону указал

Здравствуйте. Подскажите пожалуйста, изучаю js по урокам. И вот щас в примере описывается метод open объекта window. Но у меня почему-то ни чего не получается. Вoт код: function demoOpen() { open("http://www.ya.ru"); { функция вызывается в теле html <a href="javascript:demoOpen()">demoOpen</a><br /> но при клике ничего не происходит, пробовал вывести через document.write() document.write(demoOpen()); Пусто. Я что-то не так делаю или это не работает, так как уроки, по которым я работаю, 2009 года. Подскажите пожалуйста

Здравствуйте, подскажите новичку пожалуйста. Начал изучать js по видеокурсу "Специалист", все понятно объясняется и дается задание для практики, а через некоторое время автор сам делает и показывает как реализовать задачу, но одно задание не показал как реализовать. В общем задание звучало так - сделать игру - два человека, первый загадывает число ( через prompt("Загадайте число", "") ), второй игрок пытается его отгадать вводя свои варианты так же в prompt("Угадайте число", ""). Если число второго игрока меньше чем загаданное, выскакивает подсказка что нужно попробовать ввести число поменьше, если больше, то подсказка о том что число должно быть больше. При этом использовать циклы if и do..while. Никак не могу понять как правильно сделать, а дальше идти не хочу пока не увижу как оно реализовывается, уже перепробовал кучу вариантов. Подскажите пожалуйста код для реализации такого задания. Вот один из тех что написал я, но он не верно работает <script type="text/javascript"> var numberTrue = prompt("Загадайте число", ""); var numberVar = prompt("Угадайте число", ""); if(numberVar > numberTrue) { do { numberVar = prompt("Попробуйте число по меньше", ""); }while((numberVar < numberTrue) || (numberVar == numberTrue)); } if(numberVar < numberTrue) { do { numberVar = prompt("Попробуйте число по больше", ""); }while ((numberVar > numberTrue) || (numberVar == numberTrue)); } if (numberTrue == numberVar) { document.write("Вы угадали, число "+numberTrue); }; </script>

Где взять готовый я знаю, их куча. Просто к сайту уже прекручин свой слайдер, поэтому просто хотелось дописать в коде тот кусок, который бы его прокручивал. В яваскрипте я не понимаю, поэтому и спросил на форуме у тех кто понимает

Здравствуйте, на сайте есть слайдер, при нажатие на кнопки-стрелочки - вперед-назад, слайды меняются. Подскажите пожалуйста, как сделать так, что бы, допустим, каждые 3-5 секунд слайды прокручивались автоматически, а не только при нажатии на кнопки прокрутки. Вот код файлов идущих со слайдером: slides.min.jquery.js /* * Slides, A Slideshow Plugin for jQuery * Intructions: http://slidesjs.com * By: Nathan Searles, http://nathansearles.com * Version: 1.1.9 * Updated: September 5th, 2011 * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ (function(a){a.fn.slides=function({return b=a.extend({},a.fn.slides.option,,this.each(function(){function w(g,h,i){if(!p&&o){p=!0,b.animationstart(n+1);switch(g){case"next":l=n,k=n+1,k=e===k?0:k,r=f*2,g=-f*2,n=k;break;case"prev":l=n,k=n-1,k=k===-1?e-1:k,r=0,g=0,n=k;break;case"pagination":k=parseInt(i,10),l=a("."+b.paginationClass+" li."+b.currentClass+" a",c).attr("href").match("[^#/]+$"),k>l?(r=f*2,g=-f*2):(r=0,g=0),n=k}h==="fade"?b.crossfade?d.children(":eq("+k+")",c).css({zIndex:10}).fadeIn(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1)}).children(":eq("+l+")",c).fadeOut(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing)}).children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing,function(){a.browser.msie&&a(this).get(0).style.removeAttribute("filter")}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+k+")").css({left:r,display:"block"}),b.autoHeight?d.animate({left:g,height:d.children(":eq("+k+")").outerHeight()},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1}).animate({left:g},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1})),b.pagination&&(a("."+b.paginationClass+" li."+b.currentClass,c).removeClass(b.currentClass),a("."+b.paginationClass+" li:eq("+k+")",c).addClass(b.currentClass))}}function x(){clearInterval(c.data("interval"))}function y(){b.pause?(clearTimeout(c.data("pause")),clearInterval(c.data("interval")),u=setTimeout(function(){clearTimeout(c.data("pause")),v=setInterval(function(){w("next",i)},b.play),c.data("interval",v)},b.pause),c.data("pause",u)):x()}a("."+b.container,a(this)).children().wrapAll('<div class="slides_control"/>');var c=a(this),d=a(".slides_control",c),e=d.children().size(),f=d.children().outerWidth(),g=d.children().outerHeight(),h=b.start-1,i=b.effect.indexOf(",")<0?b.effect:b.effect.replace(" ","").split(",")[0],j=b.effect.indexOf(",")<0?i:b.effect.replace(" ","").split(",")[1],k=0,l=0,m=0,n=0,o,p,q,r,s,t,u,v;if(e<2)return a("."+b.container,a(this)).fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()}),a("."+b.next+", ."+b.prev).fadeOut(0),!1;if(e<2)return;h<0&&(h=0),h>e&&(h=e-1),b.start&&(n=h),b.randomize&&d.randomize(),a("."+b.container,c).css({overflow:"hidden",position:"relative"}),d.children().css({position:"absolute",top:0,left:d.children().outerWidth(),zIndex:0,display:"none"}),d.css({position:"relative",width:f*3,height:g,left:-f}),a("."+b.container,c).css({display:"block"}),b.autoHeight&&(d.children().css({height:"auto"}),d.animate({height:d.children(":eq("+h+")").outerHeight()},b.autoHeightSpeed));if(b.preload&&d.find("img:eq("+h+")").length){a("."+b.container,c).css({background:"url("+b.preloadImage+") no-repeat 50% 50%"});var z=d.find("img:eq("+h+")").attr("src")+"?"+(new Date).getTime();a("img",c).parent().attr("class")!="slides_control"?t=d.children(":eq(0)")[0].tagName.toLowerCase():t=d.find("img:eq("+h+")"),d.find("img:eq("+h+")").attr("src",z).load(function(){d.find(t+":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){a(this).css({zIndex:5}),a("."+b.container,c).css({background:""}),o=!0,b.slidesLoaded()})})}else d.children(":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()});b.bigTarget&&(d.children().css({cursor:"pointer"}),d.children().click(function(){return w("next",i),!1})),b.hoverPause&&b.play&&(d.bind("mouseover",function(){x()}),d.bind("mouseleave",function(){y()})),b.generateNextPrev&&(a("."+b.container,c).after('<a href="#" class="'+b.prev+'">Prev</a>'),a("."+b.prev,c).after('<a href="#" class="'+b.next+'">Next</a>')),a("."+b.next,c).click(function(a){a.preventDefault(),b.play&&y(),w("next",i)}),a("."+b.prev,c).click(function(a){a.preventDefault(),b.play&&y(),w("prev",i)}),b.generatePagination?(b.prependPagination?c.prepend("<ul class="+b.paginationClass+"></ul>"):c.append("<ul class="+b.paginationClass+"></ul>"),d.children().each(function(){a("."+b.paginationClass,c).append('<li><a href="#'+m+'">'+(m+1)+"</a></li>"),m++})):a("."+b.paginationClass+" li a",c).each(function(){a(this).attr("href","#"+m),m++}),a("."+b.paginationClass+" li:eq("+h+")",c).addClass(b.currentClass),a("."+b.paginationClass+" li a",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$"),n!=q&&w("pagination",j,q),!1}),a("a.link",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$")-1,n!=q&&w("pagination",j,q),!1}),b.play&&(v=setInterval(function(){w("next",i)},b.play),c.data("interval",v))})},a.fn.slides.option={preload:!1,preloadImage:"/img/loading.gif",container:"slides_container",generateNextPrev:!1,next:"next",prev:"prev",pagination:!0,generatePagination:!0,prependPagination:!1,paginationClass:"pagination",currentClass:"current",fadeSpeed:350,fadeEasing:"",slideSpeed:350,slideEasing:"",start:1,effect:"slide",crossfade:!1,randomize:!1,play:0,pause:0,hoverPause:!1,autoHeight:!1,autoHeightSpeed:350,bigTarget:!1,animationstart:function(){},animationComplete:function(){},slidesLoaded:function(){}},a.fn.randomize=function({function c(){return Math.round(Math.random())-.5}return a(this).each(function(){var d=a(this),e=d.children(),f=e.length;if(f>1){e.hide();var g=[];for(i=0;i<f;i++)g[g.length]=i;g=g.sort(c),a.each(g,function(a,c){var f=e.eq(c),g=f.clone(!0);g.show().appendTo(d),b!==undefined&&b(f,g),f.remove()})}})}})(jQuery) sliderScript.js $(function(){ $('#slides').slides({ preload: true, generateNextPrev: true, }); }); Html код, на всякий случай: <div id="slides"> <div class="slides_container"> <div> <img src="img/slide1.png" alt="slide1" /> <div class="slide-right"> <h1 class="slide-heading">Artthatworks 1 dolor sit amet, consectetur adipiscing elit.</h1> <p class="info">Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu. Nulla in tellus eu nunc cursus scelerisque ac nec nibh.</p> <p><a href="#" class="readmore">read more</a></p> </div> </div> <div> <img src="img/slide1.png" alt="slide1" /> <div class="slide-right"> <h1 class="slide-heading">Artthatworks 2 dolor sit amet, consectetur adipiscing elit.</h1> <p class="info">Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu. Nulla in tellus eu nunc cursus scelerisque ac nec nibh.</p> <p><a href="#" class="readmore">read more</a></p> </div> </div> <div> <img src="img/slide1.png" alt="slide1" /> <div class="slide-right"> <h1 class="slide-heading">Artthatworks 3 dolor sit amet, consectetur adipiscing elit.</h1> <p class="info">Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu. Nulla in tellus eu nunc cursus scelerisque ac nec nibh.</p> <p><a href="#" class="readmore">read more</a></p> </div> </div> </div> </div> Заранее благодарен

Спасибо

Спасибо, а не подскажете примеры с js ?

Вот http://jsfiddle.net/6QpsC/1/ При #nav, #nav ul { list-style:none; padding:0; width:200px; } вылазят подпункты, если поставить 250px то уже не вылазят, но хотелось бы задавать любую удобную ширину, по ситуации

Здравствуйте, необходимо было меню с выпадающими подпунктами, нашел в инете готовое решение, переверстал под свой дизайн, все работает как нужно, одна беда - вылазит подпункты при определенной ширине меню, если ширину увеличить, то все становиться на свои места, однако увеличивать уже некуда, хотелось бы наоборот уменьшить, но тогда вылазит еще больше подпунктов: Лопатил css, но никак не могу понять как убрать это вот код: .navTitle{ padding: 10px; background: #4b9342; } .navTitle p{font-size: 16px; font-weight: bold; color: #fff;} #nav { margin: 15px 0 10px 10px; border:2px solid #4b9342; box-shadow:2px 2px 8px #000000; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } #nav, #nav ul { list-style:none; padding:0; width:250px; } #nav ul { position:relative; z-index:-1; } #nav li { position:relative; z-index:100; } #nav ul li { margin-top:-23px; -moz-transition: 0.4s linear 0.4s; -ms-transition: 0.4s linear 0.4s; -o-transition: 0.4s linear 0.4s; -webkit-transition: 0.4s linear 0.4s; transition: 0.4s linear 0.4s; } #nav li a { background-color:#fff; color:#000; display:block; font-size:14px; font-weight:bold; line-height:30px; outline:0; padding-left:10px; text-decoration:none; border-bottom: 1px solid #4b9342; } #nav li a img { border-width:0px; height:24px; line-height:28px; margin-right:8px; vertical-align:middle; width:24px; } #nav li a:hover { color: #4b9342; } #nav ul li a { padding-left: 20px; background-color:#eee; border-bottom:1px solid #ccc; color:#000; font-size:12px; line-height:22px; } #nav ul li a:hover { background-color:#ddd; color:#444; } #nav a.sub:focus { color: #4b9342; outline:0; } #nav a:focus ~ ul li { margin-top:0; -moz-transition: 0.4s linear; -ms-transition: 0.4s linear; -o-transition: 0.4s linears; -webkit-transition: 0.4s linears; transition: 0.4s linear; } #nav a:focus + img, #nav a:active + img { display:block; } #nav a.sub:active { outline:0; } #nav a:active ~ ul li { margin-top:0; } #nav ul:hover { display:block; } И HTML: <nav> <ul id="nav"> <div class="navTitle"><p>Школьные принадлежности</p></div> <li><a href="#" class="sub" tabindex="1">Бумажно-беловая продукция</a> <ul> <li><a href="#">Альбомы для рисования</a></li> <li><a href="#">Блокноты, записные книжки</a></li> <li><a href="#">Бумага цветная, картон</a></li> <li><a href="#">Папки для тетрадей и труда</a></li> </ul> </li> <li><a href="#" class="sub" tabindex="1">Настольные принадлежности</a> <ul> <li><a href="#">Глобусы</a></li> <li><a href="#">Калькуляторы карманные</a></li> </ul> </li> <li><a href="#" class="sub" tabindex="1">Офисные принадлежности и инструменты</a> <ul> <li><a href="#">Клей</a></li> <li><a href="#">Ножницы детские</a></li> <li><a href="#">Пеналы офисные, боксы</a></li> </ul> </li> <li><a href="#" class="sub" tabindex="1">Принадлежности для делопроизводства</a> <ul> <li><a href="#">Папки, портфели пластиковые</a></li> </ul> </li> <li><a href="#" class="sub" tabindex="1">Принадлежности для письма,черчения и рисования</a> <ul> <li><a href="#">Карандаши восковые</a></li> <li><a href="#">Карандаши графитные</a></li> <li><a href="#">Карандаши механические</a></li> <li><a href="#">Карандаши пастельные</a></li> <li><a href="#">Карандаши цветные</a></li> <li><a href="#">Кисти</a></li> <li><a href="#">Краски акварельные</a></li> <li><a href="#">Краски для оформительских работ</a></li> <li><a href="#">Краски-гуашь</a></li> </ul> </li> <li><a href="#" class="sub" tabindex="1">Рюкзаки, портфели, сумки, пеналы</a> <ul> <li><a href="#">Пеналы секционные</a></li> <li><a href="#">Пеналы-кошельки</a></li> <li><a href="#">Рюкзаки для младших и средних классов</a></li> <li><a href="#">Рюкзаки подростковые</a></li> <li><a href="#">Сумки молодежные</a></li> </ul> </li> <li><a href="#" class="sub" tabindex="1">Товары для творчества</a> <ul> <li><a href="#">Доски для письма и рисования</a></li> <li><a href="#">Наборы для рукоделия</a></li> <li><a href="#">Наборы для скарпбукинга</a></li> <li><a href="#">Пластилин</a></li> <li><a href="#">Пластилин-наборы</a></li> </ul> </li> <li><a href="#" class="sub" tabindex="1">XSLT</a> <ul> <li><a href="#">Обложки для книг и тетрадей</a></li> <li><a href="#">Папки, портфели школьные</a></li> <li><a href="#">Пеналы, стаканы настольные</a></li> <li><a href="#">Подставки для книг </a></li> <li><a href="#">Развиваюшие пособия</a></li> </ul> </li> </ul> </nav> Подскажите пожалуйста как это можно поправить?

Вот так вот нада было в общем, подсказали: display: inline-block;

Не то, в этом примере внутренние блоки меню растягиваются по ширене родителя, ширина родителя на весь экран, а нада что бы родитель в зависимость от суммарной ширины дочерних блоков(один блок имеет ширину 200px, два блока имеют ширину 400px и т.д) принимал необходимую ширину. Приведу аналогию с воздушным шариком, чем больше воздуха(пунктов меню) в нем тем он шире(шире родитель). А у меня блок родителя по умолчанию, я не прописывал ему ширину, растягивается на ширину сайта Вот для полной наглядности, синий должен иметь ширину внутренних, зеленых блоков

Здравствуйте, есть такая проблема. Есть блок основного контента, в нем я делаю блок которым я хочу выровнять по центру то что будет в нем, в общем вот: <div class="mainContent"> <div class="Menu"> <div class="punkt1"></div> <div class="punkt2"></div> <div class="punkt3"></div> </div> </div> Блоки punkt располагаются горизонтально и в зависимости от того сколько их, блок Menu должен принимать их общую ширину и выравнивать их(margin:0 auto;) по центру блока mainContent. Но блок Menu растягивается на 100% по ширине и никак вообще по высоте(я не прописываю ничего, так по умолчанию), хотя в него и вложены другие дивы которые имеют заданную ширину и высоту. Можно задать вручную width для блока Menu и тогда он выравняется по центру, но это не подходит, так как количество пунктов, боков punkt, разное, от одного до десяти и в таком случае если в одном месте это меню будет ровное с тремя дивами punkt то в другом месте, с двумя дивами punkt оно уже будет смещено влево. В общем подскажите как сделать что бы блок меню растягивался по ширине дочерних блоков

И что это?=)) HTML таблицу я могу сделать сам, нужен скрипт который автоматически присваивает классы четной колонке