boompaw
-
Posts
33 -
Joined
-
Last visited
boompaw's Achievements
Explorer (1/14)
0
Reputation
-
Как всегда, оперативно, правильно и как нужно! Спасибо тебе большое, именно то, что мне и нужно было.
-
<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>, чтобы расположить как хочу текста и картинку, так вообще ахинея какая-то вышла. Заранее спасибо за любую помощь.