boompaw
-
Posts
33 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by boompaw
-
Как всегда, оперативно, правильно и как нужно! Спасибо тебе большое, именно то, что мне и нужно было.
-
<div class="content"> <div class="wrap"> <div class="wrap"> Контент </div> </div> </div> .content { width: 980px; float: left; background: url(../img/maincenter.png) repeat-y; } .cwrap { width: 980px; background: url(../img/maintop.png) no-repeat left top; } .cwrap .cwrap { background: url(../img/mainbottom.png) no-repeat left bottom; } желаемого результата добиться не получилось
-
Всем привет! В ходе работы создался вопрос, который не могу решить. У меня есть нарисованная картинка в виде таблички: примерно такая, только без надписей top, bottom и т.д. я распилил её на три части и назвал top.png, center.png и т.д. а потом захотел сделать из неё таблицу (фон для контента) и влепил сначала первый слой, где находился center (и задал background repeat-y) а затем ещё два слоя где указал no-repeat для бэкграунда top.png и bottom.png. В общем, ребята, у меня какая-то каша получилась. Расскажите пожалуйста, как бы вы решили подобную проблему, если бы столкнулись с ней. Огромнейшее спасибо всем кто откликнется.
-
Пробовал. Сначала начал ставить уже на готовом шаблоне, ничего не вообще не получилось, затем решил с нуля попробовать. Решил сделать просто прокрутку списка ссылок. Мне это удалось в идеале как и хотел. Затем переоформил, сделал подсписки и оформил их..и вот результат.
-
Если бы мне это не нужно было, я бы не оброщался за помощью. Несколько минут назад вы выступили как доброволец, а сейчас сами отказываетесь от своих слов или в чем проблема?
-
извините за мою не внимательность (новенький и в связи с этим не разобрался ещё полностью) понимаю, что с моими проблемами никто не обязан разбираться, поэтому всего-лишь прошу её, а не обязываю. Вот страница с кодом: <!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>Карта: 35hp_2</li> <li>Адрес сервера: boom-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>Карта: 35hp_2</li> <li>Адрес сервера: boom-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>Карта: 35hp_2</li> <li>Адрес сервера: boom-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>Карта: 35hp_2</li> <li>Адрес сервера: boom-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>Карта: 35hp_2</li> <li>Адрес сервера: boom-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>Карта: 35hp_2</li> <li>Адрес сервера: boom-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>Карта: 35hp_2</li> <li>Адрес сервера: boom-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>Карта: 35hp_2</li> <li>Адрес сервера: boom-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>Карта: 35hp_2</li> <li>Адрес сервера: boom-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 и откройте через браузер. Нужно несколько раз кликнуть на полоску справа, и только тогда будет заметно как поднимаются списки поверх картинки.
-
Вы писали об использовании visible и css (в другой теме на этот счет), я подумал вы разобрались с этим
-
Указал пути. Проблема не исчезла. <!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>Карта: 35hp_2</li> <li>Адрес сервера: boom-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>Карта: 35hp_2</li> <li>Адрес сервера: boom-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>Карта: 35hp_2</li> <li>Адрес сервера: boom-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>Карта: 35hp_2</li> <li>Адрес сервера: boom-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>Карта: 35hp_2</li> <li>Адрес сервера: boom-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>Карта: 35hp_2</li> <li>Адрес сервера: boom-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>Карта: 35hp_2</li> <li>Адрес сервера: boom-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>Карта: 35hp_2</li> <li>Адрес сервера: boom-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>Карта: 35hp_2</li> <li>Адрес сервера: boom-paw.com</li> </ul> </li> </ul> </div> <div class="nav"> <a href="#" class="prev"></a> <a href="#" class="next"></a> </div> </div> </body> </html>
-
все стили, которые использует плагин - находятся на этой странице.
-
у меня всё находится на локалке. у меня нет ругани на пути, ошибка где-то в ul, li или div, а найти её не могу. по 500 раз всё уже поменял, поперетыркал и всё-равно. все стили, которые использует данная библиотека для своей работы находятся здесь и их можно увидеть. совсем печаль
-
здесь дело не в путях, а в том, что по непонятной причине половина пункта списка показывается только.
-
Есть плагин 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>Карта: 35hp_2</li> <li>Адрес сервера: boom-paw.com</li> </ul> </li> <li> <h1>Название сервера</h1> <img src="img/1.jpg"> <ul> <li>Игроков: 21/21</li> <li>Карта: 35hp_2</li> <li>Адрес сервера: boom-paw.com</li> </ul> </li> <li> <h1>Название сервера</h1> <img src="img/1.jpg"> <ul> <li>Игроков: 21/21</li> <li>Карта: 35hp_2</li> <li>Адрес сервера: boom-paw.com</li> </ul> </li> <li> <h1>Название сервера</h1> <img src="img/1.jpg"> <ul> <li>Игроков: 21/21</li> <li>Карта: 35hp_2</li> <li>Адрес сервера: boom-paw.com</li> </ul> </li> <li> <h1>Название сервера</h1> <img src="img/1.jpg"> <ul> <li>Игроков: 21/21</li> <li>Карта: 35hp_2</li> <li>Адрес сервера: boom-paw.com</li> </ul> </li> <li> <h1>Название сервера</h1> <img src="img/1.jpg"> <ul> <li>Игроков: 21/21</li> <li>Карта: 35hp_2</li> <li>Адрес сервера: boom-paw.com</li> </ul> </li> <li> <h1>Название сервера</h1> <img src="img/1.jpg"> <ul> <li>Игроков: 21/21</li> <li>Карта: 35hp_2</li> <li>Адрес сервера: boom-paw.com</li> </ul> </li> <li> <h1>Название сервера</h1> <img src="img/1.jpg"> <ul> <li>Игроков: 21/21</li> <li>Карта: 35hp_2</li> <li>Адрес сервера: boom-paw.com</li> </ul> </li> <li> <h1>Название сервера</h1> <img src="img/1.jpg"> <ul> <li>Игроков: 21/21</li> <li>Карта: 35hp_2</li> <li>Адрес сервера: boom-paw.com</li> </ul> </li> </ul> </div> <div class="nav"> <a href="#" class="prev"></a> <a href="#" class="next"></a> </div> </div> </body> </html>
-
Всё верно, обязательно через li. swetlana, при всем уважении, но у меня не получается расставить стили. Каша какая-то получается. Не могли бы вы объяснить наглядно как расставить стили, чтобы получилось примерно как в моем примере?
-
а в css как правильно написать задать оформление вложенным спискам? тобишь как их записать нужно в css?
-
Всем привет! Есть идея реализовать вот это: Но каждый вот этот блок (текст сверху и три текста сбоку, а так же картинка слева), должен быть сделан через <li></li>. Ну а расположение уже текста и картинок внутри <li></li>, как лучше это сделать? Начал пихать внутрь списка тег <div>, чтобы расположить как хочу текста и картинку, так вообще ахинея какая-то вышла. Заранее спасибо за любую помощь.
-
я всё-равно не понимаю. объясните пожалуйста.
-
Пробовал сначала поставить по дефу прокрутку горизонтальную, как показано в примеру на оф сайте этого плагина, но там как-то кривовато получилось и не прокручивалось. Хотя подключил библиотеку и jQ. Я просто интересуюсь, может кто работал с ней и знает как это сделать? Просто там работа с jQ..а я вообще не секу в нем.
-
Нужно сделать так же. Смотрел код, разобраться не получилось. Потому что как я понял, там код jQ меняется. Просто данная "Карусель" позволяет это сделать, а как именно, прочитав документацию на английском, я не совсем понял. Может кто работал и знает как реализовать данную задумку?
-
Что-то я совсем втух с этой каруселью В общем, ребят. Вот пример: по средством жмяканья на стрелочки вверх и вниз, красиво делается скроллинг на плюс одну ссылку снизу или сверху. Всё это через jCarouselLite. Вот собственно живой пример: http://www.agente.ru/rus/portfolio/sites/ Помогите разобраться (новичку) как это сделать? Буду крайне признателен за любую помощь!
-
Всем привет! Продолжаю разбираться с jCarouselLite и появился вопросик не большой. Вот ссылка на источник: http://www.gmarwaha.com/jquery/jcarousellite/?#install В самом конце дан код: $(function() { $(".anyClass").jCarouselLite({ btnNext: ".next", btnPrev: ".prev" }); }); а куда его пихать не написано. подскажите куда его пихнуть плз.
-
Золотые руки у тебя. А можно к примеру список картинок справа, поместить в какой-то box, который можно так же красиво прокручивать, вверх-вниз? Вот здесь это очень классно реализовано.
-
Вот пример, почти так же как я хочу.
-
Да, идея в принципе такая. НО, через данный плагин это всё дельце красивее выглядит. (во время загрузки показывается крутящиеся стрелочки, красиво перематывает странички туда-сюда, плавно пропадают и появляются картинки)
-
Наткнулся на интересный плагин jQ. Называется jCarouselLite. Решил реализовать такой вариант: При нажатие на картинку из списка, не перезагружая страницы, она открывается там, где на макете расположена основная картинка. Стрелочки ниже реализуют переключение следующей картинки, опять-таки не перезагружая страницы. Плагин jCarouselLite позволяет всё это, но проблема в том, что я вообще не понимаю..даже примерно как реализовать подобное, но очень хотел бы разобраться. Думаю эта тема поможет многим, если её развить!
-
Спасибо вам большое ребята. Только учусь, поэтому такие вопросы глупые. У меня вопрос созрел: Каким образом overflow влияет в данном случае на решение проблемы?