Report

Здравствуйте ! 
Нужна ваша помощь . Не знаю как сделать такой стиль для меню ( отметила стрелочками на фотографии)
Нужен стиль элементов меню   , вертикальной линии с маркерами как на фото . Буду рада любой помощи.

Здравствуйте, не подскажите как с помощью флекс свойства css добиться следующего:
На первом изображение показано текущее расположение блоков, блоки не имеют фиксированного размера, а меняются динамически, в зависимости от заполненности контента.
Я хочу получить результат как на втором изображении чтобы первый блок растягивался вне зависимости от его заполненности. Я так понимаю нужно использовать для этого свойства flex но все мои попытки сделать так, тщетны.
Объясните, можно ли вообще так сделать? (спасибо!)
P.S. все изображения прикрепил.


P.P.S. это нужно для того чтобы не было такого не красивого выравнивания (position:absolute нельзя использовать, так как размеры могут быть разными)
 

Заметки должны находится на одном уровне 

Доброго времени суток!
Подскажите, как можно задать границы слайд шоу так, чтобы они не вылазили с блока боковой колонки?
Проблема в том что картинка(№1) вылазит за предел блока, а должна быть в рамке (№2) как показано на скрине ниже…
http://savepic.ru/13747125.jpg
Ссылка на страницу: http://www.2amovers.com/ru/krupnye-proekty/
Код страницы: 
<div class="block-3 no-mar sidebar"> <style> #IUAfinance32 {width: 97%; position: relative; margin: 6px; {1}} #IUAfinance32 * {margin: 0; padding: 0;} #IUAfinance32 a, #IUAfinance32 a:hover {border: none; text-decoration: underline; color: inherit;} #IUAfinance32 .IUAfinance_block {overflow: hidden; padding: 4px; font-family: Arial; font-size: 10px; background: #F6F6F6; border: 1px solid #00529c; color: #000000;} #IUAfinance32 .IUAfinance_title {overflow: hidden; margin-top: -4px; font-size: 12px; font-weight: bold; height: 20px; line-height: 20px; color: #00529C;} #IUAfinance32 .IUAfinance_title i {position: absolute; right: 4px; top: 2px; width: 36px; height: 14px; background: url(//i.i.ua/v2/logo/logo_small_14_black.png) no-repeat 0 0 transparent; opacity: .3;} #IUAfinance32 .IUAfinance_content, #IUAfinance32 .IUAfinance_content:hover {display: block; background: #FFFFFF; padding: 4px; margin-bottom: 4px; text-decoration: none; color: inherit;} #IUAfinance32 .IUAfinance_head_title {font-size: 12px; font-weight: bold;} #IUAfinance32 .IUAfinance_item, #IUAfinance32 .IUAfinance_head {padding: 4px 0;} #IUAfinance32 .IUAfinance_item:last-child {padding-bottom: 0;} #IUAfinance32 .IUAfinance_item {border-top: 1px dotted #DDD; font-size: 18px; font-family: Trebuchet MS;} #IUAfinance32 .IUAfinance_item_title, #IUAfinance32 .IUAfinance_item_data {display: inline-block; vertical-align: top; width: 42%; text-align: right;} #IUAfinance32 .IUAfinance_item_title:first-child, #IUAfinance32 .IUAfinance_item_data:first-child {width: 16%; text-align: left;} #IUAfinance32 .IUAfinance-increase:before {content: "\25B2"; color: #40983c; font-size: 11px;} #IUAfinance32 .IUAfinance-decrease:before {content: "\25BC"; color: #ed482e; font-size: 11px;} </style> <div id="IUAfinance32"> <div class="IUAfinance_block" id="IUAfinanceBlock"> <h1 class="IUAfinance_title" id="IUAfinanceTitle"></h1> <a href="//finance.i.ua/informers/" target="_blank" class="IUAfinance_content" id="IUAfinanceContent"></a> <a href="" id="IUAfinanceLink">Курсы доллара, евро и рубля по банкам</a> </div> </div> <script type="text/javascript"> var $container = document.getElementById("IUAfinance32"); $container.style.width = "240"; $container.querySelector(".IUAfinance_block").style.backgroundColor = "rgb(255,109,36)"; $container.querySelector(".IUAfinance_block").style.borderColor = "rgb(255, 255, 255)"; $container.querySelector(".IUAfinance_block").style.color = "rgb(255, 255, 255)"; $container.querySelector(".IUAfinance_content").style.backgroundColor = "rgb(204, 204, 204)"; $container.querySelector(".IUAfinance_title").style.color = "rgb(255, 255, 255)"; $container.querySelector("#IUAfinanceLink").style.color = "rgb(255, 255, 255)";</script> <script type="text/javascript"> if (typeof(iFinance) == "undefined") { if (typeof(iFinanceData) == "undefined") { document.write('<scr' + 'ipt src="//i.i.ua/js/i/finance_informer.js?1" type="text/javascript" charset = "windows-1251"></scr' + 'ipt>'); iFinanceData = []; } iFinanceData.push({b:15, c:[840,978,643], enc:2, lang:0, p:32, ver2: true}); } else { window['oiFinance32'] = new iFinance(2); window['oiFinance32'].gogo({b:15, c:[840,978,643], enc:2, lang:0, p:32}); } </script> <div> <style type="text/css"> {width: 97%; position: relative; margin: 6px; {1}} {margin: 0; padding: 0;} 1:hover {border: none; text-decoration: underline; color: inherit;} .1_block {overflow: hidden; padding: 4px; font-family: Arial; font-size: 10px; background: #F6F6F6; border: 1px solid #00529c; color: #000000;} .1_title {overflow: hidden; margin-top: -4px; font-size: 12px; font-weight: bold; height: 20px; line-height: 20px; color: #00529C;} </style> <div id="1"> <div class="1_block" id="1Block"> </div> </div> <script type="text/javascript"> var total_pics_num = 9; // колличество изображений var interval = 12000; // задержка между изображениями var time_out = 2; // задержка смены изображений var i = 0; var timeout; var opacity = 100; function fade_to_next() { opacity--; var k = i + 1; var image_now = 'image_' + i; if (i == total_pics_num) k = 1; var image_next = 'image_' + k; document.getElementById(image_now).style.opacity = opacity/100; document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')'; document.getElementById(image_next).style.opacity = (100-opacity)/100; document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')'; timeout = setTimeout("fade_to_next()",time_out); if (opacity==1) { opacity = 100; clearTimeout(timeout); } } setInterval ( function() { i++; if (i > total_pics_num) i=1; fade_to_next(); }, interval ); </script> <img src='http://2amovers.com/wp-content/gallery/officenew/1.jpg' id="image_1" style="position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" /> <img src='http://2amovers.com/wp-content/gallery/officenew/2.jpg' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" /> <img src='http://2amovers.com/wp-content/gallery/officenew/3.jpg' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" /> <img src='http://2amovers.com/wp-content/gallery/officenew/4.jpg' id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" /> <img src='http://2amovers.com/wp-content/gallery/officenew/5.jpg' id="image_5" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" /> <img src='http://2amovers.com/wp-content/gallery/officenew/6.jpg' id="image_6" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" /> <img src='http://2amovers.com/wp-content/gallery/officenew/7.jpg' id="image_7" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" /> <img src='http://2amovers.com/wp-content/gallery/officenew/8.jpg' id="image_8" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" /> <img src='http://2amovers.com/wp-content/gallery/officenew/9.jpg' id="image_9" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" width="98%" vspace="16" hspace="6" title="Все лучшее в мувинге для Вас, от нас. 2Amovers ©" /> <!--[if gte IE 5]><script type="text/javascript"> // запрет правой кнопки createPopup().show( 0, 0, 0, 0, 0 ); </script><![endif]--> <body oncontextmenu="return false;"> </div> </div> Заранее спасибо!

Доброго времени суток уважаемые форумчане!
 
У меня такая проблема. Хочу добиться эффекта вдавленного текста с помощью css3, принцип как это работает понимаю, но есть небольшое НО.
 
В моем случае имеется такой стиль:
.navbar { padding-right: 20px background-color: #2C2C2C; background-image: -moz-linear-gradient(center top , #333, #222); background-repeat: repeat-x; border-radius: 0px; box-shadow: 0px 5px 3px rgba(0, 0, 0, 0.25), 0px -1px 0px rgba(0, 0, 0, 0.1) inset; padding-left: 20px; background-attachment: scroll;}h1 { color: #151515; padding-top: 5px; font-weight: 900; font-size: 50px; font-family: Arial,​ Tahoma,​ Verdana,​ sans-serif; text-shadow: -2px -2px 1px rgba(70, 70, 70, 0.1), 2px 2px 1px rgba(70, 70, 70, 0.1);}вот так он выглядит в браузере, кидаю ссылку, потому что не получается прикрепить скрин:
 
http://joxi.ru/8AnBYLxFzPL4AO
 
Эффекта как видите нет, бэкграунд дива с градиентом, на тексте градиента нет конечно же, думаю в этом причина.
У кого какие мысли по этому поводу, есть ли решение данной проблемы?
 
ps: хочу использовать только css3, не хочу использовать просто картинку сделанную в фотошопе
 
Всем кто откликнулся на мою тему, заранее спасибо=)