F_Z_14
-
Posts
6 -
Joined
-
Last visited
F_Z_14's Achievements
Explorer (1/14)
0
Reputation
-
Нет, это не помогает.
-
Корректно называть классы в своей верстке, что бы они не конфликтовали с классами бутстрапа. Ну и свои CSS подключать после бутстраповских, чтобы можно было при желании переопределить какое-то оформление. Twitter bootstrap - это не только набор классов. Там же еще практически для всех элементов стили устанавливаются. Поэтому даже если классы не конфликтуют, то будут конфликтовать стили элементов.
-
Подскажите, как можно встроить navbar-fixed-top панель на страницу так, чтобы стили twitter bootstrap не перебивали основные стили сайта и наоборот?
-
Подскажите, как можно встроить navbar-fixed-top панель на страницу так, чтобы стили twitter bootstrap не перебивали основные стили сайта и наоборот?
-
Спасибо, помогло
-
CSS: /* ——————————--Осноные_стили————————————*/ html, body { font: 14pt 'Open Sans'; margin: 0; padding: 0; background: #f1f1f1; } html { height: 100%; } #wrapper { min-width: 1000px; } #sb_right { float:right; width: 25%; background: #4a4a4a; color: #aaaaaa; } #sb_right a { color: #aaaaaa; } #sb_right a:hover { color: #fff; } .header { margin: 0; padding: 0; height: 80px; overflow: hidden; font: 24pt 'Open Sans'; } .header ul { list-style: none; margin: 10px 0 0 0; padding: 0; } .header ul li { display: inline-block; margin: 0 10px 0 0; } .header .separator { position: relative; top: -5px; color: #474747; } #right_header { text-align: center; margin: 0; padding: 10px 0 0 0; } #right_header a:first-child { margin: 10px 0 0 0; display: inline-block; } #left_header { padding: 10px 0px 0px 35px; /*background: #cbcbcb;*/ } #left_header a:hover { color: #aaaaaa; } #content { padding: 25px; color: #666666; margin: 10px 0 0 10px; text-align: justify; } #content p { text-indent: 25px; margin-right: 0; } #sb_right_content { padding: 25px 50px; height: 100%; text-align: center; } /* ——————————————————————--*/ Можете пример привести, где это реализовано? Сколько ни пробовал, ставил height: 100%, min-height: 100% и на блок и на body, html - не получается. С Height: 100% получалось только, чтобы правый сайдбар был растянут на высоту окна, но если левый блок left был заполнен content'ом, у которого высота больше чем у sb_right, то sb_right при прокрутке оставался того же размера. То есть на высоту клиентского окна браузера, что меньше высоты блока left.
-
Всем привет! Подскажите как можно прижать правую колонку к низу страницы, чтобы она была прижата при любом размере левого блока с контентом? HTML-структура такая: <body> <div id="wrapper"> <div id="container"> <div id="left"> <div id="left_header" class="header"> </div> <div id="content"> </div> <!--Сюда планируется добавить футер--> </div> <div id="sb_right"> <div id="right_header" class="header"></div> <div id="sb_right_content"> </div> </div> </div> </div> </body> Прижатый блок справа:
-
Всем Привет! На странице есть блок content, внутри которого должны распологаться блоки по горизонтали на всю ширину блока(если не влезают, то переходят на новую строку), которые представляют фотоальбом. Блоки .photo_container имеют position: relative, так как в них находятся блоки с position: absolute и с помощью top, left накладываются друг на друга. Пробовал обвернуть .photo_container в другой блок .photo_album с обычным позиционированием, но не помогает, блоки .photo_album находятся друг под другом. Подскажите, может как можно сделать? Желательно средствами css. HTML: <div id="content"> <div class="photo_container"> <div class="photo"><img src="pics/my_photo.jpg" alt="фотка моя"/></div> <div class="photo photo2"><img src="pics/my_photo.jpg" alt="фотка моя"/></div> <div class="photo photo3"><a href=""><img src="pics/my_photo.jpg" alt="фотка моя"/></a><div class="album_name"><a href="">Название альбома</a></div></div> </div> <div class="photo_container"> <div class="photo"><img src="pics/my_photo.jpg" alt="фотка моя"/></div> <div class="photo photo2"><img src="pics/my_photo.jpg" alt="фотка моя"/></div> <div class="photo photo3"><a href=""><img src="pics/my_photo.jpg" alt="фотка моя"/></a><div class="album_name"><a href="">Название альбома</a></div></div> </div> </div> CSS: .photo_container { position: relative; top: 30px; } .photo { position: absolute; width: 183px; height: 148px; background: url(pics/pframe.png); -webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21); -moz-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21); box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21); } .photo img { position: absolute; top: 11px; left: 12px; } .album_name { position:absolute; font: 10pt 'Open Sans'; color: #515151; top: 122px; padding: 0 30px; } .photo2 { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); /* для IE9 */ transform: rotate(-10deg); /* на будущее */ -webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21); -moz-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21); box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21); top: -20px; left: 10px; } .photo3 { -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg); /* для IE9 */ transform: rotate(5deg); /* на будущее */ -webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21); -moz-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21); box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21); top: -20px; left: 10px; } Пока вот так: Хотелось бы так: