![](https://htmlforum.dev/uploads/set_resources_18/84c1e40ea0e759e3f1505eb1788ddf3c_pattern.png)
F_Z_14
-
Posts
6 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by F_Z_14
-
-
Подскажите, как можно встроить navbar-fixed-top панель на страницу так, чтобы стили twitter bootstrap не перебивали основные стили сайта и наоборот?
Корректно называть классы в своей верстке, что бы они не конфликтовали с классами бутстрапа.
Ну и свои CSS подключать после бутстраповских, чтобы можно было при желании переопределить какое-то оформление.
Twitter bootstrap - это не только набор классов. Там же еще практически для всех элементов стили устанавливаются. Поэтому даже если классы не конфликтуют, то будут конфликтовать стили элементов.
-
Подскажите, как можно встроить navbar-fixed-top панель на страницу так, чтобы стили twitter bootstrap не перебивали основные стили сайта и наоборот?
-
Подскажите, как можно встроить navbar-fixed-top панель на страницу так, чтобы стили twitter bootstrap не перебивали основные стили сайта и наоборот?
-
могу предложить такое решение
<style>
*{margin:0px;padding:0px;}
html,body{height:100%;}
#body{
position:relative;
margin:0px auto;
width:1000px;
min-height:100%;}
#content{
margin-right:210px;
background:#ddd;}
#right{
position:absolute;
top:0px;
right:0px;
bottom:0px;
width:200px;
background:#999;}
#footer{
position:absolute;
left:0px;
right:0px;
bottom:0px;
margin-right:210px;
background:#bbb;}
</style>
<div id="body">
<div id="content">
content
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
content
</div>
<div id="right">
right
</div>
<div id="footer">
footer
</div>
</div>Спасибо, помогло
-
нет стилей, а вообще данное действо делается height:100%;
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;
}
Пока вот так:
Хотелось бы так:
Twitter Bootstrap
in HTML Coding
Posted
Нет, это не помогает.