vladmih
-
Posts
202 -
Joined
-
Last visited
-
Days Won
8
Content Type
Profiles
Forums
Calendar
Store
Everything posted by vladmih
-
В общем нужно сверстать прогресс-бар, да так чтоб собственно программист потом смог им манипулировать. http://savepic.ru/4041090.png вот сам бар, если кто встречался с такими вещами, то подскажите как лучше его сверстать.
-
В 1.8.3 работает, в 1.9 нет. Может баг, может так задумано, не знаю. http://api.jquery.com/toggle-event/ Забудьте о cufon, есть нормальная стандартная возможность подключения шрифтов @font-face А как мне через него подключать уникальные шрифты?
-
В 1.8.3 работает, в 1.9 нет. Может баг, может так задумано, не знаю. А как быть с cufon? пропадает начертание шрифта...
-
Спасибо))) Ну а все таки, почему toggle не срабатывает? Ну скажите, раньше я так писал и все работало, что не так? Да кстати, а как быть c Cufon? Ведь теперь после нажатия, начертание шрифта пропало...
-
хорошо, а как с помощью click можно решить такую задачу? $('#some_class').toggle(function (){ $('#myform').fadeOut(1000); $(this).text('развернуть форму'); },function() { $('#myform').fadeIn(1000); $(this).text('Свернуть форму'); });
-
Так а как тогда должнобыть? Тогл он как переключатель? На одно нажате он скрывает, на второе раскрывает... Парусб уже час, не пойму где косяк... Подскажите что ли... Да, но мне нужно именно с toggle, мне еще нужно будет дописывать, чтоб менялся текс в заголовке. Вот я и не пойму, почему не работает с toggle. C hover все действия происходят как положено, а с toggle косяк.
-
http://jsfiddle.net/3E5jr/ Почему-то блоки сами съезжаются, не нажимая по блоку
-
это то что нужно! Спасибо!!!
-
помочь-то поможет, но для нормальной верстки это не же не вариант... К примеру, если нужно будет делать, листалку картинок.... К примеру у меня их там 10 штук было бы, по показывалось бы только часть их... Типа как карусель на JS
-
здесь нет не одного тега див...
-
Люди помогите! Есть блок, в котором хранятся три изображения. Блок шириной 600px должен быть, картинки по 250; Суть в том, мне нужно чтоб они стояли три в ряд, и последняя скрывалась за границы блока, то есть обрезалась... html <article class="disckography"> <p><a href="#"><img src="img/album1.jpg"></a></p> <p><a href="#"><img src="img/album1.jpg"></a></p> <p><a href="#"><img src="img/album1.jpg"></a></p></article> css .disckography { height:350px; width:600px; margin:20px 0 0 100px; overflow:hidden; } .disckography p { float:left; } третья картинка, уходит вниз....
-
могу архив выслать... Не могу на фидл, там не работает...
-
хотел на фидл, но не понял как там картинки подгружать с нарезки, если подскажешь, то закину.
-
вот результат моих мучений http://s018.radikal.ru/i505/1301/d5/cfe1a43272b4.jpg проблема вот в чем; при нажатии мышью на поле страницы, нужно чтоб менюха заезжала вверх а плеер с синей кнопкой вниз и при этом нижние боковые плашки должны опускаться на столько какова высота собственно плеера с кнопкой. а при нажатии еще раз, все ставало на свои месте. Суть в том, что плашки абсолютно спозиционированы. щас код прикреплю <body> <section class="wrap"> <header class="nav_head"> <nav class="top_nav"> <a href="index.html">АЛЬБОМ</a> <a href="index2.html">ФОТО</a> <a class="active_btn" href="index3.html">ТЕКСТ</a> <a href="index4.html">О ПЕСНЕ</a> <a href="#">ДОПОЛНИТЕЛЬНО</a> </nav> </header> <section class="main"> <header> <h1>Je Ne Suis Pas La</h1> <aside class="right_like"><a href="#"><img src="img/like.gif"><p>Мне</br> нравится</p></a></aside> </header> <h2>Инструментальная композиция</h2> <section class="line_two"> <aside class="left"><img src="img/share.gif"><p>Мнение<br/> о фото</p></aside> <aside class="right"><img src="img/facebook.gif"><p>Поделиться<br/>фото</p></aside> </section> </section><!--main--> <footer> <input type="button" > <img src="img/pleer.gif"> </footer> </section><!--wrap--> </body> css p{ font-family:"Segoe UI"; font-weight:900; color:#FFF; font-size:20px; } .wrap { width:720px; height:1280px; margin:auto; background:#000; position:relative; } .main { padding-top:10px; } .nav_head { width:100%; } .top_nav{ padding: 10px 0 0 10px; height:35px; width: 730px; } .top_nav .active_btn { color:#ffffff; } .top_nav a { font-family:"Segoe UI"; display:block; float:left; text-decoration:none; color:#555555; font-size:28px; padding: 4px 6px 0 6px; } .top_nav a:hover { font-family:"Segoe UI"; display:block; float:left; text-decoration:none; color:#fff; font-size:28px; padding: 4px 6px 0 6px; } .main header { height:70px; padding: 0 10px; } .main h2 { margin-left:150px; margin-top:15px; color:#FFF; font-family:"Segoe UI"; font-size:24px; } h1 { font-family:"Segoe UI"; letter-spacing:1px; font-weight:500; color:#FFF; font-size:56px; float:left; } .right_like { margin-top:10px; float:right; } .right_like img { float:left; } .right_like p { float:right; margin: 8px 0 0 10px; } .line_two { position:absolute; width:720px; height:62px; bottom:150px; overflow:hidden; } .left { position:absolute; width:200px; height:61px; float:left; background:rgba( 0, 0, 0, 0.6); border-radius:0 40px 40px 0; } .right { position:absolute; left:510px; width:210px; height:61px; float:right; background:rgba( 0, 0, 0, 0.6); border-radius:40px 0 0 40px; } .left img { float:left; margin:3px 0 0 10px; } .right img { float:right; margin:3px 10px 0 0; } .right_like img { float:left; } .right_like p { float:right; margin: 8px 0 0 10px; } .left p { margin: 10px 0 0 80px; } .right p{ text-align:right; margin: 8px 75px 0 0; } input { background-image:url(../img/slide-top.gif); border-radius: 24px 24px 8px 8px; width:168px; height:32px; border:none; cursor:pointer; text-indent:-9999; margin-left:280px; } footer { position:absolute; bottom:0; } JS $(document).ready(function() { $('.wrap').click(function() { $('footer').slideToggle(); }); $('.wrap').click(function() { $('.top_nav').slideToggle(); }); $('img[src*=2013]').click(function() { var $lefty = $('.left'); $lefty.animate({ left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0 }); }); $('img[src*=2013]').click(function() { var $righty = $('.right'); $righty.animate({ marginLeft: parseInt($righty.css('marginLeft'),10) == 0 ? $righty.outerWidth() : 0 }); }); });
-
аааа, точняк, забыл про это.... щас попробую)
-
Люди помогите в верстке. Нужно получить вот такой элемент. http://s019.radikal.ru/i601/1301/89/d7ac2bf06bbe.gif В котором черный фон прозрачный текст и картинка нет. <section id="line_one"> <aside class="left"><img src="img/photo_like.gif"><p>Показать <br/> все фото</p></aside> <aside class="right"><img src="img/like.gif"><p>Мне <br/> нравится</p></aside> </section> стили .left { width:200px; height:61px; float:left; background:#000; border-radius:0 40px 40px 0; } .left img { float:left; margin:3px 0 0 10px; } .left p { padding: 5px 0 0 80px; } Пробовал по разному, к left добавлял opacity, но он делал прозрачным все и текст и картинку... Пробовал позиционировать друг на друге, и добавлять z-index, все равно не получалось... Если у кого есть идеи как решить, буду признателен.
-
Верстка ввиде слайда как в мобильных приложениях
vladmih replied to vladmih's question in HTML Coding
А вообще верстка такого уровня как оценивается? Всмысле уровень самого верстальщика который это осиливает. -
Верстка ввиде слайда как в мобильных приложениях
vladmih replied to vladmih's question in HTML Coding
Люди, ну что там, есть идеи? -
Верстка ввиде слайда как в мобильных приложениях
vladmih replied to vladmih's question in HTML Coding
А ссылками на примеры работ случайно не поделишься? Может Вы не правильно поняли, но нужно не верстка под мобильное устройство, а верстка на PC чтоб работало как мобильное приложение... Или может я не правильно понял. -
Люди подскажите как реализовать сайт который бы перелистывался как приложения в мобильных телефонах. То есть, к примеру есть 3-4 разных страницы одна из них постоянно на виду, мышкой тянем влево и перелистываем на следующую и т.д.
-
Ну я думал, что если человек верстать умеет, то поисковиком он точно пользоваться умеет... Цель моего сообщения было для того, чтоб люди поделились опытом, а точнее местами где они набирали опыт и знания, в том числе... Я собственно и написал, про литературу и видео уроки... Все тут ясно...
-
Всем доброго времени суток! Вот осваиваюверстку, сверстал несколько макетов, теперь бы хотелось понять и разобраться что с ним делать, а точнее как из индекс файла сделать шаблон, который я бы уже смог подключить к CMS. Посоветуйте каким мне путем пойти, возможно есть какая-то литература или видеоуроки... Или все же просто придется лопатить документации, хотя понятно что без этого не обойтись...
-
Максимальную высоту я не задавал... Если у меня не по вылазило)))) Минимальную задавал для блоков в с товарами где картинка, где инфо, и где собственно сам блок итем... Чтоб они были все одинаковыми...
-
Посмотри плизз другой пост, тут создалась не правильно тема... Нет полного кода... И можно эту ветку удалять... Ааааа блин, оверфдлов помог.... Блин я все равно не понимаю почему он там нужен был. Можешь объяснить... Ведт блок по высоте будет тянуться в зависимости от наполнения, если не ограничивать его высоту правилами...
-
Вот ссылка на макет Верстаю каталог... Есть три группы: Рекомендуемые, Новинка, Акционные товары. Хочу сделать так чтоб под каждую из групп был свой див и внутри него уже дивы с товарами. Так вот почему-то, когда я вкладываю в див группы товаров див с самим товаром, первый не растягивается по высоте... вот код HTML блок right это тот который справа от сайд бара. Тобеж контент или еще как его называют... <div id="right"> <h1> O магазине </h1> <p>Этот магазин является демонстрацией скрипта интернет-магазина Simpla. Все материалы на этом сайте присутствуют исключительно в демострационных целях.</p> <div id="recomend"> <h1> Рекомендованные товары </h1> <div class="item"> <div class="goods_img"> <img src="img/sams_galaxi.png"/> </div><!--goods_img--> <div class="goods_info"> <a href="#">Samsung S5570 Galaxy Mini</a><br/> <span>7300 руб.</span><br/> <input type="submit" value="добавить товар в корзину"><br/> </div><!--goods_info--> </div><!--end item--> </div><!--end recomend--> </div><!--end right--> Вот CSS #right { margin-top: 25px; margin-left: 235px; } #right h1{ font:30px Tahoma; } #right p{ font:12px Tahoma; margin: 10px 0; } #recomend { background:#666666; } .item { float:left; width:225px; min-height:290px; margin: 10px 0 10px 37px; } .goods_img { width:223px; height:210px; border:1px #e5e5e5 solid; border-radius: 10px 10px 10px 10px; } .goods_img img{ display:block; margin: 15px auto; } .goods_info { margin-top: 10px; width: 223px; min-height:70px; border:1px #e5e5e5 solid; border-radius: 10px 10px 10px 10px; } .goods_info a{ position:relative; top: 5px; left:5px; font:14px Tahoma; color:#4e7aa9; text-decoration:none; } .goods_info span{ position:relative; top: 10px; left:5px; font:14px Tahoma; } .goods_info input { font:12px Tahoma; color:#fff; padding-bottom:2px; text-transform:uppercase; width:225px; height:23px; border:none; position:relative; left:-1px; top:15px; background:url(img/to_cart_bg.png) repeat-x; cursor:pointer; border-radius: 0 0 10px 10px; } .goods_info_choice { margin-top: 10px; width: 223px; min-height:70px; border:1px #e5e5e5 solid; border-radius: 10px 10px 10px 10px; } .goods_info_choice a{ position:relative; top: 5px; left:5px; font:14px Tahoma; color:#4e7aa9; text-decoration:none; } .goods_info_choice .btn_choice { font:12px Tahoma; color:#fff; padding-bottom:2px; text-transform:uppercase; width:225px; height:23px; border:none; position:relative; left:-1px; top:15px; background:url(img/to_cart_bg.png) repeat-x; cursor:pointer; border-radius: 0 0 10px 10px; } Я специально добавил к нему фон темный, чтоб посмотреть как он себя ведет... В файрбаге я наего смотрю, а он по высоте как <h1> Вот ссылка на макет