goodguy

покажи, какие игры написал, интересно Лично мои (все 3 писал полностью, и клиент и сервер) https://vk.com/beshenykon https://vk.com/steel_fighter http://vk.com/warfarex (отключил из-за нерентабильности, если будет время переделаю, но сейчас пока только скрины и видео можно глянуть) Есть еще несколько проектов на андроид и ios. Но тут договор о неразглашении, так что извиняйте

Видимо действительно надо это в сам слайдер прописать, пусть устанавливает ширину родительского контейнера равную суммарной ширине всех детей . Сейчас на али экспресс посмотрел как у них слайдер работает у них там вообще в CSS ширина контейнера указана 5000%, а на сколько прокручивать уже считает сам слайдер. Ну, раз уж крутые компании так делают, то и я мудрить не буду) Спасибо всем откликнувшимся за участие

Не, задать вручную ширину - это не решение. Мне нужно, чтобы она сама высчитывалась. Это конечно можно решить через JS, но кэп мне тут подсказывает, что можно обойтись голыми CSS Ну, не исключаю. Я не профессионал в верстке, поэтому и задал этот вопрос. А в чем, конкретно странность? Он там есть, просто я пока заменил на visible, чтобы видеть, где они физически располагаются Да. Слайдер писал сам, с ним проблем нет. Он отлично работает, если этому контейнеру задать ширину, например 2000px, то есть чтобы все элементы выстроились в ряд

Здравствуйте! Сразу скажу, что я программист, не верстальщик, и заниматься версткой мне приходится крайне редко, но если приходится, это почти всегда превращается в каторгу. Для меня написать бэкэнд сайта или игры гораздо проще, чем сверстать хотя бы не очень навороченную страницу. Вот сейчас делаю сайт интернет магазина под ключ, все шло как по маслу, но в одном месте наткнулся на проблему, в решении которой мне не помог даже гугл. Из-за чего она происходит мне понятно, но как это обрулить, ума не приложу. В общем, к делу. Мне нужно сделать ротатор в котором показываются похожие товары. Ну, это просто обычная "витрина" со стрелками по бокам, при нажатии на которые список товаром должен прокручиваться вправо и влево. Вот html код этого ротатора: <div id="similar_offers_rotator_id"> <div class="similar_offers_arrow" id="similar_offers_left_arrow_id"></div> <div class="similar_offers_arrow" id="similar_offers_right_arrow_id"></div> <div id="similar_offer_items_cont_mask_id"> <div id="similar_offer_items_cont_id"> <ul> <li> <div class="sim_offer_item"> <img src="img/simrotator/example.png"> <a href="javascript:">Какая-то детская обертяйка, я бы со..</a> <p class="sim_price_p">234р<span class="grey_text"> /шт.</span></p> <div class="rating_stars similar_items_rating_stars rating7"></div> </div> </li> <li> <div class="sim_offer_item"> <img src="img/simrotator/example.png"> <a href="javascript:">Какая-то детская обертяйка, я бы со..</a> <p class="sim_price_p">234р<span class="grey_text"> /шт.</span></p> <div class="rating_stars similar_items_rating_stars rating7"></div> </div> </li> <li> <div class="sim_offer_item"> <img src="img/simrotator/example.png"> <a href="javascript:">Какая-то детская обертяйка, я бы со..</a> <p class="sim_price_p">234р<span class="grey_text"> /шт.</span></p> <div class="rating_stars similar_items_rating_stars rating7"></div> </div> </li> <li> <div class="sim_offer_item"> <img src="img/simrotator/example.png"> <a href="javascript:">Какая-то детская обертяйка, я бы со..</a> <p class="sim_price_p">234р<span class="grey_text"> /шт.</span></p> <div class="rating_stars similar_items_rating_stars rating7"></div> </div> </li> <li> <div class="sim_offer_item"> <img src="img/simrotator/example.png"> <a href="javascript:">Какая-то детская обертяйка, я бы со..</a> <p class="sim_price_p">234р<span class="grey_text"> /шт.</span></p> <div class="rating_stars similar_items_rating_stars rating7"></div> </div> </li> </ul> </div> </div></div>Как вы видите, это unordered list в элементы которого добавлены дивы с содержимым. А вот css описание всего этого /* SIMILAR OFFERS ROTATOR */#similar_offers_rotator_id { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; width: 745px; height: 250px; bottom: 20px; left: 0; right: 0; margin: auto; padding-top: 70px; margin-top: 70px; overflow: visible; /*background-color: #929292;*/}.similar_offers_arrow { width: 13px; height: 22px; position: absolute; cursor: pointer; cursor: hand; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto;}.similar_offers_arrow:hover { background-position: -13px;}#similar_offers_left_arrow_id { left: 0; background-image: url("../img/simrotator/sim_cont_left_arrow.png"); background-repeat: no-repeat;}#similar_offers_right_arrow_id { right: 0; background-image: url("../img/simrotator/sim_cont_right_arrow.png"); background-repeat: no-repeat;}#similar_offer_items_cont_mask_id { position: absolute; left: 0; right: 0; top: 0; width: 700px; height: 250px; margin-right: auto; margin-left: auto; overflow: visible;}#similar_offer_items_cont_id { position: absolute;}#similar_offer_items_cont_id ul { display: inline-block; list-style: none; padding: 0; margin: 0; float: left;}#similar_offer_items_cont_id li { float: left; list-style: none; margin: 0px; padding: 0px; letter-spacing: 0; display: inline-block; width: auto; height: auto; top: 0px;}.sim_offer_item { position: relative; margin-right: 1px; overflow: hidden; padding: 0; width: 174px; height: 250px; clear: right; float: left; margin: 0; top: 0; border-right: 1px solid #d2d2d2; /*background-color: gray;*/ cursor: pointer; cursor: hand;}Вот так это выглядит А мне нужно, чтобы они все выстроились в один ряд

Не удивительно, с такими-то советами... Нет не проще. Мне нужны не уродливые кнопки одинакового размера с разной длиной надписей, а красивые с одинаковыми отступами по бокам от надписи. Но я уже нашел проблему. Она была в переопределении свойства span в другом css файле, убрал span оттуда и все вернулось на круги своя.

Всем привет, Возникла проблема, которую не могу решить уже несколько дней. Есть ссылки, к которым я хочу привинтить фон так, чтобы получилась кнопка. Вот так это выглядит сейчас: Вот сам файл из которого копируется фон: И вот CSS код, описывающий всю эту хрень. @CHARSET "UTF-8"; .pcb, .pcb span { background: url('../images/header/buttons/header-button.png') no-repeat; line-height: 29px; padding: 4px 5px 7px 5px; font-size: 14px; } .pcb, a.pcb:link, a.pcb:visited { color: #ffffff; font-size: 14px; padding-left: 14px; text-decoration: none !important; } * html div#frame .pcb { color: #333; padding-top: 0px; padding-bottom: 0px; text-decoration: none; } *:first-child+html .pcb { color: #ffffff; padding-top: 0px; padding-bottom: 0px; text-decoration: none; } .pcb span { background-position: right -29px; padding-right: 14px; } a.grey-button, a.grey-button:link, a.grey-button:visited { color: #797979 !important; } a.grey-button:hover { background-position: left -58px; } a.grey-button:hover span { background-position: right -87px; /* Right side of the button, moves bg vertically upside */ } a.grey-button:active { background-position: left -58px; } a.grey-button:active span { background-position: right -87px; } А вот так "кнопка" встраивается в HTML <table> <tr> <td> <div class='GreyButton' id='LoginButton'> <a href='javascript:document.login_form.submit();' class='grey-button pcb'> <span>$login</span> </a> </div> </td> </tr> </table> Что тут нужно поменять, чтобы кнопка выглядела нормально?

Во. С роду бы не догадался. То, что доктор прописал. Спасибо!

Всем привет, Уважаемые форумчане, прошу Вашей помощи в решении такого вопроса: Создал сайт на джумле, менюшки, ествественно, гененируются автоматически и на выходе получается вот такой код: <ul class="menu"> <li id="item-105"><a href="/index.php/kamaz" >камаз</a></li> <li id="item-106"><a href="/index.php/maz" >маз</a></li> <li id="item-107"><a href="/index.php/paz" >паз</a> <li id="item-109"><a href="/index.php/uaz" >уаз</a></li> <li id="item-110"><a href="/index.php/ural" >урал</a></li> <li id="item-111"><a href="/index.php/yazda" >язда</a></li> <li id="item-120"><a href="/index.php/zil" >зил</a></li></ul> Вот так я описал все это дело в css: #truckParts .sideMenu .moduletable ul { display: block; font-family: sans-serif; font-size: 1.1em; font-weight: normal; list-style: none; text-shadow: #FFF 1px 1px 1px; width: 220px; } #truckParts .sideMenu .moduletable ul li { padding-top: .4em; padding-bottom: .4em; border-bottom: 1px dotted #959595; cursor: pointer; } #truckParts .sideMenu .moduletable ul li:hover { background-color: #bdbdbd; } /* описание ссылок боковых меню */ #truckParts .sideMenu .moduletable ul a { color: #484848; text-decoration: none; } #truckParts .sideMenu .moduletable a:hover { color: #000; } Вся загвоздка в том, что перейти на какую-либо страницу, закрепленную за ссылкой можно только нажав непосредственно на саму ссылку. Хотя фон элемента списка подсвечивается при поднесении мыши в любую его точку. В чем проблема понятно, но как решить не знаю. И нагуглить не удалось. Вот что я имею в виду: А мне нужно сделать как вот здесь: http://atol.ru/products/ или здесь: http://www.css3.info/preview/background-origin-and-background-clip/ Просматривал стили элементов на этих сайтах, но так и не понял что именно нужно сделать. В чем же тут фишка?

Данную проблему решил введением таблицы внутрь этого блока. Но возникла другая проблемма. Допустим мне нужно вставить в таблицу картинку, и так как ширина ячейки 298 пикселов, требуется, чтобы картинка автоматически подгонялась под эту ширину. А этого не происходит, и не могу понять как этого добиться. Не смотря на то, что я задал длину строки таблицы и ширину ячейки, div#picarea /*контейнер содержащий таблицу, так как мне нужны несколько страниц одна под одной, с одинаковыми параметрами ширины и цвета*/ { position:relative; float:right; width:298px; } div#picarea > table { cellspacing:0px; background-color:#c2eac0; width:298px; float:right; padding:0px; text-align:justify; font-family:Verdana, Geneva, sans-serif; font-size:10px; } tr.p /*таблица для фотки*/ { width:278px; height:inherit; } td.pics { width:260px; height:100%; } картинка всё равно ее растягивает по ширине. Подскажите как этого избежать? Как я уже убедился, картинка-распорка здесь абсолютно бесполезна

Nekromancer, спасибо, но, к сожалению не работает . Это поле просто смещается немного вниз, пикселов на 100. Проверял в опере 9.64 и последней версии огнелиса.

Всем привет. В общем, вопрос такой, вот код страницы: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>trial</title> <link rel="stylesheet" type="text/css" href="trial.css"> </head> <body> <div id="top"></div> <div id="menubar"></div> <div id="navi_bar"><a href="#" class="friends">Friends</a><a href="#" class="wall">Wall</a><a href="#" class="bookmarks">Bookmarks</a><a href="#" class="settings">Settings</a></div> <div id="block"></div> </div> </body> </html> вот описание в css: @charset "utf-8"; /* CSS Document */ body { padding:0px; width:800px; margin:0; margin-left:auto; margin-right:auto; position:relative; background-color:#dbf1da } #block /*нужно настроить*/ { position:relative; background-color:#c2eac0; width:278px; float:right; margin-top:0px; margin-bottom:30px; height:100%; padding:10px; text-align:justify; font-family:Verdana, Geneva, sans-serif; font-size:10px; } #top { height:149px; width:800px; background-image:url(images/top.jpg) } #menubar { height:39px; width:800px; background-image:url(images/menu_bar.png) } #navi_bar { height:30px; width:800px; margin-top:0px; background-image:url(images/navi_bar.png) } div#navi_bar > a:link, a:visited { color:#FFF; text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-weight:bold; font-size:12px; } div#navi_bar > a:hover { color:#360; text-decoration:none; font-size:12px } .friends { margin-left:0px; position: relative; top: 6px; padding-left:40px; padding-right:33px; padding-bottom:10px; padding-top:6px; } .wall { margin-left:0px; position: relative; top: 6px; padding-left:48px; padding-right:48px; padding-bottom:10px; padding-top:6px; } .bookmarks { margin-left:0px; position: relative; top: 6px; padding-left:30px; padding-right:18px; padding-bottom:10px; padding-top:6px; } .settings { margin-left:0px; position: relative; top: 6px; padding-left:40px; padding-right:37px; padding-bottom:10px; padding-top:6px; } #footer { width:800px; height:30px; margin-left:auto; margin-right:auto; margin-bottom:1000px; background-color:#063; position:relative; top:0px; } вот так страница выглядит сейчас: Требуется следующее: тот прямоугольник, на котором стоит курсор должен растягиваться вниз почти на всю высоту экрана, при этом не доходя до низа на 30 пикселов. Главное, чтобы так было на экране с любым разрешением. И второе он должет продолжать растягиваться в высоту при добавлении в него элементов, ну, например, картинок или ссылок. Как это можно это реализовать только средствами css? З.Ы. То, что нужно настроить пометил комментарием в коде

Nekromancer, точно, спасибо Всё заработало, как я сам не додумался использовать такой подход. небольшой оффтоп, А где у вас ссылка на правила форума? Или их тут нет?

Всем доброго времени суток. Просьба сильно не пинать, если вопрос вам покажется глупым , я всего 3й день изучаю css и пока очень мало практики, сплошная теория. Парни, поясните, плз, как опустить ссылки пониже с помощью css. В общем вот код страницы: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>trial</title> <link rel="stylesheet" type="text/css" href="trial.css"> </head> <body> <div id="top"></div> <div id="menubar"></div> <div id="navi_bar"><a href="#" class="friends">Friends</a><a href="#" class="wall">Wall</a></div> <p class="shit"></p> </div> </body> </html> Вот так я ее описал в css: @charset "utf-8"; /* CSS Document */ body { padding:0px; width:800px; margin:0; margin-left:auto; margin-right:auto; position:relative; background-color:#dbf1da } .shit { position:relative; background-color:#c2eac0; width:278px; float:right; margin-top:0px; margin-bottom:30px; height:1000px; padding:10px; text-align:justify; font-family:Verdana, Geneva, sans-serif; font-size:10px; } #top { height:149px; width:800px; background-image:url(images/top.jpg) } #menubar { height:39px; width:800px; background-image:url(images/menu_bar.png) } #navi_bar { height:30px; width:800px; margin-top:0px; background-image:url(images/navi_bar.png) } div#navi_bar > a:link, a:visited { color:#FFF; text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-weight:bold; font-size:12px; } div#navi_bar > a:hover { color:#360; text-decoration:none; font-size:12px } .friends /*стиль ссылки на страницу друзей*/ { padding:30px; } .wall { padding:60px; margin-bottom:10px } а вот так она выглядит: Короче говоря требуется опустить ссылки Friends и Wall так, чтобы они располагались по центру кнопок. Как двигать в лево и в право я понял, но как сделать снизу и сверху равные отступы разобраться не могу где у меня в коде ошибка?