- 0
-
Similar Content
-
By pryanya.darrrya
Здравствуйте !
Нужна ваша помощь . Не знаю как сделать такой стиль для меню ( отметила стрелочками на фотографии)
Нужен стиль элементов меню , вертикальной линии с маркерами как на фото . Буду рада любой помощи.
-
By diga
Здравствуйте, не подскажите как с помощью флекс свойства css добиться следующего:
На первом изображение показано текущее расположение блоков, блоки не имеют фиксированного размера, а меняются динамически, в зависимости от заполненности контента.
Я хочу получить результат как на втором изображении чтобы первый блок растягивался вне зависимости от его заполненности. Я так понимаю нужно использовать для этого свойства flex но все мои попытки сделать так, тщетны.
Объясните, можно ли вообще так сделать? (спасибо!)
P.S. все изображения прикрепил.
P.P.S. это нужно для того чтобы не было такого не красивого выравнивания (position:absolute нельзя использовать, так как размеры могут быть разными)
Заметки должны находится на одном уровне
-
By Endrew
Доброго времени суток!
Подскажите, как можно задать границы слайд шоу так, чтобы они не вылазили с блока боковой колонки?
Проблема в том что картинка(№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> Заранее спасибо!
-
By Stavanger
Доброго времени суток уважаемые форумчане!
У меня такая проблема. Хочу добиться эффекта вдавленного текста с помощью 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, не хочу использовать просто картинку сделанную в фотошопе
Всем кто откликнулся на мою тему, заранее спасибо=)
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-
Question
Kempanchik
Имея ссылку
не могу добавить фон-картинку#link{ display: inline-block; width: 9px; height: 9px; background-repeat: no-repeat!important; background-image:url('img/delete.png');}На счет пути я не могу ошибиться, скорее всего где-то в CSS у меня ошибка, которую не могу найтиLink to comment
Share on other sites
1 answer to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.