faynoit

В общем решилось все просто. Добавлением самого треугольника имаджем и позиционирование его в псевдоклассе. Спасибо

По ходу возник такой вопрос: <div class="breadcrumbs"> <ul id="breadcrumbs"> <li><a href="">Главная</a></li> <li><a href="">Дизайн</a></li> <li><a href="">Вдохновение</a></li> <li><a href="">Полиграфия</a></li> <li><a class="current" href="">Текущая вкладка</a></li> </ul></div>И КСС #breadcrumbs { list-style: none; display: inline;}#breadcrumbs li { display: inline-block; vertical-align: top; background: #f3f3f3; padding: 7px 14px; font-size: 12px; position: relative; border: 1px solid #e7e7e7; box-shadow: 54px 54px 9px -58px #e7e7e7 inset; z-index: 10; ;}#breadcrumbs li::before { background: url(../images/breadcrumbs-right.png) right top no-repeat; content: ''; width: 10px; height: 27px; position: absolute; bottom: 0; right: -10px; z-index: 100;}#breadcrumbs li a { color: #000;}#breadcrumbs li a:hover { text-decoration: none;}Не получается сделать так. чтоб треугольник в #breadcrumbs li::before был вверху #breadcrumbs li. Z-index как то не помогает

Первое что приходит на ум. НО. В данном случае есть бордер и тень инсет у этого треугольника

http://prntscr.com/2a2nnu Здравствуйте. Ума не приложу, как можно сверстать такие "хлебные крошки". Подскажите мануал или урок или любую инфу. буду благодарен. Спасибо

А в чем усложнение? Просто я немного не понимаю как подобное должно верстаться, до этого верстал только один столбец

не помагает

Сейчас главное, чтобы список второго столбца автоматически переходил вправо, если пункты не влазят в заданную высоту

http://jsbin.com/iJucaJa/1/

Делаю у ul foat:left; и задаю высоту 100px, например. и ничего не происходит

Здравствуйте. Есть такой пример http://prntscr.com/29by64 Пытаюсь его сверстать так: <section id="center-menu"> <div id="menu1"> <h2>Нестандартные изделия</h2> <ul> <li><a href="#">Кухни</a></li> <li><a href="#">Лестницы</a></li> <li><a href="#">Изделия из искусственного камня</a></li> <li><a href="#">Барные стойки и ресепшены</a></li> </ul> </div> <div id="menu2"> <h2>Офисная мебель</h2> <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> </ul> </div></section>#center-menu {width: 960px; background: url(../images/center-menu-bg.jpg); box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.25); border: 1px solid #e7e7e7;}#center-menu div {display: inline-block; vertical-align: top;}#center-menu h2 {font-size: 24px; color: #ff562f; margin-bottom: 20px;}#center-menu li a {color: #4b4b4b; font-size: 14px; line-height: 30px;}#center-menu #menu1 {margin: 70px 0 0 85px;}#center-menu #menu2 {margin: 70px 0 0 185px;} Получается так: http://prntscr.com/29bxzu 1. Можно ли решить этот вопрос с помощью просто css 2. Если нет, то слышал, есть какой то плагин джиквери, который как раз и задает эту высоту. Проблема в том, что пункты меню должны работать по приницпу, "что не влезло по высоте, то переходит направо"

Не понимаю как у вас так получилось http://clip2net.com/s/6jGNYH У меня все равно футер кверху прижимается

Комрады хелп. Есть вот такая картинка: http://clip2net.com/s/6jEyou Пытаюсь сделать так: <div class="page-not-found"> <div> <h2>Ошибка</h2> <p>Страница, которую вы ищете не существует, либо устарела.</p> <p>Вы можете перейти на <a href="/">главную.</a></p> </div> </div>.page-not-found h2 { font-family: 'Comfortaa', cursive; font-size: 18px;}.page-not-found { background: url(../images/page-not-found_bg.png) left 20px no-repeat; padding: 0 0 0 80px; display: table;}.page-not-found div { display: table-cell; vertical-align: top;}Однако не получается ничего. Когда пытаюс решить на позишн абсолют, все в порядке, однако футер прижимается к верху, а не к низу http://sv-igor.com/ru/html/77-vyrivnyuvannya-elementiv-po-vertikali-v-blochniy-versttsi.html Подскажите, пожалуйста, решение. Спасибо

Спасииибо огромное. Я правильно понял, что задали ширину высоту самому треугольнику и спозиционировали его не сверху, а снизу?

В общем не понимаю пока что http://jsfiddle.net/Mm9Df/ И положение треугольника внизу зависит от того есть текст или нет: http://prntscr.com/27fxab

Там у меня проблема с inside тенью. Она будет только у основного блока, у треугольника не получается ее добавить

Просто прошу ткнуть в урок или мануал. Спасибо http://prntscr.com/27feio Потом еще из этого слайдер сделать, но хотябы сам тултип или может как то по другомуназывается

Да как то не айс. Слишком сложно

Все. Извините за тупизм. Но я просто не знал про свойство background-size. Спасибо

Так если картинка, она тянуться не будет. И градиент как сделать картинкой?

Нашел такое решение: background: #999; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0d5cb2', endColorstr='#0371e9'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#0d5cb2), to(#0371e9)); /* for webkit browsers */ background: -moz-linear-gradient(top, #0d5cb2, #0371e9); /* for firefox 3.6+ */ width: 223px; Не работает в опере, а во всех остальных идеально. Может есть подобное решение для этого браузера? Нашел решение здесь: Великий Хабр Но не понимаю что такое: Рисуем маленький градиент в фотошопе, подключаем его через data:URI и масштабируем на размер блока!

Можно в личку я вам перешлю тогда?

Дело в том, что это и есть левый блок. Он в отдельном диве и в нем надо уже делать то, что указано на картинке

так в данном случаем у меня должно быть четыре картинки: 1. Картинка, где будет название (красное-синее) 2. Картинка с левым краем (где тень и закругление внизу) 3. Картинка с центром (синяя в 1пиксель) 4. Картинка с правым краем (где тень и закругление внизу) Тогда возникает вопрос, а как оно тогда будет тянуться вниз?

Спасибо. А можно подробнее про картинку. Или на урок какой нить перенаправить?

Вобщем есть такое чудо. И никак не приложу ума, как его лучше и правильнее сверстать. Спасибо за любую подсказку. Изображение